@font-face {
	font-family: fontawesome;
	src: url("/javax.faces.resource/FontAwesome.otf.xhtml?ln=fonts");
}

body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100vh;
	font-family: 'Candara';
}

#homeForm {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100vh;
	line-height: 1.35;
	display: table;
}

div.login_row {
	display: table-row;
	height: 100%;
}

#teacher {
	background-image: url("/javax.faces.resource/bkground_tp.jpg.xhtml?ln=images");
	background-repeat: no-repeat;
	background-size: auto 100%;
	cursor: pointer;
	text-decoration: none;
}

#teacher:hover {
	opacity: 0.85;
}

#student {
	box-shadow: 12px 0 9px -6px #50321e inset;
	box-sizing: border-box;
}

.content {
	width: 49.9%;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	background-color: #f5ebe1;
}

.content_separator {
	display: table-cell;
	background-color: #50321e;
}

.main_box {
	background-color: #d7af73;
	width: 90%;
	max-width: 700px;
	margin: auto;
	box-shadow: 0px 1px 9px #50321e;
	border: 1px solid #50321e;
	box-sizing: border-box;
	border-radius: 0 0 17px 17px;
	overflow: auto;
	display: block;
}

.box_header {
	display: block;
	padding: 5px;
	color: #fff;
	font-size: 25px;
	font-style: italic;
	font-weight: bold;
	box-sizing: border-box;
	letter-spacing: 0.4px;
	background-color: #d26e0f;
	border-bottom: 1px solid #a0550a;
}

.box_header span, div.box_content span, .login_header p, .login_content p {
	padding: 0;
	margin: 10px 0;
}

.box_content {
	display: block;
	color: #a0550a;
	padding: 15px 5px;
}

.login_background {
	background-image: url("/javax.faces.resource/login_back.png.xhtml?ln=images");
	background-size: 100% 100%;
	width: 90%;
	height: 98%;
	max-height: 930px;
	max-width: 670px;
	margin: auto;
}

