/* FOCUS INDICATOR */
/* don't use :focus */ 

input:focus-visible {
	outline-offset: 0.55vmin;
	outline: 0.29vmin white solid;
	box-shadow: 0 0 0 0.42vmin black, 0 0 0 0.55vmin white;
}

a:focus-visible {
	outline-offset: 0.42vmin;
	outline: 0.42vmin black solid;
	box-shadow: 0 0 0 0.42vmin white, 0 0 0 1.2vmin white;
}

/* FONTS */
p[dir=rtl] {
	direction: rtl;
}

li[dir=rtl] {
	text-align: right;
	direction: rtl;
}

.rtl {
	text-align: right; 
	direction: rtl;
}

.inline.rtl {
	direction: rtl;
}

.inline.rtl p {display: inline !important;}

.inline span {
	min-width: 1vmin;
}

.heading-level-1 > h1 {
	font-size: 0 !important;
}

ul {
	padding: 0;
}

ul > li {
	list-style: none !important;
}

.fake-link {
	color: dodgerblue;
}

.fake-hover-box-outer {
	display: flex;
}
.fake-hover-box-inner {
	background-color: #2a2a2a;

	border: calc(2px * var(--construct-scale)) solid black;
	border-radius: 5px;
}

.fake-hover {
	line-height: calc(32px * var(--construct-scale));
	margin: auto calc(4px * var(--construct-scale));
}

p, li, a, span#fakelink {
	margin: calc(8px * var(--construct-scale)) 0;
	font-size: calc(20px * var(--construct-scale));
	/* margin: 0.92vmin 0;
	font-size: 2.6vmin; */
	font-family: 'Open Sans', sans-serif !important;
	color: black;
}

.white {
	color: white;
}

a {
	color: blue;
}

a.noline {
	text-decoration: none;
}

li {
	margin: 0.4vmin 0;
}

@media only screen and (max-width: 560px) {
	p, a, li {
		font-size: 2.15vmin !important;
	}
}

p.small-text {
	font-size: 1.8vmin;
}

.medium-text, 
.medium-text > p  {
	font-size: 3vmin;
}

.large-text, 
.large-text > p  {
	font-size: 3.4vmin;
}

.x-large-text, 
.x-large-text > p  {
	font-size: 4vmin;
}

.strong {
	font-weight: bold;
}

.center {
	text-align: center;
}

.middle {
	display: flex;
	justify-content: center;
	align-items: center;
}

.inline p {display: inline;}

.blue-anchor {
	color: blue;
	text-decoration: underline;	
}

.sr-only {
	font-size: 0px !important;
}

/* PAGE BUTTONS */
.all-buttons {
	border: none;
	cursor: pointer;
	color: #fff;
	padding: 0;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 2.2vmin !important;
}
@media only screen and (max-width: 560px) {
	.all-buttons {
		font-size: 1.6vmin !important;
	}
}

.all-buttons.rtl {
	font-size: 3.2vmin !important;
	text-align: center;
	direction: rtl !important;
}

.black-buttons, .orange-buttons {
	border-radius: 60px;
	border: 0.52vmin solid white;
}

.black-buttons {
	background-color: black;
}

.black-buttons.disabled {
	background-color: #7F7F7F;
}

.black-buttons:hover {
	border: 0.52vmin solid #DD6E37;
	background-color: #FFF;
	color: black;
	text-decoration: underline;
}
.black-buttons.disabled:hover {
	cursor: default;
	border: 0.52vmin solid white;
	background-color: #7F7F7F;
	color: white;
	text-decoration: none;
}

