@charset "utf-8";

body {
    font-family:
        'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, 'メイリオ', Osaka, 'MS PGothic',
        arial, helvetica, sans-serif;
}

.langline {
    border-top: solid #42b70d 5px;
}
.lang {
    display: inline-block;
    width: 150px;
    heigh: 21px;
    text-align: center;
    background-color: #42b70d;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    cursor: pointer;
    color: #ffffff;
    font-weight: bold;
}

.ui.header.underline {
    display: inline-block;
    border-bottom: 3px solid;
    line-height: 1;
    padding-bottom: 0rem;
    margin-top: 3rem;
    margin-bottom: 1rem;
    font-weight: bold;
}

.ui.dropdown.lang {
    text-align: center;
    heigh: 21px;
}

.main.segment {
    background-color: #b5cc18;
}

.imageMemo {
    font-size: 14px;
    margin: 0px;
    font-weight: bold;
}

.imageRow {
    margin-top: -25px;
}

.underline {
    border-bottom: solid 2px;
}

.text-red {
    color: red;
}

.redCaption {
    font-size: 23px;
    text-shadow: 1px 1px 1px #999999;
    margin: 0px;
    color: #c00000;
}

.caption {
    font-size: 23px;
    margin: 0px;
}

.ui.segment.banner {
    cursor: pointer;
    border-radius: 25px 25px 25px 25px / 25px 25px 25px 25px;
}

.campaign {
    font-size: 24px;
    margin: 0px;
}
.campaign.pointer {
    font-size: 20px;
    color: yellow;
    font-weight: large;
}

li.cost > span {
    color: red;
    font-size: 120%;
    font-weight: bold;
}

.totalCost {
    color: #ff3333;
    font-size: 150%;
    font-weight: bold;
}

.tds2Check {
    color: green;
    font-size: 80%;
    font-weight: bold;
}

.ui.soro.label,
.ui.soro.labels .label {
    font-size: 2rem;
}

.ui.soro.active.label,
.ui.soro.active.label:hover {
    background-color: #21ba45;
}

.ui.soro.table {
    margin: 0;
}

a.disabled {
    pointer-events: none;
    cursor: default;
}

.clickable {
    cursor: pointer;
}

/* result */

.ui.red.ribbon.label.reportLabel {
    margin-top: 10px;
    margin-bottom: 10px;
}

.resultTitle {
    font-size: 85%;
    font-weight: bold;
    text-align: left;
}
.resultTitle.blue {
    color: #2185d0;
}

.resultTable {
    min-height: 62px;
    border-radius: 5px;
    border: solid;
    border-width: 4px;
}
.resultTable.blue {
    border-color: #2185d0;
}
.ui.two.column.stackable.grid.stampGrid {
    margin-bottom: -40px;
}
.stampTable {
    min-height: 32px;
    min-width: 16px;
    width: 100%;
    border-radius: 5px;
    border: solid;
    border-width: 4px;
}
.stampTable.blue {
    border-color: #2185d0;
}
.stampImage {
    padding: 5px;
    width: 100%;
    height: 100%;
}
.rowStamp {
    width: 30%;
    height: 30%;
}

.stampMessage {
    font-size: 8px;
    font-weight: bold;
    margin-top: -3px;
}
.stampRow {
    display: block;
    font-size: 65%;
    text-align: center;
    color: black;
}

.resultRow {
    display: block;
    font-size: 80%;
    text-align: center;
    color: black;
}
.resultRow.flex {
    display: flex;
}
.resultRow.blue {
    background-color: #2185d0;
    color: white;
}
.resultRow:after {
    content: '.';
    display: block;
    height: 0;
    font-size: 0;
    clear: both;
    visibility: hidden;
}
.resultRow.stampBorder {
    border-bottom: solid 1px #2185d0;
}
.resultCaption {
    border-top: solid 4px #2185d0;
    display: block;
    font-size: 100%;
    font-weight: bold;
    text-align: center;
    color: black;
}
.reportRow {
    display: table;
    width: 100%;
    font-size: 80%;
    text-align: center;
    color: black;
}
.reportRow.blue {
    background-color: #2185d0;
    color: white;
}
.reportRow.gold {
    background-color: #ffd700;
    color: black;
}
.reportRow.silver {
    background-color: #c0c0c0;
    color: black;
}
.reportRow.bronze {
    background-color: #c0894e;
    color: white;
}
.reportRow.clear {
    background-color: paleturquoise;
}
.reportRow.game {
    background-color: #ffcae4;
}
.reportRow.top {
    border-bottom: 4px solid #2185d0;
}

