.headline {
background-color: white;
border-radius: 5px;
border: 1px solid black;
position: absolute;
top: -15px;
left: 23%;
width: 50%;
height: 10px;
line-height: initial;
font-size: 0.8em;
height:30px;
}
.ybox {
background-color: #f9b546;
border-radius: 5px;
border: 1px solid #575757;
}
.grbox {
background-color: #efefef;
border-radius: 15px;
border: 1px solid #575757;
}
.innerText {
text-align: center;
color: black;
padding: 5px;
}
.bv:before{
content:"";
height: 2px;
width:10px;
background:black;
position:absolute;
top: 50%;
left:-10px;
}
.bv:after {
content:"";
width: 0;
height: 0;
position:absolute;
top:45%;
left:-13px;
-webkit-transform:rotate(270deg);
border-style: solid;
border-width: 0 5px 5px 5px;
border-color: transparent transparent black transparent;
}
.arrow {
position:relative;
left:-4px;
}
.arrow:before {
content:"";
height: var(--tooltip-height);
width:2px;
background:black;
position:absolute;
top: var(--tooltip-top);
left:0;
}
.arrow:after {
content:"";
width: 0;
height: 0;
position:absolute;
top:var(--tooltip-top);
left:-4px;
-webkit-transform:rotate(360deg);
border-style: solid;
border-width: 0 5px 5px 5px;
border-color: transparent transparent black transparent;
}
.longArrow {
position:relative;
padding:5px;
left: -4px;
}
.longArrow:before {
content:"";
height: 660%;
width:2px;
background:black;
position:absolute;
bottom: 100%;
right:0;
}
.longArrow:after {
content:"";
width: 0;
height: 0;
position:absolute;
bottom: 760%;
right:-4px;
-webkit-transform:rotate(360deg);
border-style: solid;
border-width: 0 5px 5px 5px;
border-color: transparent transparent black transparent;
}

.arrowPart {
position: absolute;
width: 35%;
right: 0;
border-bottom: 2px solid black;
bottom: 50%;
border-radius: 0 0 10px 0;
border-right: 2px solid black;
}
.explaintext{
width:88px !important;
}
@media (max-width: 600px) {
.innerText {
font-size: 2vw;
}
.grbox {
font-size: 2vw;
}

}