.orange-buttons {
	background-image: linear-gradient(#D76C37, #934E2B);
}

.orange-buttons:hover {
	border: 0.52vmin solid #DD6E37;
	background-image: none;
	background-color: #FFF;
	color: black;
	text-decoration: underline;
}

.pab-button {
	background: url('assets/buttons/pab.png') no-repeat;
	background-size: contain;
}

/* MENU BUTTONS */
.mute-button,
.unmute-button,
.exit-button {
	border-radius: 50%;
}

.mute-button {
	background: url('assets/buttons/icon_sound_on.png') no-repeat;
	background-size: contain;
}

.mute-button:hover {
	background: url('assets/buttons/button_sound_hover.png') no-repeat;
	background-size: contain;
}

.unmute-button {
	background: url('assets/buttons/icon_sound_off.png') no-repeat;
	background-size: contain;
}

.unmute-button:hover {
	background: url('assets/buttons/button_sound_hover_off.png') no-repeat;
	background-size: contain;
}

.exit-button {
	background: url('assets/buttons/icon_exit.png') no-repeat;
	background-size: contain;
}

.exit-button:hover {
	background: url('assets/buttons/button_exit_hover.png') no-repeat;
	background-size: contain;
}

/* PROMPT BUTTONS */
.prompt-box {
	background-color: #FFF;
	border-radius: 2.8vmin;
	border: 1.04vmin solid #DD6E37;
}

.prompt {
	border-radius: 60px;
	border: 0.26vmin solid #DD6E37;
}

.prompt.yes {
	background-color: #DD6E37;
	color: #FFF;
}

.prompt.no {
	background-color: #FFF;
	color: #DD6E37;
}

.prompt.yes:hover,
.prompt.no:hover {
	text-decoration: underline;
}

/* SPEECH BUBBLES */
.speach-box {
	display: flex;
	height: 100%;
}

.speach {
	overflow: auto;
	max-height: 100%;
	width: 100%;
	margin: auto 0.52vmin;
	padding: 0 1.56vmin;
	color: black;
}

.speach > p {
	margin: 0 !important;
}

/* START PAGE */
.disclaimer > p {
	padding: 120px 60px 40px;
}

/* AVATAR PAGE - CHARACTERS */
.avatarButton {
	padding: 0 !important;
	border: none;
	cursor: pointer;
	color: rgba(255,255,255,0) !important;
}
.avatarButton.disabled {cursor: none !important;}

.char1 {
	background: url('assets/characters/character-01-position-01.png') no-repeat;
	background-size: contain;
}

.char2 {
	background: url('assets/characters/character-02-position-01.png') no-repeat;
	background-size: contain;
}

.char3 {
	background: url('assets/characters/character-03-position-01.png') no-repeat;
	background-size: contain;
}

.char4 {
	background: url('assets/characters/character-04-position-01.png') no-repeat;
	background-size: contain;
}

.char5 {
	background: url('assets/characters/character-05-position-01.png') no-repeat;
	background-size: contain;
}

/* AVATAR PAGE - INPUT */
.avatar-input {
	padding: 0 4.2vmin;
	font-size: 2.34vmin !important;
	width: 57.3vmin !important;
	height: 10.42vmin !important;
	left: 50% !important;
	transform: translateX(-50%);
	border: none;
	background-color: white;
	border: 0.52vmin solid black;
	border-radius: 5.2vmin;
}
.avatar-input.rtl {
	font-size: 3.34vmin !important;
}

@media only screen and (max-width: 560px) {
	.avatar-input {
		font-size: 16px !important;
	}
	.avatar-input.rtl {
		font-size: 20px !important;
	}
}

.avatar-input::placeholder {
	transform: opacity(1);
	font-weight: bold;
	color: #707070;
}

/* CONTENT PAGE - GIFS */
:root {
  --shadow: 4px 6px 12px 2px rgba(0, 0, 0, 0.25);
}
.shadow {
	box-shadow: var(--shadow);
}

.popout {
	display: flex;
	width: unset !important;
	align-items: center;
	background-color: white;
	border: 1px solid black;
	border-radius: 20px;
	padding: 4px 8px;
	color: black;
	font-size: 2vmin;
}

.search-box {
    text-align: left;
    border-right: 2px solid rgba(255,255,255,.0);
	overflow-x: auto; /* Enable horizontal scroll */
	white-space: nowrap; /* Do not wrap content in a new line */
	scrollbar-width: none; /* Hide scrollbar for Firefox */
	-ms-overflow-style: none;  /* Hide scrollbar for Internet Explorer 10+ */
}
.search-box::-webkit-scrollbar {display: none;} /* Hide scrollbar for Chrome, Safari and Opera */

/* Animations */
.typer {
	animation: 
		typewriter 0.9s steps(44) 0.1s 1 normal both,
		blinkTextCursor 0.3s steps(44) infinite normal;
}

@keyframes typewriter{
	from {
		overflow-x: auto;
		width: 0;
	}
	to {
		overflow-x: none;
		width: 380px;
	} /* must be same size as the construct container */
}

@keyframes blinkTextCursor{
	from {border-right-color: rgba(255,255,255,.0);}
	to {border-right-color: transparent;}
}

.highlight {
	margin: 0 -4px !important;
	background: linear-gradient(to right, black 50%, rgba(255,255,255,.0) 50%);
	background-size: 200% 100%;
	background-position: right bottom;
	color: black;
	transition: all .75s ease-out;
}

.highlighted {
	background-position: left bottom;
	color: white !important;
}

/* CHECK PAGE */
.radio-group {
	color: black;
}

.radio-button, .radio-button-selected {
	cursor: pointer;
	display: flex;
	align-items: center;
	padding-left: 9vmin;
	padding-right: 6vmin;
	font-size:  2.2vmin !important;
	border: none;
	color: #fff !important;
	text-align: left !important;
	text-wrap: wrap;
	white-space: normal;
	border-radius: 80px;
}

.radio-button > p,
.radio-button-selected > P {
/* 	margin: auto 0; */
}

@media only screen and (max-width: 460px) {
	.radio-button, .radio-button-selected {
		font-size:  2vmin !important;
	}
}

.radio-button > p, .radio-button-selected > p {
	margin: auto 0;
}

.radio-button {
	background: url('assets/buttons/selection_unselected.png') no-repeat;
	background-size: contain;
}

.radio-button.rtl {
	text-align: right !important;
	direction: rtl !important;
}

.radio-button-selected {
	background: url('assets/buttons/selection_selected.png') no-repeat;
	background-size: contain;
}

.radio-button-selected.rtl {
	text-align: right !important;
	direction: rtl !important;
}

.bubble2 {
	background: url('assets/elements/speech_bubble_b.png') no-repeat;
	background-size: contain;
}

.dark {
 background-color: rgba(10,10,10,0.75);
}

/* MODALS PAGE */
.modal, .modal_selected{
	cursor: pointer;
	display: flex;
	text-align: left;
	padding: 0 3vmin;
	color: black;
	
	font-size: 2vmin !important;
}

.modal {
	cursor: pointer;
	background: url('assets/buttons/modal_button.png') no-repeat;
	background-size: contain;
}

.modal_selected {
	cursor: pointer;
	background: url('assets/buttons/modal_button_visited.png') no-repeat;
	background-size: contain;
}

.modal-close {
	background: url('assets/buttons/modal-close.png') no-repeat;
	background-size: contain;
}

.open-modal {
	display: flex;
	height: unset !important;
	background-color: white;
}

.modal-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 5.2vmin 7.8vmin;
}