.reportRow .w4 {
    display: table-cell;
    width: 4%;
    vertical-align: middle;
    text-align: center;
    font-weight: bold;
    border-right: solid 1px #2185d0;
    border-bottom: solid 1px #2185d0;
}
.reportRow .w7 {
    display: table-cell;
    width: 7%;
    vertical-align: middle;
    text-align: center;
    font-weight: bold;
    border-right: solid 1px #2185d0;
    border-bottom: solid 1px #2185d0;
}
.reportRow .w7:nth-of-type(n + 9) {
    display: none;
}
.reportRow .gray {
    background-color: #e0e0e0;
}
.reportRow.clear .gray {
    background-color: #9fdede;
}
.reportRow .white {
    background-color: #ffffff;
}
.reportRow .falsepart {
    color: red;
}
.reportRow .ng_count {
    font-size: 75%;
    font-style: italic;
    color: gray;
}
.reportRow .miss_ans {
    text-decoration: line-through;
}
.reportRow .miss_ans span {
    color: red;
}

.reportRow .w8 {
    display: table-cell;
    width: 8%;
    vertical-align: middle;
    text-align: center;
    font-weight: bold;
    border-right: solid 1px #2185d0;
    border-bottom: solid 1px #2185d0;
}
/* 教室学習アイコン */
.reportRow .schoolingImg {
    width: 13px;
    height: auto;
    vertical-align: middle;
}
.reportRow .medalImg {
    width: auto;
    height: 34px;
    vertical-align: middle;
    text-align: center;
}
.reportRow .w10 {
    display: table-cell;
    width: 10%;
    vertical-align: middle;
    text-align: center;
    border-right: solid 1px #2185d0;
    border-bottom: solid 1px #2185d0;
    font-weight: bold;
}
.reportRow .rowQuestionStamp {
    width: 32px;
    height: 32px;
    display: block;
    margin: 0 auto;
}
.reportRow .w15 {
    display: table-cell;
    width: 15%;
    vertical-align: middle;
    text-align: center;
    font-weight: bold;
    border-right: solid 1px #2185d0;
    border-bottom: solid 1px #2185d0;
}
.reportRow .w28 {
    display: table-cell;
    width: 28%;
    padding-left: 5px;
    vertical-align: middle;
    text-align: center;
    border-bottom: solid 1px #2185d0;
    font-weight: bold;
}
.reportRow .w35 {
    display: table-cell;
    width: 35%;
    padding-left: 5px;
    vertical-align: middle;
    text-align: left;
    font-weight: bold;
    border-right: solid 1px #2185d0;
    border-bottom: solid 1px #2185d0;
}
.reportRow .w37 {
    display: table-cell;
    width: 37%;
    padding-left: 5px;
    vertical-align: middle;
    text-align: center;
    border-bottom: solid 1px #2185d0;
    font-weight: bold;
}
.reportRow .w44 {
    display: table-cell;
    width: 44%;
    padding-left: 5px;
    vertical-align: middle;
    text-align: left;
    font-weight: bold;
    border-right: solid 1px #2185d0;
    border-bottom: solid 1px #2185d0;
}
.reportRow .left {
    text-align: left;
}

.resultRow .w10 {
    width: 10%;
    float: left;
}

