#mytGPT{
	position: fixed;
    top: 80%;
    left: 93%;
	z-index: 15;
}

.mytgpt-animation{
	width: 65%;
	z-index: 11!important;
}

@media (max-width: 768px) {
	#mytGPT{
		position: fixed;
		top: 83%;
		left: 79%;
		width: 100px;
	}

	.mytgpt-animation{
		width: 65%;
		z-index: 11!important;
	}
}

@media only screen and (max-width: 768px) and (orientation: landscape) {
	#mytGPT{
		position: fixed;
		top: 69%;
		left: 91%;
		width: 76px;
	}

	.mytgpt-animation{
		width: 65%;
		z-index: 11!important;
	}
}

@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  /* Styles for tablets in portrait mode */
	#mytGPT{
		position: fixed;
		top: 85%;
		left: 90%;
	}

	.mytgpt-animation{
		width: 65%;
		z-index: 11!important;
	}
}

@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  /* Styles for tablets in landscape mode */
	#mytGPT{
		position: fixed;
		top: 67%;
		left: 93%;
	}

	.mytgpt-animation{
		width: 80%;
		z-index: 11!important;
	}
}

.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip-container .tooltiptext {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: -1%;
  left: -29%;
  transform: translateX(-50%);
  padding: 20px 75px 20px 25px;
  border-radius: 50px;
  white-space: nowrap;
  transition: opacity 0.3s;
  background-color: #FCFCFC;
  box-shadow:0px 7px 20px rgba(51, 51, 51, 0.1);
  z-index: 0;
  background: 
    linear-gradient(white, white) padding-box, /* inner */
    linear-gradient(315deg, #DA39AF, #003A5E, #DA39AF) border-box; /* border */
  border: 1px solid transparent;
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.tooltip-container img {
  position: relative;
  z-index: 2; /* image appears on top */
}

.tooltip-container:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
  z-index: 1;
}

@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
	.tooltip-container .tooltiptext {
		bottom: -11%;
		left: -46%;
		transform: translateX(-50%);
		padding: 20px 75px 20px 25px;
	}
}

@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
	.tooltip-container .tooltiptext {
		bottom: -4%;
		left: -30%;
	}
}