/**
 * alert-box component
 */
.motravo.spa .alert-box {
}

/**
 * chatgpt V2 back button component
 */
.motravo-chatgpt-v2-back-button {
	display: block;
	
	position: relative;
	padding: 1px;
	
	user-select: none;
	border: 1px solid transparent;
	
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	
	text-decoration: none;
	
	cursor: pointer;
	
	padding: 10px 35px;
	margin: 0 10px 0 0;
	
	min-width: 160px;
	max-width: 260px;
	
	font-size: 20px;
	color: #fff;
	font-weight: 600;
	border-radius: 10px;
	background: #00e2ea;
	
	border-left-color: #00f;
	border-right-color: #00f;
	border-bottom-color: #00f;
	box-shadow: 0 6px 0 0px #00a9b0;
	border-top-color: transparent;
	
	line-height: 1.5;
	
	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	
	outline: none !important;
	
}

.motravo-chatgpt-v2-back-button:hover {
	border-top-color: transparent;
	
	color: #000;
	background: #fff;
}

.motravo-chatgpt-v2-back-button.motravo-chatgpt-v2-back-button--disabled {
	border-left-color: #6b7986;
	border-right-color: #6b7986;
	border-bottom-color: #6b7986;
	box-shadow: 0 6px 0 0px #6b7986;
	border-top-color: transparent;
	
	opacity: .65;
}

.motravo-chatgpt-v2-back-button.motravo-chatgpt-v2-back-button--disabled:hover {
	border-top-color: transparent;
	
	border-left-color: #6b7986;
	border-right-color: #6b7986;
	border-bottom-color: #6b7986;
	box-shadow: 0 6px 0 0px #6b7986;
	
	color: #000;
	background: #fff;
}

.motravo-chatgpt-v2-back-button > .motravo-chatgpt-v2-back-button--text {
}

/**
 * start tile component
 */
 .motravo-chatgpt-v2-next-button {
	display: block;
	
	position: relative;
	padding: 1px;
	
	user-select: none;
	border: 1px solid transparent;
	
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	
	text-decoration: none;
	
	cursor: pointer;
	
	padding: 10px 35px;
	margin: 0 10px 0 0;
	min-width: 160px;
	max-width: 260px;
	
	font-size: 20px;
	color: #fff;
	font-weight: 600;
	border-radius: 10px;
	background: #3c4751;
	
	border-left-color: #00f;
	border-right-color: #00f;
	border-bottom-color: #00f;
	box-shadow: 0 6px 0 0px #00f;
	border-top-color: transparent;
	
	line-height: 1.5;
	
	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	
	outline: none !important;
	
	
}

.motravo-chatgpt-v2-next-button:hover {
	border-top-color: transparent;
	
	color: #000;
	background: #fff;
}

.motravo-chatgpt-v2-next-button.motravo-chatgpt-v2-next-button--disabled {
	border-left-color: #6b7986;
	border-right-color: #6b7986;
	border-bottom-color: #6b7986;
	box-shadow: 0 6px 0 0px #6b7986;
	border-top-color: transparent;
	
	opacity: .65;
}

.motravo-chatgpt-v2-next-button.motravo-chatgpt-v2-next-button--disabled:hover {
	border-top-color: transparent;
	
	border-left-color: #6b7986;
	border-right-color: #6b7986;
	border-bottom-color: #6b7986;
	box-shadow: 0 6px 0 0px #6b7986;
	
	color: #000;
	background: #fff;
}

.motravo-chatgpt-v2-next-button > .motravo-chatgpt-v2-next-button--text {
}
.motravo-chatgpt-v2-next-button > .motravo-chatgpt-v2-next-button--tooltip {
	display: none;
	position: absolute;
	
	width: 16em;
	height: 3em;
	
	bottom: 1em;
	right:  1em;
	
	padding: 0.5em;
	
	color: #000;
	background-color: #aaa;
	border: 1px solid #aaa;
	border-radius: 0.5em;
	
	font-size: 1em;
	font-weight: normal;
	
	word-break: break-all;
	
	opacity: 1.0;
}
.motravo-chatgpt-v2-next-button.motravo-chatgpt-v2-next-button--disabled:hover > .motravo-chatgpt-v2-next-button--tooltip {
	display: block;
}

/**
 * start tile component
 */
.motravo-chatgpt-v2-none-of-it-button {

	display: block;

	padding: 10px;

	width: 30%;
	margin: 0px auto 5px auto;

	border:  1px solid #ccc;
	
	text-align: center;
	white-space: nowrap;
	
	text-decoration: none;
	
	cursor: pointer;
	
}

