#the-hint-box
{
	width: 100%;
	height: 115px;
	/*height: 95px;*/
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1999;
}

#the-hint-box.is-green
{
	background-color: #18a15f;
}

#the-hint-box.is-red
{
	background-color: #e30613;
}

#the-hint-box.is-grey
{
	background-color: #9e9e9e;
}

/* icon */
#the-hint-box .is-hint-icon
{
	width: 36px;
	height: 36px;
	border-radius: 18px;
	border-style: solid;
	border-width: 1px;
	background-color: white;
	background-image: url('./image/hint-grid.png');
	background-repeat: no-repeat;
	background-position: 50px 50px;
	float: left;
	position: relative;
	left: 0px;
	top: 38px;
}

#the-hint-box.is-green .is-hint-icon
{
	border-color: #18a15f;
	background-position: 0 -50px;
}

#the-hint-box.is-red .is-hint-icon
{
	border-color: #e30613;
	background-position: -50px -50px;
}

#the-hint-box.is-grey .is-hint-icon
{
	border-color: #9e9e9e;
	background-position: 0 -100px;
}

/* shutter */
#the-hint-box .is-shutter
{
	width: 36px;
	height: 36px;
	background-image: url('./image/hint-grid.png');
	background-repeat: no-repeat;
	background-position: -450px 0;
	float: right;
	position: relative;
	right: 0px;
	top: 40px;
}

/* message */
#the-hint-box .is-message
{
	height: 115px;
	display: flex;
	align-items: center; /* align vertical */
	overflow: hidden;
}

#the-hint-box .is-message p
{
	padding: 1px 30px 2px 17px;
	overflow: hidden;
	text-overflow: ellipsis;
	max-height: 82px;
	color: white;
}

.is-small-hint
{
	border-radius: 3px;
	padding: 9px 13px 10px 13px;
	margin: 0 0 15px 0;
	color: white;
}

.is-small-hint.is-green
{
	background-color: #18a15f;
}

.is-small-hint.is-red
{
	background-color: #e30613;
}

.is-small-hint.is-grey
{
	background-color: #9e9e9e;
}

.is-small-hint.is-transparent
{
	background-color: transparent;
	border: 1px solid silver;
	color: black;
}

.is-event-hint
{
	border-radius: 3px;
	padding: 1px 6px 2px 6px;
	margin: 3px 0 4px 0;
	background-color: #9e9e9e;
	color: white;
}

.is-help-text-hint
{
	border-left: 1px solid silver;
	padding-left: 9px;

	/*background-color: #9e9e9e;*/
}