body {
    margin: 0;
    font-family: Arial, sans-serif;
	
}

.dashboard {
    display: flex;
}

.sidebar {
    width: 250px;
    background-color: #f8f9fa;
    padding: 15px;
}

.logo img {
    width: 100%;
    margin-bottom: 20px;
}

.icons {
    width: 30px;
}

.men-icon {
    width: 20%;
}

.extern {
    width: 10px;
}

.menu {
    list-style: none;
    padding: 0;
}

.menu li {
    padding: 10px 0;
    font-size: 16px;
}

.content {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid #ddd;
    background-image: url('images/cover.png');
    background-position: center center;
    background-size: cover;
    color: white;
}

.jbpd:link {
    color: white;
}

.jbpd:visited {
    color: white;
}

.men_link:link {
    color: black;
    font-weight: bold;
}

.men_link:visited {
    color: black;
    font-weight: bold;
}

.feeds-section {
    margin-top: 20px;
}

.feed-wrapper {
    display: flex;
    gap: 20px; /* Adds space between the feed container and the full-size box */
}

/* Feed Container with the 6 small boxes */
.feed-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two columns for 6 small boxes */
    gap: 20px;
    flex: 2; /* Adjusts size relative to the full-size box */
}

.feed {
    background-color: #fff;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}

.feed h3, .feed h4 {
    font-size: 18px;
    margin-bottom: 10px;
}

/* Fullsize Box Styles */
.fullsize-box {
    background-color: #f1f1f1;
    padding: 20px;
    border-radius: 5px;
    flex: 1; /* Takes up remaining space next to the small boxes */
    width: 100%;
}


        /* Fremhævning af bestemte ord */
        .highlight {
            color: red;
            font-weight: bold;
        }
		.green-text {
            font-weight: bold;
            animation: blinkGreen 1s infinite;
        }
        .purple-text {
            color: purple;
			font-weight: bold;
        }
        .black-text {
            color: black;
			font-weight: bold;
        }
        .orange-blink {
            color: orange;
			font-weight: bold;
            animation: blinkOrange 1s infinite;
        }
        .bold-red-yellow-blink {
            font-weight: bold;
            animation: blinkRedYellow 1s infinite;
        }
        .bold-red-green-blink {
            font-weight: bold;
            animation: blinkRedGreen 1s infinite;
        }
        @keyframes blinkOrange {
            0% { color: orange; }
            50% { color: transparent; }
            100% { color: orange; }
        }
        @keyframes blinkRedYellow {
            0% { color: red; }
            50% { color: yellow; }
            100% { color: red; }
        }
        @keyframes blinkRedGreen {
            0% { color: orange; }
            50% { color: yellow; }
            100% { color: red; }
        }
        @keyframes blinkGreen {
            0% { color: green; }
            50% { color: transparent; }
            100% { color: green; }
        }
		
		.purple-alarm {
			background-color: green;
            animation: purpleAlarm 1s infinite;
        }		
		
        @keyframes purpleAlarm {
            0% { color: purple; }
            50% { color: transparent; }
            100% { color: purple; }
        }	

		.red-alarm {
            background-color: green;
            animation: redAlarm 1s infinite;
        }		
		
        @keyframes redAlarm {
            0% { color: red; }
            50% { color: transparent; }
            100% { color: red; }
        }		
		
		.yellow-alarm {
            color: green !important;
            animation: yellowAlarm 1s infinite;
        }		
		
        @keyframes yellowAlarm {
            0% { background-color: yellow; }
            50% { background-color: black; }
            100% { background-color: yellow; }
        }			
		
		.recent-event {
            border: 3px solid;
            border-radius: 5px;
            animation: blinkPurple 1s infinite;
        }
        @keyframes blinkPurple {
            0% { background-color: purple; }
            50% { background-color: transparent; }
            100% { background-color: purple; }
        }