/*https://www.w3schools.com/css/css_tooltip.asp*/
/* Tooltip container */
.tooltipcontainer {
  position:absolute;
  display: block;
  width:250px;
  height:490px;
  left: calc(50% - (250px / 2));
  top: 124px;
}

.tooltipcontainer > div:not(.i-cross-circle) {
	width:100%;
	height:100%;
	position:relative;
}
.tooltipcontainer > div > div {
	cursor:pointer;
  display:block;
  width:18px;
  height:18px;
  position:absolute;
  animation: pulse 2s infinite;
  border-radius: 18px;
}

.tooltipcontainer p {
	margin:0;
	font-size:14px !important;
	line-height:1.4em !important;
  text-align:center !important;
}
.tooltipcontainer p.title {
	font-size:16px !important;
}
.tooltipcontainer p.title + p{
	padding-top:10px;
}

.tooltipcontainer .i-cross-circle {
  display:none;
}

/* Tooltip text */
.tooltipcontainer .tooltip-right,
.tooltipcontainer .tooltip-left {
  width: 280px;
  background-color: white;
  box-shadow: 0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  padding: 20px;
  border-radius: 6px;
  opacity: 0;
  visibility:hidden;
  transition: opacity .5s;
  position: fixed;
  z-index: 1;
	display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
          flex-direction:column;
}

.tooltipcontainer .tooltip-right > div,
.tooltipcontainer .tooltip-left  > div {
  width:100%;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(97,247,254, 0.4);
  }
  70% {
      -webkit-box-shadow: 0 0 0 20px rgba(97,247,254, 0);
  }
  100% {
      -webkit-box-shadow: 0 0 0 0 rgba(97,247,254, 0);
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(97,247,254, 0.4);
    box-shadow: 0 0 0 0 rgba(97,247,254, 0.4);
  }
  70% {
      -moz-box-shadow: 0 0 0 20px rgba(97,247,254, 0);
      box-shadow: 0 0 0 20px rgba(97,247,254, 0);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba(97,247,254, 0);
      box-shadow: 0 0 0 0 rgba(97,247,254, 0);
  }
}

.tooltipcontainer.left1 .left1 .tooltip-left,
.tooltipcontainer.left2 .left2 .tooltip-left,
.tooltipcontainer.left3 .left3 .tooltip-left,
.tooltipcontainer.left4 .left4 .tooltip-left,
.tooltipcontainer.left5 .left5 .tooltip-left,
.tooltipcontainer.right1 .right1 .tooltip-right,
.tooltipcontainer.right2 .right2 .tooltip-right,
.tooltipcontainer.right3 .right3 .tooltip-right {
  height: 60%;
  width: 80%;
  left: 10%;
  top: 20%;
  padding: 20px 20px;
  right: auto;
  margin: 0;
  visibility:visible;
  opacity: 1;
  cursor:default;
}

.tooltipcontainer.msgshow .i-cross-circle {
  display: inline-block;
  top: 21%;
  right: 11%;
  z-index: 2;
  position: fixed;
}
.tooltipcontainer .mask {
  position: fixed !important;
  display:none;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index: 1;
}
.tooltipcontainer.msgshow .mask {
  display:block !important;
  z-index: 9999;
}

@media screen and (min-width:375px) {
  .tooltipcontainer p.title {
    font-size:18px !important;
  }
  .tooltipcontainer.left1 .left1 .tooltip-left,
  .tooltipcontainer.left2 .left2 .tooltip-left,
  .tooltipcontainer.left3 .left3 .tooltip-left,
  .tooltipcontainer.left4 .left4 .tooltip-left,
  .tooltipcontainer.left5 .left5 .tooltip-left,
  .tooltipcontainer.right1 .right1 .tooltip-right,
  .tooltipcontainer.right2 .right2 .tooltip-right,
  .tooltipcontainer.right3 .right3 .tooltip-right {
    height: 50%;
    width: 74%;
    left: 13%;
    top: 25%;
  }
  .tooltipcontainer.msgshow .i-cross-circle {
    top: 26%;
    right: 14%;
  }
}

