.position-relative {
    position: relative;
}

.suggestions-container {
    position: absolute;
    top: 100%; /* Position it right below the input field */
    /*left: 0;*/
    background-color: #5c5c5c;
	color: #fff;
    border: 1px solid #ccc;
    z-index: 1000;
    max-height: 200px; /* Optional: limit the height of the suggestion box */
    overflow-y: auto; /* Optional: add scroll for overflow */
    display: none; /* Initially hide the container */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Optional: add a subtle shadow */
}

.suggestion-item {
    padding: .375rem .75rem; /* Apply the same padding as the input text */
    cursor: pointer;
}

.suggestion-item:hover {
    background-color: #262626;
}
.editable {
	padding: 5px;
}

.editable:hover {
	background-color: #f0f0f0;
	cursor: pointer;
	color: #000;
}

.editing {
	background-color: #fff;
	border: 1px solid #ccc;
	padding: 3px;
	color: #000;
}

.blink {
	animation: blink 0.2s steps(2, start) 2;
	-webkit-animation: blink 0.2s steps(2, start) 2;
}

@keyframes blink {
	50% {
		background-color: #c3e9b7;
	}
}

@-webkit-keyframes blink {
	50% {
		background-color: #c3e9b7;
	}
}

.tags-container {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #444;
    padding: 5px;
    background-color: #1c1b29; /* Background color for the container */
}

.tag {
	font-size: 14px;
    background: #00cfe8; /* Background color for the tag */
    border-radius: 20px; /* Rounded corners */
    padding: 2px 5px 2px 10px; /* Adjusted padding */
    margin: 2px;
    display: inline-flex; /* Use inline-flex for a more natural size */
    align-items: center; /* Center the text and button vertically */
    color: white; /* Text color */
    white-space: nowrap; /* Prevent line breaks */
    cursor: pointer; /* Change cursor to pointer on hover */
}

.tag .separator {
	font-size: 18px;
	font-weight: lighter;
    margin: 0 3px;
	color: #888787;
	/* Space between text and button */
}

.tag button {
    background: none;
    border: none;
    color: white; /* Button color */
    cursor: pointer; /* Change cursor to pointer on hover */
    font-size: 14px; /* Increase the size of the 'X' */
    line-height: 1; /* Ensure the button height matches the text */
}

.suggestions {
    /*border: 1px solid #444;*/
    border-top: none;
    max-height: 100px;
    overflow-y: auto;
    position: absolute;
    background: #1c1b29; /* Background color for suggestions */
    width: calc(100% - 32px);
    color: white; /* Text color for suggestions */
}

.suggestion {
    padding: 5px;
    cursor: pointer;
}

.suggestion:hover {
    background: #2c2b39; /* Hover background color for suggestions */
}

#tag-input {
    background-color: #1c1b29; /* Input background color */
    border: 1px solid #444; /* Input border color */
    color: white; /* Input text color */
    padding: 5px;
    flex: 1; /* Allow input to expand to fill available space */
    margin-top: 5px; /* Space above input */
    margin-left: 5px; /* Space between tags and input */
    max-width: calc(100% - 50px); /* Ensure input doesn't overflow container */
    box-sizing: border-box; /* Ensure padding is included in the element's total width and height */
}

.found-container {
    display: none; /* Hide by default */
    flex-wrap: wrap;
    padding: 5px;
    margin-top: 10px;
}

.team-suggestion, .league-suggestion {
    padding: 5px;
    cursor: pointer;
    border: 1px solid #ccc;
    margin: 2px;
}

.team-suggestion:hover, .league-suggestion:hover {
    background: #e2e2e2;
}

.team-league-tag {
    background: #00c4cc;
    border: 1px solid #ccc;
    border-radius: 50px;
    padding: 5px 10px;
    margin: 5px;
    display: flex;
    align-items: center;
}

.team-league-tag button {
    margin-left: 5px;
    background: none;
    border: none;
    cursor: pointer;
    color: white;
    font-weight: bold;
}

.found-container input {
    border: none;
    outline: none;
    margin: 5px;
}

.add-status-container {
    display: none; /* Hide by default */
    flex-wrap: wrap;
    padding: 5px;
    margin-top: 10px;
}

.channel-list {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.channel-item {
    cursor: move;
    transition: transform 0.1s;
}

.channel-item:hover {
    transform: scale(1.05);
}

.channel-item {
    position: relative;
    display: inline-block;
    margin: 5px;
}

.delete-channel-btn {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: red;
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.delete-channel-btn:hover {
    background-color: darkred;
}

.editable-area {
    min-height: 20px;
    cursor: text;
}
.channel-container {
    min-height: 20px;
}