diff --git a/stylesheets/commons/Crosstable.scss b/stylesheets/commons/Crosstable.scss
index b6e20be8522..901624699c7 100644
--- a/stylesheets/commons/Crosstable.scss
+++ b/stylesheets/commons/Crosstable.scss
@@ -11,148 +11,106 @@ $crosstable-red: var( --table-red-background-color, #fbdfdf );
 .crosstable[ class*="crosstable-row-" ] td,
 .crosstable[ class*="crosstable-col-" ] td {
 	opacity: 0.5;
-	-moz-box-shadow: inset 0 0 10px -7px rgba( 0, 0, 0, 1 ), inset 0 0 10px -7px rgba( 0, 0, 0, 1 );
-	-webkit-box-shadow: inset 0 0 10px -7px rgba( 0, 0, 0, 1 ), inset 0 0 10px -7px rgba( 0, 0, 0, 1 );
 	box-shadow: inset 0 0 10px -7px rgba( 0, 0, 0, 1 ), inset 0 0 10px -7px rgba( 0, 0, 0, 1 );
 	background-color: var( --table-background-color, #ffffff );
 	background-clip: padding-box;
 }
 
 @mixin crosstable-shadows($size) {
-	@include crosstable-col(1, $size);
-	@include crosstable-row(1, $size);
+	@include crosstable-col($size);
+	@include crosstable-row($size);
 }
 
 @mixin crosstable-row-over() {
-	-moz-box-shadow: inset 0 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ), inset 0 -10px 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) );
-	-webkit-box-shadow: inset 0 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ), inset 0 -10px 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) );
 	box-shadow: inset 0 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ), inset 0 -10px 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) );
 }
 
 @mixin crosstable-row-under() {
-	-moz-box-shadow: inset 0 10px 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ), inset 0 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) );
-	-webkit-box-shadow: inset 0 10px 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ), inset 0 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) );
 	box-shadow: inset 0 10px 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ), inset 0 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) );
 }
 
 @mixin crosstable-row-left() {
-	-moz-box-shadow: inset 0 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ), inset -10px 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) );
-	-webkit-box-shadow: inset 0 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ), inset -10px 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) );
 	box-shadow: inset 0 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ), inset -10px 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) );
 }
 
 @mixin crosstable-row-right() {
-	-moz-box-shadow: inset 10px 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ), inset 0 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) );
-	-webkit-box-shadow: inset 10px 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ), inset 0 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) );
 	box-shadow: inset 10px 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ), inset 0 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) );
 }
 
 @mixin crosstable-row-standard() {
 	opacity: 1 !important;
-	-moz-box-shadow: unset !important;
-	-webkit-box-shadow: unset !important;
 	box-shadow: unset !important;
 }
 
-@mixin crosstable-col($id, $max) {
-	@if $id <= $max {
-		$idp1: $id + 1;
-		.crosstable.crosstable-col-#{$idp1} td:nth-child(#{$id}) {
+@mixin crosstable-col($max) {
+	@for $i from 1 through $max {
+		.crosstable.crosstable-col-#{$i + 1} td:nth-child(#{$i}) {
 			@include crosstable-row-left();
 		}
-		.crosstable.crosstable-col-#{$id} td:nth-child(#{$idp1}) {
+		.crosstable.crosstable-col-#{$i} td:nth-child(#{$i + 1}) {
 			@include crosstable-row-right();
 		}
-		.crosstable.crosstable-col-#{$id} td:nth-child(#{$id}) {
+		.crosstable.crosstable-col-#{$i} td:nth-child(#{$i}) {
 			@include crosstable-row-standard();
 		}
-
-		@include crosstable-col($id + 1, $max);
 	}
 }
 