@media screen and (min-width:768px) {
  .tooltipcontainer.left1 .left1 .tooltip-left,
  .tooltipcontainer.left2 .left2 .tooltip-left,
  .tooltipcontainer.left3 .left3 .tooltip-left,
  .tooltipcontainer.left4 .left4 .tooltip-left,
  .tooltipcontainer.left5 .left5 .tooltip-left,
  .tooltipcontainer.right1 .right1 .tooltip-right,
  .tooltipcontainer.right2 .right2 .tooltip-right,
  .tooltipcontainer.right3 .right3 .tooltip-right {
    height: 50%;
    width: 50%;
    left: 25%;
    top: 25%;
  }
  .tooltipcontainer.msgshow .i-cross-circle {
    top: 26%;
    right: 26%;
  }
}

.tooltipcontainer .left1 {
	top:46px;
	left:7px;
}
.tooltipcontainer .left2 {
	top:166px;
	left:1px;
}
.tooltipcontainer .left3 {
	top:194px;
	left:83px;
}
.tooltipcontainer .left4 {
	bottom:11px;
	left:57px;
  width:28px;
  height:28px;
  border-radius:28px;
}
.tooltipcontainer .left5 {
	bottom:10px;
	left:110px;
  width:28px;
  height:28px;
  border-radius:28px;
}
.tooltipcontainer .right1 {
	top:45px;
	right:10px;
}
.tooltipcontainer .right2 {
	top:159px;
	right:3px;
}
.tooltipcontainer .right3 {
	bottom:11px;
	right:57px;
  width:28px;
  height:28px;
  border-radius:28px;
}


@media screen and (min-width:1200px) {
  .tooltipcontainer .tooltip-left,
  .tooltipcontainer .tooltip-right {
    position: absolute;
  }  

  .tooltipcontainer .tooltip-left {
    top: -20px;
    right: 160%;
  }
  .tooltipcontainer .tooltip-left::after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 100%; /* To the right of the tooltip */
    margin-top: -11px;
    border-width: 12px;
    border-style: solid;
    border-color: transparent transparent transparent white;
  }
  .tooltipcontainer .tooltip-right {
    top: -20px;
    left: 160%;
  }

  .tooltipcontainer .tooltip-right::after {
    content: " ";
    position: absolute;
    top: 50%;
    right: 100%; /* To the left of the tooltip */
    margin-top: -11px;
    border-width: 12px;
    border-style: solid;
    border-color: transparent white transparent transparent;
  }

/*top postion = (container height / 2) + (parent's height /2)*/
  .tooltipcontainer .left1 > div {
    height:240px;
    top:calc(-240px / 2 + 7px);  
  }
  html[lang="en"] .tooltipcontainer .left1 > div {
    height:160px;
    top:calc(-160px / 2 + 7px);  
  }
  .tooltipcontainer .left2 > div {
    height:160px;
    top:calc(-160px / 2 + 7px);  
  }
  .tooltipcontainer .left3 > div {
    height:240px;
    top:calc(-240px / 2 + 7px);  
  }
  .tooltipcontainer .left4 > div {
    height:160px;
    top:calc(-160px / 2 + 12px);  
  }
  .tooltipcontainer .left5 > div {
    width:350px;
    height:240px;
    top:calc(-240px / 2 + 12px);  
  }
  .tooltipcontainer .right1 > div {
    width:440px;
    height:280px;
    top:calc(-280px / 2 + 7px);  
  }
  .tooltipcontainer .right2 > div {
    width:350px;
    height:160px;
    top:calc(-160px / 2 + 7px);  
  }
  .tooltipcontainer .right3 > div {
    height:160px;
    top:calc(-160px / 2 + 12px);  
  }

  /* Show the tooltip text when you mouse over the tooltip container */
  .tooltipcontainer > div > div:hover .tooltip-left,
  .tooltipcontainer > div > div:hover .tooltip-right {
    visibility:visible;
    opacity: 1;
    animation:none;
  }
}