:root {
	--offwhite: #f1eee8;
	--dark-bg: #047209;
	--dark-overlay: rgba(0,0,0,0.76);
	--dark-panel: #182325;
	--dark-panel-2: #314447;
	--dark-panel-3: #42575b;
	--dark-text: #f1eee8;
	--dark-blue: #3f95c7;
	--dark-blue-hover: #58addf;
	--dark-red: #c92831;
	--dark-border: #020606;
	--dark-field-line: rgba(241,238,232,0.62);
  }
* {
	margin:0;
	padding:0;
}
html {
	font-family: 'Domine', 'DomineBold', times, serif;
	text-rendering: optimizeLegibility;
	color:var(--offwhite);
}
body {
	font-size:100%;
	background-color:#68b609;
}
body.theme-dark {
	background-color:var(--dark-bg);
}
html, body{
	height:100%;
}
img {
	border:0;
	max-width:100%;
}
a:link, a:visited {
	color:#000;
	text-decoration: none;
}
a:hover {
	text-decoration: none;
	background-color:#3498db;
}
textarea,input,select,button {
	font-family: 'Domine', 'DomineBold', times, serif;
}
.clear-both {
	clear:both;
}


/* FONTS */

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url('/font/MaterialIcons-Regular.eot'); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url('../font/MaterialIcons-Regular.woff2') format('woff2'),
    url('../font/MaterialIcons-Regular.woff') format('woff'),
    url('../font/MaterialIcons-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'DomineBold';
		font-weight: normal;
    font-style: normal;
    src: url('../font/domine-bold-webfont.woff2') format('woff2'),
         url('../font/domine-bold-webfont.woff') format('woff'),
				 url('../font/domine-bold-webfont.tff') format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'liga';
}


.mi-help{
	cursor:pointer;
	font-size:16px;
	vertical-align:top;
	padding:0 10px;
}
.dash-wrapper{
	width:100%;
	height:100%;
}


