/************************************************************************************************
 ************************************************************************************************
 *									SMALL DEVICES
 ************************************************************************************************
 ************************************************************************************************/

/**********************************************************************
 *
 * GENERAL
 *
 **********************************************************************/
 html, body {
	height: 100%;
}

.signed_in_only, .page_view, #sign_in_modal_submitting_button, #register_modal_submitting_button {
	display: none;
}

.home_page {
	display: block;
}

#main {
	position: relative;
}

a.disabled {
	pointer-events: none;
	cursor: default;
}
/**********************************************************************
 *
 * NAVBAR AND MENU
 *
 **********************************************************************/
 
#sign_in_link, #sign_out_link {
	margin-top: 4px;
	margin-bottom: 4px;
}

#side_menu {
	position: fixed;
	top: 6px;
	min-width: 180px;
	max-height: 400px;
	margin-right: 10px;
	box-shadow: 3px 3px 2px grey;
	transition: 0.4s linear;
	overflow: hidden;
	z-index: 10;
}

#side_menu.collapsed {
	margin-left: -155px;
	max-height: 38px;
	height: 38px;
}

#side_menu .nav .nav-link {
	color: #636b6d;
}

#side_menu .nav .disabled {
	color: #afb2b5;
}

#side_menu .side_menu_toggle {
  position: absolute;
  top: -20px;
  right: -12px;
  font-size: 36px;
}

/**********************************************************************
 *
 * HOME PAGE
 *
 **********************************************************************/
 
.home_background {
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 40px;
	right: 0px;
	background-image: url("resources/background_small.jpg");
	background-repeat: no-repeat;
	background-size: contain;
	z-index: -1;
}

.jumbotron {
	margin: auto;
	margin-top: 5px;
	margin-bottom: 40px;
	border: 1px solid grey;
	background-color: rgba(233, 233, 233, 0.9);
}

.jumbotron button {
	margin-bottom: 5px;
}

img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
	margin-bottom: 10px;
}

/**********************************************************************
 *
 * FAQ PAGE
 *
 **********************************************************************/

 .faq_question, .faq_question:active, .faq_question:visited, .faq_question:link, .faq_question:hover {
 	text-align: left;
 	color: black;
 	text-decoration: none;
 }

/**********************************************************************
 *
 * PREMIUM PAGE
 *
 **********************************************************************/
 
.premium-card-title {
	
	background-image: url("resources/star.svg");
	background-repeat: no-repeat;
	background-size: contain;
	padding-left: 30px;
}

.card ul {
	list-style-type: none;
	margin: 0px;
	margin-bottom: 20px;
	padding: 0px;
}

/**********************************************************************
 *
 * PROFILE PAGE
 *
 **********************************************************************/
 
 .profile_page {
 	margin: 2px;
 }
 
 .profile_box {
	
	position: relative;
	padding: 10px;
	margin-bottom: 10px;
}

 .profile_min {
	min-width: 130px;	
}

#profile_page_charts {
	display: none;
	position: absolute;
	top: 0px;
	right: 0px;
	height: 100%;
	padding: 10px;
	background-color: white;
	z-index: 2;
}

#profile_page_charts button {
	position: absolute;
	right: 10px;
}

.chess_badge {
	display: inline-block;
	height: 80px;
	width: 80px;
	border: 8px solid;
	background-size: contain;
}

.chess_badge:before, .chess_badge_placeholder:before {
	content: "";
	display: inline-block;
	position: relative;
	height: 80px;
	width: 80px;
	left: -8px;
	top: -8px;
	z-index: 1;
}

.chess_badge_placeholder:before {
	background-color: rgba(255, 255, 255, 0.8);
}

.chess_badge_level_1 {
	border-color: #AD8A56;
}

.chess_badge_level_2 {
	border-color: #B4B4B4;
}

.chess_badge_level_3 {
	border-color: #C9B037;
}

.chess_badge_first_exercise {
	background-image: url("resources/badge_first_exercise.svg");
}

.chess_badge_premium {
	background-image: url("resources/badge_premium.svg");
}

.chess_badge_coordinates {
	background-image: url("resources/badge_coordinates.svg");
}

.chess_badge_square_colors {
	background-image: url("resources/badge_square_colors.svg");
}

.chess_badge_intersections {
	background-image: url("resources/badge_intersections.svg");
}

.chess_badge_target_squares {
	background-image: url("resources/badge_target_squares.svg");
}

.chess_badge_knight_queen {
	background-image: url("resources/badge_knight_queen.svg");
}

.chess_badge_defended_pieces {
	background-image: url("resources/badge_defended_pieces.svg");
}

.chess_badge_evade_capture {
	background-image: url("resources/badge_evade_capture.svg");
}

.chess_badge_checkmate {
	background-image: url("resources/badge_checkmate.svg");
}

.chess_badge_replicate_board {
	background-image: url("resources/badge_replicate_board.svg");
}

.chess_badge_blindfold_game {
	background-image: url("resources/badge_blindfold_game.svg");
}

