636 lines
26 KiB
HTML
636 lines
26 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block title %}Drug Interaction Checker - Pharmacy Management{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="content">
|
|
<div class="container-fluid">
|
|
<!-- Page Header -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="page-header">
|
|
<div class="page-title">
|
|
<h4>Drug Interaction Checker</h4>
|
|
<h6>Check for potential drug interactions and clinical alerts</h6>
|
|
</div>
|
|
<div class="page-btn">
|
|
<a href="{% url 'pharmacy:drug_interaction_list' %}" class="btn btn-secondary">
|
|
<i class="fas fa-list me-1"></i>View All Interactions
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<!-- Drug Selection Panel -->
|
|
<div class="col-lg-8 col-md-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">
|
|
<i class="fas fa-pills me-2"></i>
|
|
Drug Selection
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<!-- Patient Selection -->
|
|
<div class="row mb-4">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="patientSelect" class="form-label">
|
|
Select Patient <span class="text-danger">*</span>
|
|
</label>
|
|
<select id="patientSelect" class="form-select">
|
|
<option value="">Choose a patient...</option>
|
|
<option value="1" data-mrn="123456" data-allergies="Penicillin, Sulfa">John Smith (MRN: 123456)</option>
|
|
<option value="2" data-mrn="789012" data-allergies="None">Sarah Johnson (MRN: 789012)</option>
|
|
<option value="3" data-mrn="345678" data-allergies="Aspirin">Michael Brown (MRN: 345678)</option>
|
|
<option value="4" data-mrn="901234" data-allergies="Latex, Iodine">Emily Davis (MRN: 901234)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label class="form-label">Patient Allergies</label>
|
|
<div id="patientAllergies" class="alert alert-info" style="display: none;">
|
|
<i class="fas fa-exclamation-triangle me-2"></i>
|
|
<span id="allergiesList">No allergies on file</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Drug Search and Selection -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<label class="form-label">Add Medications</label>
|
|
<div class="input-group">
|
|
<input type="text" id="drugSearch" class="form-control"
|
|
placeholder="Search for medications (generic or brand name)...">
|
|
<button class="btn btn-primary" type="button" onclick="searchDrugs()">
|
|
<i class="fas fa-search"></i>
|
|
</button>
|
|
</div>
|
|
<small class="form-text text-muted">
|
|
Type at least 3 characters to search for medications
|
|
</small>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Drug Search Results -->
|
|
<div id="drugSearchResults" class="mb-4" style="display: none;">
|
|
<h6>Search Results:</h6>
|
|
<div class="list-group" id="searchResultsList">
|
|
<!-- Search results will be populated here -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Selected Drugs -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<h6>Selected Medications:</h6>
|
|
<div id="selectedDrugs" class="selected-drugs-container">
|
|
<div class="alert alert-light text-center">
|
|
<i class="fas fa-pills fa-2x text-muted mb-2"></i>
|
|
<p class="mb-0">No medications selected yet</p>
|
|
<small class="text-muted">Search and add medications to check for interactions</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="row mt-4">
|
|
<div class="col-12 text-end">
|
|
<button type="button" class="btn btn-secondary me-2" onclick="clearAllDrugs()">
|
|
<i class="fas fa-trash me-1"></i>Clear All
|
|
</button>
|
|
<button type="button" class="btn btn-primary" onclick="checkInteractions()" disabled id="checkButton">
|
|
<i class="fas fa-search me-1"></i>Check Interactions
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Actions Panel -->
|
|
<div class="col-lg-4 col-md-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">
|
|
<i class="fas fa-bolt me-2"></i>
|
|
Quick Actions
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="d-grid gap-2">
|
|
<button type="button" class="btn btn-outline-primary" onclick="loadCommonCombinations()">
|
|
<i class="fas fa-star me-2"></i>Common Drug Combinations
|
|
</button>
|
|
<button type="button" class="btn btn-outline-warning" onclick="loadHighRiskDrugs()">
|
|
<i class="fas fa-exclamation-triangle me-2"></i>High-Risk Medications
|
|
</button>
|
|
<button type="button" class="btn btn-outline-info" onclick="loadRecentChecks()">
|
|
<i class="fas fa-history me-2"></i>Recent Checks
|
|
</button>
|
|
<button type="button" class="btn btn-outline-success" onclick="loadPatientMedications()">
|
|
<i class="fas fa-user-md me-2"></i>Patient's Current Meds
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Statistics Card -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">
|
|
<i class="fas fa-chart-bar me-2"></i>
|
|
Today's Statistics
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="stat-item mb-3">
|
|
<div class="d-flex justify-content-between">
|
|
<span>Checks Performed</span>
|
|
<strong class="text-primary">247</strong>
|
|
</div>
|
|
</div>
|
|
<div class="stat-item mb-3">
|
|
<div class="d-flex justify-content-between">
|
|
<span>Critical Alerts</span>
|
|
<strong class="text-danger">8</strong>
|
|
</div>
|
|
</div>
|
|
<div class="stat-item mb-3">
|
|
<div class="d-flex justify-content-between">
|
|
<span>Major Interactions</span>
|
|
<strong class="text-warning">24</strong>
|
|
</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="d-flex justify-content-between">
|
|
<span>Alerts Resolved</span>
|
|
<strong class="text-success">89</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Interaction Results -->
|
|
<div class="row" id="interactionResults" style="display: none;">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">
|
|
<i class="fas fa-exclamation-triangle me-2"></i>
|
|
Interaction Analysis Results
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="interactionContent">
|
|
<!-- Results will be populated here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Common Drug Combinations Modal -->
|
|
<div class="modal fade" id="commonCombinationsModal" tabindex="-1">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">
|
|
<i class="fas fa-star me-2"></i>Common Drug Combinations
|
|
</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h6>Cardiovascular</h6>
|
|
<div class="list-group mb-3">
|
|
<a href="#" class="list-group-item list-group-item-action" onclick="addDrugCombination(['Lisinopril', 'Hydrochlorothiazide'])">
|
|
<strong>ACE Inhibitor + Diuretic</strong>
|
|
<small class="d-block text-muted">Lisinopril + HCTZ</small>
|
|
</a>
|
|
<a href="#" class="list-group-item list-group-item-action" onclick="addDrugCombination(['Metoprolol', 'Amlodipine'])">
|
|
<strong>Beta Blocker + CCB</strong>
|
|
<small class="d-block text-muted">Metoprolol + Amlodipine</small>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6>Diabetes</h6>
|
|
<div class="list-group mb-3">
|
|
<a href="#" class="list-group-item list-group-item-action" onclick="addDrugCombination(['Metformin', 'Glipizide'])">
|
|
<strong>Metformin + Sulfonylurea</strong>
|
|
<small class="d-block text-muted">Metformin + Glipizide</small>
|
|
</a>
|
|
<a href="#" class="list-group-item list-group-item-action" onclick="addDrugCombination(['Insulin', 'Metformin'])">
|
|
<strong>Insulin + Metformin</strong>
|
|
<small class="d-block text-muted">Long-acting insulin + Metformin</small>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let selectedDrugs = [];
|
|
let drugDatabase = [
|
|
{ id: 1, name: 'Lisinopril', generic: 'Lisinopril', brand: 'Prinivil, Zestril', class: 'ACE Inhibitor' },
|
|
{ id: 2, name: 'Metformin', generic: 'Metformin', brand: 'Glucophage', class: 'Biguanide' },
|
|
{ id: 3, name: 'Atorvastatin', generic: 'Atorvastatin', brand: 'Lipitor', class: 'Statin' },
|
|
{ id: 4, name: 'Amlodipine', generic: 'Amlodipine', brand: 'Norvasc', class: 'Calcium Channel Blocker' },
|
|
{ id: 5, name: 'Warfarin', generic: 'Warfarin', brand: 'Coumadin', class: 'Anticoagulant' },
|
|
{ id: 6, name: 'Aspirin', generic: 'Aspirin', brand: 'Bayer', class: 'NSAID' },
|
|
{ id: 7, name: 'Simvastatin', generic: 'Simvastatin', brand: 'Zocor', class: 'Statin' },
|
|
{ id: 8, name: 'Metoprolol', generic: 'Metoprolol', brand: 'Lopressor', class: 'Beta Blocker' },
|
|
{ id: 9, name: 'Hydrochlorothiazide', generic: 'Hydrochlorothiazide', brand: 'Microzide', class: 'Diuretic' },
|
|
{ id: 10, name: 'Amoxicillin', generic: 'Amoxicillin', brand: 'Amoxil', class: 'Antibiotic' }
|
|
];
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Initialize patient selection
|
|
const patientSelect = document.getElementById('patientSelect');
|
|
patientSelect.addEventListener('change', function() {
|
|
updatePatientAllergies();
|
|
});
|
|
|
|
// Initialize drug search
|
|
const drugSearch = document.getElementById('drugSearch');
|
|
drugSearch.addEventListener('input', function() {
|
|
if (this.value.length >= 3) {
|
|
searchDrugs();
|
|
} else {
|
|
document.getElementById('drugSearchResults').style.display = 'none';
|
|
}
|
|
});
|
|
|
|
drugSearch.addEventListener('keypress', function(e) {
|
|
if (e.key === 'Enter') {
|
|
e.preventDefault();
|
|
searchDrugs();
|
|
}
|
|
});
|
|
});
|
|
|
|
function updatePatientAllergies() {
|
|
const patientSelect = document.getElementById('patientSelect');
|
|
const allergiesDiv = document.getElementById('patientAllergies');
|
|
const allergiesList = document.getElementById('allergiesList');
|
|
|
|
if (patientSelect.value) {
|
|
const selectedOption = patientSelect.options[patientSelect.selectedIndex];
|
|
const allergies = selectedOption.dataset.allergies;
|
|
|
|
allergiesList.textContent = allergies || 'No allergies on file';
|
|
allergiesDiv.style.display = 'block';
|
|
|
|
if (allergies && allergies !== 'None') {
|
|
allergiesDiv.className = 'alert alert-warning';
|
|
} else {
|
|
allergiesDiv.className = 'alert alert-info';
|
|
}
|
|
} else {
|
|
allergiesDiv.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
function searchDrugs() {
|
|
const searchTerm = document.getElementById('drugSearch').value.toLowerCase();
|
|
const resultsDiv = document.getElementById('drugSearchResults');
|
|
const resultsList = document.getElementById('searchResultsList');
|
|
|
|
if (searchTerm.length < 3) {
|
|
resultsDiv.style.display = 'none';
|
|
return;
|
|
}
|
|
|
|
const results = drugDatabase.filter(drug =>
|
|
drug.name.toLowerCase().includes(searchTerm) ||
|
|
drug.generic.toLowerCase().includes(searchTerm) ||
|
|
drug.brand.toLowerCase().includes(searchTerm)
|
|
);
|
|
|
|
resultsList.innerHTML = '';
|
|
|
|
if (results.length > 0) {
|
|
results.forEach(drug => {
|
|
const item = document.createElement('a');
|
|
item.className = 'list-group-item list-group-item-action';
|
|
item.href = '#';
|
|
item.onclick = () => addDrug(drug);
|
|
item.innerHTML = `
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<strong>${drug.name}</strong>
|
|
<small class="d-block text-muted">${drug.brand} - ${drug.class}</small>
|
|
</div>
|
|
<i class="fas fa-plus text-primary"></i>
|
|
</div>
|
|
`;
|
|
resultsList.appendChild(item);
|
|
});
|
|
resultsDiv.style.display = 'block';
|
|
} else {
|
|
resultsList.innerHTML = '<div class="list-group-item">No medications found</div>';
|
|
resultsDiv.style.display = 'block';
|
|
}
|
|
}
|
|
|
|
function addDrug(drug) {
|
|
// Check if drug is already selected
|
|
if (selectedDrugs.find(d => d.id === drug.id)) {
|
|
alert('This medication is already selected.');
|
|
return;
|
|
}
|
|
|
|
selectedDrugs.push(drug);
|
|
updateSelectedDrugsDisplay();
|
|
updateCheckButton();
|
|
|
|
// Clear search
|
|
document.getElementById('drugSearch').value = '';
|
|
document.getElementById('drugSearchResults').style.display = 'none';
|
|
}
|
|
|
|
function addDrugCombination(drugNames) {
|
|
drugNames.forEach(drugName => {
|
|
const drug = drugDatabase.find(d => d.name === drugName);
|
|
if (drug && !selectedDrugs.find(d => d.id === drug.id)) {
|
|
selectedDrugs.push(drug);
|
|
}
|
|
});
|
|
|
|
updateSelectedDrugsDisplay();
|
|
updateCheckButton();
|
|
|
|
// Close modal
|
|
const modal = bootstrap.Modal.getInstance(document.getElementById('commonCombinationsModal'));
|
|
if (modal) modal.hide();
|
|
}
|
|
|
|
function removeDrug(drugId) {
|
|
selectedDrugs = selectedDrugs.filter(drug => drug.id !== drugId);
|
|
updateSelectedDrugsDisplay();
|
|
updateCheckButton();
|
|
}
|
|
|
|
function updateSelectedDrugsDisplay() {
|
|
const container = document.getElementById('selectedDrugs');
|
|
|
|
if (selectedDrugs.length === 0) {
|
|
container.innerHTML = `
|
|
<div class="alert alert-light text-center">
|
|
<i class="fas fa-pills fa-2x text-muted mb-2"></i>
|
|
<p class="mb-0">No medications selected yet</p>
|
|
<small class="text-muted">Search and add medications to check for interactions</small>
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
container.innerHTML = selectedDrugs.map(drug => `
|
|
<div class="selected-drug-item mb-2">
|
|
<div class="d-flex justify-content-between align-items-center p-3 border rounded">
|
|
<div>
|
|
<strong>${drug.name}</strong>
|
|
<small class="d-block text-muted">${drug.brand} - ${drug.class}</small>
|
|
</div>
|
|
<button type="button" class="btn btn-sm btn-outline-danger" onclick="removeDrug(${drug.id})">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
function updateCheckButton() {
|
|
const checkButton = document.getElementById('checkButton');
|
|
checkButton.disabled = selectedDrugs.length < 2;
|
|
}
|
|
|
|
function clearAllDrugs() {
|
|
if (selectedDrugs.length > 0 && confirm('Are you sure you want to clear all selected medications?')) {
|
|
selectedDrugs = [];
|
|
updateSelectedDrugsDisplay();
|
|
updateCheckButton();
|
|
document.getElementById('interactionResults').style.display = 'none';
|
|
}
|
|
}
|
|
|
|
function checkInteractions() {
|
|
if (selectedDrugs.length < 2) {
|
|
alert('Please select at least 2 medications to check for interactions.');
|
|
return;
|
|
}
|
|
|
|
const patientSelect = document.getElementById('patientSelect');
|
|
if (!patientSelect.value) {
|
|
alert('Please select a patient first.');
|
|
return;
|
|
}
|
|
|
|
// Show loading state
|
|
const checkButton = document.getElementById('checkButton');
|
|
const originalText = checkButton.innerHTML;
|
|
checkButton.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Checking...';
|
|
checkButton.disabled = true;
|
|
|
|
// Simulate API call
|
|
setTimeout(() => {
|
|
displayInteractionResults();
|
|
checkButton.innerHTML = originalText;
|
|
checkButton.disabled = false;
|
|
}, 2000);
|
|
}
|
|
|
|
function displayInteractionResults() {
|
|
const resultsDiv = document.getElementById('interactionResults');
|
|
const contentDiv = document.getElementById('interactionContent');
|
|
|
|
// Sample interaction results
|
|
const interactions = [
|
|
{
|
|
severity: 'critical',
|
|
drugs: ['Warfarin', 'Aspirin'],
|
|
effect: 'Increased bleeding risk',
|
|
recommendation: 'Monitor INR closely. Consider alternative antiplatelet therapy.',
|
|
mechanism: 'Additive anticoagulant effects'
|
|
},
|
|
{
|
|
severity: 'major',
|
|
drugs: ['Simvastatin', 'Amlodipine'],
|
|
effect: 'Increased myopathy risk',
|
|
recommendation: 'Monitor CK levels. Consider dose reduction of simvastatin.',
|
|
mechanism: 'CYP3A4 inhibition increases simvastatin levels'
|
|
}
|
|
];
|
|
|
|
let html = '';
|
|
|
|
if (interactions.length === 0) {
|
|
html = `
|
|
<div class="alert alert-success">
|
|
<i class="fas fa-check-circle me-2"></i>
|
|
<strong>No significant interactions found</strong>
|
|
<p class="mb-0 mt-2">The selected medications appear to be safe to use together based on current clinical data.</p>
|
|
</div>
|
|
`;
|
|
} else {
|
|
html = `
|
|
<div class="alert alert-warning mb-4">
|
|
<i class="fas fa-exclamation-triangle me-2"></i>
|
|
<strong>${interactions.length} potential interaction(s) found</strong>
|
|
<p class="mb-0 mt-2">Please review the interactions below and take appropriate clinical action.</p>
|
|
</div>
|
|
`;
|
|
|
|
interactions.forEach((interaction, index) => {
|
|
const severityClass = {
|
|
'critical': 'danger',
|
|
'major': 'warning',
|
|
'moderate': 'info',
|
|
'minor': 'secondary'
|
|
}[interaction.severity];
|
|
|
|
html += `
|
|
<div class="card mb-3">
|
|
<div class="card-header bg-${severityClass} bg-opacity-25">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<h6 class="mb-0">
|
|
<span class="badge bg-${severityClass} me-2">${interaction.severity.toUpperCase()}</span>
|
|
${interaction.drugs.join(' + ')}
|
|
</h6>
|
|
<i class="fas fa-exclamation-triangle text-${severityClass}"></i>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h6>Clinical Effect</h6>
|
|
<p class="text-${severityClass}"><strong>${interaction.effect}</strong></p>
|
|
|
|
<h6>Mechanism</h6>
|
|
<p class="text-muted">${interaction.mechanism}</p>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6>Recommendation</h6>
|
|
<p>${interaction.recommendation}</p>
|
|
|
|
<div class="mt-3">
|
|
<button type="button" class="btn btn-sm btn-outline-primary me-2">
|
|
<i class="fas fa-bookmark me-1"></i>Save Alert
|
|
</button>
|
|
<button type="button" class="btn btn-sm btn-outline-secondary me-2">
|
|
<i class="fas fa-print me-1"></i>Print
|
|
</button>
|
|
<button type="button" class="btn btn-sm btn-outline-info">
|
|
<i class="fas fa-info-circle me-1"></i>More Info
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
});
|
|
}
|
|
|
|
contentDiv.innerHTML = html;
|
|
resultsDiv.style.display = 'block';
|
|
|
|
// Scroll to results
|
|
resultsDiv.scrollIntoView({ behavior: 'smooth' });
|
|
}
|
|
|
|
function loadCommonCombinations() {
|
|
const modal = new bootstrap.Modal(document.getElementById('commonCombinationsModal'));
|
|
modal.show();
|
|
}
|
|
|
|
function loadHighRiskDrugs() {
|
|
alert('High-risk medications feature would be implemented here.');
|
|
}
|
|
|
|
function loadRecentChecks() {
|
|
alert('Recent checks feature would be implemented here.');
|
|
}
|
|
|
|
function loadPatientMedications() {
|
|
const patientSelect = document.getElementById('patientSelect');
|
|
if (!patientSelect.value) {
|
|
alert('Please select a patient first.');
|
|
return;
|
|
}
|
|
|
|
// Sample patient medications
|
|
const patientMeds = ['Lisinopril', 'Metformin', 'Atorvastatin'];
|
|
|
|
patientMeds.forEach(medName => {
|
|
const drug = drugDatabase.find(d => d.name === medName);
|
|
if (drug && !selectedDrugs.find(d => d.id === drug.id)) {
|
|
selectedDrugs.push(drug);
|
|
}
|
|
});
|
|
|
|
updateSelectedDrugsDisplay();
|
|
updateCheckButton();
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.selected-drug-item {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.selected-drug-item:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.stat-item {
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.stat-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.list-group-item:hover {
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
.card {
|
|
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
|
border: 1px solid rgba(0, 0, 0, 0.125);
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.card-header {
|
|
background-color: rgba(0, 123, 255, 0.1);
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.selected-drugs-container {
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
}
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|