@import 'common.css';

.arrow-box {
    position: absolute;
    width: 50px; height: 50px;
}

.tag-box {
    position: absolute;
    width: 100px;
    height: 20px;
    font-weight: bold;
    color: white;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.tag-box.server {
    top: 13px; left: calc(50% - 155px);
    background-color: darkred;
}

.tag-box.client {
    top: 13px; left: calc(50% + 55px);
    background-color: darkblue;
}

.middle-left {
    top: calc(50% - 25px); left: calc(25% - 25px);
}

.middle-right {
    top: calc(50% - 25px); right: calc(25% - 25px);
}

.middle-bottom {
    bottom: calc(25% - 25px); left: calc(50% - 25px);
}

.middle-top {
    top: calc(25% - 25px); left: calc(50% - 25px);
}

.middle-left img {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    filter: opacity(30%);
}

.middle-right img {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
    filter: opacity(30%);
}

.middle-top img {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

.middle-bottom img {
    filter: opacity(30%);
}

.client-box {
    width:90%;
    height: 90%;
}

.qrstream-box {
    width: 90%;
    height: 80%;
    border: 1px solid lightgray;
    border-radius: 5px;
}

.content-box {
    width: 90%; height: 80%; border: 1px solid lightgray; border-radius: 5px;
}

.content-box textarea {
    white-space: pre;
    overflow-wrap: normal;
    overflow-x: scroll;
    width: 100%; height: 100%; border: none; border-radius: 5px;
}