.container-connection-handlers {
	height: 35px;
	background-color: lightgray;

	border: 4px solid lightgray;
	border-top: 1px dotted gray;
	border-bottom-width: 0;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	position: relative;

	.connection-handlers {
		height: 100%;
		width: fit-content;

		display: flex;
		flex-direction: row;
		justify-content: left;

		.connection-container {
			flex-grow: 0;
			flex-shrink: 0;

			cursor: pointer;
			display: inline-flex;

			margin-top: 5px;

			padding-left: 5px;
			padding-right: 5px;

			border: 1px #2222223b solid;
			border-radius: 2px 2px 0 0;

			.server-icon {
				align-self: center;
				margin-right: 5px;
			}

			.server-name {
				align-self: center;
				margin-right: 5px;
			}

			.button-close {
				align-self: center;

				&:hover {
					background-color: #e7e7e7;
				}
			}

			&.active {
				background-color: #FFFFFF33;
			}
		}

		&::-webkit-scrollbar {
			display: none;
		}

		overflow-x: auto;
		overflow-y: visible;
	}

	.container-scroll {
		margin-top: 5px;
		position: absolute;

		top: 0;
		right: 0;
		bottom: 0;

		display: none;
		flex-direction: row;

		&.enabled {
			display: flex;
		}

		.button-scroll {
			cursor: pointer;

			display: flex;
			flex-direction: column;
			justify-content: center;


			border: 1px #2222223b solid;
			border-radius: 2px;
			background: #e7e7e7;
			padding-left: 2px;
			padding-right: 2px;

			&:hover {
				background: #eeeeee;
			}

			&.disabled {
				background: #9e9e9e;
				&:hover {
					background: #9e9e9e;
				}
			}
		}
	}

	&.scrollbar {
		.connection-handlers {
			width: calc(100% - 45px);
		}
	}

}