@media (max-width: 400px) {
	
	.motravo-chatgpt-v2-none-of-it-button {
		width: 60%;
	}
}

/**
 * chatgpt V2 channel overlay
 */

.motravo.spa.chatgpt-v2 .chatgpt-v2-channel-overlay {
}

.motravo.spa.chatgpt-v2 .chatgpt-v2-channel-overlay .motravo-overlay--container {
	width: 80%;
	max-height: 100vh;
}

.motravo.spa.chatgpt-v2 .chatgpt-v2-channel-overlay .motravo-overlay--container--header {
	border: none;
}

.motravo.spa.chatgpt-v2 .chatgpt-v2-channel-overlay .motravo-overlay--container--header > h4.modal-title{
	/*font-family: Montserrat, sans-serif;*/
	text-align: center;
}

.motravo.spa.chatgpt-v2 .chatgpt-v2-channel-overlay .motravo-overlay--container--body {
}

.motravo.spa.chatgpt-v2 .chatgpt-v2-channel-overlay .motravo-overlay--container--body > .channel-overlay-body {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	
}

.motravo.spa.chatgpt-v2 .chatgpt-v2-channel-overlay .motravo-overlay--container--body > .channel-overlay-body > .channel-overlay-body--item {
	flex-basis: 30%;
	padding: 1px;
}

.motravo.spa.chatgpt-v2 .chatgpt-v2-channel-overlay .motravo-overlay--container--body > .channel-overlay-body > .channel-overlay-body--item > hr {
	display: block;
	width: 70%;
	margin: 1em auto 1em auto;
	border: 1px solid #000;
}

.motravo.spa.chatgpt-v2 .chatgpt-v2-channel-overlay .motravo-overlay--container--body > .channel-overlay-body > .channel-overlay-body--item > img {
	display: block;
	margin: 0 auto 0 auto;
	
	max-width:  100%;
	max-height: 100%;
	
	width:  auto;
	height: auto;
}

.motravo.spa.chatgpt-v2 .chatgpt-v2-channel-overlay .motravo-overlay--container--body > .channel-overlay-body > .channel-overlay-body--item > p {
	display: block;
	
	text-align: center;
	
	margin: 0 auto 0 auto;
	width: 80%;
}

/** mobile viewport **/
@media screen and (max-width: 576px) {
	.motravo.spa.chatgpt-v2 .chatgpt-v2-channel-overlay .motravo-overlay--container--body > .channel-overlay-body > .channel-overlay-body--item {
		
		flex-basis: 50%;
	}
}

/**
 * chatgpt V2 tile component
 */
.motravo-chatgpt-v2-question-answer {
	
	padding: 15px;
	text-align: center;
	cursor: pointer;
	
	max-width:  25%;
	flex-basis: 25%;
}

.motravo-chatgpt-v2-question-answer > .motravo-chatgpt-v2-question-answer--box {
	position: relative;
}

.motravo-chatgpt-v2-question-answer > .motravo-chatgpt-v2-question-answer--box > .highlight {
	width: 100%;
	height: 100%;
	color: #00e2ea;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0;
	left: 0;
	border: 3px solid #57ffff;
	opacity: 0;
	background: rgba(0,0,0,0.6);
}
.motravo-chatgpt-v2-question-answer.selected > .motravo-chatgpt-v2-question-answer--box > .highlight {
	opacity: 1;
}

.motravo-chatgpt-v2-question-answer > .motravo-chatgpt-v2-question-answer--box > .highlight > i {
	opacity: 1;
	color: #57ffff;
	
	width: 50px;
	height: 50px;
	text-align: center;
	line-height: 47px;
	border: 3px solid;
	border-radius: 50%;

	font-size: 23px;
}

.motravo-chatgpt-v2-question-answer > .motravo-chatgpt-v2-question-answer--box > img {
	width: 100%;
	height: auto;
	min-height: 366px;
	object-fit: cover;
}

.motravo-chatgpt-v2-question-answer > b {
	padding: 20px 0 0 0;
	display: block;
	font-size: 25px;

	word-wrap: break-word;
}

/** mobile viewport **/
@media screen and (max-width: 821px) {
	.motravo-chatgpt-v2-question-answer {
		
		max-width:  33%;
		flex-basis: 33%;
	}
	
	.motravo-chatgpt-v2-question-answer > .motravo-chatgpt-v2-question-answer--box > img {
		
		min-height: auto;
	}
}

