/* style 1 */
.help1 { visibility: visible; background-color: black; color: #fff; text-align: center; padding: 5px; position: absolute; z-index: 1000; font-size: 1em; }
.help1::after { content: ""; position: absolute; border-width: 5px; border-style: solid; }
.help1top { margin-top: -35px; margin-left: auto; margin-right: auto;  transform: translate(-50%, -50%); }/*margin-left: -30px; margin-right: -30px; */
.help1top::after { bottom: -9px; left: 45%; border-color: black transparent transparent transparent; }
.help1bottom {margin-top: 70px; margin-left: -30px; margin-right: -30px; }
.help1bottom::after { top: -10px; left: 20px; border-color: transparent transparent black transparent; }
.help1left { right: 60px; width: 110%; }
.help1left::after { right: -10px; top: 10px; border-color: transparent transparent transparent black; }
.help1right { left: 70px; width: 110%; }
.help1right::after { right: -10px; top: 10px; border-color: transparent black transparent transparent; }

/* style 2 */   
.help2 { visibility: visible; background-color: #fff; color: #000; text-align: center; padding: 5px; border-radius: 6px; position: absolute; z-index: 1; font-size: 0.6em;  }
.help2::after { content: ""; position: absolute; margin-left: -5px; border-width: 5px; border-style: solid; }
.help2top { bottom: 115%; left: 0; }
.help2top::after { top: 100%; left: 30%; border-color: #fff transparent transparent transparent; }
.help2bottom { top: 115%; left: 0; }
.help2bottom::after { bottom: 100%; left: 30%; border-color: transparent transparent #fff transparent; }
.help2left { right: 102%; }
.help2left::after { bottom: 40%; left: 110%; border-color: transparent transparent transparent #fff; }
.help2right { left: 8%; }
.help2right::after { bottom: 40%; right: 105%; left: 0; margin-left: -10px; border-color: transparent #fff transparent transparent; }

/* style 3 */   
.help3 { visibility: visible; background-color: rgba(0, 0, 0, 0.73); color: #fff; text-align: center; padding: 5px; border-radius: 6px; position: absolute; z-index: 1; font-size: 0.6em;  }
.help3::after { content: ""; position: absolute; margin-left: -5px; border-width: 5px; border-style: solid; }
.help3top { bottom: 115%; left: 0; }
.help3top::after { top: 100%; left: 30%; border-color: rgba(0, 0, 0, 0.73) transparent transparent transparent; }
.help3bottom { top: 115%; left: 0; }
.help3bottom::after { bottom: 100%; left: 30%; border-color: transparent transparent rgba(0, 0, 0, 0.73) transparent; }
.help3left { right: 102%; }
.help3left::after { bottom: 40%; left: 110%; border-color: transparent transparent transparent rgba(0, 0, 0, 0.73); }
.help3right { left: 8%;top: 22px;font-size: 15px; }
.help3right::after { bottom: 40%; right: 105%; left: 0; margin-left: -10px; border-color: transparent rgba(0, 0, 0, 0.73) transparent transparent; }

/* style 4 */   
.help4 { visibility: visible; background-color: #666; color: #fff; text-align: center; padding: 5px; border-radius: 6px; position: absolute; z-index: 1; font-size: 0.6em; }
.help4::after { content: ""; position: absolute; margin-left: -5px; border-width: 5px; border-style: solid; }
.help4top { bottom: 115%; left: 0; }
.help4top::after { top: 100%; left: 30%; border-color: #666 transparent transparent transparent; }
.help4bottom { top: 115%; left: 0; }
.help4bottom::after { bottom: 100%; left: 30%; border-color: transparent transparent #666 transparent; }
.help4left { right: 102%; }
.help4left::after { bottom: 40%; left: 110%; border-color: transparent transparent transparent #666; }
.help4right { left: 8%; }
.help4right::after { bottom: 40%; right: 105%; left: 0; margin-left: -10px; border-color: transparent #666 transparent transparent; }

/* style 5 */   
.help5 { visibility: visible; background-color: rgba(238, 238, 238, 0.79); color: #000; text-align: center; padding: 5px; border-radius: 6px; position: absolute; z-index: 1; font-size: 0.6em; }
.help5::after { content: ""; position: absolute; margin-left: -5px; border-width: 5px; border-style: solid; }
.help5top { bottom: 115%; left: 0; }
.help5top::after { top: 100%; left: 30%; border-color: rgba(238, 238, 238, 0.79) transparent transparent transparent; }
.help5bottom { top: 115%; left: 0; }
.help5bottom::after { bottom: 100%; left: 30%; border-color: transparent transparent rgba(238, 238, 238, 0.79) transparent; }
.help5left { right: 102%; }
.help5left::after { bottom: 40%; left: 110%; border-color: transparent transparent transparent rgba(238, 238, 238, 0.79); }
.help5right { left: 8%; }
.help5right::after { bottom: 40%; right: 105%; left: 0; margin-left: -10px; border-color: transparent rgba(238, 238, 238, 0.79) transparent transparent; }

/* style 6 */   
.help6 { visibility: visible; background-color: #333; color: #fff; text-align: center; padding: 10px; border-radius: 6px; position: absolute; z-index: 1; font-size: 1.6em;  }
.help6::after { content: ""; position: absolute; margin-left: -5px; border-width: 5px; border-style: solid; }
.help6top { bottom: 115%; left: 0; }
.help6top::after { top: 99%; left: 30%; border-color: #333 transparent transparent transparent; }
.help6bottom { top: 200px; left: 0px; }
.help6bottom::after { bottom: 100%; left: 50%; border-color: transparent transparent #333 transparent; }
.help6left { right: 102%; }
.help6left::after { bottom: 40%; left: 110%; border-color: transparent transparent transparent #333 }
.help6right { left: 8%; }
.help6right::after { bottom: 40%; right: 105%; left: 0; margin-left: -10px; border-color: transparent #333 transparent transparent; }/*rgba(0, 0, 0, 0.73)*/
@media screen and  (min-width:650px){
	.help6bottom { top: 200px; left: 777px; }
}