a {
  text-decoration: none;
  transition: all 0.1s;
}
a:hover, a:focus {
  text-decoration: none;
  outline: none;
}

button,
.fd-btn {
  border: none;
  letter-spacing: 0.25rem;
  padding-left: 1.25rem;
  padding-right: 1rem;
  border-radius: 3rem;
  line-height: 1.75rem;
}
button:focus,
.fd-btn:focus {
  outline: none;
  box-shadow: none !important;
}

.border {
  border: 1px solid;
}

.no-scroll-bar::-webkit-scrollbar {
  display: none;
}

.cursor-pointer {
  cursor: pointer;
}

.text-color-2:hover {
  text-decoration: underline;
}

.pagination .page-item {
  margin: 0 1rem;
}
.pagination .page-item span, .pagination .page-item button {
  letter-spacing: 0;
  border-width: 0;
  background-color: inherit !important;
  padding: 0;
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1.25rem;
  text-align: center;
}
.pagination .page-item.active span, .pagination .page-item.active button {
  border-radius: 5rem;
}

@media (min-width: 1400px) {
  .container-xl,
  .container-lg,
  .container-md,
  .container-sm,
  .container {
    max-width: 1330px;
  }
}
body,
html {
  font-size: 1.05rem;
  font-family: Oswald, "Noto Sans TC", sans-serif !important;
  font-size: 1rem;
}

.ct-nav .logo-text {
  font-size: 2.5rem;
  font-weight: 700;
}
.ct-nav .f-nav-search-form .f-nav-search {
  font-size: 0.75rem;
}
.ct-nav .f-nav-link .f-nav-cart-div .num-badge {
  font-size: 0.75rem;
  font-family: Oswald, sans-serif !important;
}

.f-cart-tooltip .tooltip-inner .contant {
  font-size: 0.75rem;
}
.f-cart-tooltip .tooltip-inner .price {
  font-size: 1rem;
}
.f-cart-tooltip .tooltip-inner .f-cart-link {
  font-size: 0.75rem;
}

.ct-pc-left .list-group .list-group-item {
  font-size: 1rem;
}
.ct-pc-left .list-group .list-group-item button {
  font-size: 1.25rem;
}
.ct-pc-left .list-group .f-sub-menu-link {
  font-size: 0.85rem;
}
.ct-pc-left .list-group .f-news-link {
  font-size: 0.7rem;
}

.ct-home-iteam-list h5,
.more-list-page h5 {
  font-size: 1.25rem;
}
.ct-home-iteam-list .f-more-link,
.more-list-page .f-more-link {
  font-size: 0.75rem;
}
.ct-home-iteam-list .card-body,
.more-list-page .card-body {
  font-size: 0.85rem;
}
.ct-home-iteam-list .card-body .price,
.more-list-page .card-body .price {
  font-size: 1.15rem;
}

.ct-footer .right {
  font-size: 0.85rem;
}

.login-page label,
.forget-page label,
.register-page label {
  font-size: 1.25rem;
}
.login-page label.custom-control-label,
.forget-page label.custom-control-label,
.register-page label.custom-control-label {
  font-size: inherit;
}

.login-page .card .f-forget-link {
  font-size: 0.85rem;
}

.register-page .list-title,
.forget-page .list-title {
  font-weight: 400;
}

.cart-page .total-warp .title,
.checkout-page .total-warp .title {
  font-weight: 400;
}
.cart-page .pay-warp .fd-btn.pay-type-btn,
.checkout-page .pay-warp .fd-btn.pay-type-btn {
  font-size: 0.85rem;
}

.contact-us-page p, .contact-us-page li, .prod-info-page p, .prod-info-page li {
  font-size: 0.85rem;
}

body, .download-warp-left {
  background-color: #2a2c2e;
  color: #f2f2f2;
}
body.tree, .download-warp-left.tree {
  background-color: white;
}

a {
  color: #f2f2f2;
}
a:hover {
  color: #ced4da;
  border-color: #ced4da;
}

button {
  background-color: inherit;
  color: #f2f2f2;
}

button[disabled=disabled] {
  color: #808080;
}

table,
.table {
  color: #f2f2f2 !important;
}
table th,
.table th {
  background-color: #121416;
}
table td,
table th,
table thead th,
.table td,
.table th,
.table thead th {
  border: 1px solid #6b6b6c;
}

.table-responsive th:before {
  background-color: #121416;
}
.table-responsive tr td:before {
  background-color: #2a2c2e;
}
.table-responsive tr.odd td:before {
  background-color: #303030;
}

.b-table-sticky-header.table-responsive {
  border: 1px solid #6b6b6c;
}
.b-table-sticky-header.table-responsive .b-table-sticky-column.last:before {
  border-right: 1px solid #6b6b6c;
  box-shadow: 4px 3px 6px #121416;
}
.b-table-sticky-header.table-responsive th:before,
.b-table-sticky-header.table-responsive td:before {
  border-left: 1px solid #6b6b6c;
  border-bottom: 1px solid #6b6b6c;
}

.col-xl-left {
  box-shadow: 0 5px 15px black;
}
.col-xl-left.hide-left-area .hide-left-menu {
  border-top: 1px solid #6b6b6c;
}

.logo-frame {
  background-color: #121416;
  /* border-bottom: 1px solid $line; */
}

.registered-btn-frame .fd-btn {
  background-color: #f2f2f2;
  color: #2a2c2e;
}
.registered-btn-frame .fd-btn:hover {
  background-color: #16d9ff;
}

.user-info-btn:before {
  border-color: #ced4da !important;
  background-color: #f2f2f2;
}
.user-info-btn:hover:before {
  border-color: #16d9ff !important;
}

