.ptglos-help{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:13px;
  height:13px;
  margin-left:4px;
  border-radius:50%;
  background:#9ca3af;
  color:#fff;
  font-size:9px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  vertical-align:middle;
}

.ptglos-help:hover,
.ptglos-help:focus,
.ptglos-help.ptglos-open{
  background:#0b57d0;
}

.ptglos-help::after{
  content:attr(data-desc);
  display:none;
  position:absolute;
  left:50%;
  bottom:calc(100% + 7px);
  transform:translateX(-50%);
  z-index:999999;
  width:300px;
  max-width:80vw;
  padding:9px 11px;
  border:1px solid #cfd8e3;
  border-radius:7px;
  background:#fff;
  color:#111827;
  box-shadow:0 4px 14px rgba(0,0,0,.22);
  font-size:12px;
  font-weight:400;
  line-height:1.35;
  white-space:normal;
  text-align:left;
}

.ptglos-help::before{
  content:'';
  display:none;
  position:absolute;
  left:50%;
  bottom:calc(100% + 2px);
  transform:translateX(-50%);
  border-width:6px 6px 0 6px;
  border-style:solid;
  border-color:#fff transparent transparent transparent;
  z-index:1000000;
}

.ptglos-help:hover::after,
.ptglos-help:hover::before,
.ptglos-help:focus::after,
.ptglos-help:focus::before,
.ptglos-help.ptglos-open::after,
.ptglos-help.ptglos-open::before{
  display:block;
}

@media (max-width: 768px){
  .ptglos-help::after{
    width:240px;
    font-size:11px;
  }
}