@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
body {
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
}

h5 {
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
}

.bon8-checking-container {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 5px;
}

.bon8-mode-button.active {
    background-color: #0056b3 !important;
    border-color: #0056b3 !important;
}

.card-title {
    background-color: #1D7AFC;
    color: white;
    margin-bottom: 0rem;
}

.card-body {
    padding-right: 1rem;
    padding-left: 1rem;
    padding-top: 0rem;
}

.scrollable-container {
    max-height: 460px; /* Set a fixed height for the scrollable area */
    overflow-y: auto; /* Enable vertical scrolling */
    padding: 0px; /* Optional padding for better spacing */
    border: none !important; /* Remove the border */
    outline: none; /* Prevent any focus outline */
    background-color: #f9f9f9; /* Optional background color */
}

.suggestion-list-item {
    margin-left: 20px; /* Move the list to the right */
    font-size: 14px; /* Smaller font size */
    font-weight: 300; /* Thinner font weight */
}

.rollback-hover {
    color: gray;
    cursor: pointer;
}

.rollback-hover:hover {
    color: darkblue; /* Changes to darker blue when hovered */
}

/* Initially hide the Replace button and Rollback icon */
.suggestion-list-item .replace-btn,
.suggestion-list-item .rollback-btn {
    visibility: hidden;
}

/* Show Replace button and Rollback icon only when hovering over the suggestion row */
.suggestion-list-item:hover .replace-btn,
.suggestion-list-item:hover .rollback-btn {
    visibility: visible;
}

/* Light green background when hovering over the suggestion word row */
.suggestion-list-item:hover {
    background-color: #e0ffe0; /* Light green background */
    cursor: pointer;
}
/* Add this CSS to your existing styles */
.thinner-textarea {
    font-weight: 300; /* Thinner font weight */
    padding: 5px; /* Smaller padding to reduce thickness */
    border-width: 1px; /* Make the border thinner */
    font-size: 14px; /* Adjust font size if necessary */
}


.law-badge {
    font-weight: 300; /* Makes the font weight thin */
}

.fixed-height-card {
    height: 600px;
}

/* Force height to 500px for the textarea */
.fixed-height-textarea {
    height: 425px !important;
    border: none !important; /* Remove the border */
    outline: none; /* Prevent any focus outline */
}

.super-small-btn {
    font-size: 10px; /* Smaller font size */
    padding: 3px 10px; /* Reduce padding to make the button compact */
}

.input-bg {
    /* background-color: #F6F6F6; */
    padding-top: 15px;
}

.result-bg {
    background-color: #F6F6F6;
    padding-top: 10px;
}

.result-button {
    margin: 5px;
    cursor: default;
}
.law-box {
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-right: 5px;
    border-radius: 3px;
}
.bg-danger {
    background-color: #dc3545;
}
.bg-warning {
    background-color: #ffc107;
}
.bg-info {
    background-color: #17a2b8;
}
.bg-secondary {
    background-color: #6c757d;
}
.spinner-border {
    width: 3rem;
    height: 3rem;
    border-width: 0.3rem;
}
.option-danger {
    background-color: #dc3545 !important;
    color: #fff !important;
}

.option-warning {
    background-color: #ffc107 !important;
    color: #000 !important;
}

.option-info {
    background-color: #17a2b8 !important;
    color: #fff !important;
}

.option-secondary {
    background-color: #6c757d !important;
    color: #fff !important;
}