.settings-box{
	position:fixed;
	z-index:1000;
	width:100%;
	height:100%;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	background-color:rgba(0,0,0,0.6);
	overflow:auto;
}


	.mi-help-toggle{
		cursor:pointer;
	}
	.about-toggle{
		text-align:right;
		position:relative;
		width:96%;
		padding:10px 2% 0 2%;
	}
	.theme-toggle{
		display:inline-block;
		vertical-align:middle;
		margin-right:12px;
		width:36px;
		height:36px;
		padding:0;
		border:2px solid #000;
		border-radius:50%;
		background-color:var(--offwhite);
		color:#000;
		cursor:pointer;
	}
		.theme-toggle i{
			font-size:20px;
			line-height:32px;
		}
		.theme-toggle:hover{
			background-color:#3498db;
			color:var(--offwhite);
		}
	body.theme-dark .settings-box{
		background-color:var(--dark-overlay);
	}
	body.theme-dark .theme-toggle,
	body.theme-dark .numteams-select,
	body.theme-dark .select-number,
	body.theme-dark .settings-switch,
	body.theme-dark .range,
	body.theme-dark .range-row,
	body.theme-dark .randomize-total{
		background-color:var(--dark-panel-2);
		color:var(--dark-text);
	}
	body.theme-dark .settings-about,
	body.theme-dark .sprite-select-box,
	body.theme-dark .settings-recap,
	body.theme-dark .remote-join-block,
	body.theme-dark .placements,
	body.theme-dark .get-at-me{
		background-color:var(--dark-panel);
		color:var(--dark-text);
		border-color:var(--dark-border);
	}
	body.theme-dark .settings-about h4,
	body.theme-dark .selected,
	body.theme-dark .shufflercode-selected,
	body.theme-dark .change-sprite,
	body.theme-dark .copy-link,
	body.theme-dark .button-random,
	body.theme-dark .total-shuffles,
	body.theme-dark .recap-title,
	body.theme-dark .recap-range-value,
	body.theme-dark .button-style{
		background-color:var(--dark-blue);
		color:var(--offwhite);
	}
	body.theme-dark .theme-toggle:hover,
	body.theme-dark .copy-link:hover,
	body.theme-dark .button-random:hover,
	body.theme-dark .button-style:hover{
		background-color:var(--dark-blue-hover);
		color:var(--offwhite);
	}
	body.theme-dark .button-replay-wrapper button,
	body.theme-dark .button-save-wrapper button{
		background-color:var(--dark-red);
	}
	body.theme-dark .settings-next,
	body.theme-dark .settings-back,
	body.theme-dark .settings-mode-back,
	body.theme-dark .luck-amount li{
		background-color:var(--dark-panel-2);
		color:var(--dark-text);
	}
	body.theme-dark .luck-amount li{
		background-color:var(--dark-panel-3);
	}
	body.theme-dark .luck-amount li.luck-on{
		background-color:var(--dark-blue);
	}
	body.theme-dark .input-team,
	body.theme-dark .input-img,
	body.theme-dark .input-code,
	body.theme-dark .settings-link,
	body.theme-dark .remote-join-link,
	body.theme-dark .button-replay-wrapper input,
	body.theme-dark .button-save-wrapper input{
		background-color:#eef2f0;
		color:#000;
	}
	body.theme-dark .input-team:focus,
	body.theme-dark .input-team:active,
	body.theme-dark .settings-link:focus,
	body.theme-dark .settings-link:active,
	body.theme-dark .input-img:focus,
	body.theme-dark .input-img:active,
	body.theme-dark .input-code:focus,
	body.theme-dark .input-code:active{
		background-color:var(--dark-blue);
		color:var(--offwhite);
	}
	body.theme-dark .input-team::placeholder,
	body.theme-dark .input-img::placeholder,
	body.theme-dark .input-code::placeholder,
	body.theme-dark a.icon-link:link,
	body.theme-dark a.icon-link:visited{
		color:var(--dark-blue-hover);
	}
	body.theme-dark .recap-row,
	body.theme-dark .recap-range-title{
		color:var(--dark-text);
	}
	body.theme-dark .recap-blocked{
		background-color:rgba(0,0,0,0.55);
	}
	body.theme-dark .blocked-title{
		background-color:var(--dark-border);
	}
	.settings-about{
		position:absolute;
		width:96%;
		left:0;
		right:0;
		margin:auto;
		color:#000;
		background-color:var(--offwhite);
		padding:10px;
		font-size:16px;
		z-index:1001;
		border-radius:10px;
		border:2px solid #000;
	}
		.settings-about div{
			margin-bottom:10px;
		}
		.settings-about p:last-child{
			margin-bottom:0px;
		}
		.settings-about h4{
			background-color:#3498db;
			color:var(--offwhite);
			border-radius:10px;
			display:inline-block;
			padding:2px 10px;
		}
		.settings-about span{
			position:relative;
			color:var(--offwhite);
			text-shadow:
			 -1px -1px 0 #000,
				1px -1px 0 #000,
				-1px 1px 0 #000,
				 1px 1px 0 #000,
				 -2px -2px 0 #ec1a23,
					2px -2px 0 #ec1a23,
					-2px 2px 0 #ec1a23,
					 2px 2px 0 #ec1a23,
					 0 -2px 0 #ec1a23,
					 0 2px 0 #ec1a23,
					 -2px 0 #ec1a23,
					 2px 0 #ec1a23;
		}



	.settings-box-container{
		padding:4% 0;
		position:relative;
	}
		.settings-box-wrapper{
			position:relative;
		}

	.numteams-container{
		width:500px;
		position:relative;
		margin:auto;
	}
	.settings-manager-mode, .settings-numteams, .settings-teamsinput, .settings-randomize, .settings-values, .settings-start, .settings-goodluck, .settings-share, .settings-luck{
		position:relative;
		text-align:center;
	}
	.settings-manager-mode, .settings-teamsinput, .settings-randomize, .settings-values, .settings-start, .settings-goodluck, .settings-share, .settings-luck{
		display:none;
	}
		.settings-title{
			font-size:30px;
			margin-bottom:20px;
		}
			.settings-title2{
				width:50%;
				margin:auto;
				text-shadow:
				 -1px -1px 0 #000,
					1px -1px 0 #000,
					-1px 1px 0 #000,
					 1px 1px 0 #000,
					 -2px -2px 0 #ec1a23,
						2px -2px 0 #ec1a23,
						-2px 2px 0 #ec1a23,
						 2px 2px 0 #ec1a23,
						 0 -2px 0 #ec1a23,
						 0 2px 0 #ec1a23,
						 -2px 0 #ec1a23,
						 2px 0 #ec1a23;
			}
			.settings-title3{
				font-size:16px;
				margin-top:50px;
			}
			.settings-title4{
				font-size:20px;
				padding-bottom:10px;
				width:40%;
				margin:auto;
			}
			.settings-title5{
				font-size:16px;
				width:50%;
				margin:10px auto;
				text-shadow:
				 -1px -1px 0 #000,
					1px -1px 0 #000,
					-1px 1px 0 #000,
					 1px 1px 0 #000;
			}
		.manager-mode-actions{
			width:100%;
			margin:40px 0 0;
			background-color:var(--offwhite);
			color:#000;
			font-size:0;
			padding:10px 0;
		}
			.manager-mode-choice{
				display:inline-block;
				width:280px;
				margin:0 8px;
				vertical-align:top;
				font-size:18px;
			}
			.manager-mode-option{
				display:block;
				width:100%;
				padding:18px 12px;
				box-sizing:border-box;
				font-size:22px;
				border:3px solid transparent;
				border-radius:10px;
			}
			.manager-mode-option.selected{
				border-color:#3498db;
			}
				.manager-mode-beta{
					display:inline-block;
					margin-left:4px;
					font-size:14px;
					line-height:1;
					vertical-align:middle;
				}
				.manager-mode-tagline{
					margin-top:8px;
					font-size:16px;
					line-height:1.25;
				}
		.settings-navigate{
			margin-top:80px;
			user-select:none;
		}
			.navigate-wrapper{
				width:40%;
				display:inline-block;
				padding:20px 0;
				vertical-align:middle;
			}
				.navigate-wrapper:first-child{
					text-align:right;
				}
				.navigate-wrapper:last-child{
					text-align:left;
				}
			.settings-next, .settings-back, .settings-mode-back, .settings-manager-next{
				vertical-align:middle;
				margin:0 40px;
				background-color:var(--offwhite);
				padding:20px;
				border-radius:50%;
				color:#000;
			}
			.settings-next, .settings-manager-next{
				font-size:26px;
			}
			.settings-back{
				font-size:16px;
			}
			.settings-mode-back{
				font-size:16px;
			}
		.select-teams{
			font-size:50px;
			cursor:pointer;
		}


		.numteams-select{
			font-size:0px;
			background-color:var(--offwhite);
			padding:10px 0;
		}
			.select-number{
				display:inline-block;
				width:20px;
				padding:20px;
				cursor:pointer;
				font-size:20px;
				background-color:var(--offwhite);
				color:#000;
			}
			.shufflercode-selected, .selected{
				background-color:#3498db;
				color:var(--offwhite);
				border-radius:10px;
			}
			.hidden{
				display:none;
			}

		.teamsinput-container{
			width:70%;
			margin:auto;
			font-size:0px;
		}
		.input-container{
			position:relative;
			width:40%;
			margin:1px;
			display:inline-block;
			text-align:right;
		}
			.input-container.remote-claimed.remote-connected .input-team{
				box-shadow:inset 4px 0 0 #2ecc71;
			}
			.input-container.remote-claimed.remote-disconnected .input-team{
				box-shadow:inset 4px 0 0 #95a5a6;
			}
		.input-team{
			width:98%;
			padding:1%;
			font-size:24px;
			border:none;
		}
		.input-img{
			width:88%;
			padding:1%;
			font-size:12px;
			border:none;
			margin-top:2px;
		}
		.sprite-box-wrapper{
			position:fixed;
			top:0;
			left:0;
			right:0;
			bottom:0;
			margin:auto;
			display:none;
			background-color:rgba(0,0,0,0.4);
			z-index:7;
			cursor:pointer;
		}
			.sprite-select-wrapper{
				display:none;
			}
			.change-sprite{
				background-color:#3498db;
				color:var(--offwhite);
				border:none;
				padding:5px;
				margin:2px 0;
				font-size:12px;
				cursor:pointer;
			}
			.sprite-select-box{
				font-size:16px;
				background-color:var(--offwhite);
				color:#000;
				position:relative;
				display:inline-block;
				border:4px solid #000;
				border-radius:24px;
			}
				.sprite-conference{
					display:inline-block;
					margin:5px;
					vertical-align: middle;
				}
					.sprite-current{
						background-size:600% 200%;
						background-position:0 0;
						width:100px;
						height:100px;
					}
					.sprite-skin-color{
						width:25px;
						height:25px;
						display:inline-block;
						vertical-align: middle;
						font-size:0px;
						position:relative;
						cursor:pointer;
					}
						.sprite-skin-color i{
							font-size:16px;
							position:relative;
							top:50%;
							transform:translateY(-50%);
							display:none;
						}
							.sprite-skin .sprite-skin-color.checked i{
								display:block;
							}
						.skin-shade1{
							background-color:#a06020;
							border:2px solid #000;
						}
						.skin-shade2{
							background-color:#ffad60;
							border:2px solid #000;
							border-left:none;
						}
				.sprite-char{
					display:inline-block;
					margin:5px;
					padding:6px;
					cursor:pointer;
				}
		.code-container{
			position:relative;
			margin:auto;
			width:70%;
		}
		.code-line{
			position:relative;
			margin:4px 1%;
			width:48%;
			display:inline-block;
		}
			.code-player-name{
				position:relative;
				white-space:nowrap;
				text-align:left;
			}
			.input-code{
				width:100%;
				font-size:18px;
				border:none;
				padding:2px;
			}
			.mi-rarr, .input-img{
				vertical-align:top;
			}
			.mi-rarr{
				width:10%;
			}
			.settings-link{
				width:30%;
				font-size:24px;
				padding:5px;
				margin:2px;
				border:none;
			}
			.copy-link{
				position:relative;
				font-size:24px;
				padding:5px;
				color: var(--offwhite);
			  background-color: #3498db;
			  text-decoration: none;
				outline:none;
				border:none;
				cursor:pointer;
			}
				.copy-link i{
					vertical-align: middle;
					margin-right:5px;
					font-size:24px;
				}
				.copy-link:hover{
					background-color:#3cb0fd;
				}
				.copy-link:active{

				}
			.input-team:focus, .input-team:active, .settings-link:focus, .settings-link:active, .input-img:focus, .input-img:active, .input-code:focus, .input-code:active{
				background-color:#3498db;
				color:var(--offwhite);
			}
			.input-team::selection, .settings-link::selection, .input-img::selection, .input-code::selection{
				background-color:#000;
				color:var(--offwhite);
			}
			.input-team::placeholder, .input-img::placeholder, .input-code::placeholder{
				color:#3498db;
			}
		.remote-join-block{
			display:inline-block;
			margin:0 auto 20px auto;
		}
			.remote-join-title{
				font-size:18px;
				margin-bottom:8px;
			}
			.remote-join-link{
				vertical-align:middle;
			}
			.remote-reserved-action{
				display:none;
			}
			.remote-remove-inline{
				vertical-align:top;
				margin:2px 0 8px 4px;
			}
			.remote-remove-action{
				text-align:right;
				margin:2px 2% 8px 0;
			}
			.remote-remove-player.button-style{
				font-size:12px;
				border-radius:0;
				padding:5px 8px;
				box-shadow:none;
			}
			.teamsinput-container.remote-mode.remote-animated-mode .sprite-select-wrapper .remote-remove-inline.remote-reserved-action,
			.teamsinput-container.remote-mode.remote-custom-mode .input-img-wrapper .remote-remove-inline.remote-reserved-action{
				display:inline-block;
				visibility:hidden;
				width:0;
				min-height:24px;
				text-align:left;
				margin-left:0;
				overflow:hidden;
			}
			.teamsinput-container.remote-mode.remote-static-mode .remote-remove-action.remote-reserved-action{
				display:block;
				visibility:hidden;
				height:29px;
				box-sizing:border-box;
				overflow:hidden;
				position:relative;
				margin:2px 2% 8px 0;
			}
			.teamsinput-container.remote-mode .remote-remove-active{
				visibility:visible !important;
				overflow:visible !important;
			}
			.teamsinput-container.remote-mode.remote-static-mode .remote-remove-action.remote-remove-active{
				overflow:hidden !important;
			}
			.teamsinput-container.remote-mode.remote-static-mode .remote-remove-action .remote-remove-player{
				position:absolute;
				top:0;
				right:0;
				margin:0;
			}
			.teamsinput-container.remote-mode.remote-custom-mode .input-img-wrapper{
				display:flex !important;
				align-items:flex-start;
				justify-content:flex-end;
				white-space:nowrap;
			}
			.teamsinput-container.remote-mode.remote-custom-mode .input-img-wrapper .mi-rarr{
				flex:0 0 10%;
			}
			.teamsinput-container.remote-mode.remote-custom-mode .input-img-wrapper .input-img{
				flex:1 1 auto;
				min-width:0;
				width:auto;
			}
			.teamsinput-container.remote-mode.remote-custom-mode .input-img-wrapper .remote-remove-inline{
				flex:0 0 0;
			}
			.teamsinput-container.remote-mode.remote-animated-mode .sprite-select-wrapper .remote-remove-inline.remote-remove-active,
			.teamsinput-container.remote-mode.remote-custom-mode .input-img-wrapper .remote-remove-inline.remote-remove-active{
				width:70px;
				margin-left:4px;
			}
			.teamsinput-container.remote-mode.remote-custom-mode .input-img-wrapper .remote-remove-inline.remote-remove-active{
				flex-basis:70px;
			}
	.join-settings-box{
		display:block;
		background-color:rgba(0,0,0,0.48);
		z-index:20;
		opacity:1;
		transition:none;
	}
	body.join-page-racing .join-settings-box{
		opacity:0;
		pointer-events:none;
	}
	.join-results-box{
		position:fixed;
		z-index:30;
		top:0;
		right:0;
		bottom:0;
		left:0;
		padding-top:8vh;
		overflow:auto;
		pointer-events:none;
		text-align:center;
		background-color:rgba(0,0,0,0.6);
	}
	.join-results-box .placements{
		pointer-events:auto;
	}
	.join-results-box .join-replay-wrapper{
		pointer-events:auto;
	}
	.join-field-layer{
		position:fixed;
		z-index:1;
		top:0;
		right:0;
		bottom:0;
		left:0;
		pointer-events:none;
	}
	.join-field-layer .wrapper-bottom{
		height:100%;
	}
	.join-field-layer .field-container{
		z-index:1;
	}
	.join-panel{
		position:relative;
		text-align:center;
		width:100%;
		max-width:none;
		margin:4% auto 0 auto;
	}
		.join-room-code{
			display:block;
			width:fit-content;
			font-size:18px;
			background-color:var(--offwhite);
			color:#000;
			padding:8px 12px;
			margin:0 auto 20px auto;
			border-radius:8px;
			border:none;
			box-sizing:border-box;
		}
			.join-room-code span{
				display:inline-block;
				background-color:#3498db;
				color:var(--offwhite);
				padding:4px 8px;
				border-radius:8px;
			}
		.join-back-button{
			display:inline-block;
			margin-top:20px;
		}
		.join-settings-recap{
			display:block;
			width:100%;
			max-width:none;
			box-sizing:border-box;
			text-align:center;
		}
		.join-teamsinput{
			display:block;
		}
			.join-player-name::placeholder{
				color:#3498db;
				opacity:1;
				-webkit-text-fill-color:#3498db;
			}
		.join-settings-summary{
			width:90%;
			max-width:720px;
			margin:0 auto 20px auto;
			padding:14px;
			background-color:var(--offwhite);
			color:#000;
			border:4px solid #000;
			border-radius:8px;
			box-sizing:border-box;
			text-align:left;
		}
			.join-summary-title{
				font-size:22px;
				text-align:center;
				margin-bottom:10px;
			}
			.join-summary-row{
				display:inline-block;
				width:48%;
				margin:4px 1%;
				font-size:15px;
				vertical-align:top;
			}
				.join-summary-row span{
					color:#3498db;
					margin-right:6px;
				}
			.join-summary-players{
				margin-top:10px;
				font-size:14px;
				line-height:1.4;
				text-align:center;
			}
		.join-your-slot{
			width:90%;
			max-width:520px;
			margin:0 auto 20px auto;
			padding:14px;
			background-color:var(--offwhite);
			color:#000;
			border:4px solid #000;
			border-radius:8px;
			box-sizing:border-box;
		}
			.join-your-slot-label{
				color:#2ecc71;
				font-size:18px;
				margin-bottom:10px;
			}
			.join-edit-label{
				display:block;
				font-size:14px;
				margin:8px 0 4px 0;
				text-align:left;
			}
			.join-edit-name, .join-sprite-select{
				width:100%;
				box-sizing:border-box;
				font-family:'Domine', 'DomineBold', times, serif;
				font-size:18px;
				padding:8px;
				border:2px solid #000;
			}
			.join-sprite-preview{
				width:56px;
				height:56px;
				margin:10px auto;
			}
			.join-edit-error{
				min-height:20px;
				color:#ec1a23;
				font-size:14px;
				margin:8px 0;
			}
		.join-slots{
			width:72%;
			max-width:760px;
			margin:20px auto;
			font-size:0;
		}
			.join-slot{
				position:relative;
				vertical-align:top;
				font-size:16px;
				text-align:right;
			}
			.join-slot .sprite-select-wrapper,
			.join-slot .input-img-wrapper{
				display:block;
			}
			.join-slot .join-control-hidden{
				display:none !important;
			}
			.join-extra-control{
				white-space:nowrap;
			}
			.join-slot-action-row{
				display:block;
				text-align:right;
				margin:2px 2% 8px 0;
			}
			.join-custom-control{
				display:flex !important;
				align-items:flex-start;
				justify-content:flex-end;
				white-space:nowrap;
			}
			.join-custom-control .mi-rarr{
				flex:0 0 10%;
			}
			.join-custom-control .input-img{
				flex:1 1 auto;
				min-width:0;
				width:auto;
			}
			.join-static-action{
				margin-top:4px;
			}
			.join-slot-open .input-team,
			.join-slot-claimed{
				opacity:0.78;
			}
			.join-slot-claimed .input-team:disabled,
			.join-slot-open .input-team:disabled{
				color:#000;
				background-color:var(--offwhite);
				-webkit-text-fill-color:#000;
			}
			.join-slot-yours{
				opacity:1;
			}
			.join-slot-connected .input-team{
				box-shadow:inset 4px 0 0 #2ecc71;
			}
			.join-slot-disconnected .input-team{
				box-shadow:inset 4px 0 0 #95a5a6;
			}
			.join-slot-action{
				display:inline-block;
				vertical-align:top;
				margin:2px 0 8px 4px;
			}
			.join-slot-action .button-style,
			.join-slot-action-row .button-style{
				font-size:12px;
				border-radius:0;
				padding:5px 8px;
				box-shadow:none;
			}
			.join-leave{
				background-color:#ec1a23 !important;
			}
			.join-claimed-indicator{
				display:inline-block;
				background-color:#3498db;
				color:var(--offwhite);
				padding:5px 8px;
				font-size:12px;
			}
			.join-slot button:disabled,
			.join-slot .input-img:disabled{
				opacity:0.55;
				cursor:not-allowed;
			}
			.join-edit-error{
				min-height:20px;
				color:#ec1a23;
				font-size:14px;
				margin:8px 0;
			}
		.randomize-wrapper{
			padding:10px 0;
		}
			.button-random{
				width:130px;
				height:130px;
				position:relative;
				font-size:18px;
				cursor:pointer;
			  border-radius: 90px;
			  color: var(--offwhite);
			  background-color: #3498db;
			  padding: 10px 20px 10px 20px;
			  text-decoration: none;
				outline:none;
				border:none;
				box-shadow:-3px 3px 0px #000;
			}
				.button-random:hover{
					background-color:#3cb0fd;
				}
				.button-random:active{
					top:3px;
					right:3px;
					box-shadow:none;
				}
				.mi-shuffle{
					font-size:48px;
				}
				.randomize-button, .randomize-total{
					display:inline-block;
					vertical-align:middle;
					margin:0 40px;
				}
				.randomize-total{
					background-color:var(--offwhite);
					padding:10px;
					border-radius:10px;
					color:#000;
				}
					.total-tag1, .total-tag2{
						font-size:16px;
						margin:10px 0;
					}
					.total-shuffles{
						width:50px;
						font-size:40px;
						color:var(--offwhite);
						background-color:#3498db;
						padding:10px;
						border-radius:10px;
					}
		.settings-switch{
			background-color:var(--offwhite);
			color:#000;
			padding:10px;
			display:inline-block;
			font-size:16px;
			border-radius:10px;
			margin-bottom:30px;
		}
			.settings-option, .settings-leader{
				padding:10px;
				display:inline-block;
			}
			.settings-option{
				cursor:pointer;
			}
		.settings-code{
			display:none;
		}

	.title-margin{
		margin-top:20px;
	}
	.range{
		width:100%;
		padding:10px 0;
		background-color:var(--offwhite);
		font-size:0px;
	}
		.range-stack{
			margin-bottom:10px;
		}
		.range-stack:last-child{
			margin-bottom:0;
		}
		.unavailable{
			opacity:0.5;
			cursor:not-allowed !important;
			-webkit-filter: grayscale(100%);
    	filter: grayscale(100%);
		}
			.range-row{
				display:inline-block;
				color:#000;
				font-size:16px;
				margin:0 14px;
			}
			.range-num{
				display:inline-block;
				padding:10px;
				cursor:pointer;
			}

			.luck-container{
				margin:40px 0;
				display:inline-block;
			}
				.luck-row{
					text-align:right;
					font-size:0px;
				}
					.luck-name, .luck-amount, .luck-number{
						display:inline-block;
						vertical-align:middle;
					}
					.luck-name{
						font-size:16px;
						user-select:none;
						margin-right:3px;
					}
					.luck-amount{
						cursor:pointer;
					}
						.luck-amount li{
							display:inline-block;
							width:14px;
							height:14px;
							margin:1px;
							border-radius:45px;
							background-color:var(--offwhite);
							user-select:none;
						}
						.luck-amount li.luck-on{
							background-color:#3498db;
						}
					.luck-number{
						font-size:16px;
						margin-left:3px;
						width:1px;
						white-space:nowrap;
						user-select:none;
					}


		.settings-recap{
			padding:20px;
			background-color:var(--offwhite);
			margin-bottom:20px;
		}
			.recap-wrapper{
				margin-bottom:4px;
			}
			.recap-wrapper:last-child{
				margin-bottom:0px;
			}
				.recap-column{
					display:inline-block;
					font-size:0px;
					vertical-align: top;
					margin-right:10px;
					position:relative;
					height:100%;
				}
					.recap-teams-box, .recap-code-box, .recap-luck-box{
						min-width:150px;
					}
					.recap-title{
						font-size:20px;
						background-color:#3498db;
						color:var(--offwhite);
						border-radius:10px;
						margin-bottom:8px;
					}
					.recap-player-wrapper{
						overflow-x:auto;
						text-align:center;
					}
					.recap-player-grid{
						display:grid;
						grid-template-columns:minmax(160px,max-content) minmax(150px,max-content) minmax(120px,max-content);
						column-gap:10px;
						row-gap:4px;
						align-items:stretch;
						width:max-content;
						max-width:none;
						margin:0 auto;
						position:relative;
					}
					.recap-grid-title{
						margin-bottom:4px;
						text-align:center;
						white-space:nowrap;
					}
					.recap-grid-cell{
						min-height:32px;
						color:#000;
						font-size:14px;
						width:max-content;
						display:flex;
						align-items:center;
					}
					.recap-team-cell{
						min-width:160px;
						text-align:left;
						white-space:nowrap;
					}
					.recap-team-cell .recap-img,
					.recap-team-cell .recap-name{
						display:inline-block;
						vertical-align:middle;
					}
					.recap-luck-cell{
						min-width:150px;
						text-align:left;
						white-space:nowrap;
					}
					.recap-code-cell{
						min-width:120px;
						text-align:left;
						white-space:nowrap;
					}
					.recap-grid-blocked{
						display:none;
						z-index:4;
						place-self:stretch;
						background-color:rgba(241,238,232,0.65);
					}
					.recap-range{
						position:relative;
						display:inline-block;
						padding:5px;
						z-index:2;
					}
						.recap-range:last-child{
							margin-right:0px;
						}
						.recap-range-title{
							font-size:14px;
							color:#000;
							display:block;
						}
						.recap-range-value{
							font-size:24px;
							background-color:#3498db;
							color:var(--offwhite);
							display:inline-block;
							padding:10px;
							border-radius:10px;
						}
					.recap-blocked{
						z-index:3;
						position:absolute;
						height:100%;
						width:100%;
						top:0;
						bottom:0;
						right:0;
						left:0;
						background-color:rgba(255,255,255,0.5);
						border-radius:10px;
						display:none;
					}
						.blocked-title{
							position:relative;
							display:inline-block;
							margin:auto;
							color:var(--offwhite);
							font-size:16px;
							top:50%;
							transform:translateY(-50%);
							padding:10px;
							border-radius:10px;
							background-color:#000;
						}
					.recap-blocked.recap-grid-blocked{
						position:relative;
						top:auto;
						right:auto;
						bottom:auto;
						left:auto;
						width:auto;
						height:auto;
						align-items:center;
						justify-content:center;
						text-align:center;
						border-radius:10px;
						background-color:rgba(241,238,232,0.65);
					}
					.recap-blocked.recap-grid-blocked .blocked-title{
						top:auto;
						transform:none;
						margin:auto;
						background-color:#777;
					}
					.recap-grey{
						opacity:0.5;
						-webkit-filter: grayscale(100%);
			    	filter: grayscale(100%);
					}
					.recap-column:last-child{
						margin-right:0px;
					}
					.recap-row{
						color:#000;
						text-align:left;
						font-size:14px;
						margin-bottom:4px;
					}
						.recap-row div {
							display:inline-block;
							vertical-align: middle;
						}
						.recap-save{
							font-size:21px;
						}
						.recap-img{
							width:28px;
							height:28px;
							background-position:top;
							background-size:cover;
							background-repeat:no-repeat;
						}
						.recap-rusher-img {
							width: 28px;
							height: 28px;
							background-size: 1200% 3200%;
							background-repeat: no-repeat;
							image-rendering: pixelated;
							image-rendering: crisp-edges;
						}
						.recap-luck-amount li{
							display:inline-block;
							width:14px;
							height:14px;
							background-color:#000;
							border-radius:45px;
						}
						.recap-luck-amount{
							display:flex;
							flex-wrap:nowrap;
							align-items:center;
							gap:1px;
						}
						.recap-luck{
							display:flex;
							align-items:center;
							white-space:nowrap;
						}
						.recap-luck-number{
							font-size:14px;
							display:inline-block;
							white-space:nowrap;
							margin-left:3px;
						}


		.button-style{
			position:relative;
			font-size:24px;
			cursor:pointer;
			-webkit-border-radius: 28;
		  -moz-border-radius: 28;
		  border-radius: 28px;
		  color: var(--offwhite);
		  background-color:#3498db;
		  padding: 20px 30px;
		  text-decoration: none;
			outline:none;
			border:none;
			box-shadow:-3px 3px 0 #000;
		}
			.button-style:hover{
				background-color:#3cb0fd;
			}
			.button-style:active{
				top:3px;
				right:3px;
				box-shadow:none;
			}
			.button-start[aria-busy="true"]{
				animation:syncing-pulse 900ms ease-in-out infinite;
				cursor:wait;
			}
			@keyframes syncing-pulse{
				0%, 100%{
					color:var(--offwhite);
				}
				50%{
					color:#bde3ff;
				}
			}
		.button-save-link{
			margin:10px 0;
		}
		.button-replay-wrapper, .button-save-wrapper{
			margin-top:20px;
		}
			.button-replay-wrapper button, .button-save-wrapper button{
				position:relative;
				font-size:18px;
				cursor:pointer;
			  color: var(--offwhite);
				background-color:#ec1a23;
			  padding: 10px 15px;
			  text-decoration: none;
				outline:none;
				border:none;
				vertical-align:middle;
				box-sizing:border-box;
			}
			.button-replay-wrapper input, .button-save-wrapper input{
				font-size:18px;
				display:none;
				padding:0px;
				width:0px;
				vertical-align:middle;
				box-sizing:border-box;
			}
			.button-replay-wrapper i, .button-save-wrapper i{
				vertical-align: middle;
				margin-right:5px;
				font-size:18px;
			}
		.settings-tag{
			font-size:40px;
		}
		.placements{
			display:inline-block;
			text-align:left;
			max-width:70%;
			margin:0 12.5% 20px 12.5%;
			padding:2.5%;
			background-color:var(--offwhite);
			border-radius:8px;
			color:#000;
			border:4px solid #000;
		}

			.place-photo{
				width:40px;
				height:40px;
			}
			.place-order{
				width:100%;
				font-size:20px;
			}
			.place-order div{
				vertical-align: middle;
			}
			.place-order:first-child .place-number, .place-order:first-child .place-name{
				/* font-size:300%; */
			}
				.gold, .place-order:first-child .place-number, .place-order:first-child .place-name{
					text-shadow: 2px 2px 5px #ffd700,
											-2px 2px 5px #ffd700,
											2px -2px 5px #ffd700,
											-2px -2px 5px #ffd700;
				}
			.place-order:nth-child(2) .place-number, .place-order:nth-child(2) .place-name{
				/* font-size:200%; */
			}
				.silver, .place-order:nth-child(2) .place-number, .place-order:nth-child(2) .place-name{
					text-shadow:2px 2px 5px #c0c0c0,
											-2px 2px 5px #c0c0c0,
											2px -2px 5px #c0c0c0,
											-2px -2px 5px #c0c0c0 !important;
				}
			.place-order:nth-child(3) .place-number, .place-order:nth-child(3) .place-name{
				/* font-size:150%; */
			}
				.bronze, .place-order:nth-child(3) .place-number, .place-order:nth-child(3) .place-name{
					text-shadow:2px 2px 5px #cd7f32,
											-2px 2px 5px #cd7f32,
											2px -2px 5px #cd7f32,
											-2px -2px 5px #cd7f32 !important;
				}
			.place-order:nth-child(4){
				/* margin-top:10px; */
			}
				.place-photo, .place-number, .place-name{
					display:inline-block;
					/* padding:0 0.5%;
					vertical-align: top; */
				}
					.place-number{
						width:42px;
						text-align:right;
						font-size:100%;
						margin-right:10px;
					}
					.place-name{
						text-align:left;
						font-size:100%;
					}

