/*
 *  SquadChess.com
 *  
 *  CSS display configuration.
 *  
 *  Created by Scott Johnstone 
 *  ©2022 Austere Games
 *  
 *  info@squadchess.com
 * 
 */


#load_container {
	position: absolute;
	top: 0;
	left: 0;
    height: 100%;
    width: 100%;
	font-size: min(4vw, 4vh);
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: center;
	color: #eee;
}



#load_origrp {
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
}





#load_details_container {
	display: none;
	width: 90%;
	margin-bottom: 4%;
	margin-top: 4%;
}

#load_details_container * {
	font-size: min(2.8vw, 2.8vh);
}

#ld_thumb {
	width: min(30vw, 30vh);
	aspect-ratio: 1/1;
	box-sizing: border-box;
	margin: 0 auto;
}

#ld_thumb * {
	font-size: min(4vw, 4vh);
}
	
#ld_deets {
	width: 71%;
}

#ld_deets * {
	color: #222;
}

#ld_row_creator {
	display: none;
}

#ld_deets td {
	text-align: left;
	padding-left: 2%;
}

#ld_deets td:first-child {
	text-align: right;
	padding-left: 0;
}

#ld_dts_caps_and_promos {
	display: flex;
}

#ld_dts_promos {
	display: flex;
	margin-left: 9%;
	width: 70%;
}

#ld_dts_promos_nums {
	margin-left: min(1vw, 1vh);;
}




#load_list_container {
	width: 90%;
	margin: 0 auto;
	border-spacing: 0;
}

#ll_tabs_game,
#ll_tabs_logic {
	display: none;
}

#ll_tab_saves,
#ll_tab_scens,
#ll_tab_logic,
.ll_btn {
    color: #eee;
	background: #6a6a6a;
	cursor: pointer;
}

#ll_tab_saves:hover,
#ll_tab_scens:hover,
#ll_tab_logic:hover,
.ll_btn:hover {
	background: #777;
}

#ll_tab_saves,
#ll_tab_logic {
	padding: 0.5% 4.2% 0.5% 1.5%;
	clip-path: polygon(0 0, 90% 0, 100% 100%, 0 100%);
}

#ll_tab_scens {
	margin-left: -3%;
	padding: 0.5% 4.2% 0.5% 4.2%;
	clip-path: polygon(0 0, 90% 0, 100% 100%, 11% 100%);
}

#ll_tab_saves.ll_tab_sel,
#ll_tab_scens.ll_tab_sel,
#ll_tab_logic.ll_tab_sel {
    background: #888;
}

#ll_tab_saves.ll_tab_sel:hover,
#ll_tab_scens.ll_tab_sel:hover,
#ll_tab_logic.ll_tab_sel:hover {
    background: #8a8a8a;
}

#load_list {
	background: #222;
	border: 8px double #888;
	width: 100%;
	height: min(57vw, 40vh);
	display: block;
	overflow-y: auto;
	overflow-x: hidden;
	border-collapse: collapse;
}

#ll_tbody {
    display: table;
    width: 100%;
}

#load_list tr:nth-child(odd) { background: rgba(40, 40, 40, 0.5) }
#load_list tr:nth-child(even) { background: rgba(128, 128, 128, 0.5) }

#load_list tr:hover {
    cursor: pointer;
}

#load_container span.sel {
    color: #0a0;
}

.ll_failover {
	color: #eee;
	cursor: default;
}

.ll_iconDiff {
    position: relative;
	top: 50%;
    transform: translateY(-50%);
	height: 77%;
}

.ll_thumb_td {
	vertical-align: middle;
	padding: 2%;
	width: 16%;
}

.ll_thumb {
	width: min(7vw, 7vh);
	height: min(7vw, 7vh);
    margin: auto;
}

.ll_deets {
	vertical-align: middle;
}

.ll_nm {
    display: flex;
	font-size: min(4vw, 4vh);
    color: #eee;
}

.ll_ts {
    display: flex;
	font-size: min(2.6vw, 2.6vh);
    color: #eee;
}

#ll_btns_builder,
#ll_btns_welcome,
#ll_btns_logic {
	display: none;
}

#ll_btn_del,
#ll_btn_delAll {
	float: left;
}

#ll_btn_del {
	padding: 0.5% 4.2% 0.5% 1.5%;
	clip-path: polygon(0 0, 100% 0, 84% 100%, 0 100%);
}

#ll_btn_delAll {
	margin-left: -3%;
	padding: 0.5% 4.2% 0.5% 4.2%;
	clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
}

#ll_btn_load,
#ll_btn_logic_load {
	float: right;
	background: #888;
	padding: 0.5% 1.5% 0.5% 4.2%;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 17% 100%);
	font-size: min(5.2vw, 5.2vh);
    margin-top: -0.1%;
    color: #50ff50;
}

#ll_btn_play_pvp,
#ll_btn_play_ai {
	background: #888;
	margin-top: -0.1%;
    color: #50ff50;
}
	
#ll_btn_play_pvp {
	float: left;
	padding: 0.5% 4.2% 0.5% 1.5%;
	clip-path: polygon(0 0, 100% 0, 93% 100%, 0 100%);
}

#ll_btn_play_ai {
	float: right;
	padding: 0.5% 1.5% 0.5% 4.2%;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 10% 100%);
}

#ll_logic_deets {
	width: 77%;
    float: left;
	font-size: min(3vw, 3vh);
}

#ll_logic_deets td {
	text-align: left;
}

#ll_logic_deets td:first-child {
	width: 1%;
	white-space: nowrap;
}

#ll_logic_deets td:nth-child(2) {
	padding-left: 1.5%;
}

#ll_builder,
#ll_cancel,
#ll_upload {
	background: #5d5147;
	font-size: min(3.3vw, 3.3vh);
	height: 8%;
	width: 20%;
	color: #eee;
}

#ll_builder,
#ll_upload {
	background: #9186c9;
	margin-left: 20%;
	width: 40%;
	display: none;
}



.thm_brd {
	position: relative;
	display: inline-block;
	background: #eee;
	padding: 0;
	cursor: default;
	width: 100%;
	height: 100%;
}

.thm_tile {
	width: 12.5%;
	height: 12.5%;
	float: left;
	box-sizing: border-box;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #bbb;
}

.thm_tile_shaded {
	background: #555;
}

.thm_pc_icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	cursor: default;
	font-size: min(1vw, 1vh);
}


span.thm_pc_w {
	color: #fff;
}

span.thm_pc_b {
	color: #111;
}




/* ---------- BREAK-POINTS ------------------------------------------------------------------------------------------------------------- */


/* portrait */

@media (max-aspect-ratio: 9/7) { 
	
}



/* landscape */

@media (min-aspect-ratio: 9/7) {

	#load_origrp {
		flex-flow: row-reverse;
	}
	
	#load_details_container {
		flex-flow: column;
		width: 39%;
    	margin-right: 2%;
   		margin-left: -5%;
  	}
	
	#load_details_container * {
		font-size: min(2.3vw, 2.3vh);
	}
	
	#ld_thumb {
		width: 55%;
	}
	
	#ld_thumb * {
		font-size: min(2.5vw, 5vh);
	}
	
	#ld_deets {
		width: 100%;
		margin-top: 4%;
	}
	
	#load_list_container {
		width: 55%;
	}
	
	#ll_btns_welcome * {
		font-size: min(3vw, 3.3vh);
   	}
   	
   	.ll_nm {
   		font-size: min(3vw, 3.7vh);
   	}
   	
   	.ll_ts {
   		font-size: min(2vw, 2.3vh);
   	}
   	
}