/** Groups **/
.groupTabs { display: inline-block; float: right; width: 100%; position: relative }
.groupTabs .tab { overflow: hidden; position: absolute; left: 50%; transform: translateX(-50%); display: flex; min-width: 140px }
.groupTabs .tab button { float: right; border: none; outline: none; cursor: pointer; transition: 0.2s; width: calc((100% - 5px) / 2); height: 70px; border-top: 4px solid #0277bd; margin-left: 5px; font-family: droidLight, Arial; font-size: 11px; padding: 0 10px; color: #000; line-height: 1.2; position: relative }
.groupTabs .tab button:before { content: ""; width: 50px; height: 50px; background: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; border-radius: 50% }
.groupTabs .tab button p { font-family: Arial; font-size: 26px; font-weight: bold; padding: 0 10px; color: #b9b9b9; display: block; z-index: 2; text-align: center; position: relative }
.groupTabs .tab button span { font-size: 12px; font-weight: normal; display: block; text-transform: uppercase; line-height: 1; margin-top: -5px; }
.groupTabs .tab button:last-child { margin-left: 0 }
.groupTabs .tab button:hover { background-color: #ddd; }
.groupTabs .tab button.active { height: 81px; border-top: 0; color: #fff }
.groupTabs .tab button.active p { color: #fff }
.groupTabs .tab button.active:before { border-radius: 0; background: #0277bd }
.groupTabs .groupContent { display: inline-block; float: right; width: 100%; margin-top: 75px; position: relative; z-index: 1 }
.groupTabs .flickity-button { top: -55px }

@media screen and (max-width: 1056px) and (min-width: 768px) {
    .groupTabs .tab { width: 100% }
    .groupTabs .tab button { width: calc((100% - 6px) / 4); margin-left: 5px; padding: 0; }
}

.groupTabs .groupTtl { display: inline-block; width: 100%; margin: 0; height: 48px; float: right; position: relative; background: #e0e0e0; padding: 10px; }
.groupTabs .groupName { float: right; position: absolute; left: 50%; transform: translateX(-50%); top: 10px; }
.groupTabs .groupName h2 { float: right; display: inline-block; width: 160px; height: 28px; background: #fff; text-align: center; color: #000; font-family: droidLight,Arial; font-size: 14px; line-height: 2.2; }
.groupTabs .table { display: inline-block; width: 100%; float: right; margin-top: 10px }
.groupTabs .table .ttlRow { display: inline-block; width: 100%; background: #000; float: right; height: 30px; margin-bottom: 10px; }
.groupTabs .table .ttlRow .itemTtl { float: right; padding: 2px 0; font-family: droidLight, arial; color: #fff; font-size: 13px; text-align: center; width: 60px }
.groupTabs .table .ttlRow .itemTtl:nth-child(2) { width: calc(100% - 540px); text-align: right; padding-right: 10px }
.groupTabs .table .wRow { display: inline-block; width: 100%; background: #fff; border: 1px solid #e0e0e0; border-bottom: 0; height: 58px; float: right; position: relative }
.groupTabs .table .wRow:last-child { border-bottom: 1px solid #e0e0e0 }
.groupTabs .table .wRow .item { float: right; color: #b9b9b9; font-size: 16px; text-align: center; line-height: 2.5; font-family: arial; width: 60px; padding: 10px; margin-left: 0; margin-bottom: 0; background: none; height: auto }
.groupTabs .table .wRow .item:nth-child(2) { width: calc(100% - 540px); padding-right: 10px; }
.groupTabs .table .wRow .item p { text-align: right; color: #000; font-size: 13px; font-family: droidLight, arial; line-height: 3 }
.groupTabs .table .wRow .team { text-align: right; direction: rtl; font-family: droidLight, arial; padding-right: 10px }
.groupTabs .table .wRow .team img { float: right; margin-left: 10px; width: auto; height: 36px }
.groupTabs .table .wRow .item:last-child { color: #000; font-weight: bold }

.euroMain .euroGroups.groupTabs { margin-bottom: 40px }
.euroMain .euroGroups .title:after { background-color: #aaa; }
.euroMain .euroGroups .groupsCarousel { height: 300px }
.euroMain .euroGroups .groupsCnt { display: inline-block; float: right; width: 100% }
.euroMain .euroGroups ul li { display: inline-block; width: 306px; height: 300px; margin-left: 0; position: relative; float: right; }
.euroMain .euroGroups ul li .groupItem { background: #fff; display: inline-block; width: 290px; float: right; padding: 16px; border-radius: 8px; height: 100%; }
.euroMain .euroGroups ul li .groupItem .groupTtl { background: none; padding: 0; height: auto }
.euroMain .euroGroups ul li .groupItem .groupTtl h3 { float: right; display: inline-block; width: 100%; text-align: right; color: #000; font-family: droidBold,Arial; font-size: 18px; line-height: 2.4; }
.euroMain .euroGroups.groupTabs .table .ttlRow { background: none; margin-bottom: 0; height: auto; }
.euroMain .euroGroups.groupTabs .table .ttlRow .itemTtl { font-size: 12px; color: #000 }
.euroMain .euroGroups.groupTabs .table .ttlRow .itemTtl.dtls { width: auto; padding: 0; text-align: center; margin-left: 16px }
.euroMain .euroGroups.groupTabs .table .ttlRow .itemTtl.dtls:last-child { margin-left: 0 }
.euroMain .euroGroups.groupTabs .table .ttlRow .itemTtl.team { width: calc(100% - 132px) }
.euroMain .euroGroups.groupTabs .table .ttlRow .itemTtl.dtls:nth-child(2) { width: 20px }
.euroMain .euroGroups.groupTabs .table .ttlRow .itemTtl.dtls:nth-child(3) { width: 10px }
.euroMain .euroGroups.groupTabs .table .ttlRow .itemTtl.dtls:nth-child(4) { width: 22px }
.euroMain .euroGroups.groupTabs .table .ttlRow .itemTtl.dtls:nth-child(5) { width: 32px; text-align: left }
.euroMain .euroGroups.groupTabs .table .wRow { height: 50px; border: none; border-bottom: 1px solid #efefef; padding-top: 20px; }
.euroMain .euroGroups.groupTabs .table .wRow:last-child { border-bottom: none }
.euroMain .euroGroups.groupTabs .table .wRow .item { font-size: 13px; color: #000; padding: 0; line-height: 1.6; }
.euroMain .euroGroups.groupTabs .table .wRow .item.dtls { width: auto; padding: 0; text-align: center; margin-left: 16px }
.euroMain .euroGroups.groupTabs .table .wRow .item.dtls:last-child { margin-left: 0 }
.euroMain .euroGroups.groupTabs .table .wRow .item.team { width: calc(100% - 132px) }
.euroMain .euroGroups.groupTabs .table .wRow .item.dtls:nth-child(2) { width: 20px }
.euroMain .euroGroups.groupTabs .table .wRow .item.dtls:nth-child(3) { width: 10px }
.euroMain .euroGroups.groupTabs .table .wRow .item.dtls:nth-child(4) { width: 22px }
.euroMain .euroGroups.groupTabs .table .wRow .item.dtls:nth-child(5) { width: 32px; }
.euroMain .euroGroups.groupTabs .table .wRow .team img { margin-left: 10px; width: 20px; height: auto; }
.euroMain .euroGroups.groupTabs .table .wRow .item p { font-size: 13px; font-family: droidLight, arial; line-height: 1.6 }


/******************** Euro 2020 - Fan Zone - Prediction Entry Point ********************/
.euroMain .predEP.groupTabs { border-radius: 6px; overflow: hidden }
.euroMain .predEP .title:after { background-color: #aaa; }
.euroMain .predEP .groupsCarousel { height: 300px }
.euroMain .predEP .groupTtl { background: #000; padding: 0; height: 48px; padding: 0 16px }
.euroMain .predEP .groupTtl h3 { float: right; display: inline-block; text-align: right; color: #45B3EB; font-family: droidBold,Arial; font-size: 14px; line-height: 3.4; }
.euroMain .predEP .groupTtl a { float: left; display: inline-block; text-align: right; color: #fff; font-family: droidLight,Arial; font-size: 12px; line-height: 4; }
.euroMain .predEP .groupTtl a:hover { color: #45B3EB }
.euroMain .predEP.groupTabs .table { margin-top: 0; background: #fff; }
.euroMain .predEP.groupTabs .table .ttlRow { background: none; margin-bottom: 0; height: 56px; padding: 20px 16px 0; border-bottom: 1px solid #efefef }
.euroMain .predEP.groupTabs .table .ttlRow .itemTtl { font-size: 12px; color: #000 }
.euroMain .predEP.groupTabs .table .ttlRow .itemTtl.team { width: calc(100% - 32px); text-align: right; padding: 0 }
.euroMain .predEP.groupTabs .table .ttlRow .itemTtl.dtls { width: 32px; padding: 0; text-align: left }
.euroMain .predEP.groupTabs .table .wRow { height: auto; border: none; border-bottom: 1px solid #efefef; padding: 12px 16px }
.euroMain .predEP.groupTabs .table .wRow:last-child { border-bottom: none }
.euroMain .predEP.groupTabs .table .wRow .item { font-size: 13px; color: #000; padding: 0; line-height: 1.8; }
.euroMain .predEP.groupTabs .table .wRow .item.team { width: calc(100% - 32px) }
.euroMain .predEP.groupTabs .table .wRow .item.dtls { width: 32px; padding: 0; text-align: center; }
.euroMain .predEP.groupTabs .table .wRow .team img { margin-left: 10px; width: 24px; height: 24px; border-radius: 50%; }
.euroMain .predEP.groupTabs .table .wRow .item p { font-size: 13px; font-family: droidLight, arial; line-height: 1.8 }

@media screen and (min-width:1280px) and (max-width:1359px) {
        .groupTabs .table .ttlRow .itemTtl { width: 45px; }
    .groupTabs .table .ttlRow .itemTtl:nth-child(2) { width: calc(100% - 415px); }
    .groupTabs .table .wRow .item { width: 45px; font-size: 16px }
    .groupTabs .table .wRow .item:nth-child(2) { width: calc(100% - 415px); }
    .groupTabs .table .ttlRow .itemTtl { font-size: 12px; line-height: 2.2 }
    .groupTabs .table .wRow .item p { font-size: 13px }
}

@media screen and (min-width:1152px) and (max-width:1279px) {
.groupTabs .table .wRow .item:nth-child(4),
 .groupTabs .table .wRow .item:nth-child(5),
 .groupTabs .table .wRow .item:nth-child(6),
 .groupTabs .table .wRow .item:nth-child(9) { display: none }
.groupTabs .table .ttlRow .itemTtl:nth-child(9) { display: none }
}

@media screen and (min-width:1024px) and (max-width:1151px) {
}

@media screen and (min-width: 320px) and (max-width: 767px) {
    .euroMain .groupTabs .table .ttlRow .itemTtl:nth-child(3),
    .euroMain .groupTabs .table .ttlRow .itemTtl:nth-child(4),
    .euroMain .groupTabs .table .ttlRow .itemTtl:nth-child(5),
    .euroMain .groupTabs .table .wRow .item:nth-child(3),
    .euroMain .groupTabs .table .wRow .item:nth-child(4),
    .euroMain .groupTabs .table .wRow .item:nth-child(5) { display: inline-block; }
}