.countdown-box{
	display:none;
	position:absolute;
	z-index:1000;
	width:100%;
	height:100%;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
}
	.countdown-number{
		display:none;
		width:100%;
		text-align:center;
		position:relative;
		top:50%;
		transform:translateY(-50%);
		font-size:400px;
		color:#eb1b23;
		user-select:none;
		text-shadow:
		 -3px -3px 0 #000,
			3px -3px 0 #000,
			-3px 3px 0 #000,
			 3px 3px 0 #000;
	}


.wrapper{
	width:100%;
	height:100%;
}
	.wrapper-top{

	}
	.wrapper-bottom{
		height:100%;
		overflow:hidden;
	}
.replay-title{
	position:relative;
	width:100%;
	text-align:center;
	top:50%;
	transform:translateY(-50%);
}

/* ICONS */
.get-at-me{
	background-color:var(--offwhite);
	color:#000;
	width:70%;
	padding:20px;
	margin:20px auto 0 auto;
	position:relative;
	border-radius:8px;
	border:4px solid #000;
}
.icons{
	background-image:url('/images/sprites/icons.png');
	background-repeat:no-repeat;
	background-size:2100% 200%;
}
	a.icon-link:link, a.icon-link:visited{
		color:#3498db;
	}
	a.icon-link:hover{
		background:none;
	}
	.icon-logo{
		width:40px;
		height:40px;
	}
	.icons-container{
		margin-top:5px;
	}
	.icons-wrapper{
		display:inline-block;
		margin:0 10px;
	}
	.icon-logo, .icon-title{
		display:inline-block;
		vertical-align:middle;
	}
	.i-item-t{
		background-position:30% 100%;
	}
	.i-item-ca{
		background-position:60% 100%;
	}
	.i-item-pp{
		background-position:60% 0;
	}
	.i-item-bc{
		background-position:65% 0;
	}

