:root {
	--viewWidth: 30vw;
  }

#kit_topbox {
	width: 30vw;
	height: 40vw;
	position: relative;
}

#oldkits_select, #newkits_select {
	width: 100%;
	height: 20vw;
	position: relative;
}

.topbox {
	padding: 3% 0 0 0;
	background-color: rgba(146,190,168,0.6);
	font-family: BoldFont;
}

.topbox::after {
    content: "";
    display: table;
    clear: both;
}

.topbox_table, .listbox_table, .hofbox_table, .recbox_table {
	width: 100%;
	padding: 0;
	margin: 0;
	border-spacing: 0;
}

.topbox_left, .listbox_left, .hofbox_left, .recbox_left {
	overflow: hidden;
	padding: 0 !important;
	margin: 0;
	vertical-align: bottom;
}

.topbox_right, .listbox_right, .hofbox_right {
	width: 53%;
	overflow: hidden;
	padding: 0 !important;
	margin: 0;
	vertical-align: middle;
}

.ph_flip {
	transform: scale(-1, 1);
	transform-origin: center;
	margin-right: 10%;
}

.shirtpic {
	position:absolute;
	left:0;
	top:0;
	z-index: 10;
	width: 100%;
	height: 100%;
}

.shirtpic_new {
	position:absolute;
	right:0;
	bottom:0;
	width: 100%;
	height: 100%;
}

.shirtpic_new_shirt {
	z-index: 20;
}

.shirtpic_new_style {
	z-index: 30;
}

.shirtpic_new_collar {
	z-index: 40;
}

.shirtpic_xs {
	position:absolute;
	left:-20%;
	top:-15%;
	width: 140%;
	height: 140%;
}

.fspicholder {
	padding: 0 !important;
	display: block;
	position:relative;
	background-color: transparent;
}

.fspicholder {
	height: calc(var(--viewWidth)*0.65);
	width: auto;
	margin: 0 auto 0;
}

.fspicholder_small {
	height: 100px;
	width: auto;
	margin: 0 auto 0;
}

.fskitholder {
	display: block;
	position:relative;
	overflow: hidden;
	width: 100%;
	height: calc(var(--viewWidth)*0.65);
	max-width: 100%;
	max-height: calc(var(--viewWidth)*0.65);
}

.fskitholder_small {
	display: block;
	position:relative;
	overflow: hidden;
	width: 75px;
	height: 100px;
}

.fspicleft {
	position:absolute;
	left:-30%;
	top:0;
	width: 100%;
	height: 100%;
	z-index: 10;
    margin: 0px !important;
	padding: 0px !important;
}

.fspicright {
	position:absolute;
	right:-30%;
	top:0;
	width: 100%;
	height: 100%;
	z-index: 20;
    margin: 0px !important;
	padding: 0px !important;
}

.fspicmiddle {
	position:absolute;
	left:0;
	top:0;
	width: 100%;
	height: 100%;
	z-index: 30;
    margin: 0px !important;
	padding: 0px !important;
}

.fsshirtpic {
	position:absolute;
	left:0;
	top:0;
	z-index: 20;
	width: 100%;
	height: 100%;
}

.fsstylepic {
	position:absolute;
	left:0;
	top:0;
	z-index: 25;
	width: 100%;
	height: 100%;
}

.fsbodypic {
	position:absolute;
	left:0;
	top:0;
	z-index: 10;
	width: 100%;
	height: 100%;
}

.fscollarpic {
	position:absolute;
	left:0;
	top:0;
	z-index: 30;
	width: 100%;
	height: 100%;
}

.fsshadowpic {
	position:absolute;
	left:0;
	top:0;
	z-index: 40;
	width: 100%;
	height: 100%;
}

.colourselect {
    width: calc(var(--viewWidth)*0.085);
    height: calc(var(--viewWidth)*0.085);
}

.colourselect_outer {
	display: inline-block;
	float: none;
    width: calc(var(--viewWidth)*0.085);
    height: calc(var(--viewWidth)*0.085);
}

.colourselect_banned {
	background-color: #c0c0c0 !important;
    width: calc(var(--viewWidth)*0.085);
    height: calc(var(--viewWidth)*0.085);
	display: inline-block;
}