.modal-content > p:first-child {
	border-bottom: 1px solid black;
	padding-bottom: 1.3vmin;
	font-weight: bold;
}

.modal-content > p:last-child {
	padding-top: 2.6vmin;
}

/* GOOGLE IT PAGE */
.google {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.google > p {
	font-size: 8vmin !important;
	font-weight: bold;
	text-transform: uppercase;
}

.red {
	color: #D95040;
}

.blue {
	color: #5381EC;
}

.green {
	color: #5FA45B;
}

.yellow {
	color: #F0BD41;
}

.search-bar {
	height: 13vmin;
	width: 80%;
	margin: 0 auto;
	background: url('assets/elements/googleit_searchbar.png') no-repeat;
	background-size: contain;
}


/* GAME PAGE */
.feedback-positive {
	background: url('assets/elements/questionbox-positive-000.png') no-repeat;
	background-size: contain;
}

.feedback-negative {
	background: url('assets/elements/questionbox-negative-000.png') no-repeat;
	background-size: contain;
}

.progress-dots {
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.empty, .positive, .negative {
	min-width: 6%;
	min-height: 6%;
	margin: 0.5%;
}

.empty {
	background: url('assets/elements/circle.png') no-repeat;
	background-size: contain;
	background-position: 50%;
}

.positive {
	background: url('assets/elements/correct_tick_small.png') no-repeat;
	background-size: contain;
	background-position: 50%;
}

.negative {
	background: url('assets/elements/incorrect_tick_small.png') no-repeat;
	background-size: contain;
	background-position: 50%;
}

/* QUESTIONS */
.scroll-box {
	display: flex;
	flex-direction: column;
	margin: 1vmin;
	padding: 0 1vmin;
	overflow: auto;
	border-radius: 0;
}

.sms-bubble p,
.sms-bubble a,
.email p,
.email a,
.email li,
.whatsapp p,
.whatsapp a {
	font-size: 2vmin;
}

.sms-message {
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: 2.8vmin;
	background-color: #FFF;
	border: 0.26vmin solid black;
	box-shadow: var(--shadow);
}

.sms-topbar {
	display: flex;
	padding: 0.5vmin 2vmin;
	background-color: #E1E1E1;
	border-radius: 2.8vmin 2.8vmin 0 0;
}

.caret {
	display: flex;
	align-items: center;
	margin: 0 2vmin;
}

.back-caret {
	border: solid black;
	border-width: 0 0.3vmin 0.3vmin 0;
	display: inline-block;
	padding: 1vmin;
	transform: rotate(135deg);
}

.sms-topbar .sender {
	display: flex;
	flex-direction: column;
	position: relative;
	left: calc(50% - 10.26vmin);
}

.icon {
	background: url('assets/elements/sender.png') no-repeat;
	background-size: contain;
	background-position: 50%;
	margin: 1vmin;
	width: 8vmin;
	height: 8vmin;
}

.sms-bubble {
	position: relative;
	margin: 1.5vmin 3.9vmin;
	margin-bottom: 3vmin;
	padding: 1.3vmin;
	border-radius: 2.6vmin 2.6vmin 2.6vmin 0;
	background: #DBEFFD;
	color: #fff;
}

.sms-bubble:before {
	content: "";
	width: 0px;
	height: 0px;
	position: absolute;
	border-left: 1.1vmin solid #DBEFFD;
	border-right: 1.1vmin solid transparent;
	border-top: 1.1vmin solid #DBEFFD;
	border-bottom: 1.1vmin solid transparent;
	left: 0px;
	bottom: -2.1vmin;
}

@media only screen and (max-width: 260px) {
	.sms-bubble {
		margin: 1.5vmin 0;
		margin-bottom: 3vmin;
	}
}

.email {
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: 2.8vmin;
	background-color: #FFF;
	border: 0.26vmin solid black;
	box-shadow: var(--shadow);
}

.email-topbar {
	display: flex;
	justify-content: flex-start;
	height: 8vmin;
	padding: 0 2vmin;
	background-color: #E1E1E1;
	border-radius: 2.8vmin 2.8vmin 0 0;
}

.email-topbar > p.strong {
	margin: auto 0;
}

.email-header {
	margin: 1vmin 0;
}

.email-body.body-row {
	display: flex;
	flex-direction: row;
}

.email-body-row.rtl {
	flex-direction: row-reverse;
}

.body-col-60 {
	width: 60%;
}

.body-col-40 {
	width: 40%;
	padding-left: 1vmin;
}

.email-body-row. rtl .body-col-40 {
	padding-left: 0;
	padding-right: 1vmin;
}

.qr-img {
	margin: 1vmin;
	width: 12vmin;
	height: 12vmin;
}

.qr-img a {
	font-size: 0 !important;
	margin: 0 !important;
}

.qr-img img {
	background: url('assets/elements/qr_code.png') no-repeat;
	background-size: contain;
	background-size: 90%;
	background-position: 50%;
	width: 100%;
	height: 100%;
}

.qr-img.question-2 img {
	background: url('assets/qr_codes/question-2.png') no-repeat;
	background-size: contain;
}

.qr-img.question-11 img {
	background: url('assets/qr_codes/question-11.png') no-repeat;
	background-size: contain;
}

.qr-img.question-13 img {
	background: url('assets/qr_codes/question-13.png') no-repeat;
	background-size: contain;
}

.qr-img.question-15 img {
	background: url('assets/qr_codes/question-15.png') no-repeat;
	background-size: contain;
}

.button-box {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	margin: 1vmin 0;
}

.button-box.rtl .blue-button, 
.button-box.rtl .red-button {
	margin-right: 1vmin;
}

.blue-button,
.red-button {
	margin: 1vmin;
	margin-right: auto;
	padding: 1.5vmin 4.5vmin;
	border-radius: .5vmin;
	text-decoration: none;
	font-weight: bold;
	color: white;
	text-align: center;
}

.blue-button {
	background-color: #3D56A7;
}

.red-button {
	background-color: #C13637;
	margin-right: 1vmin;
}

.feedbacks {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
}

.whatsapp {
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: 2.8vmin;
	border: 0.26vmin solid black;
	box-shadow: var(--shadow);
	background: url('assets/elements/whatsapp_messsage_background.png') no-repeat;
	background-size: cover;
}

.app-topbar {
	display: flex;
	padding: 0.5vmin 2vmin;
	background-color: #2D8367;
	border-radius: 2.7vmin 2.7vmin 0 0;
}

.app-topbar .sender {
	display: flex;
	flex-direction: row;
}

.app-topbar .sender-online {
	display: flex;
	flex-direction: column;
	color: white;
}

.sender-online p {
	color: white;
}

.online {
	margin: 0 !important; 
	font-size: 2vmin;
}

app-topbar .caret {
	display: flex;
	align-items: center;
	margin: 0 2vmin;
}

.app-topbar .back-caret {
	border: solid white;
	border-width: 0 0.3vmin 0.3vmin 0;
	display: inline-block;
	padding: 1vmin;
	transform: rotate(135deg);
}

.app-bubble {
	position: relative;
	margin: 0.9vmin;
	padding: 1vmin 2vmin;
	box-shadow: 0.13vmin 0.25vmin 0.6vmin 0.13vmin rgba(10, 10, 10, 0.1);
}

.app-bubble.you {
/* 	text-align: left; */
/* 	margin-right: 4vmin; */
	
	margin-right: auto;
	border-radius: 0 2.6vmin 2.6vmin 2.6vmin;
	background: #DBEFFD;
}

.app-bubble.you.rtl  {
	margin-right: 0.9vmin;
	margin-left: auto;
} 

.app-bubble.me {
	margin-left: auto;
	border-radius: 2.6vmin 0 2.6vmin 2.6vmin;
	background: #E4F2CA;
}

.app-bubble.me.rtl {
	margin-left: 0.9vmin;
	margin-right: auto;
}
.app-bubble.you:before,
.app-bubble.me:before {
	content: "";
	width: 0px;
	height: 0px;
	position: absolute;
}

.app-bubble.you:before {
	border-top: 1vmin solid #DBEFFD;
	border-right: 1vmin solid #DBEFFD;
	border-bottom: 1vmin solid transparent;
	border-left: 1vmin solid transparent;
	left: -0.8vmin;
	top: 0px;
}

.app-bubble.me:before {
	border-top: 1vmin solid #E4F2CA;
	border-right: 1vmin solid transparent;
	border-bottom: 1vmin solid transparent;
	border-left: 1vmin solid #E4F2CA;
	right: -0.8vmin;
	top: 0px;
}

.bubble-row {display: flex;}

a.true {display: none;}