/* Hide the mobile navigation: */
.mobile_nav,

/* Hide the mobile header: */
.mobile_header,

/* Generall hide in desktop: */
.hd {display: none;}

/* Make things into cursor pointer: */
button, .button, .grid_info, #currentusernames, #pop_close, .guide .close, summary, select, button.mark, #replay, .option_desc, .mc, .username_select_minus, .username_select_plus, .package.package_select, .datatable_pagination > button {cursor: pointer;}

/* OVERLAY POP MODAL DIALOG WINDOW: */
.pop {display: inline-block; height: auto; position: static; top: auto; right: auto; bottom: auto; left: auto; width: 680px; border-radius: 10px; box-shadow: var(--modal_shadow);}
	#pop_content {padding: 20px; max-height: 60vh;}

.guide.tt {width: 480px;}

.mc {position: fixed; width: 420px; top: 20px; left: calc(50vw - 225px); right: auto; bottom: auto;}
	.mc_text {text-align: center;}

/* DOM LOGIN & REGISTER HERE */
body.sapc {display: block;}
	
	main.samc {width: 450px;}
		
		main.samc.push {padding-top: 18vh;}
	
	/* body.sapc header.alt_header {border-radius: 10px; margin: 50px auto 15px; width: 600px;} */
	
	body.sapc header.alt_header {border-radius: 0 !important; margin: 0 auto;}
	
	.wizard {margin: 0 auto; max-width: 450px;}

/* DOM STARTS HERE */

/* Desktop needs a main container: */
.content {display: grid; grid-template-columns: 270px auto; grid-gap: 20px; max-width: 1020px; margin: 0 auto; padding: 20px 0;}
	
	/* Desktop sidebar: */
	.sidebar {display: block; position: sticky; align-self: start; top: 20px; padding-left: 20px; display: flex; min-height: calc(100vh - 40px); flex-direction: column; justify-content: flex-start;}
		
		/* The main sidebar logo: */
		#dt_logo {display: block; width: 65px; height: 65px; background-size: 55px;}
		
		/* Show desktop navigation: */
		.dt_nav {display: block; margin: 30px 0 30px;}
		
			.dt_nav_link {display: flex; align-items: center; text-decoration: none; padding: 5px 0;}
				
				.dt_nav_link + .dt_nav_link {margin-top: 12px;}
				
				.dt_nav_link svg {width: 24px; height: 24px;}
				
				.dt_nav_text {margin-left: 15px;}
				
				.dt_nav_link.active .dt_nav_text {font-weight: 600;}
		
		.sidebar h2 {margin-bottom: 15px;}
		
		.sidebar .button {padding: 12px 15px; width: 190px;}
		
		.invite_caption {font-size: 30px; padding: 0 10px;}
		
		#copyright {padding-bottom: 20px;}
		
		/* NOTE: This is when sidebar is larger then the minimal content height: */
		@media only screen and (min-height: 970px) {
			
			/* Make the copyright notice to the bottom: */
			#copyright {margin-top: auto; padding: 0;}
		}
	
	main {padding: 0 20px 20px;}
		
		.dt_header {display: block; margin: 20px 0 30px;}
			
			.head_button_back {float: left; height: 46px; padding: 0 20px 0 45px; background: var(--color_grey) url('data:image/svg+xml,<svg fill="%23454745" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Pro 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc.--><path d="M4.7 244.7c-6.2 6.2-6.2 16.4 0 22.6l176 176c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6L54.6 272 432 272c8.8 0 16-7.2 16-16s-7.2-16-16-16L54.6 240 203.3 91.3c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0l-176 176z"/></svg>') left 15px center / 18px no-repeat;}
			
			.dth_btns {justify-content: right; display: grid; grid-template-columns: repeat(3, min-content); column-gap: 15px;}
				
				.head_button_logout {background-color: var(--color_black);}
		
		/* Lets make the alt header nicer and remove the negative margines, that apply in the mobile: */
		.alt_header {border-radius: 10px; margin: 0 0 20px; width: auto;}
		
		/* Lets make account notice nice and inline not under each other */
		.notice_button {grid-template-columns: auto min-content; column-gap: 15px;}
		
		/* Make datatable first and last visible: */
		.dtpagi_first_last {display: inline-block !important;}
		
		/* Datatable related: */
		.datatable_selector.sticky {bottom: 0;}
		
		#chat {display: none; position: sticky; bottom: 30px; right: auto; float: right; margin: -50px -85px -20px 0;}