/* FIELD */
.field-container{
	width:95%;
	height:95%;
	font-size:0px;
	position:relative;
	margin:auto;
	top: 50%;
  transform: translateY(-50%);
	z-index:5;
}
	.field-start, .field-center, .field-end{
		height:100%;
		display:inline-block;
		vertical-align: middle;
		position:relative;
	}
	.field-start, .field-end{
		width:10%;
	}
	.field-center{
		width:80%;
	}
		.field-five{
			width:5%;
			height:100%;
			display:inline-block;
			vertical-align:middle;
			position:relative;
		}

		.p-wrapper{
			position:absolute;
			top:0;
			left:0;
			bottom:0;
			right:0;
			margin:auto;
			font-size:0px;
			z-index:10;
		}
		.p-hold{
			position:relative;
			height:100%;
			width:100%;
		}
		.p-container{
			position:relative;
			width:100%;
			height:8.333333333333333333333333333333%;
		}
		.p-bar-outside{
			position:relative;
			width:100%;
			height:80%;
			top:10%;
		}
		.p-bar{
			left:0;
			height:100%;
			width:0%;
			position:relative;
			background-size:contain;
			background-repeat:no-repeat;
			background-position:center center;
		}
		.p-name{
			position:absolute;
			text-align:right;
			left:auto;
			right:100%;
			white-space:nowrap;
			height:16px;
			top:0;
			bottom:0;
			margin:auto;
			font-size:16px;
			text-shadow:
	     -1px -1px 0 #000,
	      1px -1px 0 #000,
	      -1px 1px 0 #000,
	       1px 1px 0 #000;
		}
		.p-place-container{
			position:absolute;
			top:0;
			right:-12.3333333333333333333333333333%;
			width:12%;
			height:100%;
		}
		.p-place{
			width:96%;
			position:relative;
			left:8%;
			top:50%;
			transform:translateY(-50%);
			font-size:35px;
		}
			.black-outline{
				text-shadow:
				 -1px -1px 0 #000,
					1px -1px 0 #000,
					-1px 1px 0 #000,
					 1px 1px 0 #000;
			}

		@media only screen and (max-width:600px) and (min-width:0px){
			.f-number, .f-number2, .f-topnumber, .f-topnumber2{
				font-size:10px;
			}
			.f-lbarrow::before, .f-rbarrow::after{
				font-size:5px;
				top:0;
			}
			.f-number, .f-topnumber{
				right:1px;
			}
			.f-number2, .f-topnumber2{
				left:1px;
			}
			.p-place{
				font-size:20px;
			}


			.settings-title{
				font-size:18px;
			}
			.material-icons{
				font-size:14px;
			}
			.remote-join-block{
				width:86%;
				box-sizing:border-box;
			}
			.remote-join-link{
				width:94% !important;
				margin-bottom:6px;
			}
			.join-room-code{
				font-size:16px;
			}
			.join-summary-row{
				display:block;
				width:100%;
				margin:5px 0;
			}
			.join-slot{
				display:block;
				width:86%;
				margin:8px auto;
			}
			.settings-switch{
				font-size:8px;
			}
			.numteams-container{
				width:336px;
				position:relative;
				margin:auto;
			}
			.select-number{
				width:14px;
				padding:14px;
				font-size:14px;
			}
			.change-sprite{
				font-size:6px;
				cursor:pointer;
			}
			.sprite-select-box{
				font-size:8px;
			}
			.sprite-current{
				width:50px;
				height:50px;
			}
			.sprite-skin-color{
				width:16px;
				height:16px;
				display:inline-block;
				vertical-align: middle;
				font-size:0px;
				position:relative;
				cursor:pointer;
			}
			.sprite-char{
				margin:2px;
				padding:4px;
			}
			.mi-shuffle{
				font-size:40px;
			}

		}

		 @media screen and (max-width:1070px) and (orientation:landscape) {
				.f-number, .f-number2, .f-topnumber, .f-topnumber2{
				 font-size:12px;
				}
				.f-lbarrow::before, .f-rbarrow::after{
				 font-size:5px;
				 top:0;
				}
				.f-number, .f-topnumber{
				 right:1px;
				}
				.f-number2, .f-topnumber2{
				 left:1px;
				}
				.p-place{
				 font-size:20px;
				}
			 	.sprite-select-box{
					font-size:12px;
				}
				.sprite-current{
					width:75px;
					height:75px;
				}
				.sprite-skin-color{
					width:22px;
					height:22px;
					display:inline-block;
					vertical-align: middle;
					font-size:0px;
					position:relative;
					cursor:pointer;
				}
				.sprite-char{
					margin:4px;
					padding:6px;
				}
		 }