@media screen and (max-width: 576px) {
	.motravo-chatgpt-v2-question-answer {
		
		max-width:  50%;
		flex-basis: 50%;
	}
	
	.motravo-chatgpt-v2-question-answer > .motravo-chatgpt-v2-question-answer--box > img {
		
		min-height: auto;
	}
}

/**
 * chatgpt V2 question component
 */
 .motravo.motravo-chatgpt-v2-question {
}

.motravo.motravo-chatgpt-v2-question > h2{
	
	/* padding: 1em 0 1em 0; */
	
	color:#000;
	font-style: bold;
	font-size: 22px;
	
	margin: 60px 0 20px 0;
	
	/*font-family: 'Montserrat', sans-serif;*/
	font-size: 40px;
	font-weight: 600;
	text-align: center;
}

.motravo.motravo-chatgpt-v2-question > h2:first-of-type {

	margin: 0px 0 20px 0;
}

.motravo.motravo-chatgpt-v2-question > p {
	text-align: center;
}


/** answers **/

.motravo.motravo-chatgpt-v2-question > .motravo-chatgpt-v2-question--answer-container {
	
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-top;
	justify-content: space-evenly;
	
	width: 100%;
}

/**
 * chatgpt V2 run component
 */

 .motravo.motravo-chatgpt-v2-run {

	padding: 1px;
}

.motravo.motravo-chatgpt-v2-run  ul {

	padding: 1px 1px 1px 1px;

	list-style: none;
	list-style-type: none;
	list-style-position: inside;

	border: 1px solid transparent;
	border-top: 1px solid #fff;

	width: 30%;
	margin: 0 auto 0 auto;
}

@media (max-width: 400px) {
	
	.motravo.motravo-chatgpt-v2-run  ul {
		width: 60%;
	}
}

.motravo.motravo-chatgpt-v2-run ul > li {
	padding: 5px;

	text-align: center;

	border:  1px solid #ccc;
	padding: 10px;

	margin: 5px 0 5px 0;

	cursor: pointer;
}

/**
 * start tile component
 */
.motravo-chatgpt-v2-update-button {
	display: block;
	
	position: relative;
	padding: 1px;
	
	user-select: none;
	border: 1px solid transparent;
	
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	
	text-decoration: none;
	
	cursor: pointer;
	
	padding: 10px 35px;
	margin: 0 10px 0 0;
	min-width: 160px;
	max-width: 260px;
	
	font-size: 20px;
	color: #fff;
	font-weight: 600;
	border-radius: 10px;
	background: #3c4751;
	
	border-left-color: #00f;
	border-right-color: #00f;
	border-bottom-color: #00f;
	box-shadow: 0 6px 0 0px #00f;
	border-top-color: transparent;
	
	line-height: 1.5;
	
	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	
	outline: none !important;
	
	
}

.motravo-chatgpt-v2-update-button:hover {
	border-top-color: transparent;
	
	color: #000;
	background: #fff;
}

.motravo-chatgpt-v2-update-button.motravo-chatgpt-v2-update-button--disabled {
	border-left-color: #6b7986;
	border-right-color: #6b7986;
	border-bottom-color: #6b7986;
	box-shadow: 0 6px 0 0px #6b7986;
	border-top-color: transparent;
	
	opacity: .65;
}

.motravo-chatgpt-v2-update-button.motravo-chatgpt-v2-update-button--disabled:hover {
	border-top-color: transparent;
	
	border-left-color: #6b7986;
	border-right-color: #6b7986;
	border-bottom-color: #6b7986;
	box-shadow: 0 6px 0 0px #6b7986;
	
	color: #000;
	background: #fff;
}

.motravo-chatgpt-v2-update-button > .motravo-chatgpt-v2-update-button--text {
}
.motravo-chatgpt-v2-update-button > .motravo-chatgpt-v2-update-button--tooltip {
	display: none;
	position: absolute;
	
	width: 16em;
	height: 3em;
	
	bottom: 1em;
	right:  1em;
	
	padding: 0.5em;
	
	color: #000;
	background-color: #aaa;
	border: 1px solid #aaa;
	border-radius: 0.5em;
	
	font-size: 1em;
	font-weight: normal;
	
	word-break: break-all;
	
	opacity: 1.0;
}
.motravo-chatgpt-v2-update-button.motravo-chatgpt-v2-update-button--disabled:hover > .motravo-chatgpt-v2-update-button--tooltip {
	display: block;
}
/**
 * login-social-collect-data component
 */