.resultRow .w15 {
    width: 15%;
    float: left;
}
.resultRow .w15.tableBorder {
    text-align: center;
    border-right: solid 1px #2185d0;
    border-bottom: solid 1px #2185d0;
    font-weight: bold;
}
.resultRow .w16 {
    width: 16.5%;
    float: left;
}
.resultRow .graphBorder {
    border-right: solid 1px #2185d0;
}
.resultRow .w20 {
    font-weight: bold;
    width: 20%;
    float: left;
    border-right: solid 1px black;
    background-color: white;
}
.resultRow .w25 {
    width: 25%;
    float: left;
}
.resultRow .w25.tableBorder {
    text-align: center;
    border-right: solid 1px #2185d0;
    border-bottom: solid 1px #2185d0;
    font-weight: bold;
}
.resultRow .w30 {
    width: 30%;
    float: left;
}
.resultRow .w30.tableBorder {
    text-align: center;
    border-right: solid 1px #2185d0;
    border-bottom: solid 1px #2185d0;
    font-weight: bold;
}
.resultRow .w33 {
    width: 33%;
    float: left;
}
.resultRow .w40 {
    width: 40%;
    float: left;
}
.resultRow .w60 {
    width: 60%;
    float: left;
}
.resultRow .w80 {
    width: 80%;
    float: left;
}
.resultRow .w80 .barGraph {
    color: black;
    font-weight: bold;
    background-color: #00cc00;
    height: 15px;
    margin-top: 4px;
    margin-right: auto;
    float: left;
    text-align: right;
    /* padding-right: 10px; */
}
.resultRow .w80 .outer {
    color: black;
    font-weight: bold;
    margin-top: 3px;
    margin-left: 5px;
    float: left;
}
.resultRow .w80 .selected p {
    color: red;
}
.resultRow .w80 .barGraph.bar0 {
    width: 0%;
    padding-right: 0px;
}
.resultRow .w80 .barGraph.bar1 {
    width: 1%;
}
.resultRow .w80 .barGraph.bar2 {
    width: 2%;
}
.resultRow .w80 .barGraph.bar3 {
    width: 3%;
}
.resultRow .w80 .barGraph.bar4 {
    width: 4%;
}
.resultRow .w80 .barGraph.bar5 {
    width: 5%;
}
.resultRow .w80 .barGraph.bar6 {
    width: 6%;
}
.resultRow .w80 .barGraph.bar7 {
    width: 7%;
}
.resultRow .w80 .barGraph.bar8 {
    width: 8%;
}
.resultRow .w80 .barGraph.bar9 {
    width: 9%;
}
.resultRow .w80 .barGraph.bar10 {
    width: 10%;
}
.resultRow .w80 .barGraph.bar11 {
    width: 11%;
}
.resultRow .w80 .barGraph.bar12 {
    width: 12%;
}
.resultRow .w80 .barGraph.bar13 {
    width: 13%;
}
.resultRow .w80 .barGraph.bar14 {
    width: 14%;
}
.resultRow .w80 .barGraph.bar15 {
    width: 15%;
}
.resultRow .w80 .barGraph.bar16 {
    width: 16%;
}
.resultRow .w80 .barGraph.bar17 {
    width: 17%;
}
.resultRow .w80 .barGraph.bar18 {
    width: 18%;
}
.resultRow .w80 .barGraph.bar19 {
    width: 19%;
}
.resultRow .w80 .barGraph.bar20 {
    width: 20%;
}
.resultRow .w80 .barGraph.bar21 {
    width: 21%;
}
.resultRow .w80 .barGraph.bar22 {
    width: 22%;
}
.resultRow .w80 .barGraph.bar23 {
    width: 23%;
}
.resultRow .w80 .barGraph.bar24 {
    width: 24%;
}
.resultRow .w80 .barGraph.bar25 {
    width: 25%;
}
.resultRow .w80 .barGraph.bar26 {
    width: 26%;
}
.resultRow .w80 .barGraph.bar27 {
    width: 27%;
}
.resultRow .w80 .barGraph.bar28 {
    width: 28%;
}
.resultRow .w80 .barGraph.bar29 {
    width: 29%;
}
.resultRow .w80 .barGraph.bar30 {
    width: 30%;
}
.resultRow .w80 .barGraph.bar31 {
    width: 31%;
}
.resultRow .w80 .barGraph.bar32 {
    width: 32%;
}
.resultRow .w80 .barGraph.bar33 {
    width: 33%;
}
.resultRow .w80 .barGraph.bar34 {
    width: 34%;
}
.resultRow .w80 .barGraph.bar35 {
    width: 35%;
}
.resultRow .w80 .barGraph.bar36 {
    width: 36%;
}
.resultRow .w80 .barGraph.bar37 {
    width: 37%;
}
.resultRow .w80 .barGraph.bar38 {
    width: 38%;
}
.resultRow .w80 .barGraph.bar39 {
    width: 39%;
}
.resultRow .w80 .barGraph.bar40 {
    width: 40%;
}
.resultRow .w80 .barGraph.bar41 {
    width: 41%;
}
.resultRow .w80 .barGraph.bar42 {
    width: 42%;
}
.resultRow .w80 .barGraph.bar43 {
    width: 43%;
}
.resultRow .w80 .barGraph.bar44 {
    width: 44%;
}
.resultRow .w80 .barGraph.bar45 {
    width: 45%;
}
.resultRow .w80 .barGraph.bar46 {
    width: 46%;
}
.resultRow .w80 .barGraph.bar47 {
    width: 47%;
}
.resultRow .w80 .barGraph.bar48 {
    width: 48%;
}
.resultRow .w80 .barGraph.bar49 {
    width: 49%;
}
.resultRow .w80 .barGraph.bar50 {
    width: 50%;
}
.resultRow .w80 .barGraph.bar51 {
    width: 51%;
}
.resultRow .w80 .barGraph.bar52 {
    width: 52%;
}
.resultRow .w80 .barGraph.bar53 {
    width: 53%;
}
.resultRow .w80 .barGraph.bar54 {
    width: 54%;
}
.resultRow .w80 .barGraph.bar55 {
    width: 55%;
}
.resultRow .w80 .barGraph.bar56 {
    width: 56%;
}
.resultRow .w80 .barGraph.bar57 {
    width: 57%;
}
.resultRow .w80 .barGraph.bar58 {
    width: 58%;
}
.resultRow .w80 .barGraph.bar59 {
    width: 59%;
}
.resultRow .w80 .barGraph.bar60 {
    width: 60%;
}
.resultRow .w80 .barGraph.bar61 {
    width: 61%;
}
.resultRow .w80 .barGraph.bar62 {
    width: 62%;
}
.resultRow .w80 .barGraph.bar63 {
    width: 63%;
}
.resultRow .w80 .barGraph.bar64 {
    width: 64%;
}
.resultRow .w80 .barGraph.bar65 {
    width: 65%;
}
.resultRow .w80 .barGraph.bar66 {
    width: 66%;
}
.resultRow .w80 .barGraph.bar67 {
    width: 67%;
}
.resultRow .w80 .barGraph.bar68 {
    width: 68%;
}
.resultRow .w80 .barGraph.bar69 {
    width: 69%;
}
.resultRow .w80 .barGraph.bar70 {
    width: 70%;
}
.resultRow .w80 .barGraph.bar71 {
    width: 71%;
}
.resultRow .w80 .barGraph.bar72 {
    width: 72%;
}
.resultRow .w80 .barGraph.bar73 {
    width: 73%;
}
.resultRow .w80 .barGraph.bar74 {
    width: 74%;
}
.resultRow .w80 .barGraph.bar75 {
    width: 75%;
}
.resultRow .w80 .barGraph.bar76 {
    width: 76%;
}
.resultRow .w80 .barGraph.bar77 {
    width: 77%;
}
.resultRow .w80 .barGraph.bar78 {
    width: 78%;
}
.resultRow .w80 .barGraph.bar79 {
    width: 79%;
}
.resultRow .w80 .barGraph.bar80 {
    width: 80%;
}
.resultRow .w80 .barGraph.bar81 {
    width: 81%;
}
.resultRow .w80 .barGraph.bar82 {
    width: 82%;
}
.resultRow .w80 .barGraph.bar83 {
    width: 83%;
}
.resultRow .w80 .barGraph.bar84 {
    width: 84%;
}
.resultRow .w80 .barGraph.bar85 {
    width: 85%;
}
.resultRow .w80 .barGraph.bar86 {
    width: 86%;
}
.resultRow .w80 .barGraph.bar87 {
    width: 87%;
}
.resultRow .w80 .barGraph.bar88 {
    width: 88%;
}
.resultRow .w80 .barGraph.bar89 {
    width: 89%;
}
.resultRow .w80 .barGraph.bar90 {
    width: 90%;
}
.resultRow .w80 .barGraph.bar91 {
    width: 91%;
}
.resultRow .w80 .barGraph.bar92 {
    width: 92%;
}
.resultRow .w80 .barGraph.bar93 {
    width: 93%;
}
.resultRow .w80 .barGraph.bar94 {
    width: 94%;
}
.resultRow .w80 .barGraph.bar95 {
    width: 95%;
}
.resultRow .w80 .barGraph.bar96 {
    width: 96%;
}
.resultRow .w80 .barGraph.bar97 {
    width: 97%;
}
.resultRow .w80 .barGraph.bar98 {
    width: 98%;
}
.resultRow .w80 .barGraph.bar99 {
    width: 99%;
}
.resultRow .w80 .barGraph.bar100 {
    width: 100%;
}
.resultRow .w100 {
    width: 100%;
    float: center;
}
.resultRow .w80 p {
    float: right;
    margin-right: 5px;
}

