@charset "UTF-8";
.cast-div {
    margin-bottom: 1.5em;
}
.whereabouts{
	display: -webkit-flex;
	display: flex;
    -webkit-align-items: center;
    align-items: center;
    text-align: center;
    font-size: x-small;
    margin-bottom: 5px;
    white-space: nowrap;
}
.whereabouts.sideL {
    margin-left: 10vmin;
	-webkit-justify-content: flex-start;
    justify-content: flex-start;
	-webkit-flex-direction: row;
    flex-direction: row;
}
.whereabouts.sideR {
    margin-right: 10vmin;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
	-webkit-flex-direction:row-reverse;
    flex-direction: row-reverse;
}
.whereabouts-icon > *{
	margin:0 0.5em;
}
.info_caution {
    margin-bottom: 5px;
    font-size: x-small;
    color: orangered;
    font-weight: bold;
}
.info_caution.sideL {
    margin-left: 15vmin;
    text-align: left;
}
.info_caution.sideR {
    margin-right: 15vmin;
    text-align: right;
}
.cast_name.sideL {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    margin-right: 5px;
}
.cast_name.sideR {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: flex-end;
    justify-content: flex-end;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    margin-left: 5px;
}
p.npc_name {
	margin:0;
	text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
				-1px 1px 0 #FFF, 1px -1px 0 #FFF,
				0px 1px 0 #FFF,  0-1px 0 #FFF,
				-1px 0 0 #FFF, 1px 0 0 #FFF;
	font-weight: bold;
	font-size: 1.2em;
}
p.npc_name > a {
	background-color: rgb(0,0,0);
}
.cast_lines {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: flex-end;
    justify-content: flex-end;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}
.cast_lines.sideL {
	-webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
}
.cast_lines.sideR {
	-webkit-flex-direction: row;
    flex-direction: row;
}
.lines-div {
	text-align: left;
    font-size: xx-small;
    max-width: 90%;
    min-height: 8vmin;
    border-radius: 2em;
    padding: 2em 1.2em 2em 1.2em;
    margin: 0 0.5em 0 0.5em;
    display: inline-block;
    word-break: break-all;
    position: relative;
}
.cast_lines.sideL > .lines-div {
    background-color: #a3f3ad;
    box-shadow: 1px 1px 5px #aaa;
}
.cast_lines.sideL > .lines-div.before {
	background: #a3f3ad;
	background: -webkit-gradient(linear, left top, right top, color-stop(0.05, #a3f3ad), color-stop(0.50, #d7ffab));
	background: linear-gradient(to right, #a3f3ad 5%, #d7ffab 50%);
}
.cast_lines.sideL > .lines-div.after {
	background: #a3f3ad;
	background: -webkit-gradient(linear, left top, right top, color-stop(0.05, #a3f3ad), color-stop(0.50, #aef3ea));
	background: linear-gradient(to right, #a3f3ad 5%, #aef3ea 50%);
}
.cast_lines.sideL > .lines-div.failed {
	box-shadow: 1px 2px 10px #cc6666;
}
.cast_lines.sideL > .lines-div::before{
	content: '';
	top: 10vmin;
	left: -0.75em;
	position: absolute;
	display: block;
	width: 1.25em;
	height: 2.25em;
	background-color: transparent;
	box-shadow: inset -0.5em 1.25em 0 #a3f3ad;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
	border-radius: 50%;

}
.cast_lines.sideR > .lines-div {
	background-color: #eff0f1;
	box-shadow: -1px 1px 5px #aaa;
}
.cast_lines.sideR > .lines-div.before {
	background: #eff0f1;
	background: -webkit-gradient(linear, right top, left top, color-stop(0.05, #eff0f1), color-stop(0.50, #d7ffab));
	background: linear-gradient(to left, #eff0f1 5%, #d7ffab 50%);
}
.cast_lines.sideR > .lines-div.after {
	background: #eff0f1;
	background: -webkit-gradient(linear, right top, left top, color-stop(0.05, #eff0f1), color-stop(0.50, #aef3ea));
	background: linear-gradient(to left, #eff0f1 5%, #aef3ea 50%);
}
.cast_lines.sideR > .lines-div.failed {
	box-shadow: -1px 2px 10px #cc6666;
}
.cast_lines.sideR > .lines-div::before{
	content: '';
	top: 10vmin;
	right: -0.75em;
	position: absolute;
	display: block;
	width: 1.25em;
	height: 2.25em;
	box-shadow: inset 0.5em -1.25em 0 #eff0f1;
	background-color: transparent;
	-webkit-transform: rotate(-135deg)scale(1, -1);
	transform: rotate(-135deg)scale(1, -1);
	border-radius: 50%;

}
.cast_lines.narration {
    justify-content: center;
}
.cast_lines.narration>.lines-div {
	background-color: #ffffff;
	box-shadow: -1px 1px 5px #aaa;
	text-align: center;
}
.face-div {
	flex: 0 0 10vmin;
	height: 10vmin;
	max-height: 80px;
	max-width: 80px;
	border-radius: 50%;
	box-shadow: 1px 1px 5px #aaa;
	border: 2px solid #fff;
}
.face-div img {
	width: 100%;
	height: auto;
	border-radius: 50%
}
.unknown {
	font-weight: bold;
	color: red;
}

@media screen and (max-width: 767px) and (orientation: portrait) {
	div#main {
	    margin-right: 2.5vw;
	    margin-left: 2.5vw;
	}
}
@media screen and (max-width: 767px) and (orientation: landscape) {
	div#main {
	    margin-right: 6vw;
	    margin-left: 6vw;
	}
}
@media screen and (orientation:landscape) {
	.lines-div {
		font-size: small;
	}
	.whereabouts {
		font-size: small;
	}
}
@media screen and (min-width: 768px) and (orientation: portrait) {
}
@media screen and (min-height: 768px) and (orientation:landscape) {
}