.motravo .login-social-collect-data {
	
}

.motravo .login-social-collect-data fieldset {
	
	padding:  10px;
	max-width: initial;
	width: 100%;
	height: auto;
	background-image: initial;
	background-repeat: initial;
	background-size: initial;
	margin: 0 auto;
	
	border: 2px solid rgb(0,226,235);
	border-radius: 30px;
}

.motravo .login-social-collect-data fieldset .acknowledge {
	text-align: left;
}
.motravo .login-social-collect-data fieldset .acknowledge > .container {
	position: relative;
	font-size: 1rem;
}
.motravo .login-social-collect-data fieldset .acknowledge > .container > input[type="checkbox"] {
	position: relative;
	
	width:  1em;
	height: 1em;
	
	background-color: #3c4751;
	
	padding: 1px;
	
	cursor: pointer;
}
.motravo .login-social-collect-data fieldset .acknowledge > .container > input[type="checkbox"]:focus {
	transition: .50s ease-in-out;
}
.motravo .login-social-collect-data fieldset .acknowledge > .container > input[type="checkbox"]:hover,
.motravo .login-social-collect-data fieldset .acknowledge > .container > input[type="checkbox"]:checked {
	background-color: #0ff2fc;
}

.motravo .login-social-collect-data fieldset .acknowledge > .container > input[type="checkbox"]:checked,
.motravo .login-social-collect-data fieldset .acknowledge > .container > input[type="checkbox"]:checked:before {
	/*
	position: absolute;
	top:  0;
	left: 15px;
	*/
	width:  1em;
	height: 1em;
	line-height: 1em;
	text-align: center;
	color: #000;
}

.motravo .login-social-collect-data fieldset .acknowledge > .container > input[type="checkbox"]:checked:before {
	content: '✔';
}

/**
 * multi-select component
 */