.reportRow .clearLog {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    border-bottom: solid 1px #2185d0;
}

.reportRow .clearLogMedal {
    display: table-cell;
    width: 10%;
    vertical-align: middle;
    text-align: center;
    font-weight: bold;
    border-bottom: solid 1px #2185d0;
}

.reportRow .clearLog.small {
    width: 12%;
}

.reportRow .clearLog.large {
    width: 25%;
}

.reportRow .clearLog.space {
    width: 40%;
}

.net span {
    font-size: 75%;
}
.net i {
    color: #00cc00;
}

.circleGraph {
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 15px;
    width: 110px;
    height: 110px;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 50%;
    background: #b3b3b3;
    background-image: linear-gradient(to right, transparent 50%, #00ffff 0);
}
.circleGraph.smallCircle {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 4px;
    width: 60px;
    height: 60px;
    margin: 0 auto;
    margin-top: 10px;
    border-radius: 50%;
    background: #b3b3b3;
    background-image: linear-gradient(to right, transparent 50%, #00ffff 0);
}
.circleGraph::before {
    content: '';
    display: block;
    margin-left: 50%;
    height: 100%;
    border-radius: 0 100% 100% 0 / 50%;
    background-color: inherit;
    transform-origin: left;
    -webkit-transform-origin: left;
}
.circleGraph.deg0::before {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
}
.circleGraph.deg15::before {
    transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
}
.circleGraph.deg30::before {
    transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
}
.circleGraph.deg45::before {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
.circleGraph.deg60::before {
    transform: rotate(60deg);
    -webkit-transform: rotate(60deg);
}
.circleGraph.deg75::before {
    transform: rotate(75deg);
    -webkit-transform: rotate(75deg);
}
.circleGraph.deg90::before {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
}
.circleGraph.deg105::before {
    transform: rotate(105deg);
    -webkit-transform: rotate(105deg);
}
.circleGraph.deg120::before {
    transform: rotate(120deg);
    -webkit-transform: rotate(120deg);
}
.circleGraph.deg135::before {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}
.circleGraph.deg150::before {
    transform: rotate(150deg);
    -webkit-transform: rotate(150deg);
}
.circleGraph.deg165::before {
    transform: rotate(165deg);
    -webkit-transform: rotate(165deg);
}
.circleGraph.deg180::before {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
}
.circleGraph.deg195::before {
    background-color: #00ffff;
    transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
}
.circleGraph.deg210::before {
    background-color: #00ffff;
    transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
}
.circleGraph.deg225::before {
    background-color: #00ffff;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
.circleGraph.deg240::before {
    background-color: #00ffff;
    transform: rotate(60deg);
    -webkit-transform: rotate(60deg);
}
.circleGraph.deg255::before {
    background-color: #00ffff;
    transform: rotate(75deg);
    -webkit-transform: rotate(75deg);
}
.circleGraph.deg270::before {
    background-color: #00ffff;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
}
.circleGraph.deg285::before {
    background-color: #00ffff;
    transform: rotate(105deg);
    -webkit-transform: rotate(105deg);
}
.circleGraph.deg300::before {
    background-color: #00ffff;
    transform: rotate(120deg);
    -webkit-transform: rotate(120deg);
}
.circleGraph.deg315::before {
    background-color: #00ffff;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}
.circleGraph.deg330::before {
    background-color: #00ffff;
    transform: rotate(150deg);
    -webkit-transform: rotate(150deg);
}
.circleGraph.deg345::before {
    background-color: #00ffff;
    transform: rotate(165deg);
    -webkit-transform: rotate(165deg);
}
.circleGraph.deg360::before {
    background-color: #00ffff;
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
}

.innerCircle {
    margin-top: -120px;
    margin-left: -10px;
    border-radius: 50%;
    height: 80px;
    width: 80px;
    position: relative;
    top: 25px;
    left: 25px;
    background-color: white;
}
.innerCircle.smallCircle {
    margin-top: -75px;
    margin-left: -15px;
    border-radius: 50%;
    height: 40px;
    width: 40px;
    position: relative;
    top: 25px;
    left: 25px;
    background-color: white;
}
.innerMessage {
    color: black;
    font-size: 10px;
    padding-top: 25px;
    margin-bottom: -25px;
    font-weight: bold;
}

.innerMessage.smallCircle {
    color: black;
    font-size: 11px;
    padding-top: 0px;
    padding-left: 0px;
    margin-bottom: 0px;
    font-weight: bold;
}

/* ranking */

.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

.rankingSummary {
    color: red;
}
.rankingTitle {
    font-size: 80%;
    text-align: left;
}
.rankingTitle.green {
    color: #21ba45;
}
.rankingTitle.yellow {
    color: #fbbd08;
}
.rankingTitle.orange {
    color: #f2711c;
}
.rankingTitle.red {
    color: #db2828;
}
.rankingTitle.pink {
    color: #e03997;
}
.rankingTitle.purple {
    color: #a333c8;
}
.rankingTitle.teal {
    color: #00b5ad;
}
.rankingTitle.blue {
    color: #2185d0;
}
.rankingTitleNote {
    font-size: 70%;
    color: red;
    float: right;
}
.rankingTable {
    min-height: 125px;
    border-radius: 5px;
    border: solid;
    border-width: 2px;
}
.rankingTable.green {
    border-color: #21ba45;
}
.rankingTable.yellow {
    border-color: #fbbd08;
}
.rankingTable.orange {
    border-color: #f2711c;
}
.rankingTable.red {
    border-color: #db2828;
}
.rankingTable.pink {
    border-color: #e03997;
}
.rankingTable.purple {
    border-color: #a333c8;
}
.rankingTable.teal {
    border-color: #00b5ad;
}
.rankingTable.blue {
    border-color: #2185d0;
}
.rankingRow {
    display: block;
    font-size: 75%;
    text-align: center;
    color: black;
    word-wrap: break-word;
}
.rankingRow:after {
    content: '.';
    display: block;
    height: 0;
    font-size: 0;
    clear: both;
    visibility: hidden;
}
.rankingRow.separate {
    border-top: solid 1px #21ba45;
}
.rankingRow:nth-child(odd) {
    background-color: rgba(35, 35, 35, 0.1);
}
.rankingRow:nth-child(even) {
    background-color: white;
}
.rankingRow.highlight {
    background-color: #ffa;
}
.rankingRow.classmate {
    background-color: lightsalmon;
}
.rankingRow.green {
    background-color: #21ba45;
    color: white;
}
.rankingRow.yellow {
    background-color: #fbbd08;
    color: white;
}
.rankingRow.orange {
    background-color: #f2711c;
    color: white;
}
.rankingRow.red {
    background-color: #db2828;
    color: white;
}
.rankingRow.pink {
    background-color: #e03997;
    color: white;
}
.rankingRow.purple {
    background-color: #a333c8;
    color: white;
}
.rankingRow.teal {
    background-color: #00b5ad;
    color: white;
}
.rankingRow.blue {
    background-color: #2185d0;
    color: white;
}
.rankingRow .w5 {
    width: 5%;
    float: left;
}
.rankingRow .w6 {
    width: 6%;
    float: left;
}
.rankingRow .w7 {
    width: 7%;
    float: left;
}
.rankingRow .w8 {
    width: 8%;
    float: left;
}
.rankingRow .w10 {
    width: 10%;
    float: left;
}
.rankingRow .w12 {
    width: 12%;
    float: left;
}
.rankingRow .w13 {
    width: 13%;
    float: left;
}
.rankingRow .w15 {
    width: 15%;
    float: left;
}
.rankingRow .w20 {
    width: 20%;
    float: left;
}
.rankingRow .w25 {
    width: 25%;
    float: left;
}
.rankingRow .w30 {
    width: 30%;
    float: left;
}
.rankingRow .w35 {
    width: 35%;
    float: left;
}
.rankingRow .w40 {
    width: 40%;
    float: left;
}
.rankingRow .left {
    text-align: left;
}

.country-img {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
    background-color: transparent;
}

.ui.form .field .selection.dropdown .menu .ui.search.input {
    width: 90%;
}

.menu > .ui.dropdown.item.dropdownactive {
    color: #21ba45 !important;
    border-color: #21ba45 !important;
}

.auto-wrap-cell {
    word-wrap: break-word;
    white-space: normal;
}

.indented-block {
    margin-left: 1.5em;
}

.register-player-block {
    margin-bottom: 5em;
}