TeaWeb/shared/css/static/frame/SelectInfo.scss

.select_info_table {
	tr {
		td {
			&:nth-child(1) {
				font-weight: bold;
				padding-right: 5px;
				//min-width: max(35%, 20px);
			}

			&:nth-child(2) {
				//min-width: max(75%, 40px);
				word-break: break-word;
			}
		}
	}
}

.select_server {
	height: 100%;
	display: inline-flex;
	flex-direction: column;
	justify-content: space-between;
	flex-grow: 1;

	.button-update {
		width: 100%;

		&:disabled {
			pointer-events: none;
		}
	}

	.container {
		max-height: 100%;
		display: flex;
		flex-direction: column;
		padding-right: 0;
		padding-left: 0;

		.hostbanner {
			overflow: hidden;
		}
	}
}

.select_info {
	display: flex;
	flex-direction: column;
	justify-content: stretch;
	width: 100%;

	> .close {
        z-index: 500;
		display: none;
		position: absolute;
		right: 5px;
		top: 5px;
	}

	> div {
		width: 100%;
	}

	.container-banner {
        position: relative;

		flex-grow: 1;
		flex-shrink: 2;
		max-height: 25%;
		display: flex;
		justify-content: stretch;

		overflow: hidden;


		&.disabled {
			display: none;
			margin-bottom: 5px;
		}

		.hostbanner {
			position: relative;
			flex-grow: 1;

            .image-container {
                display: flex;
                flex-direction: row;
                justify-content: center;
                height: 100%;

                div {
                    background-position: center;

                    &.hostbanner-mode-0 { }

                    &.hostbanner-mode-1 {
                        width: 100%;
                        height: auto;
                    }

                    &.hostbanner-mode-2 {
                        background-size: contain!important;
                        width:100%;
                        height:100%
                    }
                }
            }
		}
	}

	.container-select-info {
		padding: 2px;
		flex-grow: 1;
		flex-shrink: 1;
		display: flex;
		flex-direction: column;
		justify-content: stretch;

		.select_server {
			> div {
				flex-grow: 1;
			}
		}
	}

	.client-avatar {
		> div {
			flex-grow: 1;
			flex-shrink: 1;
			> img {
				max-width: 100%;
				max-height: 100%;
			}
		}
	}

    .button-browser-info {
        vertical-align: bottom;
        cursor: pointer;

        &:hover {
            background-color: gray;
        }
    }
}