body {
    font-size: 13px;
    min-width: 1430px;
}

/* Main Colors */

:root {
    --bs-link-color: #007db4;
    
    --bs-blue: #007db4;
    --bs-yellow: #ff9e19;
    --bs-dark-blue: #233746;
    --bs-dark-grey: #777777;

    --bs-primary: #007db4;
    --bs-primary-rgb: 0, 125, 180;
    --bs-primary-dark: #00638d;
    --bs-primary-dark-rgb: 0, 99, 141;

    --bs-info: #0dcaf0;
    --bs-info-rgb: 13, 202, 240;
    --bs-info-dark: #1cadca;
    --bs-info-dark-rgb: 28, 173, 202;

    --bs-warning: #ff9e19;
    --bs-warning-rgb: 255, 158, 25;
    --bs-warning-dark: #d08113;
    --bs-warning-dark-rgb: 208, 129, 19;

    --bs-success: #5cb85c;
    --bs-success-rgb: 92, 184, 92;
    --bs-success-dark: #4e9f4e;
    --bs-success-dark-rgb: 78, 159, 78;

    --bs-secondary-btn-top: #fff;
    --bs-secondary-btn-top-rgb: 170, 170, 170;
    --bs-secondary-btn-bottom: #e3e3e3;
    --bs-secondary-btn-bottom-rgb: 227, 227, 227;
}

/* Background Colors */
.bg-danger-subtle {
    background: var(--bs-danger-bg-subtle);
}

/* Loading Widget */
.widget-loading {
    color: #ccccccd7;
    text-align: center;
    padding: 20px;
    border-radius: 8px;
    background-color: #f1f1f1;
}

/* Buttons Styles */

.btn {
    font-size: 13px;
}

.btn-secondary.show {
    color: #333;
}

/* Secondary Button */

.btn-secondary {
    background-color: var(--bs-secondary-btn-top);
    border-color: var(--bs-secondary-btn-bottom);
    background-image: linear-gradient(to bottom, var(--bs-secondary-btn-top) 0, var(--bs-secondary-btn-bottom) 100%);
    color: #333;
}

.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary.active,
.btn-secondary:focus,
.btn-secondary.focus {
    background-color: var(--bs-secondary-btn-bottom);
    border-color: var(--bs-secondary-btn-bottom);
    background-image: none;
    color: #333;
}

.btn-secondary:disabled,
.btn-secondary.disabled {
    background-color: var(--bs-secondary-btn-bottom);
    border-color: var(--bs-secondary-btn-bottom);
    color: #333;
    opacity: 0.65;
    background-image: none;
}

.btn-check:checked+.btn {
    color: #fff;
    background-color: #233746;
    background-image: none !important; 
}

/* Primary Button */

.btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    background-image: linear-gradient(to bottom, var(--bs-primary) 0, var(--bs-primary-dark) 100%);
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-primary:focus,
.btn-primary.focus {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    background-image: none;
}

.btn-primary:disabled,
.btn-primary.disabled {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    opacity: 0.65;
    background-image: none;
}

/* Warning Button */

.btn-warning {
    background-color: var(--bs-warning);
    border-color: var(--bs-warning);
    background-image: linear-gradient(to bottom, var(--bs-warning) 0, var(--bs-warning-dark) 100%);
    color: #fff;
}

.btn-warning:hover,
.btn-warning:active,
.btn-warning.active,
.btn-warning:focus,
.btn-warning.focus {
    background-color: var(--bs-warning) !important;
    border-color: var(--bs-warning) !important;
    background-image: none;
    color: #fff !important;
}

.btn-warning:disabled,
.btn-warning.disabled {
    background-color: var(--bs-warning);
    border-color: var(--bs-warning);
    opacity: 0.65;
    background-image: none;
    color: #fff;
}

/* Danger Button */

.btn-danger {
    background-color: var(--bs-danger);
    border-color: var(--bs-danger);
    background-image: linear-gradient(to bottom, var(--bs-danger) 0, var(--bs-danger-dark) 100%);
    color: #fff;
}

.btn-danger:hover,
.btn-danger:active,
.btn-danger.active,
.btn-danger:focus,
.btn-danger.focus {
    background-color: var(--bs-danger) !important;
    border-color: var(--bs-danger) !important;
    background-image: none;
    color: #fff !important;
}