.user-avatar {
  border: 2px solid #f2f2f2;
}

.user-info-inner {
  background-color: #2a2c2e;
}
.user-info-inner .item {
  border-bottom: 1px solid #6b6b6c;
}
.user-info-inner .item:last-child {
  border-bottom: none;
}

.logout-btn:hover {
  color: #16d9ff;
}

.carousel {
  text-shadow: #16d9ff 0px 0px 3px;
  background: #ced4da;
}
.carousel .carousel-item {
  background: #2a2c2e;
}

/* 
    color
 */
.text-danger {
  color: #f6003c !important;
}

.text-secondary {
  color: #ced4da !important;
}

.text-gary {
  color: #121416 !important;
}

.text-primary {
  color: #16d9ff !important;
  fill: #16d9ff !important;
}

.text-warning {
  color: #ffdf00 !important;
}

.text-fb {
  color: #007bff !important;
}

.text-cus-warning {
  color: #ee3f4c !important;
}

.bg-danger {
  background-color: #f6003c !important;
  fill: #f6003c !important;
}

.bg-primary {
  background-color: #16d9ff !important;
}

.bg-yellow {
  background-color: #ffdf00 !important;
}

.bg-dark {
  background-color: #121416 !important;
}

.bg-main {
  background-color: #2a2c2e !important;
}

.bg-cus-warning {
  background-color: #ee3f4c !important;
}

/* 
    overlay
 */
.spinner-border {
  border: 0.25em solid #16d9ff;
  border-right-color: transparent;
}

/* .root-overlay { .spinner-border { border-color: $yellow; border-right-color: transparent; } } */
/* 
    form-control 
 */
input.form-control,
.input-group button,
select {
  background-color: #121416 !important;
  color: #f2f2f2;
}
input.form-control:hover, input.form-control:focus,
.input-group button:hover,
.input-group button:focus,
select:hover,
select:focus {
  color: inherit;
}

.custom-file-label {
  background-color: #121416;
  color: #f2f2f2;
}
.custom-file-label:after {
  background-color: #121416 !important;
  color: #f2f2f2 !important;
}

.custom-control-label:before {
  background-color: #121416 !important;
}

.custom-control-input:checked ~ .custom-control-label:before {
  background-color: #16d9ff !important;
}

/* 
    country lang modal
 */
.modal-content {
  background-color: #2a2c2e;
  color: #f2f2f2;
}
.modal-content .header {
  border-bottom: 1px solid #6b6b6c;
  color: #16d9ff;
}

.country-frame .country-item.active,
.language-frame .language-item.active {
  color: #2a2c2e;
  background-color: #16d9ff;
  border-color: #16d9ff;
}

.country-frame li,
.language-frame li {
  border: 1px solid #6b6b6c;
}
.country-frame li:hover,
.language-frame li:hover {
  background-color: #f2f2f2;
  color: #2a2c2e;
}

.navigation-frame {
  border-bottom: 1px solid #6b6b6c;
  background-color: #2a2c2e;
}

.navigation-item {
  color: #ced4da;
}
.navigation-item:hover {
  color: #f2f2f2;
}
.navigation-item:hover:after {
  background-color: #f2f2f2;
}

.navigation-item.active {
  color: #f2f2f2;
}
.navigation-item.active:after {
  background-color: #16d9ff;
}

.left-menu {
  background-color: #2a2c2e;
}
.left-menu .left-menu-top {
  background-color: #121416;
  border-bottom: 1px solid #6b6b6c;
}
.left-menu .login-btn,
.left-menu .register-btn {
  border: 2px solid #16d9ff;
  color: #16d9ff;
}
.left-menu .left-navigation-item {
  border-bottom: 1px solid #6b6b6c;
  color: #ced4da;
}
.left-menu .left-navigation-item:hover {
  color: #f2f2f2;
}
.left-menu .left-navigation-item.active {
  color: #16d9ff;
}

/* 
    swal
 */
.swal2-popup {
  background-color: #2a2c2e !important;
}
.swal2-popup .swal2-title {
  color: #f2f2f2 !important;
}
.swal2-popup .swal2-content {
  color: #808080 !important;
}
.swal2-popup button {
  color: #16d9ff !important;
  background-color: #2a2c2e !important;
  border: 2px solid #16d9ff !important;
}
.swal2-popup button:hover {
  color: #f2f2f2 !important;
  border-color: #f2f2f2 !important;
}
.swal2-popup .swal2-icon.swal2-warning,
.swal2-popup .swal2-icon.swal2-question {
  border-color: #16d9ff !important;
  color: #16d9ff !important;
}
.swal2-popup .swal2-icon.swal2-question {
  border-color: #ffdf00 !important;
  color: #ffdf00 !important;
}
.swal2-popup .swal2-icon.swal2-success {
  border-color: #BAFB00 !important;
  color: #BAFB00 !important;
}
.swal2-popup .swal2-icon.swal2-success div {
  background-color: rgba(0, 0, 0, 0) !important;
}

.text-yellow {
  color: #ffdf00;
}

.text-blue {
  color: #16d9ff;
}

.bg-blue {
  background-color: #16d9ff;
}

.bg-white {
  background-color: white !important;
}

.border-blue {
  border: 2px solid #16d9ff;
  color: #16d9ff;
}

.border-gary {
  border: 1px solid #ced4da;
}

.list-title {
  color: #16d9ff;
}
.list-title:before {
  background-color: #16d9ff;
}

/* 
    pagination components
 */
