html, body{
  height:100%;
  position: relative;
  min-height: 100%;
	background-image: linear-gradient(270deg, #00dbde 0%, #fc00ff 100%);
    background-color: #00dbde;
}

.personaj_container{
  height:100%;
  min-height: 100%;
  background-image: linear-gradient(270deg, #00dbde 0%, #fc00ff 100%);
  background-color: #00dbde;
}

.andika {
  font-family: "Andika", sans-serif;
}

.traista_titlu{
    text-decoration: none;
}

.personaj:hover{
  filter: drop-shadow(0 0 2rem rgb(255, 255, 255));
}

.personaj_glow {
  filter: drop-shadow(0 0 2rem rgb(255, 255, 255));
}

/********* RIGHT LEFT ***************/
.left_right{
  position: relative;
  animation-name: left_right_animation;
  animation-duration: 1s;
  animation-delay:0s;
  opacity: 0;
  animation-fill-mode: forwards;
}

@keyframes left_right_animation {
    0%   {left:-1000px; top:0px; opacity: 1;}
  100%   {left:0px; top:0px; opacity: 1;}
}

.right_left{
  position: relative;
  animation-name: right_left_animation;
  animation-duration: 1s;
  animation-delay:0s;
  opacity: 0;
  animation-fill-mode: forwards;
}

@keyframes right_left_animation {
    0%   {right:-1000px; top:0px; opacity: 1;}
  100%   {right:0px; top:0px; opacity: 1;}
}

/**************** ROTATE LEFT RIGHT**********************/
.rotate_left{
  position: relative;
  animation-name: rotate_left_animation;
  animation-duration: 1s;
  animation-delay:0s;
  opacity: 0;
  animation-fill-mode: forwards;
}

@keyframes rotate_left_animation {
    0%   {left:-2000px; top:0px; opacity: 1; }
    50%   {left:-2000px; top:0px; opacity: 1; transform: rotateZ(-360deg);}
  100%   {left:0px; top:0px; opacity: 1;}
}

.rotate_right{
  position: relative;
  animation-name: rotate_right_animation;
  animation-duration: 1s;
  animation-delay:0s;
  opacity: 0;
  animation-fill-mode: forwards;
}

@keyframes rotate_right_animation {
    0%   {left:2000px; top:0px; opacity: 1; }
    50%   {left:2000px; top:0px; opacity: 1; transform: rotateZ(360deg);}
  100%   {left:0px; top:0px; opacity: 1;}
}

/**************** TOP DOWN **********************/
.up_down{
  position: relative;
  animation-name: up_down_animation;
  animation-duration: 1s;
  opacity: 0;
  animation-fill-mode: forwards;
}

@keyframes up_down_animation {
    0%   {left:0px; top:-1000px; opacity: 1; }
  100%   {left:0px; top:0px; opacity: 1;}
}

.down_up{
  position: relative;
  animation-name: down_up_animation;
  animation-duration: 1s;
  opacity: 0;
  animation-fill-mode: forwards;
}

@keyframes down_up_animation {
    0%   {left:0px; bottom:-1000px; opacity: 1; }
  100%   {left:0px; bottom:0px; opacity: 1;}
}

/********* RANDUL 5 ***************/
.diag_right{
  position: relative;
  animation-name: diag_right_animation;
  animation-duration: 1s;
  opacity: 0;
  animation-fill-mode: forwards;
}

@keyframes diag_right_animation {
    0%   {right:-1000px; top:-1000px; opacity: 1; }
    70%   {right:100px; top:100px; opacity: 1; }
  100%   {right:0px; top:0px; opacity: 1;}
}

.diag_left{
  position: relative;
  animation-name: diag_left_animation;
  animation-duration: 1s;
  opacity: 0;
  animation-fill-mode: forwards;
}

@keyframes diag_left_animation {
    0%   {left:-1000px; top:-1000px; opacity: 1;}
    70%  {left:100px; top:100px; opacity: 1; }
    100% {left:0px; top:0px; opacity: 1;}
}

/********************* ANIMATION DELAYS ***************************/

.animation_delay_1{
  animation-delay:1s;
}

.animation_delay_2{
  animation-delay:2s;
}

.animation_delay_3{
  animation-delay:3s;
}

.animation_delay_4{
  animation-delay:4s;
}

.animation_delay_5{
  animation-delay:5s;
}

.animation_delay_6{
  animation-delay:6s;
}

.animation_delay_7{
  animation-delay:7s;
}

/*******************************************/

.pagini_personaj_holder {
    position:fixed;
    top:calc(50% - 125px);
    right:0px;
    height:250px;
    width:400px;
}

.pagini_personaj_holder_mobile {
    position:fixed;
    bottom:0px;
    right:0px;
    height:100px;
    width:200px;
}

/*
.pagini_personaj_holder_mobile {
    position:fixed;
    bottom:0px;
    right:0px;
    height:100px;
    width:200px;
}
/**/
.pagini_personaj_boy {
    top:calc(50% - 125px);
    left:0px;
    width:180px;
}

/******************** BUBBLE ***********************/
.imessage {
  display: flex;
  flex-direction: column;
  font-family: "SanFrancisco";
  font-size: 1.25rem;
  margin: 0 auto 1rem;
  max-width: 600px;

}

.imessage p {
  border-radius: 1.15rem;
  line-height: 1.25;
  position: relative;
  word-wrap: break-word;
  padding:10px;
}

.imessage p::before,
.imessage p::after {
  bottom: -0.1rem;
  content: "";
  height: 1rem;
  position: absolute;
}

p.from-me {
  align-self: flex-end;
  background-color: #248bf5;
  color: #fff;
}

p.from-me::before {
  border-bottom-left-radius: 0.8rem 0.7rem;
  border-right: 1rem solid #248bf5;
  right: -0.35rem;
  transform: translate(0, -0.1rem);
}

p.from-me::after {
  background-color: #fff;
  border-bottom-left-radius: 0.5rem;
  right: -40px;
  transform:translate(-30px, -2px);
  width: 10px;
}


/****************** JOC 1 Colreaza traista*****************************/
.joc1_container{
  background-image: linear-gradient(270deg, #00dbde 0%, #fc00ff 100%);
  background-color: #00dbde;
}

.culori{
  color:#fff;
  text-align:center;
  margin: auto;
  width:0px;
}

.color_button{
  margin:2px;
  height:40px;
  width:40px;
  cursor:pointer;
  float:left;
  /*border:2px solid #999;*/
  border-radius: 8px;
}

.color_button_border_grey{
  border:2px solid #999;
}

.color_button_border_selected{
  border:2px solid red;
}

.joc1_message{
  background-color: #0c6fd5;
  padding:10px 20px 10px 20px;
  border-radius: 20px;
}

.speech-bubble {
	position: relative;
	background: #0c6fd5;
	border-radius: 15px;
  padding:20px 20px 10px 20px;
}

.speech-bubble:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-top-color: #0c6fd5;
	border-bottom: 0;
	border-left: 0;
	margin-left: -10px;
	margin-bottom: -20px;
}

.success_button_holder{
  display:none;
}
.optiuni-culori {
	background-color: #fcfcfc;
	padding: 5px;
	border-radius: 5px;
	display: flex;
	flex-direction: column;
	grid-gap: 1rem;
	width: fit-content;
	min-width: 450px;
}
.optiuni-culori .optiune {
	display: flex;
	grid-gap: 0.7rem;
	border: 2px solid transparent;
}
.optiuni-culori .optiune:hover {
	border: 2px dashed black;
	cursor: pointer;
}
.tara-container .tara {
	position: relative;
}
.tara-container .tara .bucata-tara {
	position: absolute;
	z-index: 100;
}
.tara-maro {
  left: 175px; top: -148px;
}
.tara-albastru {
  left: 345px; top: -133px;
}
.tara-violet {
  left: 0px; top: -113px;
}
.tara-portocaliu {
  left: 142px; top: -83px;
}
.tara-verde {
  left: 401px; top: -158px;
}
.tara-verde-cactus {
  left: -35px; top: 75px;
}
.tara-rosu {
  left: 131px; top: 167px;
}
.tara-galben {
  left: 287px; top: 147px;
}
.tara-roz {
  left: 565px; top: 171px;
}
.tara-container {
	z-index: 1000;
	transform: translate(-10%, -20%) scale(40%);
}
.tara-container {
	width: 300px;
	height: 200px;
}
.optiune {
	z-index: 10000;
}
.bucata-tara:not(.corect) {
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
	filter: grayscale(100%);
}
.optiune.corect {
	display: none;
}
.optiune.ui-draggable-dragging .optiune-text {
	display: none;
}
.optiune.ui-draggable-dragging {
	width: 40px;
	height: 40px;
}
.row-special {
	flex-direction: row !important;
}
.speech-bubble-special {
	position: absolute;
	top: -150px;
	left: 200px;
	width: 100%;
}
.copii {
	display: flex;
	position: relative;
	width: 30%;
}
.copii-container {
	margin-left: 150px;
}
.sanatate {
	text-align: center;
	width: 100%;
	position: relative;
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
.bullet-circles {
	position: absolute;
	content: "";
	margin-left: 30px;
	margin-top: 40px;
}
.sanatate-container {
	position: relative;
	height: 100%;
	width: 50%;
	text-align: center;
	margin: auto;
	margin-top: -50px
}
.bullet-circles .bullet {
	position: absolute;
	height: 30px;
	width: 30px;
	background-color: white;
	border-radius: 50%;
	text-align: center;
}
.bullet-circles .bullet:after {
	content: attr(data-target-id);
	position: absolute;
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
}
.bullet-circles .bullet:hover:not(.selected) {
	cursor: pointer;
	background-color: #dfdfdf;
}
.bullet-circles .bullet[data-target-id="1"] {
	left: 128px; top: 100px;
}

.bullet-circles .bullet[data-target-id="2"] {
	left: 338px; top: 109px;
}

.bullet-circles .bullet[data-target-id="3"] {
	left: 128px; top: 155px;
}
.bullet-circles .bullet[data-target-id="4"] {
	left: 347px; top: 159px;
}
.bullet-circles .bullet[data-target-id="5"] {
	left: 132px; top: 194px;
}
.bullet-circles .bullet[data-target-id="6"] {
	left: 342px; top: 213px;
}
.bullet-circles-answers {
	position: absolute;
	content: "";
}
.bullet-circles-answers .bullet {
	position: absolute;
	height: 40px;
	width: 40px;
	background-color: white;
	border-radius: 50%;
	border: 2px solid #4c94bd;
	text-align: center;
}
.bullet-circles-answers .bullet:hover:not(.selected) {
	cursor: pointer;
	background-color: #dfdfdf;
}
.bullet-circles-answers .bullet[data-bullet-id="1"] {
	left: 159px; top: -144px;
}
.bullet-circles-answers .bullet[data-bullet-id="2"] {
	left: 160px; top: -245px;
}
.bullet-circles-answers .bullet[data-bullet-id="3"] {
	left: 360px; top: -349px;
}
.bullet-circles-answers .bullet[data-bullet-id="4"] {
	left: 160px; top: -351px;
}
.bullet-circles-answers .bullet[data-bullet-id="5"] {
	left: 358px; top: -146px;
}
.bullet-circles-answers .bullet[data-bullet-id="6"] {
	left: 358px; top: -246px;
}
.point {
  width: 20px;
  height: 20px;
  position: absolute;
  background-color: #555;
	z-index: 1000;
}
.line {
  position: absolute;
  height:2px;
  background-color: #d63030;
  transform-origin: left;
  z-index: 1000;
}
.bullet.correct {
	background-color: #cccccc;
}
#svgContainer { 
	z-index: -10;
	position:absolute;
	background-color:silver;
	opacity: 0.5;
}
.bubble-msg {
	width: 25%;
	position: absolute;
	top: 40px;
}
.bubble-msg .speech-line:after {
	display: none;
}
.sanatate img {
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	user-drag: none;
	width: 558px !important;
	height: auto !important;
	image-rendering: high-quality;

}
@media(max-width: 860px) {
	.sanatate-container {
		transform: scale(80%);
		margin-top: -65px;
	}
	.bubble-msg {
		margin-left: 15px;
	}
}
@media(max-width: 720px) {
	.sanatate-container {
		transform: scale(100%);
		margin-top: -5px;
		margin-left: 30px;
	}
	.bubble-msg {
		margin-left: 15px;
		position: absolute;
		z-index: 1000000;
		top: -89px;
		width: 130px;
		height: 50px !important;
		font-size: 0.8em;
	}
	.container-tara {
		margin-top: 200px;
	}
	.copii {
		position: unset;
	}
	.speech-bubble-special {
		position: absolute;
		width: 90%;
		left: 50%;
		z-index: 1000;
		top: 100px;
		transform: translateX(-50%);
	}
	.speech-bubble-special .speech-bubble:after {
		display: none;
	}
	.container-tara {
		width: 100%;
		text-align: center;
	}
	.tara {
		transform: scale(50%);
	}
	.tara-container {
		width: 100%;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 320px;
	}
	.copii-container {
		display: none;
	}
	.optiuni-culori {
		width: 90%;
		margin: auto;
		margin-top: 250px;
	}
	
}
@media(max-width: 540px) {
	.tara {
		left: -10% !important;
		width: 100%;
	}
}
@media(max-width: 461px) {
	.tara {
		left: -15% !important;
		width: 100%;
		transform: scale(50%);
	}
	.row-culori {
		padding-bottom: 100px;
	}
}
@media(max-width: 420px) {
	.tara {
		left: -15% !important;
		width: 100%;
		transform: scale(40%);
	}
	.optiuni-culori {
		max-width: 50%;
		margin: auto;
		margin-top: 430px;
		font-size: 0.8em;
		flex-grow: 0;
	    flex-shrink: 0;
	    flex-basis: 10%;
	}
	.optiuni-culori .optiune {
		max-width: fit-content;
	}
}
@media(max-width: 420px) {
	.sanatate-container {
		transform: scale(65%);
		margin: 0px;
		top: 40px;
		left: -70px;
		width: 100%;
	}
	.bubble-msg {
		position: absolute;
		margin-left: 0px;
		width: 90%;
		left: 48%;
	    transform: translateX(-50%);
		top: 0px;
	}
	.sanatate {
		width: 100%;
		margin: 0px;
		padding-bottom: 160px;
	}
	.container-xl {
		width: 100%;
		padding-left: 0px;
	}
	.container-xl .row {
		margin: 0px !important;
		width: 100% !important;
	}
	.col-md-12 {
		margin: 0px;
		padding: 0px !important;
	}
	.pyro_holder {
		display: none;
	}
}
@media(max-width: 380px) {
	.sanatate-container {
		transform: scale(65%);
	}
}
@media(min-width: 1080px) {
	.bullet-circles {
		margin-left: 12%;
	}
	.bullet-circles-answers {
		margin-left: 7%;
	}
}