@import url('https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css');
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css");

body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f2f2f2;
}

.container {
    width: 80%;
    margin: 20px auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.login-container {
    margin-top: 100px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.error-container {
    background-color: #f8d7da; /* Red background color */
    color: #721c24; /* Dark text color */
    border-color: #f5c6cb; /* Red border color */
    padding: 10px; /* Padding around the error messages */
    margin-top: 10px; /* Margin to separate from other elements */
}

/* Custom CSS for login page */
.login-container {
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

/* card */
.card-header {
    background-color: #007bff;
    color: #000;
    font-size: 1.2rem;
    font-weight: bold;
}

.card-body {
    padding: 20px;
}

/* button */
.form-group {
    margin-bottom: 20px;
}

.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
}

.btn-primary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

.button-group {
    display: flex;
    gap: 10px;
}

.button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #007bff;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
}

/* alert */
.alert {
    margin-top: 20px;
}

.alert.error-container {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
    padding: 10px;
    border-radius: 5px;
}

.alert ul {
    margin-bottom: 0;
}

.alert ul li {
    list-style-type: none;
}

/* color */
.dim-color {
    color: #888; /* Adjust the color code to your preference */
}

.text-left {
    text-align: left !important; /* Use !important to override Bootstrap's text-center class */
}

/* table */
.table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.table-header div {
    text-align: center;
}

.table-header div.date {
    width: 20%;
}

.table-header div.description {
    width: 25%;
}

.table-header div.income {
    width: 15%;
}

.table-header div.expense {
    width: 15%;
}

.table-header div.balance {
    width: 15%;
}

.table-header div.action {
    width: 10%;
}

.table-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
}

.table-body div {
    text-align: center;
}

.table-body div.date {
    width: 20%;
}

.table-body div.description {
    width: 25%;
}

.table-body div.income {
    width: 15%;
    color: green;
}

.table-body div.expense {
    width: 15%;
    color: red;
}

.table-body div.balance {
    width: 15%;
}

.table-body div.action {
    width: 10%;
}

.empty {
    text-align: center;
    font-size: 20px;
    margin-top: 20px;
}

/* credit */
.credit-balance {
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.balance-header {
    text-align: center;
    margin-bottom: 10px;
}

.balance-amount {
    text-align: center;
    font-size: 28px;
    color: #007bff;
}

/* Custom form styling */
.form-section {
    margin-bottom: 20px;
}

.form-section label {
    margin-right: 10px;
    font-weight: bold;
}

.form-section .form-control {
    /* width: calc(100% - 150px); */
    display: inline-block;
}

.form-check-inline {
    margin-right: 20px;
}

.checkbox-section label {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
}

.checkbox-section .form-check {
    display: inline-block;
    margin-right: 15px;
    margin-bottom: 10px;
}

.form-footer {
    text-align: right;
}

/* tooltip */
.tooltip-icon {
    cursor: pointer; /* Change cursor to pointer on hover */
    margin-left: 5px; /* Adjust spacing between label text and icon */
}

.custom-tooltip .tooltip-inner {
    max-width: 1400px; /* Adjust the maximum width of the tooltip */
    padding: 15px; /* Add padding inside the tooltip */
    font-size: 14px; /* Adjust font size as needed */
    text-align: left; /* Ensure text alignment is left-aligned */
    white-space: normal; /* Allow text to wrap within the tooltip */
    background-color: #FFFFFF;
}

.tooltip-inner{
    width: 400px;
    background-color: #FFFFFF;
  }

/* language switcher */
.language-switcher p {
    font-weight: bold;
    margin-bottom: 10px;
}

.language-switcher a {
    margin: 0 10px;
    display: inline-block;
    transition: transform 0.3s;
}

.language-switcher a:hover {
    transform: scale(1.1);
}

.language-switcher img {
    border-radius: 50%;
    border: 2px solid #ddd;
    padding: 5px;
    transition: border-color 0.3s;
}

.language-switcher img:hover {
    border-color: #007bff;
}

/* voucher */
.voucher-container {
    display: flex;
    flex-wrap: wrap;
}

.v-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 15px;
}

.voucher-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Ensure items are spaced correctly */
    background-color: #ffecec;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px;
    margin: 10px;
    text-align: center;
    color: #333;
    flex: 1;
    min-height: 200px; /* Optional: Set a minimum height to ensure consistency */
}

.voucher-header {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 10px;
}

.voucher-details {
    font-size: 1em;
    margin-bottom: 12px;
    line-height: 1.5;
    text-align: left; /* Align text to the left */
}