.page-item .page-link {
  color: #f2f2f2 !important;
  background-color: #2a2c2e !important;
}
.page-item .page-link:hover {
  background-color: #ffdf00 !important;
  color: #2a2c2e !important;
}
.page-item .page-link:focus {
  color: #f2f2f2 !important;
  background-color: #2a2c2e !important;
}

.page-item.active .page-link {
  color: #ffdf00 !important;
}
.page-item.active .page-link:hover {
  background-color: #2a2c2e !important;
}

/* 
    league-list-feed 
 */
.league-list-card {
  border: 2px solid #f2f2f2;
  background-color: rgba(0, 0, 0, 0.5);
}
.league-list-card:hover {
  border-color: #16d9ff;
}
.league-list-card.complete {
  border-color: #ffdf00;
}

.league-group {
  background-color: #f2f2f2;
  color: #121416;
}
.league-group.is-round-robin {
  background-color: #28a745;
  color: #f2f2f2;
}
.league-group:hover {
  background-color: #16d9ff;
  color: #121416;
}

.search-frame {
  background-color: #121416;
}
.search-frame th,
.search-frame td {
  border-top: none;
  border-bottom: 1px solid #6b6b6c;
}
.search-frame .no-border th,
.search-frame .no-border td {
  border-bottom: none;
}
.search-frame button:hover {
  color: #ced4da;
}
.search-frame button:focus {
  color: #ced4da;
}
.search-frame button.checked, .search-frame button.checked:hover, .search-frame button.checked:focus {
  color: #16d9ff;
}

/* 
    league-list-feed for news 
 */
.league-list-feed.news:hover .view-all:hover {
  color: #16d9ff;
}

/* 
    footer
 */
.fd-footer {
  background-color: #121416;
}

/* 
    home 
 */
.download-frame .dl-top {
  border-top: 8vh solid #2a2c2e;
  border-left: 59vw solid #121416;
}
.download-frame .dl-content {
  background-color: #121416;
}
.download-frame .dl-bottom {
  border-bottom: 8vh solid #2a2c2e;
  border-right: 59vw solid #121416;
}

/* 
    leagueDetial
 */
.league-name-frame {
  border: 2px solid #f2f2f2;
}
.league-name-frame h3 {
  border: 2px solid #f2f2f2;
}

.league-detial-menu-frame {
  border-bottom: 1px solid #6b6b6c;
}

.league-detial-menu.active {
  color: #16d9ff;
}

.group-name-frame button,
.group-name-frame a {
  background-color: #121416;
  box-shadow: 3px 3px 5px black;
}
.group-name-frame a:hover {
  color: #16d9ff;
}
.group-name-frame button.active,
.group-name-frame button.now-group {
  background-color: #16d9ff;
  color: #2a2c2e;
}
.group-name-frame button.now-group {
  box-shadow: none !important;
}

.group-select-frame {
  background-color: rgba(0, 0, 0, 0.3);
}

/* 
    introduction
 */
.table-introduction th,
.table-lineup th {
  border-bottom: 1px solid #6b6b6c !important;
}
.table-introduction td:after,
.table-lineup td:after {
  background-color: #6b6b6c;
}
.table-introduction tbody + tbody,
.table-lineup tbody + tbody {
  border-color: #6b6b6c;
}

/* 
    schedule
 */
.schedule-change-btn {
  border: 2px solid #f2f2f2;
}
.schedule-change-btn.active {
  background-color: #f2f2f2;
  color: #121416;
}

.today {
  border: 2px solid #16d9ff;
  color: #16d9ff;
}

.w-l-status {
  color: #f2f2f2;
  text-shadow: #121416 0px 0px 2px;
}

.table-schedule tr:hover td {
  color: #2a2c2e !important;
}
.table-schedule tr:hover td:before {
  background-color: #f2f2f2 !important;
}
.table-schedule tr:hover a {
  color: #2a2c2e !important;
}
.table-schedule tr:hover a:hover {
  color: #16d9ff !important;
}
.table-schedule tr:hover a.fd-btn {
  border-color: #2a2c2e !important;
  color: #2a2c2e !important;
}
.table-schedule tr:hover a.fd-btn:hover {
  background-color: #16d9ff !important;
  border-color: #16d9ff !important;
}
.table-schedule tr:hover .player-no text {
  fill: #2a2c2e;
}
.table-schedule tr a.fd-btn {
  border: 2px solid #16d9ff !important;
  color: #16d9ff !important;
}
.table-schedule tr .player-no circle {
  fill: none;
  stroke: #6b6b6c;
  stroke-width: 2px;
}
.table-schedule tr .player-no text {
  fill: #f2f2f2;
}

/* 
    schedule-store
 */
.map-store-name {
  color: #121416;
}

/* 
    schedule-result
 */
.team-battle.border thead th,
.summary-result.border thead th {
  border-right: 1px solid #6b6b6c !important;
}
.team-battle tbody th,
.summary-result tbody th {
  background-color: #303030;
}
.team-battle tr th:first-child,
.summary-result tr th:first-child {
  border-left: 1px solid #6b6b6c;
}
.team-battle tr th:last-child,
.summary-result tr th:last-child {
  border-right: 1px solid #6b6b6c;
}
.team-battle tr a:hover,
.summary-result tr a:hover {
  color: #16d9ff !important;
}
.team-battle tr.schedule-info-th th,
.summary-result tr.schedule-info-th th {
  border-right: 1px solid #6b6b6c;
  background-color: #121416 !important;
}
.team-battle a.fd-btn,
.summary-result a.fd-btn {
  border: 2px solid #16d9ff;
  color: #16d9ff;
}
.team-battle a.fd-btn:hover,
.summary-result a.fd-btn:hover {
  color: #f2f2f2 !important;
  border-color: #f2f2f2;
}
.team-battle td.summary-home-td:after,
.team-battle td.summary-away-td:after,
.summary-result td.summary-home-td:after,
.summary-result td.summary-away-td:after {
  background-color: #6b6b6c;
}