.cstable {
    width: 100%;
}

.cstable td {
    width: calc(var(--viewWidth)*0.085);
    height: calc(var(--viewWidth)*0.085);
	padding: 0px !important;
}

.cstable td a {
	line-height: 0%;
}

.cstable, .cstable tr, .cstable td {
    margin: 0px auto;
	border: 0px;
}

#shirtdiv, #stylediv, #collardiv, #shirtcolour1, #shirtcolour2, #collarcolour, #kstable {
	text-align: center;
	padding-bottom: 0.8em;
}

.colourselected {
	outline: 3px solid #333 !important;
    width: calc(var(--viewWidth)*0.085);
    height: calc(var(--viewWidth)*0.085);	
}

.fswhite, .fscola {
	filter: saturate(100%) brightness(0) invert(100%) sepia(0%) saturate(7500%) hue-rotate(37deg) brightness(129%) contrast(102%);
}
.newcola {
	color: #fff !important;
}
.newbga {
	background-color: #fff !important;
}
.bordera {
	border-color: #fff !important;
}
.fssilver, .fscolb {
	filter: saturate(100%) brightness(0) invert(100%) sepia(0%) saturate(624%) hue-rotate(178deg) brightness(91%) contrast(89%);
}
.newcolb {
	color: #dddddd !important;
}
.newbgb {
	background-color: #dddddd !important;
}
.borderb {
	border-color: #dddddd !important;
}
.fsmidgrey, .fscolc {
	filter: saturate(100%) brightness(0) invert(72%) sepia(4%) saturate(10%) hue-rotate(17deg) brightness(94%) contrast(79%);
}
.newcolc, .mrtext0 {
	color: #a4a4a4 !important;
}
.newbgc, .mrbg0 {
	background-color: #a4a4a4 !important;
}
.borderc, .mrborder0 {
	border-color: #a4a4a4 !important;
}
.fsgrey, .fscold {
	filter: saturate(100%) brightness(0) invert(34%) sepia(20%) saturate(0%) hue-rotate(213deg) brightness(91%) contrast(84%);
}
.newcold {
	color: #5a5a5a !important;
}
.newbgd {
	background-color: #5a5a5a !important;
}
.borderd {
	border-color: #5a5a5a !important;
}
.fsblack, .fscole {
	filter: saturate(100%) brightness(0) invert(0%) sepia(3%) saturate(2998%) hue-rotate(89deg) brightness(94%) contrast(106%);
}
.newcole {
	color: #000 !important;
}
.newbge {
	background-color: #000 !important;
}
.bordere {
	border-color: #000 !important;
}
.fsyellow, .fscolf {
	filter: saturate(100%) brightness(0) invert(72%) sepia(13%) saturate(3986%) hue-rotate(14deg) brightness(106%) contrast(102%);
}
.newcolf {
	color: #dfcd00 !important;
}
.newbgf {
	background-color: #dfcd00 !important;
}
.borderf {
	border-color: #dfcd00 !important;
}
.fsgold, .fscolg {
	filter: saturate(100%) brightness(0) invert(77%) sepia(94%) saturate(2034%) hue-rotate(343deg) brightness(88%) contrast(87%);
}
.newcolg {
	color: #d4a622 !important;
}
.newbgg {
	background-color: #d4a622 !important;
}
.borderg {
	border-color: #d4a622 !important;
}
.fsorange, .fscolh {
	filter: saturate(100%) brightness(0) invert(48%) sepia(89%) saturate(1200%) hue-rotate(9deg) brightness(101%) contrast(101%);
}
.newcolh, .mrtext5, .mrtext6 {
	color: #ea8c00 !important;
}
.newbgh, .mrbg5, .mrbg6 {
	background-color: #ea8c00 !important;
}
.borderh, .mrborder5, .mrborder6 {
	border-color: #ea8c00 !important;
}
.fsblue, .fscoli {
	filter: saturate(100%) brightness(0) invert(42%) sepia(80%) saturate(4574%) hue-rotate(216deg) brightness(83%) contrast(101%);
}
.newcoli, .mrtext9 {
	color: #2e59d4 !important;
}
.newbgi, .mrbg9 {
	background-color: #2e59d4 !important;
}
.borderi, .mrborder9 {
	border-color: #2e59d4 !important;
}
.fsmidblue, .fscolj {
	filter: saturate(100%) brightness(0) invert(9%) sepia(95%) saturate(6244%) hue-rotate(232deg) brightness(84%) contrast(89%);
}
.newcolj {
	color: #0e36ac !important;
}
.newbgj {
	background-color: #0e36ac !important;
}
.borderj {
	border-color: #0e36ac !important;
}
.fsnavy, .fscolk {
	filter: saturate(100%) brightness(0) invert(11%) sepia(57%) saturate(3046%) hue-rotate(215deg) brightness(93%) contrast(99%);
}
.newcolk {
	color: #0e2661 !important;
}
.newbgk {
	background-color: #0e2661 !important;
}
.borderk {
	border-color: #0e2661 !important;
}
.fssky, .fscoll {
	filter: saturate(100%) brightness(0) invert(71%) sepia(8%) saturate(2220%) hue-rotate(178deg) brightness(91%) contrast(95%);
}
.newcoll {
	color: #7daae3 !important;
}
.newbgl {
	background-color: #7daae3 !important;
}
.borderl {
	border-color: #7daae3 !important;
}
.fscyan, .fscolm {
	filter: saturate(100%) brightness(0) invert(81%) sepia(74%) saturate(550%) hue-rotate(164deg) brightness(83%) contrast(91%);
}
.newcolm {
	color: #70b9cc !important;
}
.newbgm {
	background-color: #70b9cc !important;
}
.borderm {
	border-color: #70b9cc !important;
}
.fsaqua, .fscoln {
	filter: saturate(100%) brightness(0) invert(23%) sepia(12%) saturate(6545%) hue-rotate(158deg) brightness(96%) contrast(84%);
}
.newcoln {
	color: #145868 !important;
}
.newbgn {
	background-color: #145868 !important;
}
.bordern {
	border-color: #145868 !important;
}
.fsdarkgreen, .fscolo {
	filter: saturate(100%) brightness(0) invert(15%) sepia(84%) saturate(4064%) hue-rotate(94deg) brightness(95%) contrast(103%);
}
.newcolo {
	color: #006400 !important;
}
.newbgo {
	background-color: #006400 !important;
}
.bordero {
	border-color: #006400 !important;
}
.fsgreen, .fscolp {
	filter: saturate(100%) brightness(0) invert(43%) sepia(67%) saturate(735%) hue-rotate(65deg) brightness(88%) contrast(79%);
}
.newcolp, .mrtext7, .mrtext8 {
	color: #368d1f !important;
}
.newbgp, .mrbg7, .mrbg8 {
	background-color: #368d1f !important;
}
.borderp, .mrborder7, .mrborder8 {
	border-color: #368d1f !important;
}
.fsred, .fscolq {
	filter: saturate(100%) brightness(0) invert(17%) sepia(85%) saturate(4144%) hue-rotate(352deg) brightness(82%) contrast(103%);
}
.newcolq {
	color: #d01414 !important;
}
.newbgq {
	background-color: #d01414 !important;
}
.borderq {
	border-color: #d01414 !important;
}
.fsmidred, .fscolr {
	filter: saturate(100%) brightness(0) invert(6%) sepia(97%) saturate(6978%) hue-rotate(1deg) brightness(111%) contrast(103%);
}
.newcolr, .mrtext3, .mrtext4 {
	color: #ac0000 !important;
}
.newbgr, .mrbg3, .mrbg4 {
	background-color: #ac0000 !important;
}
.borderr, .mrborder3, .mrborder4 {
	border-color: #ac0000 !important;
}
.fsclaret, .fscols {
	filter: saturate(100%) brightness(0) invert(7%) sepia(80%) saturate(5901%) hue-rotate(320deg) brightness(76%) contrast(105%);
}
.newcols {
	color: #660033 !important;
}
.newbgs {
	background-color: #660033 !important;
}
.borders {
	border-color: #660033 !important;
}
.fspurple, .fscolt {
	filter: saturate(100%) brightness(0) invert(20%) sepia(36%) saturate(3442%) hue-rotate(258deg) brightness(91%) contrast(94%);
}
.newcolt {
	color: #642a88 !important;
}
.newbgt {
	background-color: #642a88 !important;
}
.bordert {
	border-color: #642a88 !important;
}
.fscerise, .fscolu {
	filter: saturate(100%) brightness(0) invert(24%) sepia(94%) saturate(2057%) hue-rotate(306deg) brightness(83%) contrast(86%);
}
.newcolu {
	color: #c42e7f !important;
}
.newbgu {
	background-color: #c42e7f !important;
}
.borderu {
	border-color: #c42e7f !important;
}
.fspink, .fscolv {
	filter: saturate(100%) brightness(0) invert(92%) sepia(18%) saturate(7450%) hue-rotate(285deg) brightness(92%) contrast(96%);
}
.newcolv {
	color: #e781b8 !important;
}
.newbgv {
	background-color: #e781b8 !important;
}
.borderv {
	border-color: #e781b8 !important;
}
.fsbrown, .fscolw {
	filter: saturate(100%) brightness(0) invert(20%) sepia(76%) saturate(961%) hue-rotate(10deg) brightness(99%) contrast(106%);
}
.newcolw {
	color: #5f3600 !important;
}
.newbgw {
	background-color: #5f3600 !important;
}
.borderw {
	border-color: #5f3600 !important;
}
.fsbeige, .fscolx {
	filter: saturate(100%) brightness(0) invert(87%) sepia(26%) saturate(307%) hue-rotate(7deg) brightness(90%) contrast(94%);
}
.newcolx {
	color: #dacea2 !important;
}
.newbgx {
	background-color: #dacea2 !important;
}
.borderx {
	border-color: #dacea2 !important;
}