-@mixin crosstable-row($id, $max) {
-	@if $id <= $max {
-		$idp1: $id + 1;
-		.crosstable.crosstable-row-#{$idp1} tr:nth-child(#{$id}) td {
+@mixin crosstable-row($max) {
+	@for $i from 1 through $max {
+		.crosstable.crosstable-row-#{$i + 1} tr:nth-child(#{$i}) td {
 			@include crosstable-row-over();
 		}
-		.crosstable.crosstable-row-#{$id} tr:nth-child(#{$idp1}) td {
+		.crosstable.crosstable-row-#{$i} tr:nth-child(#{$i + 1}) td {
 			@include crosstable-row-under();
 		}
-		.crosstable.crosstable-row-#{$id} tr:nth-child(#{$id}) td {
+		.crosstable.crosstable-row-#{$i} tr:nth-child(#{$i}) td {
 			@include crosstable-row-standard();
 		}
-
-		@include crosstable-row($id + 1, $max);
 	}
 }
 
 @include crosstable-shadows($crosstable-size);
 
 .crosstable .crosstable-top-left {
-	-moz-box-shadow: inset 0 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ), inset -10px -10px 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ) !important;
-	-webkit-box-shadow: inset 0 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ), inset -10px -10px 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ) !important;
 	box-shadow: inset 0 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ), inset -10px -10px 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ) !important;
 }
 
 .crosstable .crosstable-top-right {
-	-moz-box-shadow: inset 10px 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ), inset 0 -10px 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ) !important;
-	-webkit-box-shadow: inset 10px 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ), inset 0 -10px 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ) !important;
 	box-shadow: inset 10px 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ), inset 0 -10px 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ) !important;
 }
 
 .crosstable .crosstable-bottom-left {
-	-moz-box-shadow: inset 0 10px 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ), inset -10px 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ) !important;
-	-webkit-box-shadow: inset 0 10px 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ), inset -10px 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ) !important;
 	box-shadow: inset 0 10px 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ), inset -10px 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ) !important;
 }
 
 .crosstable .crosstable-bottom-right {
-	-moz-box-shadow: inset 10px 10px 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ), inset 0 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ) !important;
-	-webkit-box-shadow: inset 10px 10px 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ), inset 0 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ) !important;
 	box-shadow: inset 10px 10px 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ), inset 0 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ) !important;
 }
 
 @mixin crosstable($min, $max) {
-	@include crosstable-outer($min, $max, $min);
-}
-
-@mixin crosstable-outer($min, $max, $current) {
-	@if $current <= $max {
-		@include crosstable-inner($min, $max, $min, $current);
-		@include crosstable-outer($min, $max, $current + 1);
+	@for $current from $min through $max {
+		@include crosstable-inner($min, $max, $current);
 	}
 }
 
-@mixin crosstable-inner($min, $max, $current, $outer) {
-	@if $current <= $max {
-		@include crosstable-gray($current, $outer);
-		@include crosstable-green($current, $outer);
-		@include crosstable-red($current, $outer);
-		@include crosstable-inner($min, $max, $current + 1, $outer);
+@mixin crosstable-inner($min, $max, $outer) {
+	@for $current from $min through $max {
+		@include crosstable-color($current, $outer);
 	}
 }
 
-@mixin crosstable-gray($s1, $s2) {
-	@if $s1 == $s2 {
-		td.crosstable-bgc-r#{$s1}-r#{$s2} {
+@mixin crosstable-color($s1, $s2) {
+	td.crosstable-bgc-r#{$s1}-r#{$s2} {
+		@if $s1 == $s2 {
 			background-color: $crosstable-yellow;
 		}
-	}
-}
 
-@mixin crosstable-green($s1, $s2) {
-	@if $s1 > $s2 {
-		td.crosstable-bgc-r#{$s1}-r#{$s2} {
+		@else if $s1 > $s2 {
 			background-color: $crosstable-green;
 		}
-	}
-}
 
-@mixin crosstable-red($s1, $s2) {
-	@if $s1 < $s2 {
-		td.crosstable-bgc-r#{$s1}-r#{$s2} {
+		@else {
 			background-color: $crosstable-red;
 		}
 	}
@@ -219,24 +177,24 @@ $crosstable-red: var( --table-red-background-color, #fbdfdf );
 	text-align: center;
 }
 
-.crosstable .crosstable-tr {
-	height: 30px;
-}
-
 .crosstable {
 	text-align: center;
 	margin: 0;
 	line-height: 14px;
-}
 
-.crosstable th,
-.crosstable td {
-	padding: 1px;
-}
+	.crosstable-tr {
+		height: 30px;
+	}
+
+	th,
+	td {
+		padding: 1px;
+	}
 
-/* fix for i icon in crosstables */
-.crosstable .bracket-game .icon {
-	margin-top: 2px !important;
-	margin-right: -6px !important;
-	opacity: 0.6;
+	/* fix for i icon in crosstables */
+	.bracket-game .icon {
+		margin-top: 2px !important;
+		margin-right: -6px !important;
+		opacity: 0.6;
+	}
 }