.login_container {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.login_box {
	color: #50321e;
	line-height: 1.1;
}

.login_header {
	font-size: 20px;
	font-weight: bold;
	font-family: 'Book Antiqua';
}

.game_title {
	font-size: 30px;
}

.login_content {
	margin: 10px auto;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 250px;
}

.login_content > div {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.login_content label {
	margin-top: 4px;
}

.login_content input {
	margin-top: 4px;
	box-shadow: 0px 0px 1px #50321e;
	width: 150px;
}

.login_content input[type="text"], .login_content input[type="password"] {
	width: 100%;
	box-sizing: border-box;
	text-align: center;
}

.login_content input[type="submit"] {
	margin-top: 10px;
	font-weight: bold;
}

.login_content a {
	margin-top: 5px;
	display: block;
	font-style: italic;
	color: #beb9b4;
}

.login_content .ui-button {
	margin: 10px 0 0 0;
	box-shadow: 0px 0px 1px #50321e;
	width: 150px;
}

/*===================MAIN_MAP======================*/
.ajax_loader {
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 0;
	text-align: center;
	width: 100vw;
	height: 100vh;
	background-image: url("/javax.faces.resource/disabled_back.png.xhtml?ln=images");
	background-repeat: repeat;
}

.ajax_loader img {
	width: 60px;
	height: auto;
	margin-top: 49vh;
}

.default_hidden {
	visibility: hidden;
	overflow: hidden;
	height: 0;
}

.dot_loader {
	display: none;
	background-color: #fff;
}

.default_hidden + .dot_loader {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	height: 100vh;
	width: 100vw;
}

.default_hidden + .dot_loader img {
	width: 100px;
	height: auto;
}

.std_icon:before {
	font-family: fontawesome;
	color: #fff;
	font-size: 25px;
}

.main_map {
	display: flex;
	height: 100vh;
	background-image: url("/javax.faces.resource/pattern.png.xhtml?ln=images");
	background-repeat: repeat;
	background-position: center center;
	position: relative;
}

.event_availability_panel, .map_availability_panel {
	display: flex;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}

.event_availability_panel.overflow_allowed {
	overflow: auto;
}

.main_map .information_panel {
	width: 200px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background-image: url("/javax.faces.resource/disabled_back.png.xhtml?ln=images");
	background-repeat: repeat;
	border-right: 1px solid #fff;
	box-sizing: border-box;
	line-height: 1;
}

.main_map .main_panel {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	height: 100%;
}

.main_panel .map_panel {
	background-image: url("/javax.faces.resource/map.png.xhtml?ln=images");
	background-size: 100% 100%;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	height: fit-content;
	position: relative;
}

.general_info_container .general_info_panel, .map_panel .general_info_panel, .minigame_content .general_info_panel, 
.minigame_panel .general_info_panel, .story_panel .general_info_panel {
	position: absolute;
	z-index: 9999;
	width: 100%;
	height: 100%;
	display: flex;
	top: 0;
	align-items: center;
}

.minigame_content .general_info_panel {
	background-image: url("/javax.faces.resource/disabled_back.png.xhtml?ln=images");
	background-repeat: repeat;
}

.general_info_panel .general_panel {
	width: 60%;
	height: 75%;
	margin: auto;
	background: #222;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	color: #fff;
	box-sizing: border-box;
	padding: 5px;
	border: 1px solid #fff;
}

.general_panel h3 {
	text-align: center;
}

.general_panel p {
	text-align: justify;
	line-height: 1.35;
}

.main_panel .card_panel {
	height: 120px;
	display: flex;
	justify-content: center;
	overflow: hidden;
}

.main_panel .card_panel .card_holder {
	height: auto !important;	
}

.card_panel .user_card {
	width: 9.5%;
	margin-right: 0.5%;
	margin-left: 0.5%;
	position: relative;
}

.card_panel .user_card span {
	display: block;
	position: absolute;
	width: 100%;
	height: 220px;
	top: 30px;
}

.card_panel .user_card img,
.card_panel .flipped, 
.card_panel .card_holder.back {
	max-width: 100%;
	max-height: 100%;
	width: 100%;
	box-sizing: border-box;
}

.card_panel .flipped, 
.card_panel .card_holder.back {
	background-image: url("/javax.faces.resource/card_front_background.png.xhtml?ln=images");
	background-size: 100%;
	height: 220px !important;
}

.card_panel .card_details {
	padding-top: 10px;
	text-align: center;
	cursor: default;
}

.card_panel .card_details .card_title {
	font-size: 15px;
	font-weight: bold;
}

.card_panel .card_details .card_effect {
	font-size: 14px;
	padding-top: 10px;
}

.information_panel .info {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

.info .fixed_info {
	height: 50px;
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.fixed_info a {
	text-shadow: 0 0 7px #000;
}

a.info_icon:before {
	content: "\f05a";
}

a.achievement_icon:before {
	content: "\f091";
}

a.logout_icon:before {
	content: "\f2f5";
}

.info .dynamic_info {
	flex-grow: 1;
	color: #fff;
	border-bottom: 1px solid #fff;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

.dynamic_info .info_holder {
	margin: 6px;
	position: relative;
	flex-grow: 1;
}

.info_holder .dynamic_board {
	position: absolute;
	overflow: auto;
	width: 100%;
	height: 100%;
	text-align: center;
}

.info .title_info {
	border-top: 1px solid #fff;
	box-sizing: border-box;
}

.title_info .game_title, .title_info .game_subtitle {
	text-align: center;
	color: #ff5200;
	padding: 4px 0;
	line-height: 1;
}

.title_info .game_title {
	font-size: 25px;
}

.title_info .game_subtitle {
	font-size: 14px;
}

.info_holder .dynamic_board h4 {
	margin-top: 0; 
	margin-bottom: 15px;
	background-color: #999966;
	padding-top: 15px;
	padding-bottom: 15px;
}

.info_holder .dynamic_board .card_description {
	font-size: 15px;
	text-align: justify;
}

.info_holder .dynamic_board .card_image img {
	margin-top: 40px;
	margin-bottom: 40px;
	width: 100%;
}

.info_holder .dynamic_board .card_effect {
	font-size: 20px;
}
	
.information_panel .user {
	/*height: 240px;*/
	display: flex;
	flex-direction: column;
	position: relative;
}

.user .cloth_changer {
	position: absolute;
	right: 5px;
	top: 5px;
}

.user .cloth_changer:before {
	content: "\f01e";
}

.user .user_points {
	height: 75px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #fff;
	font-size: 15px;
}

.user_points span {
	flex-grow: 1;
	display: flex;
	align-items: center;
}

.user_points .character_name {
	color: #ff5200;
	font-size: 18px;
}
	
.map_margin_top_bottom {
	height: 10%;
}

.map_center {
	height: 85%;
	display: flex;
}

.map_margin_left_right {
	width: 10%;
	height: 100%;
}

.focused_center {
	width: 85%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.focused_row {
	height: 30%;
	display: flex;
	justify-content: center;
}

.focused_column {
	width: 22%;
	position: relative;
	margin-left: 4%;
}

.focused_column img {
	cursor: pointer;
}

.focused_column img.unavailable_game {
	cursor: default;
}

.focused_column.start_column img, .focused_column.end_column img {
	width: 100%;
}

.focused_column.end_column img {
	cursor: default;
	opacity: 0.5;
}

.focused_column.end_column img.available {
	cursor: pointer;
	opacity: 1;
}

.focused_column.start_column img:hover {
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
	-webkit-box-shadow: 0px 0px 10px 2px #333;
	-moz-box-shadow: 0px 0px 10px 2px #333;
	box-shadow: 0px 0px 10px 2px #333;
}

.focused_column.end_column img.available:hover {
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
	-webkit-box-shadow: 0px 0px 10px 2px #ddd;
	-moz-box-shadow: 0px 0px 10px 2px #ddd;
	box-shadow: 0px 0px 10px 2px #ddd;
}

.focused_column:first-child {
	margin-left: 0;
}

.stamp_holder {
	position: absolute !important;
	width: 100% !important;
	height: auto !important;
	z-index: 2;
	-ms-transform: scale(0.8);
    -webkit-transform: scale(0.8);
	transform: scale(0.8);
	background-image: url("/javax.faces.resource/minigames/minigame_front0.png.xhtml?ln=images");
	background-size: 100% 100%;
	margin-top: -55px;
}

.stamp_holder.progress1 {
	background-image: url("/javax.faces.resource/minigames/minigame_front1.png.xhtml?ln=images");
}

.stamp_holder.progress2 {
	background-image: url("/javax.faces.resource/minigames/minigame_front2.png.xhtml?ln=images");
}

.stamp_holder.progress3 {
	background-image: url("/javax.faces.resource/minigames/minigame_front3.png.xhtml?ln=images");
}

.stamp_holder.progress4 {
	background-image: url("/javax.faces.resource/minigames/minigame_front4.png.xhtml?ln=images");
}

.stamp_holder.progress5 {
	background-image: url("/javax.faces.resource/minigames/minigame_front5.png.xhtml?ln=images");
}

.stamp_holder.progress6 {
	background-image: url("/javax.faces.resource/minigames/minigame_front6.png.xhtml?ln=images");
}

.stamp_holder.progress7 {
	background-image: url("/javax.faces.resource/minigames/minigame_front7.png.xhtml?ln=images");
}

.stamp_holder.progress8 {
	background-image: url("/javax.faces.resource/minigames/minigame_front8.png.xhtml?ln=images");
}

.stamp_holder.progress9 {
	background-image: url("/javax.faces.resource/minigames/minigame_front9.png.xhtml?ln=images");
}

.stamp_holder.progress10 {
	background-image: url("/javax.faces.resource/minigames/minigame_front10.png.xhtml?ln=images");
}

.stamp_holder a {
	display: inline-block;
	height: 100%;
	width: auto;
}

.stamp_holder img, .user_class img {
	max-width: 100%;
	max-height: 100%;
	width: 100%;
	display: block;
}

.extended_panel {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
}

.extended_panel .extended_header, .general_panel .general_header {
	height: 50px;
	min-height: 50px;
	display: flex;
	text-align: center;
	align-items: center;
	position: relative;
}

.general_panel .general_header {
	position: relative;
}

.extended_header a, .general_header a {
	position: absolute;
	right: 20px;
	text-shadow: 0 0 7px #000;
}

.extended_header h2, .general_header h2 {
	margin: 0;
	flex-grow: 1;
}

.extended_header a:before, .general_header a:before, .close_icon:before {
	content: "\f057";
}

.extended_panel .extended_body, .general_panel .general_body {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding: 5px;
	overflow: auto;
	height: 100%;
}

.general_panel .general_footer {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	min-height: 50px;
}

.extended_panel .extended_body {
	margin: auto;
	max-width: 1100px;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
}

.extended_panel .minigame_panel {
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	color: #fff;
	position: relative;
	height: 100%;
}

.extended_body .achivement_card {
	display: flex;
	margin: 5px;
	width: 14vh;
	height: 14vh;
	max-width: 150px;
	max-height: 150px;
	background-color: #fff;
}

.class_panel {
	display: flex;
	align-items: center;
	overflow: hidden;
	width: 100vw;
	height: 100vh;
	color: #fff;
	position: relative;
}

.classes_content .classes_header_wrapper {
	height: 60px;
	display: flex;
	align-items: center;
	font-size: 22px;
	max-width: 1100px;
	font-style: italic;
	text-align: center;
}

.class_panel .classes_content {
	flex-grow: 1;
	display: flex;
	align-items: center;
	flex-direction: column;
}

.classes_content .classes_wrapper {
	display: flex;
	max-width: 1050px;
	align-items: stretch;
}

.classes_content .classes_footer_wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.classes_footer_wrapper .class_title {
	display: flex;
	height: 40px;
	align-items: center;
}

.classes_content img {
	max-width: 100%;
	display: flex;
	cursor: pointer;
}

.classes_content .single_class {
	width: 28%;
	display: flex;
	margin-left: 4%;
	margin-right: 4%;
	flex-direction: column;
	border: 1px solid #fff;
	box-sizing: border-box;
	background-image: url("/javax.faces.resource/disabled_back.png.xhtml?ln=images");
	background-repeat: repeat;
	border-radius: 8px;
}

.single_class.active {
	border: 1px solid #ff5200;
	box-shadow: 0 0 20px #ff5200;
	box-sizing: border-box;
}

.classes_content .single_class:last-child {
	margin-left: 0;
}

.classes_content .single_class:first-child {
	margin-right: 0;
}

.single_class .class_header {
	display: flex;
	color: #fff;
	justify-content: center;
}

.class_header .std_icon.info_icon {
	margin-left: 8px;
	display: flex;
	align-items: center;
}

.single_class.active .class_header .std_icon.info_icon:before {
	color: #ff5200;
}

.class_header .std_icon.info_icon:before {
	font-size: 18px;
}

.single_class .class_name {
	font-size: 19px;
	display: flex;
	align-items: center;
	height: 40px;
	font-style: italic;
}

.single_class .class_theorem {
	text-align: justify;
	padding: 10px;
	color: #fff;
}

.single_class.active .class_header, .single_class.active .class_theorem {
	color: #ff5200;
}

.class_clickable_context {
	display: flex;
	width: 100%;
	justify-content: space-around;
}

.class_theorem span {
	display: block;
}

.class_theorem span:first-child {
	text-align: center;
	font-size: 17px;
	padding-bottom: 15px;
}

.story_panel {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	color: #fff;
	flex-direction: column;
	width: 100%;
	height: 100%;
}

.story_panel .ui-widget.storyButton, .general_panel .general_footer button, .general_panel .general_body button {
	width: 250px;
	height: 40px;
	min-height: 40px;
	font-size: 17pt;
}

.story_panel .story_content {
	width: 60%;
	height: 40%;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: #222;
	border-radius: 8px;
	border: 1px solid #fff;
	box-sizing: border-box;
	box-shadow: 0 4px 12px #000 inset;
	position: relative;
	margin-bottom: 2vh;
}

.story_content .story_picture {
	height: 20%;
	width: 100%;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.story_picture span {
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: url("/javax.faces.resource/minigames/minigame_front0.png.xhtml?ln=images");
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position: center center;
}

.story_picture span.minigame_story_icon {
	height: 200px;
	width: 200px;
	margin-top: -115px;
	margin-left: -20px;
	margin-right: -20px;
}

.story_picture span:not(.minigame_story_icon) {
	height: 65px;
	width: 65px;
	margin-top: -50px;
}

.story_picture .std_icon {
	cursor: pointer;
}

.story_picture .info_icon:before {
	font-size: 28px;
	content: "\f129";
}

.story_picture .character_story_icon:before {
	font-size: 28px;
	content: "\f21d";
}

.story_picture img {
	max-height: 100%;
	max-width: 100%;
}

.story_content .story_desc {
	box-sizing: border-box;
	padding: 0 5px 5px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	height: 80%;
}

.pre_minigame_description {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: auto;
	text-align: justify;
	margin-bottom: 10px;
	line-height: 1.35;
    padding: 5px;
	box-sizing: border-box;
}

.pre_minigame_description > h4 {
	text-align: center;
	font-size: 1.5em;
    font-weight: normal;
    font-style: italic;
    margin: 10px 0;
}

.pre_minigame_description > p {
	margin-top: 4px;
	margin-bottom: 4px;
}

.story_content .story_description {
	text-align: justify;
	margin-bottom: 10px;
	line-height: 1.35;
}

.jconfirm .jconfirm-holder {
    width: 50%;
    margin: auto;
}

.end_screen .outcome_image {
	width: 70%;
	margin: auto;
}