.round-robin-list-page .player-no circle,
.advanced-list-page .player-no circle {
  fill: none;
  stroke: #6b6b6c;
  stroke-width: 2px;
}
.round-robin-list-page .player-no text,
.advanced-list-page .player-no text {
  fill: #f2f2f2;
}

.summary-result .th td:first-child,
.schedule-info-page .th td:first-child,
.performance-page .th td:first-child {
  border-left: 1px solid #6b6b6c;
}
.summary-result .th td:last-child,
.schedule-info-page .th td:last-child,
.performance-page .th td:last-child {
  border-right: 1px solid #6b6b6c;
}
.summary-result .player-no circle,
.schedule-info-page .player-no circle,
.performance-page .player-no circle {
  fill: none;
  stroke: #6b6b6c;
  stroke-width: 2px;
}
.summary-result .player-no text,
.schedule-info-page .player-no text,
.performance-page .player-no text {
  fill: #f2f2f2;
}
.summary-result tfoot table td:first-child,
.schedule-info-page tfoot table td:first-child,
.performance-page tfoot table td:first-child {
  border-right: 1px solid #6b6b6c !important;
}

.summary-result-page .separate, .schedule-battle-page .separate {
  color: #6b6b6c;
}
.summary-result-page .board-no, .schedule-battle-page .board-no {
  width: 60%;
  max-width: 42px;
}
.summary-result-page .board-no circle, .schedule-battle-page .board-no circle {
  stroke: #f2f2f2;
  stroke-width: 1px;
  fill: #ee3f4c;
}
.summary-result-page .board-no text, .schedule-battle-page .board-no text {
  fill: #f2f2f2;
}

.result-table .board-no {
  stroke: #f2f2f2;
  fill: #ee3f4c;
}
.result-table .board-no text {
  fill: #f2f2f2;
}

.download-area,
.download-warp {
  background-color: #2a2c2e;
}

.detailed-record-page .cricket-detial-btn {
  border: 1px solid #808080 !important;
  color: #808080;
}
.detailed-record-page .cricket-detial-btn.back {
  background-color: #f2f2f2;
  color: #2a2c2e;
  border: none !important;
}
.detailed-record-page .is-first-attack:before {
  background-color: #ffdf00;
}

.battle-result-div-warpper {
  border-bottom: 2px dashed #6b6b6c;
}

.tree-option {
  border: 1px solid #6b6b6c;
  background-color: #2a2c2e;
}

/* 
    LeaderBoard
 */
.table.b-table > thead > tr .table-b-table-default,
.table.b-table > tbody > tr .table-b-table-default,
.table.b-table > tfoot > tr .table-b-table-default {
  color: #f2f2f2 !important;
}

.leaderBoard .table-leader-board .player-no circle {
  stroke: #6b6b6c;
  stroke-width: 2px;
}
.leaderBoard .table-leader-board .player-no text {
  fill: #f2f2f2;
}
.leaderBoard .table-leader-board td[aria-colindex="2"]:before,
.leaderBoard .table-leader-board th[aria-colindex="2"]:before {
  box-shadow: inset -10px 0px 10px -5px #121416;
}
.leaderBoard .table-leader-board th.table-sort {
  color: #2a2c2e !important;
  background-color: #f2f2f2 !important;
}
.leaderBoard .table-leader-board th.table-sort:before {
  opacity: 0;
}
.leaderBoard .table-leader-board td.table-sort {
  color: #2a2c2e !important;
}
.leaderBoard .table-leader-board td.table-sort:before {
  background-color: #f2f2f2 !important;
}

/* 
    team
 */
.table-teams a.fd-btn {
  border: 2px solid #16d9ff;
  color: #16d9ff;
}
.table-teams a.fd-btn:hover {
  color: #f2f2f2;
  border-color: #f2f2f2;
}

/* 
    line-up
 */
.select-player-table td {
  border-bottom: 1px solid #6b6b6c;
}

.select-player:hover td {
  color: #16d9ff;
}

.team-member-select-list a {
  border: 1px solid #6b6b6c;
}
.team-member-select-list a:hover {
  color: #2a2c2e;
  border-color: #f2f2f2;
  background-color: #f2f2f2;
}

.lineup-btn-frame button:hover {
  color: #f2f2f2;
  border-color: #f2f2f2;
}

/* 
    login
 */
.caps-lock-append {
  background-color: #121416;
}

/* 
    userInfo 
 */
.user-info-frame .user-avatar:after {
  background-color: #f2f2f2;
}