.btn-danger:disabled,
.btn-danger.disabled {
    background-color: var(--bs-danger);
    border-color: var(--bs-danger);
    opacity: 0.65;
    background-image: none;
    color: #fff;
}

/* Info Button */

.btn-info {
    background-color: var(--bs-info);
    border-color: var(--bs-info);
    background-image: linear-gradient(to bottom, var(--bs-info) 0, var(--bs-info-dark) 100%);
    color: #fff;
}

.btn-info:hover,
.btn-info:active,
.btn-info.active,
.btn-info:focus,
.btn-info.focus {
    background-color: var(--bs-info) !important;
    border-color: var(--bs-info) !important;
    background-image: none;
    color: #fff;
}

.btn-info:disabled,
.btn-info.disabled {
    background-color: var(--bs-info);
    border-color: var(--bs-info);
    opacity: 0.65;
    background-image: none;
    color: #fff;
}

/* Success Button */

.btn-success {
    background-color: var(--bs-success);
    border-color: var(--bs-success);
    background-image: linear-gradient(to bottom, var(--bs-success) 0, var(--bs-success-dark) 100%);
    color: #fff;
}

.btn-success:hover,
.btn-success:active,
.btn-success.active,
.btn-success:focus,
.btn-success.focus {
    background-color: var(--bs-success) !important;
    border-color: var(--bs-success) !important;
    background-image: none;
    color: #fff;
}

.btn-success:disabled,
.btn-success.disabled {
    background-color: var(--bs-success);
    border-color: var(--bs-success);
    opacity: 0.65;
    background-image: none;
    color: #fff;
}

/* Accordion Styles */
.accordion-button:not(.collapsed) {
    background-color: rgb(var(--bs-primary-rgb), 0.2);
}

/* Link Styles */

a {
    color: var(--bs-link-color);
    text-decoration: none;
}

/* Tooltip Styles */

.tooltip {
    --bs-tooltip-font-size: 11px;
}

/* Dropdown Styles */

.dropdown-item.active, .dropdown-item:active {
    background-color: var(--bs-primary);
    font-size: 13px;
}

.dropdown-item {
    font-size: 13px;
}

.scrollable-dropdown-menu {
    min-width: 220px; 
    overflow-y: scroll; 
    max-height: 300px;
    font-size: 12px;
}

/* Datepicker Styles */

.datepicker-cell.today:not(.selected) {
    background-color: var(--bs-secondary-dark) !important;
}
.datepicker-cell.today.focused:not(.selected) {
    background-color: var(--bs-primary) !important;
}
.datepicker-cell.selected, .datepicker-cell.selected:hover {
    background-color: var(--bs-primary) !important;
}

/* Text Styles */

.text-primary {
    color: var(--bs-primary) !important;
}

.text-warning {
    color: var(--bs-warning) !important;
}

/* Background Styles */
.bg-success {
    background-color: var(--bs-success) !important;
}

/* Card Styles */

.group-card {
    cursor: pointer;
}

.group-card {
    transition: border 0.2s ease;
}

.group-card.active {
    border: 2px solid var(--bs-primary); /* Bootstrap primary blue */
    outline: none; /* Remove default focus outline */
}

.group-card.active::after {
    content: '';
    position: absolute;
    bottom: -10px; /* Adjust to position triangle below the card */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid var(--bs-primary); /* Blue triangle pointing down */
}

/* Form Styles */

.form-control, .form-check, .form-select {
    font-size: 13px;
}

.form-check-input {
    width: 15px;
    height: 15px;
}

/* Custom checkbox styling */
.form-check-input:checked {
    background-color: var(--bs-primary); /* Custom checked color */
    border-color: var(--bs-secondary);
}

.form-check-input:focus {
    box-shadow: var(--bs-primary-dark); /* Custom focus ring */
}

/* Footer */
footer {
    border-top: 1px solid #d8d8d8;
    background-color: #fff;
    padding: 5px 10px;
    color: #d8d8d8;
    font-size: 11px;
    position: fixed;
    bottom: 0px;
    width: 100%;
    z-index: 999;
    line-height: 35px;
}