body {
  display: inline-flex;
  margin:0;
  padding:0;
}

.flex-container {
  display: inline-flex;
  margin:0;
  padding:0;
}

.rankingtable { border-radius: 10px; width:250px; height:270px; }

.rankingtable > .column { float: left; width: 250px; height: 100%; background-color: rgb(254, 254, 254); background-image: -webkit-linear-gradient(left, rgb(240, 240, 240) 0%, rgb(254, 254, 254) 44%, rgb(254, 254, 254) 86%, rgb(240, 240, 240) 100%); overflow: hidden; transform: scale(1); transition-timing-function: ease-out; transition-duration: 100ms; position: relative; }

.rankingtable > .column > .head { position: absolute; left: 0px; top: 0px; bottom: 0px; padding: 10px; margin-left: 0px; margin-right: 0px; color: white; text-shadow: 0px 0px black; text-align: center; font-weight: bold; font-size: 15px; width: 20px; font-family: monospace; }

.rankingtable > .column > .body { margin-left: 20px; }

.rankingtable .green { background-image: -webkit-linear-gradient(bottom, rgb(187, 221, 119) 0%, rgb(159, 194, 93) 100%); }

.rankingtable .blue { background-image: -webkit-linear-gradient(bottom, rgb(100, 205, 242) 0%, rgb(59, 163, 201) 100%); }

.rankingtable .orange { background-image: -webkit-linear-gradient(bottom, rgb(242, 194, 86) 0%, rgb(229, 148, 64) 100%); }

.rankingtable .red { background-image: -webkit-linear-gradient(bottom, rgb(227, 25, 25) 0%, rgb(174, 42, 42) 100%); }




.rankingtable .orange2 { background-image: -webkit-linear-gradient(bottom, RGB(231,156,68) 0%, rgb(229, 148, 64) 100%); }

.rankingtable .red2 { background-image: -webkit-linear-gradient(bottom, RGB(192,28,43) 0%, rgb(174, 42, 42) 100%); }



.rankingtable > .column > .body > .row {
	font: 15px arial,sans-serif;
	height: 28px;
	color: rgb(82, 82, 82);
	padding-bottom: 4px;
	padding-left: 70px;
	padding-right: 0px;
	padding-top: 12px;
}


.rankingtable > .column > .body > .row:nth-child(2n) { background-color: rgb(241, 241, 241); }

.rankingtable > .column > .body > .rank1 { background-image: url('1.svg'); background-repeat: no-repeat;  }

.rankingtable > .column > .body > .rank2 { background-image: url('2.svg'); background-repeat: no-repeat; }

.rankingtable > .column > .body > .rank3 { background-image: url('3.svg'); background-repeat: no-repeat; }

.rankingtable > .column > .body > .rank4 { background-image: url('4.svg'); background-repeat: no-repeat; }

.rankingtable > .column > .body > .rank5 { background-image: url('5.svg'); background-repeat: no-repeat; }


.rankingtable > .column > .body > .rankingrow { padding: 8px 10px 10px; font-size: 28px; height: 32px; text-align: center; color:#FFF ; font-weight: bold; }

.rankingtable > .column > .body > .feature { text-shadow: 1px 1px white; }





.rankingtable2 { border-radius: 10px; width:355px; height:540px;  }

.rankingtable2 > .column { float: left; width: 355px; height: 100%; background-color: rgb(254, 254, 254); background-image: -webkit-linear-gradient(left, rgb(240, 240, 240) 0%, rgb(254, 254, 254) 44%, rgb(254, 254, 254) 86%, rgb(240, 240, 240) 100%); overflow: hidden; transform: scale(1); transition-timing-function: ease-out; transition-duration: 100ms; position: relative; }

.rankingtable2 > .column > .head { position: absolute; left: 0px; top: 0px; bottom: 0px; padding: 10px; margin-left: 0px; margin-right: 0px; color: white; text-shadow: 0px 0px black; text-align: center; font-weight: bold; font-size: 20px; width: 30px; font-family: monospace; }

.rankingtable2 > .column > .body { margin-left: 30px;}

.rankingtable2 .green { background-image: -webkit-linear-gradient(bottom, rgb(187, 221, 119) 0%, rgb(159, 194, 93) 100%); }

.rankingtable2 .blue { background-image: -webkit-linear-gradient(bottom, rgb(100, 205, 242) 0%, rgb(59, 163, 201) 100%); }

.rankingtable2 .orange { background-image: -webkit-linear-gradient(bottom, rgb(242, 194, 86) 0%, rgb(229, 148, 64) 100%); }

.rankingtable2 .red { background-image: -webkit-linear-gradient(bottom, rgb(227, 25, 25) 0%, rgb(174, 42, 42) 100%); }




.rankingtable2 .green2 { background-image: -webkit-linear-gradient(bottom, RGB(161,196,108) 0%, rgb(159, 194, 93) 100%); }

.rankingtable2 .blue2 { background-image: -webkit-linear-gradient(bottom, RGB(15,170,203) 0%, rgb(59, 163, 201) 100%); }


.rankingtable2 > .column > .body > .row {
	font: 30px arial,sans-serif;
	height: 75px;
	color: rgb(82, 82, 82);
	padding-bottom: 10px;
	padding-left: 110px;
	padding-right: 0px;
	padding-top: 10px;
	line-height: 38px;
}

.rankingtable2 > .column > .body > .row:nth-child(2n) { background-color: rgb(241, 241, 241); }

.rankingtable2 > .column > .body > .rank1 { background-image: url('p1.svg'); background-repeat: no-repeat; }

.rankingtable2 > .column > .body > .rank2 { background-image: url('p2.svg'); background-repeat: no-repeat; }

.rankingtable2 > .column > .body > .rank3 { background-image: url('p3.svg'); background-repeat: no-repeat; }

.rankingtable2 > .column > .body > .rank4 { background-image: url('p4.svg'); background-repeat: no-repeat; }

.rankingtable2 > .column > .body > .rank5 { background-image: url('p5.svg'); background-repeat: no-repeat; }


.rankingtable2 > .column > .body > .rankingrow {
	padding: 15px 10px 10px;
	font-size: 34px;
	height: 40px;
	text-align: center;
	color:#FFF ;
	font-weight: bold;
}

.rankingtable2 > .column > .body > .feature { text-shadow: 1px 1px white; }