.col-xl-left {
  height: 100vh;
  width: 40%;
  position: fixed;
  top: 0;
  z-index: 1001;
  transition: width 0.2s ease-in-out;
}
.col-xl-left.hide-left-area {
  width: 54px;
}
.col-xl-left.hide-left-area .hide-left-menu {
  margin-top: 79px;
}
.col-xl-left .hide-left-bar {
  position: absolute;
  right: 15px;
  top: 25px;
  z-index: 10;
}
.col-xl-left .element {
  height: 50vh;
  padding-left: 0;
  padding-right: 0;
}
.col-xl-left .logo-frame {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.col-xl-left .logo {
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 75%;
  height: 35vh;
}
.col-xl-left .registered-btn-frame {
  height: 10vh;
}
.col-xl-left .registered-btn-frame a {
  width: 210px;
  display: inline-block;
  text-align: center;
}
.col-xl-left .user-info-btn {
  background-size: 0;
  position: relative;
  padding: 0.15rem 3rem;
  display: inline-block;
  width: 15rem;
}
.col-xl-left .user-info-btn:before {
  content: "";
  width: 1.8rem;
  height: 1.8rem;
  background-image: inherit;
  position: absolute;
  left: 0.1rem;
  top: calc(50% - 0.9rem);
  border-radius: 2rem;
  background-size: cover;
  border: 2px solid;
}
.col-xl-left .user-info-btn:after {
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  right: 0.75rem;
  top: calc(50% - 0.75rem);
  background-size: cover;
}
.col-xl-left .copy-right-frame {
  position: absolute;
  width: 100%;
  bottom: 0px;
}

.col-xl-right {
  padding-left: 40%;
  padding-top: 80px;
  transition: padding-left 0.2s ease-in-out;
}
.col-xl-right.hide-left-area {
  padding-left: 55px;
}
.col-xl-right.hide-left-area .navigation-frame {
  width: calc(100vw - 55px);
  left: 55px;
}
.col-xl-right.show-menu {
  overflow-y: hidden;
  max-height: 100vh;
}
.col-xl-right .content-frame {
  min-height: calc(100vh - 275px);
}
.col-xl-right .navigation-frame {
  position: fixed;
  width: 60%;
  height: 80px;
  top: 0;
  left: 40%;
  z-index: 1000;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  transition: width 0.2s ease-in-out;
  transition: left 0.2s ease-in-out;
}
.col-xl-right .navigation-frame .row {
  margin-left: 0;
  margin-right: 0;
}
.col-xl-right .navigation-frame .navigation-item.active:after,
.col-xl-right .navigation-frame .navigation-item.menu:hover:after {
  content: "";
  width: 100%;
  height: 4px;
  position: absolute;
  bottom: 0;
  left: 0;
}
.col-xl-right .navigation-frame .user-info-inner {
  width: 60vw;
  border-radius: 0.25rem;
  top: 5.5rem;
  position: absolute;
  right: 3rem;
}
.col-xl-right .navigation-frame .user-info-inner a {
  display: block;
}
.col-xl-right .left-menu {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: -100vw;
  overflow: auto;
  transition: left 0.5s ease-in-out;
}
.col-xl-right .left-menu.show-menu {
  left: 0;
}
.col-xl-right .left-menu .close-menu-btn {
  width: 50px;
  height: 50px;
  display: block;
  text-align: center;
  vertical-align: middle;
  position: absolute;
  right: 0;
  line-height: 65px;
  z-index: 10;
}
.col-xl-right .left-menu .left-menu-top {
  padding-top: 50px;
}
.col-xl-right .left-menu .login-btn,
.col-xl-right .left-menu .register-btn {
  display: inline-block;
  border-radius: 2rem;
  width: 110px;
}
.col-xl-right .left-menu .left-navigation-item {
  letter-spacing: 0.25rem;
}
.col-xl-right .left-menu .user-avatar {
  margin: 0 auto;
  width: 4.6rem;
  height: 4.6rem;
  border-radius: 2.5rem;
}
.col-xl-right .error-msg-frame {
  min-height: 320px;
}
.col-xl-right .up-icon {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  opacity: 0.8;
}

.user-avatar {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 1.4rem;
}

.copy-right {
  letter-spacing: 0.15rem;
  padding-top: 0.3rem;
}

/* 
    overlay
 */
.root-overlay {
  position: fixed !important;
  z-index: 2000 !important;
}

/* 
    country lang modal
 */
.country-frame,
.language-frame {
  list-style-type: none;
  padding-left: 0;
}
.country-frame li,
.language-frame li {
  border-radius: 3rem;
}

.country-frame li {
  line-height: 2rem;
  padding-left: 4rem;
  padding-right: 4rem;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  background-size: auto calc(100% - 0.75rem);
  background-repeat: no-repeat;
  background-position: 1.5rem center;
}

.language-frame li {
  line-height: 2rem;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

/* 
    page title
 */
.list-title {
  padding-left: 1rem;
  position: relative;
}
.list-title:before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 5px;
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
}

/* 
    league-list-feed 
 */
.league-list-feed {
  display: flex;
  position: relative;
  flex-wrap: wrap;
  margin: 0 0.75rem;
  padding: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  min-height: 30px;
}

.league-list-card {
  flex: 1 1 390px;
  flex-direction: column;
  overflow: hidden;
  margin: 0 0.5rem 1rem;
  min-height: 30px;
  border-radius: 0.5rem;
  transition: all 0.5s ease;
  display: flex;
  padding: 1rem;
  vertical-align: baseline;
}
.league-list-card:hover {
  transition: all 0.4s ease;
  transform: translate3D(0, -1px, 0) scale(1.02);
}

.league-list-card-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.league-group {
  display: inline-block;
  padding: 0.15rem 1.25rem;
  border-radius: 3rem;
  margin: 0.15rem;
}

.search-frame {
  border-radius: 0.25rem;
}
.search-frame button {
  line-height: 1rem;
  margin-right: 0.5rem;
  margin-bottom: 0.25rem;
  letter-spacing: 0rem;
  padding-left: 0;
  padding-right: 0;
  border-radius: 0px !important;
}

/* 
    league-list-feed for news 
 */
.league-list-feed.news .league-list-card-content-link {
  position: relative;
}
.league-list-feed.news .league-list-card-content-link .row .content {
  position: relative;
}
.league-list-feed.news .league-list-card-content-link .row .content h4 {
  position: absolute;
  width: 95%;
}
.league-list-feed.news .league-list-card-content-link .view-all {
  position: absolute;
  right: 0;
  bottom: 0;
}

/* 
    footer 
 */
@media (min-width: 10px) and (max-width: 1199.98px) {
  .col-xl-right {
    padding-left: 0 !important;
  }
  .col-xl-right .navigation-frame {
    width: 100% !important;
    top: 0;
    left: 0 !important;
    padding-left: 15px;
    padding-right: 15px;
  }
  .download-frame .dl-top {
    border-left-width: 96vw;
  }
  .download-frame .dl-bottom {
    border-right-width: 96vw;
  }
}
@media (min-width: 1024px) {
  .navigation-frame {
    line-height: 80px;
  }
}
@media (min-width: 768px) {
  /* .navigation-frame {
      line-height: $navigationHeight;
  } */
  .col-xl-right .content-frame {
    min-height: calc(100vh - 240px);
  }
  .table-battle .team,
  .table-leader-board .team {
    min-width: 10vw !important;
  }
  .leaderBoard .table-leader-board td[aria-colindex="2"],
  .leaderBoard .table-leader-board th[aria-colindex="2"] {
    min-width: 14vw !important;
  }
  .group-select-inner {
    padding-right: 1.5rem;
  }
}
@media (min-width: 40px) and (max-width: 575.98px) {
  .download-frame .download-app {
    width: 50%;
  }
  .download-frame .app-icon {
    width: 32px !important;
    height: 32px !important;
  }
  .col-xl-right .content-frame {
    min-height: calc(100vh - 180px);
  }
  .team-battle .w-l-status {
    width: 1.2rem !important;
    height: 1.4rem !important;
    line-height: 1.4rem !important;
  }
  .leaderBoard .table-leader-board .member .player-no {
    width: 16px !important;
  }
  .group-select-inner {
    padding-right: 1.25rem;
  }
  .user-photo {
    height: 32px !important;
    width: 32px !important;
    margin-right: 0.5rem !important;
    border-radius: 16px !important;
    display: inline-block;
  }
  .tree {
    margin-bottom: 12rem;
  }
  .summary-result-page .board-no,
  .schedule-battle-page .board-no {
    width: 36% !important;
  }
  .table-schedule .player-warpper {
    padding: 0 5px;
  }
  .table-schedule .player-warpper.nation .tm-schedule-list-name-warpper, .table-schedule .player-warpper.not-over .tm-schedule-list-name-warpper {
    width: 80% !important;
  }
  .table-schedule .player-warpper.nation .member, .table-schedule .player-warpper.not-over .member {
    width: 20% !important;
  }
  .table-schedule .member {
    width: 0 !important;
    padding: 0 !important;
  }
  .table-schedule .member.home .player-no, .table-schedule .member.away .player-no {
    width: 100% !important;
    float: none !important;
    margin-top: 0 !important;
  }
  .table-schedule .member.home .player-no.flag, .table-schedule .member.away .player-no.flag {
    float: none !important;
  }
  .table-schedule .tm-schedule-list-name-warpper {
    width: 100% !important;
  }
  .table-schedule .tm-schedule-list-store-name-warpper {
    font-size: 0.65rem !important;
  }
  .summary-result.tm .player-no {
    margin-top: 0px !important;
  }
  .schedule-info-page .member,
  .performance-page .member {
    min-width: 120px !important;
  }
}
/* 
    home 
 */
.download-frame .dl-top,
.download-frame .dl-bottom {
  height: 0;
}
.download-frame .app-icon {
  width: 42px;
  height: 42px;
}

/* 
    leagueDetial
 */
.league-name-frame {
  border-radius: 0.5rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.league-name-frame h3 {
  border-radius: 0.25rem;
  position: relative;
}
.league-name-frame h3:after {
  content: attr(title);
  position: absolute;
  right: 0.5rem;
  bottom: 0.25rem;
}
.league-name-frame h3 .online {
  margin-right: 0.5rem;
  margin-bottom: -0.1rem;
}

.group-name-frame img {
  width: 1.6rem;
  height: auto;
}
.group-name-frame.hide {
  opacity: 0 !important;
}

.group-select-frame {
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 2000;
  top: 0;
  left: 0;
}
.group-select-frame .group-select-inner {
  position: absolute;
  width: 100vw;
}
.group-select-frame a {
  border: none;
  letter-spacing: 0.25rem;
  padding-left: 1.25rem !important;
  padding-right: 1rem !important;
  border-radius: 3rem;
  line-height: 1.75rem;
}

/* 
    introduction
 */
.table-introduction th,
.table-introduction td {
  border: none;
}
.table-introduction td {
  position: relative;
  word-break: break-word;
  padding-left: 2rem;
  padding-right: 2rem;
}
.table-introduction td:after {
  content: "";
  width: 96%;
  height: 1px;
  left: 2%;
  bottom: -1px;
  position: absolute;
}
.table-introduction tr:last-child th {
  border-bottom: 0px !important;
}
.table-introduction tr:last-child td:after {
  background: none;
}

.table-introduction .question-circle {
  position: absolute;
  top: calc(50% - 1rem);
  right: 1rem;
  width: 2rem;
  height: 2rem;
  text-align: center;
  line-height: 2rem;
}

.introduction .table tbody + tbody {
  border-top: 1px solid #6b6b6c !important;
}

.round-robin-list-page .player-no,
.advanced-list-page .player-no {
  display: inline-block;
  width: 10%;
  /* position: relative; */
  max-width: 28px;
}
.round-robin-list-page .player-no svg,
.advanced-list-page .player-no svg {
  margin-top: -0.25rem;
  /* position: absolute;
  top: -1.25rem; */
}

/* 
    schedule
 */
.schedule-change-btn {
  line-height: 1.75rem;
  border-radius: 5rem;
  padding-left: 0;
  padding-right: 0;
}
.schedule-change-btn:first-child {
  border-right: 0px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.schedule-change-btn:nth-child(2) {
  border-radius: 0;
}
.schedule-change-btn.last, .schedule-change-btn:last-child {
  border-left: 0px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 5rem;
  border-bottom-right-radius: 5rem;
}

.today {
  padding: 0 1rem;
  border-radius: 5rem;
}

.table-schedule.tm {
  table-layout: fixed;
}

.table-schedule tr:hover td {
  border: none;
}
.table-schedule tr .user-photo {
  height: 48px;
  width: 48px;
  margin-right: 0.75rem;
  border-radius: 24px;
  display: inline-block;
}
.table-schedule tr .player-warpper {
  width: 100%;
  padding: 0 5px;
}
.table-schedule tr .player-warpper .tm-schedule-list-name-warpper {
  width: 100%;
}
.table-schedule tr .player-warpper .tm-schedule-list-name-warpper p {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.table-schedule tr .player-warpper .tm-schedule-list-name-warpper.away {
  padding-left: 2px;
}
.table-schedule tr .player-warpper .member {
  width: 0;
}
.table-schedule tr .player-warpper .member .player-no {
  width: 50%;
  padding: 0 2px;
}
.table-schedule tr .player-warpper.nation .tm-schedule-list-name-warpper, .table-schedule tr .player-warpper.not-over .tm-schedule-list-name-warpper {
  width: 80%;
}
.table-schedule tr .player-warpper.nation .member, .table-schedule tr .player-warpper.not-over .member {
  width: 20%;
}
.table-schedule tr .player-warpper.nation .member .player-no, .table-schedule tr .player-warpper.not-over .member .player-no {
  width: 90%;
}
.table-schedule tr .player-warpper.nation.not-over .tm-schedule-list-name-warpper {
  width: 60%;
}
.table-schedule tr .player-warpper.nation.not-over .member {
  width: 40%;
}
.table-schedule tr .player-warpper.nation.not-over .member .player-no {
  width: 50%;
}
.table-schedule tr .player-warpper.nation.not-over .member .player-no.flag {
  margin-top: 2px;
}
.table-schedule tr .player-warpper.nation.not-over .member.home .flag {
  float: right;
}
.table-schedule tr .player-warpper.nation.not-over .member.away .player-no {
  float: left;
}
.table-schedule tr .tm-schedule-list-store-name-warpper {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.75rem;
  padding: 0 5px;
}
.table-schedule tr .tm-schedule-list-store-name-warpper.home {
  text-align: right;
}
.table-schedule tr .tm-schedule-list-store-name-warpper.away {
  text-align: left;
}

.schedule-info-page .member,
.performance-page .member {
  margin-bottom: 0.25rem !important;
  min-width: 220px;
}
.schedule-info-page .member .player-no,
.performance-page .member .player-no {
  max-width: 32px;
  display: inline-block;
  width: 15%;
  /* &.flag {
      width: 14% !important;
  } */
}
.schedule-info-page .member .player-name,
.performance-page .member .player-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 
    schedule-store
 */
.google-store-map {
  width: 100%;
  height: 400px;
}

/* 
    schedule-result
 */
.team-battle,
.summary-result {
  table-layout: fixed;
}
.team-battle thead th,
.team-battle th,
.summary-result thead th,
.summary-result th {
  border-left: none;
  border-right: none;
}
.team-battle tbody + tbody,
.summary-result tbody + tbody {
  border-top: none;
}
.team-battle tbody td,
.summary-result tbody td {
  white-space: normal !important;
}
.team-battle td.summary-home-td:after,
.team-battle td.summary-away-td:after,
.summary-result td.summary-home-td:after,
.summary-result td.summary-away-td:after {
  content: "";
  width: 1px;
  height: 100%;
  left: 75%;
  top: 0;
  position: absolute;
  /* z-index: -1; */
}
.team-battle td.summary-away-td:after,
.summary-result td.summary-away-td:after {
  left: 25%;
}
.team-battle td.summary-result,
.summary-result td.summary-result {
  width: 25%;
}

.summary-result {
  table-layout: inherit;
}
.summary-result .th td {
  border-left: none;
  border-right: none;
}
.summary-result .member {
  width: 16%;
  max-width: 36px;
  max-height: 36px;
  /* &:last-child {
      margin-top: .25rem !important;
  }

  &:first-child {
      margin-top: 0rem !important;
  } */
}
.summary-result .member.left, .summary-result .member.right {
  width: 100%;
  max-width: inherit;
}
.summary-result .member.left .player-no, .summary-result .member.right .player-no {
  max-width: 36px;
  max-height: 36px;
  display: inline-block;
  width: 20%;
}
.summary-result .member .player-no {
  /* max-width: 36px;
  max-height: 36px; */
  /* display: inline-block; */
  /* width: 20%; */
}
.summary-result tbody.data tr:not(:last-child) td.sequence {
  border-bottom-width: 0px !important;
}
.summary-result tbody.data tr td.sequence {
  border-top-width: 0px !important;
}

.summary-result.tm .player-no {
  max-width: 36px;
  width: 14%;
  margin-top: 2px;
}
.summary-result.tm .player-no.flag {
  margin-top: 0px;
  max-width: 32px;
  width: 12%;
}

.download-warp {
  position: absolute;
  top: -9999px;
}

.download-warp-left {
  position: absolute;
  top: -99999px;
}

.custom-stack {
  position: inherit;
}

.summary-result-page .custom-stack,
.schedule-battle-page .custom-stack {
  height: 0.65rem;
  width: 1.25rem;
  position: relative;
}
.summary-result-page .board-no,
.schedule-battle-page .board-no {
  width: 28%;
}

.cricket-detial-btn {
  position: absolute;
  right: 0.5rem;
  top: 0.75rem;
  font-size: 0.75rem;
  line-height: 1.25rem;
}

.detailed-record-page .flexed {
  position: sticky;
  top: 80px;
  z-index: 1010;
}
.detailed-record-page .game-score-warp {
  position: relative;
}
.detailed-record-page .game-score-warp .is-first-attack {
  width: 8px;
  height: 8px;
  display: inline-block;
  top: 0.65rem;
  margin-left: -1rem;
  position: absolute;
}
.detailed-record-page .game-score-warp .is-first-attack:before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 8px;
  display: block;
}
.detailed-record-page tbody tr.tr-cricket td {
  border-top: none;
  border-bottom: none;
}
.detailed-record-page tbody tr.tr-cricket td:first-child {
  border-left: none;
}
.detailed-record-page tbody tr.tr-cricket td:last-child {
  border-right: none;
}
.detailed-record-page tbody tr.tr-cricket-detial td:first-child {
  border-left: none;
}
.detailed-record-page tbody tr.tr-cricket-detial td:last-child {
  border-right: none;
}
.detailed-record-page tbody tr.tr-cricket-detial:first-child {
  border-top: none;
}
.detailed-record-page tbody tr.tr-cricket-detial:last-child td {
  border-bottom: none;
}

/* 
    line-up
 */
.select-player-table td {
  border-left: 0;
  border-right: 0;
  border-top: 0;
}
.select-player-table tr:last-child td {
  border-bottom: 0;
}

.team-member-select-list a {
  border-radius: 5rem;
  cursor: pointer;
  display: block;
}

/* 
    schedule-battle
 */
.table-battle-responsive {
  max-height: 60vh;
}

.table-battle td,
.table-battle th {
  white-space: normal !important;
}
.table-battle .team {
  min-width: 25vw;
}

svg.battle-result {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}
svg.battle-result line {
  stroke: #6b6b6c;
  stroke-width: 1px;
}

.battle-result-div-warpper {
  display: table;
  width: 100%;
}
.battle-result-div-warpper:last-child {
  border-bottom-width: 0;
}
.battle-result-div-warpper .battle-result-div {
  height: 5rem;
  width: 100%;
  display: table-cell;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-size: 70% auto;
  background-position: center 90%;
}
.battle-result-div-warpper .battle-result-div p.win,
.battle-result-div-warpper .battle-result-div p.loss {
  height: 1rem;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.tree-option-warp {
  position: absolute;
  top: 2.5rem;
  z-index: 10;
  right: 0;
  width: 50%;
}
.tree-option-warp .tree-option {
  width: 100%;
  line-height: 1.75rem;
  border-radius: 5rem;
  display: inline-block;
}

.tree2 {
  width: 100vw;
  height: 56.25vw;
}
.tree2 svg {
  position: absolute;
}

/* 
    leader-board
 */
.table-leader-board-responsive {
  max-height: 60vh;
}

.table-leader-board .team {
  min-width: 25vw;
  white-space: normal !important;
}

.leaderBoard .table-leader-board th:before {
  border-bottom-width: 0px !important;
  border-left-width: 0px !important;
}
.leaderBoard .table-leader-board td:before {
  border-left-width: 0px !important;
}
.leaderBoard .table-leader-board td[aria-colindex="2"],
.leaderBoard .table-leader-board th[aria-colindex="2"] {
  min-width: 42vw;
  white-space: normal !important;
}
.leaderBoard .table-leader-board .member {
  margin-bottom: 0.25rem !important;
}
.leaderBoard .table-leader-board .member .player-no {
  /* max-width: 36px;
  max-height: 36px; */
  display: inline-block;
  width: 12%;
}
.leaderBoard .table-leader-board .member .tm-leader-board-player-name {
  width: 88%;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 
    team-info player-score-table 
 */
.leader {
  padding: 0.05rem 1rem;
  border-radius: 5rem;
  border: 2px solid;
}

/* 
    userInfo 
 */
.user-info-frame .user-avatar {
  width: 8rem;
  height: 8rem;
  margin: 0 auto;
  border-radius: 4rem;
  border-width: 4px;
  position: relative;
}
.user-info-frame .user-avatar:before {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 1rem;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 2;
}
.user-info-frame .user-avatar:after {
  content: "";
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 2rem;
  position: absolute;
  bottom: -0.325rem;
  right: -0.325rem;
  z-index: 1;
}
.user-info-frame .user-avatar input[type=file] {
  width: 8rem;
  height: 8rem;
  border-radius: 4rem;
  position: absolute;
  top: -4px;
  left: -4px;
  opacity: 0;
  cursor: pointer;
}

/* 
    forgotPassword 
 */
.send-admin .custom-control-label:before {
  margin-top: -0.15rem !important;
}
.send-admin .custom-control-label:after {
  top: 0.15rem !important;
}

table {
  width: 50% !important;
  text-align: center;
  margin: 15px 0;
  font-size: 200%;
}
table th,
table td {
  border-bottom: 1px solid #ddd;
  padding: 10px;
  vertical-align: middle;
  white-space: nowrap;
}
table th {
  color: #f2f2f2 !important;
}
table tr:nth-child(even) td {
  background: #2a2c2e !important;
  color: #f2f2f2 !important;
}
table tr:nth-child(odd) td {
  background: #303030 !important;
  color: #f2f2f2 !important;
}
table tr:hover {
  background: rgba(0, 0, 0, 0.05);
}
table input[type=text] {
  width: 50px;
  text-align: center;
}