html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.btn-akvamarin {
    background-color: #4CAF50;
    border-color: #4CAF50;
    color: white;
}

.btn-akvamarin:hover {
    background-color: #388E3C; /* En lidt mørkere nuance ved hover */
    border-color: #388E3C;
    color: white;
}
.btn-outline-akvamarin {
    color: #4CAF50;
    border-color: #4CAF50;
    /* Ved hover skifter den til at have en solid baggrund */
}

.btn-outline-akvamarin:hover {
    background-color: #4CAF50;
    color: white; /* Hvid tekst ved hover */
    border-color: #4CAF50;
}

.dialog-card {
    /* Tilføjer en let skygge for at adskille kortene diskret (fokus på indholdet) */
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    transition: transform 0.2s;
}

.dialog-card:hover {
    /* Fremhæver kortet ved hover for at invitere til interaktion (dialog) */
    transform: translateY(-3px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.thread-label {
    /* Fremhæver trådnavnet */
    font-weight: bold;
    color: #007bff; /* Typisk Bootstrap farve, matcher "dialog" blå */
}

.action-icon {
    font-size: 2.5rem; /* Gør ikonerne store */
    color: #007bff; /* Fremhæver ikonerne med primærfarven */
    margin-bottom: 0.5rem;
}

.action-link-box {
    border: 1px solid #dee2e6;
    padding: 1.5rem;
    text-align: center;
    border-radius: 0.5rem;
    transition: background-color 0.3s, border-color 0.3s;
    background-color: #e8e9ea; /* Let baggrund ved hover */
    border-color: #0000ff; /* Blå kant ved hover for fokus */
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    transition: transform 0.2s;
}

.action-link-box:hover {
    background-color: #d8d9da; /* Let baggrund ved hover */
    border-color: #0000ff; /* Blå kant ved hover for fokus */
    border: 1px solid #0000ff;
    transform: translateY(-3px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.thread-label {
    font-weight: bold;
    color: #007bff; /* Primær blå farve fra forsiden */
}

.op-card {
    /* Fremhæv Original Post (OP) med en stærk baggrund eller kant */
    border-left: 5px solid #007bff; /* Blå kant for OP */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Let skygge */
}

.comment-container {
    /* Stil for de individuelle svar */
    border: 1px solid #e9ecef;
    border-radius: 0.25rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background-color: #f8f9fa; /* Let grå baggrund for svar */
}

.comment-header {
    font-size: 0.9rem;
    color: #6c757d;
    margin-bottom: 0.5rem;
}

.comment-user {
    font-weight: bold;
    color: #212529;
}