#bluebuddy {
	height: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

#bluebuddy-container {
    width: min(70vw, 70%);
    display: flex;
    flex-direction: column;
}

#bluebuddy-header {
    margin-bottom: 25px;
	display: flex;
    flex-direction: column;
}

#bluebuddy-input-option {
	display: flex;
    flex-direction: row;
    position: relative;
    justify-content: space-between;
    margin-right: 30px;
}

#bluebuddy-header #input-form {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 5px;
}

#bluebuddy-info {
	font-size: medium;
	text-align: end;
	padding: 0 10px;
}

#bluebuddy-error {
    margin-bottom: 10px;
}

#bluebuddy-error div {
    text-align: center;
    width: 100%;
    padding: 10px;
}

#bluebuddy-select {
	width: fit-content;
}

#bluebuddy-description {
	display: flex;
    flex-direction: row;
    overflow-x: scroll;
	height: min(100%, 60vh);
	background-color: #ccffff;
	border: blue thin solid;
    border-radius: 6px;
}

#bluebuddy-description p {
	margin: 0;
	overflow-wrap: break-word;
}

#bluebuddy-description table {
	background-color: white;
}

#bluebuddy-loading {
	width: 100%;
	text-align: center;
	border: blue thin solid;
    border-radius: 6px;
	margin-bottom: auto;
	padding: 10px;
}

#bluebuddy-loading-message {
	margin: 0;
}

.bb-elm-title {
	font-size: large;
	background-color: #075698;
	color: white;
	padding: 0 10px;
}

.bb-elm-container {
	margin: 10px;
}

.bb-desc-element {
	min-width: min(100%, 300px);
	width: 100%;
}

.bb-desc-element * {
	line-break: anywhere;
}

.bb-desc-element h3 {
	font-size: medium;
	margin: 5px 0;
    font-weight: 600;
}

.bb-document {
	margin: 5px 0 5px 0;
	padding: 10px;
	border-bottom: solid 6px #aac5fe;
    border-radius: 10px;
    vertical-align: top;
    background: #5596E6;
	color: white;
}

.bb-extra-info {
	font-size: small;
}

label.required::after {
  content: " *";
  color: red;
  font-weight: bold;
}