.motravo.spa .motravo-multi-select {

	position: relative;
	
	width: 100%;

	background-color: white;

	padding: 5px;
	height: 63px;
	font-size: 18px;
	border: 2px solid var( --motravo-form-field-border-color, #0ff2fc );
	border-radius: 10px;
	font-weight: 500;
}

.motravo.spa .motravo-multi-select > .motravo-multi-select--container {
	position: absolute;
	top:  95%;
	left: 0;

	width: 100%;
	max-height: 10em;

	border-radius: 0 0 5px 5px;
	box-shadow: 0 6px 12px rgba(8, 8, 8, 0.2);

	z-index: 100;

	background-color: #fff;
}

.motravo.spa .motravo-multi-select > .motravo-multi-select--container > ul {
	width: 100%;

	list-style-type: none;

	overflow: auto;

	max-height: 10em;
}

.motravo.spa .motravo-multi-select > .motravo-multi-select--container > ul > li {
	display: block;

	position: relative;

	margin: 0;
	padding: 10px;
	text-align: left;

	height:      3em;
	line-height: 3em;
}
.motravo.spa .motravo-multi-select > .motravo-multi-select--container > ul > li:hover {
	background-color: #aaa;
}

.motravo.spa .motravo-multi-select > .motravo-multi-select--container > ul > li > span {
	display: block;

	position: absolute;
	top:   5px;
	right: 5px;

	width:       1em;
	height:      3em;
	line-height: 3em;

	color: #4ab1e9;
}

.motravo.spa .motravo-multi-select > .motravo-multi-select--hidden {
	display: none;
	visibility: hidden;
}

.motravo.spa .motravo-multi-select > .motravo-multi-select--header {
	display: block;

	width:  100%;
	height: 100%;
}

.motravo.spa .motravo-multi-select > .motravo-multi-select--header > .motravo-multi-select--header--icon {

	position: absolute;
	top:   12px;
	right:  8px;

	display: block;

	width:       1em;
	height:      1em;
	line-height: 1em;

	color: var( --motravo-form-field-color, black );
}

.motravo.spa .motravo-multi-select > .motravo-multi-select--header > input {
	display: block;

	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	color: var( --motravo-form-field-color, #999 );

	border: 1px solid #fff;

	text-indent: 10px;
	font-size: 13px;
	line-height: 32px;
}

.motravo.spa .motravo-multi-select > .motravo-multi-select--header> input:focus {

	outline: 1px solid red;
}


/**
 * overlay component
 */
.motravo.spa .motravo-overlay {
	
	position: fixed;
	
	top:  0;
	left: 0;
	
	width:  100vw;
	height: 100vh;
	
	z-index: 100;
	
	background-color: transparent;
	
}

.motravo.spa .motravo-overlay > .motravo-overlay--container {
	
	position: absolute;
	/*
	top:  20vh;
	left: 30vw;
	*/
	
	/* hack to center */
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	
	width:  40vw;
	height: fit-content;
	max-height: 80vh;
	min-height: 20vh;
	
	padding: 10px;
	
	border: 1px solid #fff;
	border-radius: 10px;
	background-color: #fff;
	opacity: 1.0;
	
	z-index: 101;
	
	overflow-y: auto;
}

.motravo.spa .motravo-overlay > .motravo-overlay--background {
	content: '';
	
	position: fixed;
	
	top:  0;
	left: 0;
	
	width:  100vw;
	height: 100vh;
	
	background-color: #aaa;
	opacity: 0.7;
}

.motravo.spa .motravo-overlay > .motravo-overlay--container > .motravo-overlay--container--header {
	
	position: relative;
	
	border: 1px solid #fff;
	border-bottom: 1px solid #aaa;
	
	padding: 16px;

	font-size: smaller;
	font-weight: 100;
}

.motravo.spa .motravo-overlay > .motravo-overlay--container > .motravo-overlay--container--header > .close {
	position: absolute;
	top:   16px;
	right: 16px;
}

.motravo.spa .motravo-overlay > .motravo-overlay--container > .motravo-overlay--container--body {
	
	border: 1px solid #fff;
	
	padding: 10px;
}

@media screen and (max-width: 820px) {
	
	.motravo.spa .motravo-overlay > .motravo-overlay--container {
		
		width:  60vw;
		height: fit-content;
	}
}

@media screen and (max-width: 576px) {
	
	.motravo.spa .motravo-overlay > .motravo-overlay--container {
		
		width:  96vw;
		height: fit-content;
	}
}

/**
 * progress-bar component
 */
.motravo.spa .motravo-progress-bar {
	
	width: 100%;
	
	padding: 55px 0 55px 0;
	
}

.motravo.spa .motravo-progress-bar > .motravo-progress-bar--container {
	position: relative;
	
	padding:   0 15px;
	width:     100%;
	max-width: 1200px;
	margin:    0 auto;
}

.motravo.spa .motravo-progress-bar > .motravo-progress-bar--container > .motravo-progress-bar--marker {
	position: absolute;
	top:-15px;
	left: -5px;
	
	height: 50px;
	width: 50px;
	
	font-weight: 600;
	line-height: 50px;
	text-align: center;
	border: 3px solid #fff;
	border-radius: 50%;
	box-shadow: 0 10px 10px 0 grey;
	background: #0ff2fc;
	z-index: 1;
}



.motravo.spa .motravo-progress-bar > .motravo-progress-bar--container > .motravo-progress-bar--track {
	position: relative;
	
	display: flex;
	
	height: 25px;
	border-radius: 20px;
	
	overflow: hidden;
	font-size: .75rem;
	background-color: #e9ecef;
}

.motravo.spa .motravo-progress-bar > .motravo-progress-bar--container > .motravo-progress-bar--track > .motravo-progress-bar--track--fill {
	width: 20px;
	background: #3C4751;
}

/**
 * rating component
 */

.motravo.spa .motravo-rating {
	margin:  0;
	padding: 1px;

	float: right;
	border: none;

	width: 100%;

	font-family: 'Font Awesome 5 Pro Solid';

	font-size: 1.25em;

	box-sizing: border-box;
}

.motravo.spa .motravo-rating i {
	font-family: 'Font Awesome 5 Pro Solid';
}

.motravo.spa .motravo-rating input {
	display: none;
}
.motravo.spa .motravo-rating label {
	float: right;
	color: #d9d9d9;

	padding: 0 3px 0 3px;

}
.motravo.spa .motravo-rating label:before {
	/*
	margin-right: 5px;
	content: "\f005";
	font-family: 'Font Awesome 5 Pro';
	font-size: 1.25em;
	*/
}
.motravo.spa .motravo-rating label:hover,
.motravo.spa .motravo-rating label:hover ~ label {
	color: #0ff2fc;
	transition: 0.2s;
}
.motravo.spa .motravo-rating input:checked ~ label {
	color: #0ff2fc;
}
.motravo.spa .motravo-rating input:checked ~ label:hover,
.motravo.spa .motravo-rating input:checked ~ label:hover ~ label {
	color: #0ff2fc;
	transition: 0.2s;
}

/* Half-star*/
.motravo.spa .motravo-rating label.half-star {
	position: relative;
	left: 3px;

	padding: 0 0 0 0;
}
.motravo.spa .motravo-rating label.half-star i.fa-star-half {
	position: absolute;
	margin:  0 0 0 0;
	padding: 0 0 0 0;
}
.motravo.spa .motravo-rating label.half-star i.fa-star-half:before {

	position: absolute;
	content: "\f089";
	padding-right: 0;
	
}

/**
 * start tile component
 */
.motravo-start-back-button {
	display: block;
	
	position: relative;
	padding: 1px;
	
	user-select: none;
	border: 1px solid transparent;
	
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	
	text-decoration: none;
	
	cursor: pointer;
	
	padding: 10px 35px;
	margin: 0 10px 0 0;
	
	min-width: 160px;
	max-width: 260px;
	
	font-size: 20px;
	color: #fff;
	font-weight: 600;
	border-radius: 10px;
	background: #00e2ea;
	
	border-left-color: #00f;
	border-right-color: #00f;
	border-bottom-color: #00f;
	box-shadow: 0 6px 0 0px #00a9b0;
	border-top-color: transparent;
	
	line-height: 1.5;
	
	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	
	outline: none !important;
	
}

.motravo-start-back-button:hover {
	border-top-color: transparent;
	
	color: #000;
	background: #fff;
}

.motravo-start-back-button.motravo-start-back-button--disabled {
	border-left-color: #6b7986;
	border-right-color: #6b7986;
	border-bottom-color: #6b7986;
	box-shadow: 0 6px 0 0px #6b7986;
	border-top-color: transparent;
	
	opacity: .65;
}

.motravo-start-back-button.motravo-start-back-button--disabled:hover {
	border-top-color: transparent;
	
	border-left-color: #6b7986;
	border-right-color: #6b7986;
	border-bottom-color: #6b7986;
	box-shadow: 0 6px 0 0px #6b7986;
	
	color: #000;
	background: #fff;
}

.motravo-start-back-button > .motravo-start-back-button--text {
}

/*

		.tranvling .travlingBtn button.btn { padding: 10px 35px; margin: 0 10px 0 0; min-width: 160px; display: inline-block; font-size: 20px; color: #fff; font-weight: 600; border-radius: 10px; box-shadow: 0 6px 0 0px #6b7986; background: #3c4751; }
		.tranvling .travlingBtn button.btn:hover { color: #000; background: #fff; }
		.tranvling .travlingBtn button.btn:nth-child(2):hover { background: #fff; }
		.tranvling .travlingBtn button.btn:nth-child(2) { color:#3c4751; box-shadow: 0 6px 0 0px #00a9b0; background: #00e2ea; }
*/

/**
 * start channel overlay
 **/

.motravo.spa.start .start-channel-overlay {
}

.motravo.spa.start .start-channel-overlay .motravo-overlay--container {
	width: 80%;
	max-height: 100vh;
}

.motravo.spa.start .start-channel-overlay .motravo-overlay--container--header {
	border: none;
}

.motravo.spa.start .start-channel-overlay .motravo-overlay--container--header > h4.modal-title{
	/*font-family: Montserrat, sans-serif;*/
	text-align: center;
}

.motravo.spa.start .start-channel-overlay .motravo-overlay--container--body {
}

.motravo.spa.start .start-channel-overlay .motravo-overlay--container--body > .channel-overlay-body {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	
}

.motravo.spa.start .start-channel-overlay .motravo-overlay--container--body > .channel-overlay-body > .channel-overlay-body--item {
	flex-basis: 30%;
	padding: 1px;
}

.motravo.spa.start .start-channel-overlay .motravo-overlay--container--body > .channel-overlay-body > .channel-overlay-body--item > hr {
	display: block;
	width: 70%;
	margin: 1em auto 1em auto;
	border: 1px solid #000;
}

.motravo.spa.start .start-channel-overlay .motravo-overlay--container--body > .channel-overlay-body > .channel-overlay-body--item > img {
	display: block;
	margin: 0 auto 0 auto;
	
	max-width:  100%;
	max-height: 100%;
	
	width:  auto;
	height: auto;
}

.motravo.spa.start .start-channel-overlay .motravo-overlay--container--body > .channel-overlay-body > .channel-overlay-body--item > p {
	display: block;
	
	text-align: center;
	
	margin: 0 auto 0 auto;
	width: 80%;
}

/** mobile viewport **/
@media screen and (max-width: 576px) {
	.motravo.spa.start .start-channel-overlay .motravo-overlay--container--body > .channel-overlay-body > .channel-overlay-body--item {
		
		flex-basis: 50%;
	}
}

/**
 * start tile component
 */
.motravo-start-next-button {
	display: block;
	
	position: relative;
	padding: 1px;
	
	user-select: none;
	border: 1px solid transparent;
	
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	
	text-decoration: none;
	
	cursor: pointer;
	
	padding: 10px 35px;
	margin: 0 10px 0 0;
	min-width: 160px;
	max-width: 260px;
	
	font-size: 20px;
	color: #fff;
	font-weight: 600;
	border-radius: 10px;
	background: #3c4751;
	
	border-left-color: #00f;
	border-right-color: #00f;
	border-bottom-color: #00f;
	box-shadow: 0 6px 0 0px #00f;
	border-top-color: transparent;
	
	line-height: 1.5;
	
	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	
	outline: none !important;
	
	
}

.motravo-start-next-button:hover {
	border-top-color: transparent;
	
	color: #000;
	background: #fff;
}

.motravo-start-next-button.motravo-start-next-button--disabled {
	border-left-color: #6b7986;
	border-right-color: #6b7986;
	border-bottom-color: #6b7986;
	box-shadow: 0 6px 0 0px #6b7986;
	border-top-color: transparent;
	
	opacity: .65;
}

.motravo-start-next-button.motravo-start-next-button--disabled:hover {
	border-top-color: transparent;
	
	border-left-color: #6b7986;
	border-right-color: #6b7986;
	border-bottom-color: #6b7986;
	box-shadow: 0 6px 0 0px #6b7986;
	
	color: #000;
	background: #fff;
}

.motravo-start-next-button > .motravo-start-next-button--text {
}
.motravo-start-next-button > .motravo-start-next-button--tooltip {
	display: none;
	position: absolute;
	
	width: 16em;
	height: 3em;
	
	bottom: 1em;
	right:  1em;
	
	padding: 0.5em;
	
	color: #000;
	background-color: #aaa;
	border: 1px solid #aaa;
	border-radius: 0.5em;
	
	font-size: 1em;
	font-weight: normal;
	
	word-break: break-all;
	
	opacity: 1.0;
}
.motravo-start-next-button.motravo-start-next-button--disabled:hover > .motravo-start-next-button--tooltip {
	display: block;
}
/**
 * start places list component
 */
.motravo-start-places-google-api {
	position: relative;

	width: 100%;

	margin: 10px 10px 10px 10px;
	padding: 1px;

	z-index: 10;
}

.motravo-start-places-google-api .button-row {
	
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: space-around;
	
	margin: 30px 0 0 0;
}
.motravo-start-places-google-api .button-row > .btn {

	display: block;
	
	user-select: none;
	border: 1px solid transparent;
	
	text-align: center;
	white-space: nowrap;
	
	text-decoration: none;
	
	cursor: pointer;
	
	padding: 10px 35px;

	width: 5em;
	
	font-size: 20px;
	color: #fff;
	font-weight: 600;
	border-radius: 10px;
	background: #3c4751;
}

.motravo-start-places-google-api .input-box {
	position: relative;

	margin: 0 auto 0 auto;
	padding: 5px;

	width: 20em;

	border: 1px solid #000;
	border-radius: 5px;
}
.motravo-start-places-google-api .input-box > i {
	display: block;

	position: absolute;
	top:  5px;
	left: 5px;
}
.motravo-start-places-google-api .input-box > input {
	display: block;

	width: 100%;

	border: none;

	padding-left: 20px;
}

.motravo-start-places-google-api .map_container {
	position: relative;
	
	padding: 1px;
}
.motravo-start-places-google-api .map_container> .map {

	position: relative;

	padding: 1px;

	width:  20em;
	height: 20em;

	margin: 0 auto 0 auto;

	z-index: 10;
}

.motravo-start-places-google-api .prediction-list-box {
	position: relative;

	margin: 0 auto 0 auto;
	padding: 1px;

	width: 20em;

	z-index: 20;
}

.motravo-start-places-google-api .prediction-list-box > ul {

	position: absolute;
	top:  0;
	left: 0;

	width: 20em;

	margin: 0;
	padding: 1px;

	list-style-type: none;

	z-index: 100;

	background-color: #fff;
	
	transform: translate3d(0, 0, 0);
}

.motravo-start-places-google-api .prediction-list-box > ul > li {
	border: 1px solid #fff;

	border-bottom: 2px solid #aaa;

	padding: 3px;
}

.motravo-start-places-google-api .prediction-list-box > ul > li > .main {
	font-weight: bold;
}
.motravo-start-places-google-api .prediction-list-box > ul > li > .secondary {
	font-size: smaller;
}

/**
 * start places list component
 */
.motravo-start-places-list {
	width: 100%;

	margin: 10px 10px 10px 10px;

	z-index: 20;
}
.motravo-start-places-list > ul {
	list-style-type: none;

	text-align: center;
}
.motravo-start-places-list > ul > li {
	display: inline-block;

	padding: 5px;
	margin: 0 2em 0 0;

	cursor: pointer;

	border: 1px solid #000;
	background-color: #ccc;

	border-radius: 5px;
}

/**
 * start question component
 */
.motravo.motravo-start-question {
}

.motravo.motravo-start-question > h2,
.motravo > .motravo-page-start  .sub-page  h2 {
	
	/* padding: 1em 0 1em 0; */
	
	color:#000;
	font-style: bold;
	font-size: 22px;
	
	margin: 60px 0 20px 0;
	
	/*font-family: 'Montserrat', sans-serif;*/
	font-size: 40px;
	font-weight: 600;
	text-align: center;
}

.motravo.motravo-start-question > h2:first-of-type,
.motravo > .motravo-page-start  .sub-page  h2:first-of-type {

	margin: 0px 0 20px 0;
}

.motravo.motravo-start-question > p,
.motravo > .motravo-page-start  .sub-page  p {
	text-align: center;
}


/** answers **/

.motravo.motravo-start-question > .motravo-start-question--answer-container {
	
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-top;
	justify-content: space-evenly;
	
	width: 100%;
}

/**
 * start tile component
 */
.motravo.motravo-start-tile {
	
	padding: 15px;
	text-align: center;
	cursor: pointer;
	
	max-width:  25%;
	flex-basis: 25%;
}

.motravo.motravo-start-tile > .motravo-start-tile--box {
	position: relative;
}

.motravo.motravo-start-tile > .motravo-start-tile--box > .highlight {
	width: 100%;
	height: 100%;
	color: #00e2ea;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0;
	left: 0;
	border: 3px solid #57ffff;
	opacity: 0;
	background: rgba(0,0,0,0.6);
}
.motravo.motravo-start-tile.selected > .motravo-start-tile--box > .highlight {
	opacity: 1;
}

.motravo.motravo-start-tile > .motravo-start-tile--box > .highlight > i {
	opacity: 1;
	color: #57ffff;
	
	width: 50px;
	height: 50px;
	text-align: center;
	line-height: 47px;
	border: 3px solid;
	border-radius: 50%;

	font-size: 23px;
}

.motravo.motravo-start-tile > .motravo-start-tile--box > img {
	width: 100%;
	height: auto;
	min-height: 366px;
	object-fit: cover;
}

.motravo.motravo-start-tile > b {
	padding: 20px 0 0 0;
	display: block;
	font-size: 25px;

	word-wrap: break-word;
}

/** mobile viewport **/
@media screen and (max-width: 821px) {
	.motravo.motravo-start-tile {
		
		max-width:  33%;
		flex-basis: 33%;
	}
	
	.motravo.motravo-start-tile > .motravo-start-tile--box > img {
		
		min-height: auto;
	}
}

@media screen and (max-width: 576px) {
	.motravo.motravo-start-tile {
		
		max-width:  50%;
		flex-basis: 50%;
	}
	
	.motravo.motravo-start-tile > .motravo-start-tile--box > img {
		
		min-height: auto;
	}
}

/**
 * translate component
 */
.motravo.spa .motravo-translate {
	width: 100%;
}

.motravo.spa .motravo-translate > ul {
	list-style-type: none;

	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	align-content: center;
}

.motravo.spa .motravo-translate > ul > li {
	
	border: 1px solid transparent;
	border-left: 1px solid #ccc;

	padding: 1px 10px 1px 10px;

	cursor: pointer;
}
.motravo.spa .motravo-translate > ul > li.selected {
	text-decoration: underline;
}
.motravo.spa .motravo-translate > ul > li:first-of-type {
	border-left: 1px solid transparent;
	padding-left: 1px;
}
.motravo.spa .motravo-translate > ul > li:last-of-type {
	padding-right: 1px;
}
.motravo.spa .motravo-translate > ul > li > img {
	display: inline;
	width: 1em;
	height: auto;
}