.voucher-details p {
    margin: 5px 0;
}

.voucher-collect {
    background-color: #ff5f5f;
    border: none;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    align-self: center; /* Center button horizontally */
}

.voucher-collect:hover {
    background-color: #ff3333;
}

.claimed {
    background-color: #ccc;
    border: none;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    align-self: center; /* Center button horizontally */
}

.not-fulfilled {
    background-color: #ccc;
    border: none;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    align-self: center; /* Center button horizontally */
}

.voucher-expiration {
    margin-top: auto; /* Push the expiration date to the bottom */
    text-align: center;
}

.dot-text {
    text-align: left; /* Align text to the left */
}

.dot-text::before {
    content: "• "; /* This adds the dot before the text */
    color: black;  /* Change this to the desired color for the dot */
    font-size: 1em; /* Adjust the size as needed */
}


/* Table expand column */
.additional-details {
    display: none;
    background-color: #f4f4f4; /* Light grey background for contrast */
    border-radius: 5px; /* Rounded corners */
    padding: 15px; /* Space inside the cell */
    margin-top: 10px; /* Space above the row */
}

.additional-details.show {
    display: table-row;
}

.additional-details .detail-status {
    margin: 0; /* Remove default margin */
    padding: 10px 0; /* Add vertical padding */
    font-size: 14px; /* Set font size */
    line-height: 1.5; /* Line height for better readability */
    color: #333; /* Dark text color for readability */
}

.additional-details .detail-status:first-of-type {
    font-weight: bold; /* Bold font for the first line */
}


/* Modal */
.modal-content {
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.modal-header {
    background-color: #007bff;
    color: #fff;
    border-bottom: none;
}

.modal-footer {
    border-top: none;
    justify-content: space-between;
}

.modal-body {
    padding: 20px;
}

.modal-body table {
    margin-bottom: 20px;
}

.modal-body p {
    margin-bottom: 10px;
    font-size: 16px;
}

.modal-body .text-right {
    text-align: right;
}

.modal-footer button {
    margin-left: 10px;
}

.modal-footer .btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
}

.modal-footer .btn-primary {
    background-color: #007bff;
    border-color: #007bff;
}


/* Status bar */
  /* Container for the status tabs */
  .status-tabs-container {
    /* display: flex; */
    flex-wrap: wrap; /* Allow items to wrap to the next line */
    gap: 10px; /* Space between tabs */
    margin-bottom: 20px;
}

/* Flex properties for each tab */
.nav-tabs {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Styling for each tab */
.nav-tabs .nav-item {
    flex: 1 1 calc(25% - 10px) !important; /* Example of using !important */
    margin-bottom: 10px !important;
}

/* Styling for the tabs */


/* Active tab styling */
.nav-tabs .nav-link.active {
    color: #fff; /* White text for active tab */
    background-color: #007bff; /* Blue background for active tab */
    border: 2px solid #007bff; /* Blue border for active tab */
    font-weight: bold; /* Bold font for active tab */
}

/* Hover effect for tabs */
.nav-tabs .nav-link:hover {
    background-color: #e9ecef; /* Light grey background on hover */
    text-decoration: none; /* Remove underline on hover */
    color: #007bff; /* Keep the text color */
}

/* Icon styling */
.nav-tabs .nav-link i {
    font-size: 24px; /* Larger icon size */
    margin-bottom: 10px; /* Space between icon and text */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .nav-tabs .nav-item {
        flex: 1 1 50%; /* Two items per row on smaller screens */
        margin-bottom: 8px;
    }
}

@media (max-width: 576px) {
    .nav-tabs .nav-item {
        flex: 1 1 100%; /* One item per row on very small screens */
        margin-bottom: 6px;
    }
}

/* form */
.file-input {
    width: 100%; /* Full width */
    padding: 10px 20px; /* Padding for space inside */
    border: 2px solid #007bff; /* Blue border */
    border-radius: 5px; /* Rounded corners */
    background-color: #f8f9fa; /* Light background */
    color: #495057; /* Text color */
    font-size: 14px; /* Text size */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s, border-color 0.3s; /* Smooth transitions */
}

.file-input:hover {
    background-color: #e2e6ea; /* Slightly darker background on hover */
    border-color: #0056b3; /* Darker border on hover */
}

.file-input:focus {
    outline: none;
    border-color: #0056b3; /* Blue border on focus */
    box-shadow: 0 0 5px rgba(0, 91, 187, 0.5); /* Soft shadow on focus */
}

.file-input::file-selector-button {
    display: none; /* Hide the default file button */
}