/**********************************************************************
 *
 * EXERCISE INTRO PAGE
 *
 **********************************************************************/
 
 .exercise_intro_page {
 	margin: 2px;
 }
 
.mode_selection {
	margin: auto;
	margin-top: 24px;
	padding: 10px;
	width: 315px;
	border: 1px solid #222222;
}

.piece_selector {
	margin-bottom: 15px;
}

.piece_selector button {
	position: relative;
	background-size: contain;
	background-repeat: no-repeat;
	height: 50px;
	width: 50px;
	margin-left: 2px;
}

.piece_selector button span {
	position: absolute;
	top: 2px;
	right: 2px;
	width: 20px;
	color: black;
	background-color: white;
	border: 1px solid black;
}

/**********************************************************************
 *
 * MODALS
 *
 **********************************************************************/
 
 #error_modal_button {
	display: block;
	margin: auto;
	margin-top: 48px;
}

/**********************************************************************
 *
 * EXERCISE PAGE
 *
 **********************************************************************/
 
.board_container {
	display: relative;
}

#board_settings_pieces, #board_settings_title, #score_title {
	display: none;		
}

.control_bar {
	position: fixed;
	top: 8px;
	left: 50%;
	margin-left: -110px;
	color: white;
	font-size: 20px;
}

#flip_board_small, #sound_button_small {
	height: 38px;
	width: 38px;
	background-color: white;
	background-image: url('resources/sound_on.svg');
	background-repeat: no-repeat;
	background-size: 30px 30px;
	background-position: center center;
}

#flip_board_small {
	filter: FlipH;
	background-image: url('resources/flip_board.svg');
	transform: scaleX(1);
}

.controls_box {
	margin: 2px;
	padding: 2px;
	box-shadow: 2px 2px 1px grey;
}

.binary_choice_buttons {
	box-shadow: none;
}

.binary_choice_buttons div {
	flex-direction: row;
}
	
#binary_choice_button1 {
	margin-right: 2px;
}

.coordinate_label {
	min-width: 80px;
	margin-left: auto;
	margin-right: auto;
	font-size: 48px;
}

.coordinate_label_small {
	margin-left: auto;
	margin-right: auto;
	font-size: 24px;
}

.controls_move_list {
	overflow: scroll;
	font-size: 14px;
	min-height: 116px;
}

.move_list_move_nr {
	display: inline-block;
	width: 25px;
	margin-left: 5px;
}

.move_list_move {
	display: inline-block;
	width: 45px;
	margin-left: 2px;
}

#controls_garbage_can {
	display: none;
	margin-top: 10px;
	padding: 30px;
	color: #333333;
	background-color: #DDDDDD;
}

.achievement-modal-body {
	text-align: center;
}

#timer {
	display: none;
}

.control_area {
	flex: 1 1 auto !important;
}

.controls_container {
	flex-direction: row;
	flex: 1 1 auto !important;
}

.controls_coordinate_single, .controls_coordinates, .controls_board_settings {
	flex: 1 1 auto !important;
}

/************************************************************************************************
 ************************************************************************************************
 *									MEDIUM DEVICES
 ************************************************************************************************
 ************************************************************************************************/

@media only screen and (min-width: 768px) {
	
	.card-deck, .page_view {
		margin: 10px;
	}
	.exercise_page {
		margin: 0px;	
	}
}

@media only screen and (orientation: landscape) {
	
	.exercise_page {
		display: flex;
	}
	.controls_board_settings {
		padding-left: 5px;
	}
}


@media only screen and (min-width: 768px) and (orientation: landscape) {
	
	#board_settings_title {
		display: block;
	}
	
	.control_area {
		flex: 0 1 auto !important;
	}
	
	.controls_container {
		flex-direction: column;
		width: 170px;
		order: 1;
	}
	
	.binary_choice_buttons div {
		flex-direction: column;
	}
	
	.controls_coordinate_single, .controls_coordinates {
		flex: 0 0 auto !important;
	}
	
	.controls_board_settings {
		padding-left: 10px;
		flex: 0 0 auto !important;
	}
	
	#side_menu {
		position: static;
		flex: 1 1 auto !important;
		
		min-width: 180px;
		width: 180px;
		max-width: 180px;
		max-height: initial;
		margin-right: 10px;
		overflow: initial;
	}
	
	.side_menu_toggle {
		display: none;
	}
	
	#side_menu.collapsed {
		margin-left: 0px;
		max-height: initial;
		height: initial;
	}
	
	.exercise_page {
		margin: 0px; /* TODO: set to 10, but requires fix of piece offsets on the board */
	}
	
	.coordinate_label {
		font-size: 96px;
	}
	
	.coordinate_label_small {
		font-size: 48px;
	}
	
	#binary_choice_button1, #binary_choice_button2 {
		box-shadow: 2px 2px 1px grey;
	}
	
	.home_background {
		background-image: url("resources/background.jpg");
	}
	
	#controls_garbage_can {
		display: block;
	}
}