.facepic_new {
	filter: drop-shadow( -5px 0px 5px rgba(0, 0, 0, .2));
}

.radiobox_header {
	font-size: 0.8em;
	font-family: BoldFont;
	text-transform: uppercase;
	padding: calc(var(--viewWidth)*0.04) 0 calc(var(--viewWidth)*0.01) 0 !important;
}

.radiobox_header_nopad {
	font-size: 0.8em;
	font-family: BoldFont;
	text-transform: uppercase;
	padding: 0 0 calc(var(--viewWidth)*0.007) 0 !important;
}

.radiobox_20_disabled {
	width: 20%;
	padding: 2% 0% !important;
	background-color: #ccc;
	text-align: center;
	color: #999;
	border-right: 1px solid rgba(255, 255, 255, .1);
	background-clip: padding-box;
	border-radius: 0.2em;
}

.radiobox_20_off {
	width: 20%;
	padding: 2% 0% !important;
	background-color: #fff;
	text-align: center;
	color: #666;
	border-right: 1px solid rgba(255, 255, 255, .1);
	background-clip: padding-box;
	border-radius: 0.2em;
}

.radiobox_20_on {
	width: 20%;
	padding: 2% 0% !important;
	background-color: #92bea8;
	text-align: center;
	color: #000;
	border-right: 1px solid rgba(255, 255, 255, .1);
	background-clip: padding-box;
	border-radius: 0.2em;
	font-family: BoldFont;
}

.radiobox_disabled {
	width: 27%;
	padding: 2% 0% !important;
	background-color: #ccc;
	text-align: center;
	color: #999;
	border-right: 1px solid rgba(120, 120, 120, 0.1);
	border-left: 1px solid rgba(120, 120, 120, 0.1);
	border-radius: 0.2em;
}

.radiobox_off {
	width: 27%;
	padding: 2% 0% !important;
	background-color: #fff;
	text-align: center;
	color: #666;
	border-right: 1px solid rgba(120, 120, 120, 0.1);
	border-left: 1px solid rgba(120, 120, 120, 0.1);
	border-radius: 0.2em;
}

.radiobox_on {
	width: 27%;
	padding: 2% 0% !important;
	background-color: #92bea8;
	text-align: center;
	color: #000;
	border-right: 1px solid rgba(120, 120, 120, 0.1);
	border-left: 1px solid rgba(120, 120, 120, 0.1);
	border-radius: 0.2em;
	font-family: BoldFont;
}

.radiobox_border {
	box-shadow: inset 0 0 0px 4px #92bea8;
}