@charset "utf-8";
/* CSS Document */


@font-face {
font-family: 'Droid Arabic Kufi';
font-style: normal;
font-weight: 400;
src: url(fonts/DroidKufi-Regular.eot);
src: url(fonts/DroidKufi-Regular.eot?#iefix) format('embedded-opentype'),
     url(fonts/DroidKufi-Regular.woff2) format('woff2'),
     url(fonts/DroidKufi-Regular.woff) format('woff'),
     url(fonts/DroidKufi-Regular.ttf) format('truetype');
}
@font-face {
font-family: 'Droid Arabic Kufi';
font-style: normal;
font-weight: 700;
src: url(fonts/DroidKufi-Bold.eot);
src: url(fonts/DroidKufi-Bold.eot?#iefix) format('embedded-opentype'),
     url(fonts/DroidKufi-Bold.woff2) format('woff2'),
     url(fonts/DroidKufi-Bold.woff) format('woff'),
     url(fonts/DroidKufi-Bold.ttf) format('truetype');
}

body {
  margin: 0 auto;
  /*line-height: 18px; */
  font-family: "Droid Arabic Kufi","Tahoma", Helvetica, Arial;
  font-size: 14px;
  position: relative;
  min-height: 100vh;
  background:#f4f6f9;
}
/*::selection{
  color:#fff;
  background:#dc2229
}
::-moz-selection{
  color:#fff;
  background:#dc2229
}
*/

.navbar-toggler {
  display: none;
  border-color: transparent;

}
.navbar-toggler-icon{
  position: relative;
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  content: "";
  background: no-repeat center center;
  background-size: 100% 100%;
  background-image :     url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMS4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUzIDUzIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MyA1MzsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSIzMnB4IiBoZWlnaHQ9IjMycHgiPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik0yLDEzLjVoNDljMS4xMDQsMCwyLTAuODk2LDItMnMtMC44OTYtMi0yLTJIMmMtMS4xMDQsMC0yLDAuODk2LTIsMlMwLjg5NiwxMy41LDIsMTMuNXoiIGZpbGw9IiNGRkZGRkYiLz4KCQk8cGF0aCBkPSJNMiwyOC41aDQ5YzEuMTA0LDAsMi0wLjg5NiwyLTJzLTAuODk2LTItMi0ySDJjLTEuMTA0LDAtMiwwLjg5Ni0yLDJTMC44OTYsMjguNSwyLDI4LjV6IiBmaWxsPSIjRkZGRkZGIi8+CgkJPHBhdGggZD0iTTIsNDMuNWg0OWMxLjEwNCwwLDItMC44OTYsMi0ycy0wLjg5Ni0yLTItMkgyYy0xLjEwNCwwLTIsMC44OTYtMiwyUzAuODk2LDQzLjUsMiw0My41eiIgZmlsbD0iI0ZGRkZGRiIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=)
;
}
    .navbar-offcanvas li {
        display: block;
        padding: 10px 
    }
     .navbar-offcanvas li.active{
      background-color: #f0f0f0
     }
     .navbar-offcanvas li a{
      text-decoration: none !important;
      color: #333;
      display: block;
     }

    .nav-item.active::before {
        display: none;
    }

    .navbar-offcanvas {
        position: fixed;
        width: 100%;
        max-width: 250px;
        height: 100%;
        right: -250px;
        background-color: #fff;
        top: 0;
        padding-left: 15px;
        padding-right: 15px;
        z-index: 999;
        overflow: hidden;
        -webkit-overflow-scrolling: touch;
        -webkit-transition: all 0.15s ease-in;
        transition: all 0.15s ease-in;
    }

    .navbar-offcanvas.in {
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    }

    .navbar-offcanvas.navbar-offcanvas-fade {
        opacity: 0;
    }

    .navbar-offcanvas.navbar-offcanvas-fade.in {
        opacity: 1;
    }

    .navbar-offcanvas.offcanvas-transform.in {
        -webkit-transform: translateX(-250px);
        transform: translateX(-250px);
    }

    .navbar-offcanvas.offcanvas-position.in {
        left: 0;
    }

    .navbar-offcanvas.navbar-offcanvas-right {
        left: auto;
        right: -250px;
    }

    .navbar-offcanvas.navbar-offcanvas-right.offcanvas-transform.in {
        -webkit-transform: translateX(-250px);
        transform: translateX(-250px);
    }

    .navbar-offcanvas.navbar-offcanvas-right.offcanvas-position.in {
        left: auto;
        right: 0;
    }

    .navbar-offcanvas .dropdown.active .caret {
        border-top: 0;
        border-bottom: 4px solid;
    }

    .navbar-offcanvas .dropdown-menu {
        position: relative;
        width: 100%;
        border: inherit;
        box-shadow: none;
        -webkit-transition: height 0.15s ease-in;
        transition: height 0.15s ease-in;
    }

    .navbar-offcanvas .dropdown-menu.shown {
        display: block;
        margin-bottom: 10px;
    }
.navbar-default .navbar-brand {
  font-size:23px;
  color:#FFF;
}
.navbar-brand {
  padding-right:0px;
}
.navbar-inverse .navbar-brand {
  font-size:23px;
  color:#428BCA;
}
.navbar-default {
  background:#428BCA;
}
.navbar-header { 
  float:right;
}
.header-user {
  display: flex;
  align-items: center;
  gap: 10px;
}
.header-user .user-photo {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #444;
}
.header-user .logout-link {
  color: #aaa;
  font-size: 12px;
  text-decoration: none;
}
.header-user .logout-link:hover {
  color: #fff;
}
.sidebar .nav > li{ 
  text-align:left;
  direction:ltr;

}
.sidebar .sidebarIMG { 
  margin-bottom:20px;
  margin-top:10px;
   }  

.main {
  margin-top:60px;
  text-align:left;
  direction:ltr;
}
h1, h2, h3, h4 {
  font-weight:normal;
  color:#da6629;

}
.navbar-default .navbar-nav > li > a {
  color:#fff;
  padding: 0;
}
.navbar-default .navbar-nav > li > a:hover {
  color:#444;
}


/* TABLE */
.dataTables_wrapper .dataTables_length {
  float: left;
  min-width: 250px;
}
.dataTables_wrapper .dataTables_filter {
  float: right;
  margin: 10px 10px 5px 0px;
  min-width: 250px;
  text-align:left;
}

.dataTables_wrapper .dataTables_length .input-mini {
  float: left;
}
.dataTables_wrapper .dataTables_length label > span {
  float: right;
  margin: 6px 5px;
}
.dataTables_wrapper {
  clear:both;
}
.dataTables_wrapper .form-control  {
  font-weight:normal;
  background:#F6f6f6;
}
.dataTables_wrapper select {
  font-weight:normal;
  background:#F6f6f6;
  border: 1px solid #CCCCCC;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  color: #555555;
  display: inline-block;
  font-size: 12px;
  height: 34px;
  padding: 4px 12px 4px 0px;
  transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
}
.dataTables_wrapper .dataTables_paginate {
  float: right;
  margin-bottom: 10px;
  margin-right: 5px;
  margin-top: 10px;
}
.dataTables_wrapper .dataTables_paginate > a {
  background: none repeat scroll 0 0 #EEEEEE;
  color: #333333;
  cursor: pointer;
  margin-right: 5px;
  padding: 3px 8px;
  text-decoration: none;
}
.dataTables_wrapper .dataTables_paginate > a.paginate_button_disabled {
  color: #999999;
}
.dataTables_wrapper .dataTables_paginate > a.paginate_button_disabled:hover {
  background: none repeat scroll 0 0 #EEEEEE;
  cursor: default;
}
.dataTables_wrapper .dataTables_paginate > a:hover {
  background: none repeat scroll 0 0 #DDDDDD;
}
.dataTables_wrapper .dataTables_paginate > span > a {
  background: none repeat scroll 0 0 #EEEEEE;
  color: #333333;
  cursor: pointer;
  margin-right: 5px;
  padding: 3px 8px;
  text-decoration: none;
}
.dataTables_wrapper .dataTables_paginate > span > a.paginate_active {
  background: none repeat scroll 0 0 #428bca;
  color: #FFFFFF;
}
table tr th {
  background:#EEE;
  vertical-align:middle !important;
  font-weight:normal;
  color:#428bca;
}
table tr th select{
  width:100%;
  
}
table tr td {
  vertical-align:middle !important;
}
table > tbody > tr:nth-child(2n+1) > td, table > tbody > tr:nth-child(2n+1) > th {
  background:#F9F9F9;
}
.dataTables_wrapper .dataTables_info
{
  color:#dc2229;
  margin-bottom:10px;
  margin-right:10px;
  text-align:left;
}

.dataTables_wrapper select { float:right; }

/* END TABLE */

.nav-sidebar > .active > a { background:#428bca }
.nav-sidebar > .active > a:hover { background:#4a7a3d }

.label { 
  font-weight:normal;
  font-size:12px;
}

.page-header { border:0px; color:#da6629; }

.form-horizontal label { float:left; text-align:left; font-weight:normal; line-height:30px; }
.form-horizontal input{ width:auto; display:inline-block; line-height:30px; background:#f9f9f9;   }
.form-horizontal select { width:auto; display:inline-block; padding:2px 10px 2px 0px; background:#f9f9f9;  }
/*.form-horizontal .control-label { width:150px; float:right;  }*/
.form-horizontal .input-too-long { width:700px; }
.form-horizontal .input-long { width:600px; line-height:30px; }

.alert  { text-align:left; }
#overlay {
  background-color: #000;
  display: none;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}
#preloader {
  background: url(../images/loader.gif) no-repeat scroll 12px 10px #000000;
  border-radius: 8px 8px 8px 8px;
  color: #FFFFFF;
  display: none;
  font-size: 11px;
  left: 50%;
  line-height: 30px;
  margin: -20px 0 0 -45px;
  opacity: 0.8;
  padding: 10px 20px ;
  position: fixed;
  direction:ltr;
  text-align: left;
  text-indent: 36px;
  text-shadow: none;
  top: 50%;
  width: 150px;
  z-index: 1209;

}

.drawResult 
{
  font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
  height:80px; 
  width:800px;
  overflow:hidden;
  text-align:left;
  direction:ltr;
}
.drawResult div {
  background:url(../images/flip-clock.png) no-repeat top left;
  font-size:52px;
  height:80px; 
  line-height:74px;
  color:#FFF;
  text-align:center;
  width:80px;
  float:left;
  position:relative;
}

.overlay1 {
  background: url("../images/overlay.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
  height: 4px;
  left: 14px;
  position: absolute;
  top: 39px;
  width: 52px;
}

.navbar-header { float:left !important; }



.tabel tr td { text-align:center; }




#TopHeader {
  background: #000;
  height: 75px;
  margin: 0;
  border: none;
  border-radius: 0;
  position: relative;
}

.center{
  text-align: center;
}
.center-block{
          margin: 0 auto;
  text-align: center;
  display: inline-block;
}
.page-navbar {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  position: static;
}
.page-navbar li {
  display: inline-block;
  padding: 0;
  margin-right: 22px;
}
.page-navbar li a {
  color: #777;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 1px;
  font-weight: 600;
  padding-bottom: 4px;
}
.page-navbar li a:hover {
  color: #fff;
}
.page-navbar li.active a {
  color: #fff;
  border-bottom: 2px solid #4fc3f7;
}

.header-inner {
  display: flex;
  align-items: stretch;
  height: 100%;
  padding: 0 20px;
}
.header-wc-logo {
  display: flex;
  align-items: center;
  padding: 8px 20px 8px 0;
  border-right: 0px solid #333;
  margin-right: 20px;
}
.header-wc-logo img {
  height: 58px;
  object-fit: contain;
}
.top {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
  align-items: flex-start;
}

.header-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px 0;
  min-width: 0;
}
.header-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-company-logo {
  
  object-fit: contain;
  max-width: 240px;
}
.login-page {
width: 50%;
padding: 2% 0 0;
margin: auto;
}
.form {
position: relative;
z-index: 1;
background: #FFFFFF;
width: 100%;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
}
.form input {
outline: 0;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
.form button {
text-transform: uppercase;
outline: 0;
background: #da6629;
width: 100%;
border: 0;
padding: 15px;
color: #FFFFFF;
font-size: 18px;
transition: all 0.3 ease-in-out;
cursor: pointer;
}
.form button:hover,.form button:active,.form button:focus {
background: #ff6905;
}
.full-height{
  height: 100%; 
}
.Profile{
width: 200px;
position: relative;
margin: 25px auto;
min-height: 252px;
	
}
 @media screen and (max-width: 767px) {

  .logo{
    position: relative !important;
    text-align: center!important;
    width: 100% !important;

  }
  .PrizeTable h4{
    font-size: 14px;
  }

.td-buttons{
    border-top: 1px solid #eee;

}
td img{
  margin: 15px 0 !important;
  width: 75px !important
}
.ScoreAlert-success{
      max-width: 70px !important;
      padding: 2px !important;
}
  .login-page img{
    width: 250px;
  }
  .logo img{
    width: 40% !important
  }
  .form{
        margin: 0 auto 40px;
  }
  .table-responsive{
  /*   -webkit-overflow-scrolling: touch;
     overflow: auto; */
  }
  .login-page {
width: 100%;
padding: 0;
}
.form{
  padding: 10px;
}
#TopHeader{
height: 75px !important;
}
.header-right {
  justify-content: center;
}


}

@media (max-width: 480px) {
  .header-inner        { padding: 0 8px; }
  .header-wc-logo      { padding: 6px 10px 6px 0; margin-right: 10px; }
  .header-wc-logo img  { height: 40px; }
  .header-company-logo { max-width: 140px; }
}



.date{
color:#999;
font-size: 11px;
}
.score{
color:#222;
font-size: 28px;
unicode-bidi: bidi-override;
}
.ScoreAlert-success {

  text-align: center;
  direction: ltr;

padding: 10px;
  border: 1px solid transparent;
      border-top-color: transparent;
      border-right-color: transparent;
      border-bottom-color: transparent;
      border-left-color: transparent;
  border-radius: 4px;
  background-color: #dff0d8;
  border-color: #d6e9c6;
  color: #3c763d;
max-width: 100px;
cursor: pointer;	
}
.ScoreAlert-danger {
max-width: 100px;
  text-align: center;
  direction: ltr;

padding: 10px;
  border: 1px solid transparent;
      border-top-color: transparent;
      border-right-color: transparent;
      border-bottom-color: transparent;
      border-left-color: transparent;
  border-radius: 4px;

background-color: #f2dede;
border-color: #ebccd1;
color: #a94442;
cursor: pointer;
}

.ProfilePic {
width: 200px;
height: 201px;
background-size:cover;
margin: 0 auto;


}
.Profile h3 {
text-align: center;
color: #000;
}

/*Powerd By*/
.powerd-by {
position: relative;
margin: 0 auto;
z-index: 9;
text-align: center;
margin-top: 5em;
}

.text-powerd-by {
  font-size: 22px;
  margin: 0 auto;

}

.text-powerd-by h1 {
  font-size: 28px;
  font-weight: 400;
  color: #000;
  text-shadow: 2px 1px 1px #FFffff;
  margin: 0;

}

.text-powerd-by img {
  height: 35px;
  margin: 0 0.4em;
  vertical-align: middle;
}
.close{
left : 10px !important;
}
/*Syriatel Logo*/
.logo {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 999;
  width: 20%;
}

.logo img {
  vertical-align: bottom;
  width: 100%;

}
.ProfilePic.bigger{
width: 300px;
height: 300px;
}
.profile-photo-img:before{
  position: absolute;
  width: 100%;
  height: 100%;
  content: '';
  background-color: rgba(0,0,0,0.5);
  top: 0;
  left: 0;
  opacity: 0;
  transition: 0.2s all ease-in-out;
}
.default-image-background{
  width: 300px;
  height: 300px;
  background-image: url(../images/default3.png);
  background-size: cover;
  position: absolute;
  top: 0
}
.profile-photo-img{
  width: 300px;
  height: 300px;
  background-repeat: no-repeat;
  background-size: cover


}
.profile-photo-img:after{
  position: absolute;
  width: 100%;
  height: 100%;
  content: '';
  background-repeat: no-repeat;
  background-size: 20%;
  top: 110px;
  left: 115px;
  opacity: 0;
  transition: 0.2s all ease-in-out;
  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDMyIDMyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzMiAzMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSIzMnB4IiBoZWlnaHQ9IjMycHgiPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik0yOCw2aC00bC00LTRoLTguMDAxTDgsNkg0YzAsMC00LDAtNCw0djEyYzAsNCw0LDQsNCw0czUuNjYyLDAsMTEuNTE4LDAgICAgYzEuNjE0LDIuNDExLDQuMzYxLDMuOTk5LDcuNDgyLDRjMy44NzUtMC4wMDIsNy4xNjctMi40NTQsOC40MzYtNS44ODlDMzEuOTk1LDIzLjA3NiwzMiwyMiwzMiwyMnMwLTgsMC0xMlMyOCw2LDI4LDZ6ICAgICBNMTQuMDMzLDIxLjY2QzExLjY4NiwyMC44NDgsMTAsMTguNjI2LDEwLDE2YzAtMy4zMTIsMi42ODQtNiw2LTZjMS45MTQsMCwzLjYwNywwLjkwOCw0LjcwNiwyLjMwNiAgICBDMTYuODQ4LDEzLjMyMSwxNCwxNi44MjIsMTQsMjFDMTQsMjEuMjIzLDE0LjAxOCwyMS40NDEsMTQuMDMzLDIxLjY2eiBNMjMsMjcuODgzYy0zLjgwMS0wLjAwOS02Ljg3Ni0zLjA4NC02Ljg4NS02Ljg4MyAgICBjMC4wMDktMy44MDEsMy4wODQtNi44NzYsNi44ODUtNi44ODVjMy43OTksMC4wMDksNi44NzQsMy4wODQsNi44ODMsNi44ODVDMjkuODc0LDI0Ljc5OSwyNi43OTksMjcuODc0LDIzLDI3Ljg4M3oiIGZpbGw9IiNGRkZGRkYiLz4KCQk8cG9seWdvbiBwb2ludHM9IjI0LjAwMiwxNiAyMiwxNiAyMiwyMCAxOCwyMCAxOCwyMiAyMiwyMiAyMiwyNiAyNC4wMDIsMjYgMjQuMDAyLDIyIDI4LDIyIDI4LDIwICAgICAyNC4wMDIsMjAgICAiIGZpbGw9IiNGRkZGRkYiLz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K)
}
.ProfilePic.bigger:hover .profile-photo-img:before , .ProfilePic.bigger:hover .profile-photo-img:after{
  opacity: 1;

}

.score2 { font-size: 22px;}


.ProfilePic.bigger input{
    position: absolute;
    width: 100%;
    z-index: 1;
    left: 0;
    opacity: 0;
    top: 0;
    height: 100%;
}
.ProfileX {
width: 120px; float: left;
height: 160px;
	position: relative;
}
.ProfilePicX {
width: 100px;
height: 101px;
background-size:cover;
margin: 0 auto;



}
.preview-img{
      max-width: 100%;
    height: 100%;
    object-fit: contain;
}

.ProfileX p { font-size: 12px; text-align: center;}
.ProfileX .myTeam {
	position: absolute;
	bottom: 60px;
	right:5px;

}
.ProfileX .myTeam img{
	width:45px;

}

.Profile {
	position: relative;
	
}
.Profile .myTeam {
    position: absolute;
    bottom: 75px;
    right: -15px;
}
.Profile .myTeam img{
	width:85px;

}
.Profile .count{
  position: absolute;
  top: 15px;
  left: -15px;
  text-align: center;
  width: 60px;
  height: 60px;
  z-index: 9

}
.Profile.ProfilePic .count{
width: 80px;
    height: 80px;
    left: -10px;
}

.Profile .count:before{
    content: "";
    display: block;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22200px%22%20height%3D%22200px%22%3E%23%3Cpath%20fill%3D%22%23bdb289%22%20stroke%3D%22transparent%22%20stroke-width%3D%220%22%20style%3D%22%22%20d%3D%22M99.851 194.226c.137.128.137.257.137.257s0-.064.138-.257c30.97-29.164 77.526-26.331 93.874-55.88C214.899 100.686 180.619 0 100.263 0h-.551C19.356 0-14.857 100.686 5.975 138.346c16.347 29.612 62.905 26.717 93.876 55.88z%22%20%2F%3E%3C%2Fsvg%3E");
    background-size: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    z-index: -1;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}
.Profile .count span{
      margin-top: 1em;
    font-size: 18px;
    color: #fff;
    display: block;
}
.Profile h4{
  color: #333;
  white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.profile-clickable { cursor: pointer; }
.Profile.ProfilePic .count span{
  font-size: 24px;
}
.flag-background{
  position: absolute;
  z-index: -1

}
.flag-container{
z-index: 2;
margin-bottom: 5em;
min-height: 13em;
}
.fi-team-card__bg__svg-color{
    background-color: #fafafa;
    fill: #fafafa;
}
.flag-container img{
  width: 75%
}
.flag-container h3{
  color: #333;
  font-size:20px;
  min-height: 30px; 
}
.checked-img{
  display: inline-block;
  width: 28px !important
}

.tr-buttons{
  background: #F9F9F9;
  border-bottom: 1px solid #eee
}
.save-hidden{
  margin-top: 10px
}
.NumericOnly{
  margin: 1em 0
}
td img{
  margin-top: 10px;
  margin-bottom: 5px;
}

.NewsAlert { margin-top: 3px; }
.modal-footer { border: 0px; text-align: center !important;}

/*Knockout Phase Figure*/
.fi-bracket__row--final{
  position: relative;
}
.fi-bracket__row .fi-mu--final{
      width: 33% !important;
}
.fi-bracket{
  margin-top: 40px;
}
.fi-bracket__row{
  display: flex;
  justify-content: space-around;
  margin: 0 -0.7%;
}
.fi-bracket__row .fi-mu{
  width: 23.5%;
}
. fi-s__scoreText{
      font-weight: 600;
    color: #666;
}
.fi-bracket .fi-mu__m{
  position: relative;
  background-color: #f2f2f2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px;
  flex-wrap: wrap;
  text-align: center;
  margin: 10px 0;
}
.fi-bracket .fi-mu__status{
  width: 100%;
  line-height: 1;
  text-align: center;
  font-size: 11px;
  white-space: nowrap;
  order: 3;
  margin-top: 8px;
  min-height: 11px;
}
.fi-bracket .fi-mu__m .fi-t{
  margin-top: 15px;
  width: 47%;
  display: block;
  text-align: center;
  padding: 0;
  position: relative;
}
.fi-t{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
}
.fi-bracket .fi-mu__m .fi-t__i{
  max-width: 48px;
  margin: 0 auto;
  margin-bottom: 5px;
}
.fi-bracket .fi-mu__m .fi-t__i img{
  display: block;
  width: 100%;
  float: none;
  border: none;
}
.fi-bracket .fi-mu__m .fi-t__n{
  padding: 0;
}
.fi-bracket .fi-mu__m .fi-s-wrap .fi-s__score{
      font-weight: 600;
    color: #666;
    line-height: 1.4
}
.fi-bracket .fi-mu__m .fi-s-wrap{
  width: 100%;
  order: 4;
  font-size: 12px;
  font-weight: 600
}
.fi-bracket .fi-mu__details{
  width: 100%;
  min-height: 15px;
  order: 5;
}
.fi-bracket__row--final .fi-mu:first-child{
  position: absolute;
  left: 2%;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}
.fi-bracket__row .fi-mu--final{
  width: 45%;
  position: relative;
}
.fi-t.away .fi-t__n{
    padding-left: 5px;
    padding-right: 0;
    padding: 0;
}
.fi-bracket .fi-mu__m .fi-t__nText{
  font-size: 14px;
  line-height: 1;
  display: none;
}
.fi-bracket .fi-mu__m .fi-t__nTri{
  display: block;
    font-size: 11px;
        color: #474747;
}
.fi-bracket .fi-mu--final .fi-mu__m .fi-t{
  margin-top: 30px;
}
.fi-bracket .fi-mu--final .fi-mu__m .fi-t__i{
      max-width: 64px;
    margin-bottom: 10px;
}
.fi-bracket .fi-mu--final .fi-mu__m .fi-s-wrap{
  font-size: 20px;
}
.fi-bracket__row .fi-mu .fi-mu__m:before, .fi-bracket__row .fi-mu .fi-mu__m:after{
  content: '';
    position: absolute;
    color: #d9d9d9;
    left: 50%;
    transform: translateX(-50%);
}
.fi-bracket__row--quarter .fi-mu__m:before, .fi-bracket__row--semi .fi-mu__m:before{
      width: 105%;
    top: -20px;
    height: 10px;
    border: 2px solid currentColor;
    border-top: none;
}
.fi-bracket__row--semi .fi-mu__m:before{
      width: 213%;
}
.fi-bracket__row--final+.fi-bracket__row--semi .fi-mu__m:before, .fi-bracket__row--final+.fi-bracket__row--semi+.fi-bracket__row--quarter .fi-mu__m:before{
  bottom: -20px;
    top: auto;
    border: 2px solid currentColor;
    border-bottom: none;
}
.fi-bracket__row--final+.fi-bracket__row--semi .fi-mu__m:after, .fi-bracket__row--final+.fi-bracket__row--semi+.fi-bracket__row--quarter .fi-mu__m:after{
      top: 100%;
    bottom: auto;
}

.fi-bracket__row--quarter .fi-mu__m:after, .fi-bracket__row--semi .fi-mu__m:after{
    width: 2px;
    bottom: 100%;
    height: 10px;
    background: currentColor;  
}
.fi-bracket__row--final .fi-mu--final .fi-mu__m:before, .fi-bracket__row--final .fi-mu--final .fi-mu__m:after{
  width: 2px;
    bottom: 100%;
    height: 20px;
    background: currentColor;
}
.fi-bracket__row--final .fi-mu--final .fi-mu__m:after{
  top: 100%;
    bottom: auto;
}
.fi-bracket .fi-mu__m .fi-s-wrap .fi-s__scoreText{
  color: #666;
}
.fi-bracket .fi-s__matchDate{
  font-size: 12px;
    font-weight: normal;
    line-height: 2
}
@media screen and (min-width: 1024px){
  .fi-bracket .fi-mu--final .fi-mu__m{
      padding: 28px 50px !important;
}

  .fi-bracket .fi-mu__m{
    padding: 22px 0;
  }
  .fi-bracket .fi-mu__status{
    order: 0;
    margin-top: 0;
    margin-bottom: 3px;
  }
  .fi-bracket .fi-mu__m .fi-t{
    width: 35%; 
  }
  .fi-bracket .fi-mu__m .fi-s-wrap{
    font-size: 16px;
    width: 25%;
    order: 0;
    margin-top: -25px;

  }
  .fi-bracket .fi-mu__details{
    margin-top: 5px;
  }
  .fi-bracket__row .fi-mu--final{
    width: 45%;
  }
  .fi-t__nText{
        font-size: 21px;
    font-size: calc(21px + (100vw - 1024px) / (1200 - 1024) * (24 - 21));
  }
}
@media screen and (min-width: 1200px){
  .fi-bracket .fi-mu__m .fi-t{
    width: 40%;
  }
  .fi-bracket .fi-mu__m .fi-s-wrap{
    width: 20%;
  }
  .fi-bracket .fi-mu__m .fi-t__nText{
        display: block;
  }
  .fi-bracket .fi-mu__m .fi-t__nTri{
        display: none;
  }
}
@media screen and (min-width: 768px){
  .fi-flag--4{
    width: 64px;
  }
  .fi-t__n{
    padding-right: 10px;
  }
  .fi-t__n{
        padding-right: 10px;
  }
  .fi-t__nTri{
        display: none;
  }
}

table > tbody > tr:nth-child(2n+1) > td, table > tbody > tr:nth-child(2n+1) > th{
  background: #fff
}
tr.active{
      border: 1px solid #e0e0e0;
}
@media only screen and (max-width: 768px) {
  .navbar-toggler {
    display: block;
  }

.navbar-default .navbar-toggle{
  border-color: transparent;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus{
  background-color:transparent; 
}
	
}
.list-group-item > .badge { }
.badge {  font-weight: 400; background-color:#428bca; }

.badge2 {  background-color:#5bc0de !important; }
.badge3 {  background-color:#3c763d !important; }

.arrow{
  cursor: pointer;
  transition: .3s all ease-in-out
}
.arrow.active{
    transform: rotate(180deg);
}
.ProfileX.suggestions{
  width: 100%;
  height: 100%
}
.ProfileX.suggestions .myTeam{
          bottom: 2px;
    right: 110px;
}
.ProfileX.suggestions .myTeam img{
width: 30px;
}
.ProfileX.suggestions .ProfilePicX{
  width: 50px;
  height: 50px;
}
.ProfileX.suggestions .ProfilePicX img{
  width: 50px;
  height: 50px;
}
/*.panel-default.suggestions{
  min-height: 20em
}*/
.image-testominal{
      position: relative;
    display: inline-block;
}
.image-testominal .jq-ry-container{
  /*width: 100% !important*/
}
.arrow{
  width: 25px !important;
}


.suggestions-box { min-height: 200px;}
.suggestions-profil {
  width: 250px; 
 margin: 0px auto !important;

}


.speech-bubble {
	position: relative;
	background: #fff;
	border-radius: .4em;
	padding: 15px;
	margin: 15px 0;
      border: 1px solid #e0e0e0;
}

.speech-bubble:after {
      content: '';
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #efefef;
    position: absolute;
    top: -15px;
    left: 55px;
}


.suggestions-box{
  background-color: #f8f8f8;
}
.speech-bubble .ProfileX {
text-align: center;
}
.speech-bubble .btn-danger{
    position: absolute;
    top: -10px;
    right: -5px;
    background: transparent;
    border: none;
    color: #111;
    font-size: 22px;
    outline: none !important;
    opacity: 0.5;
    box-shadow: none !important; 
}
.speech-bubble .btn-danger:hover{
  opacity: 1
}
.speech-bubble .reply-desc{
     text-align: right;
    margin-top: 1em; 
}
.speech-bubble .ProfileX{
  width: 85px;
  height: auto;
}

.speech-bubble .ProfilePicX{
  width: auto;
  height: auto;
}
.speech-bubble .ProfilePicX img{
  width: 100%;
}
.speech-bubble .ProfileX .myTeam img{
  width: 40px;
}
.speech-bubble .ProfileX .myTeam{
  bottom: 50px;
  right: 0
}
.dropdown-menu>li>a{
  cursor: pointer;
}
.winners-table img{
  margin: 0 
}
.winners-table tr:hover>td, .winners-table tr:hover>th{
      background-color: #fff !important;
}
.winners-table .ProfileX{
  float:none;
  margin: 0 auto;
  height: auto;;
}

.winners-table img{
      width: 100% !important;
    margin: 0 !important;
}

.PrizeTable h4 { color: #000;}

iframe{
  width: 100%;
  height: 520px;
}

/* =============================================
   MATCH CARDS — AllMatches page
   ============================================= */

.mainBody {
  background: #f4f6f9;
  padding-bottom: 30px;
}

#matches-container {
  padding: 16px 0 8px;
}

/* Section headers */
.match-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  margin-top: 8px;
  cursor: pointer;
  user-select: none;
}
.section-accent {
  width: 3px;
  height: 18px;
  background: #4fc3f7;
  border-radius: 2px;
  flex-shrink: 0;
}
.section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #444;
  white-space: nowrap;
}
.section-line {
  flex: 1;
  height: 1px;
  background: #dde1e7;
}
.section-arrow {
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.2s, transform 0.2s;
}
.section-arrow.active {
  opacity: 1;
  transform: rotate(180deg);
}

/* Match card base */
.match-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  margin-bottom: 10px;
  overflow: hidden;
  border-left: 3px solid #e8e8e8;
  transition: box-shadow 0.2s, transform 0.15s;
}
.match-card:hover {
  box-shadow: 0 4px 18px rgba(0,0,0,0.11);
  transform: translateY(-1px);
}

/* Card states */
.match-card--predicted      { border-left-color: #4fc3f7; }
.match-card--perfect        { border-left-color: #4caf50; }
.match-card--partial        { border-left-color: #ff9800; }
.match-card--low            { border-left-color: #1976d2; }
.match-card--wrong          { border-left-color: #ef5350; opacity: 0.85; }
.match-card--finished-no-pred { border-left-color: #ccc; opacity: 0.7; }

/* Card sections */
.match-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid #f5f5f5;
}
.match-date {
  font-size: 10px;
  color: #aaa;
  letter-spacing: 0.4px;
}
.match-card-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
}
.match-card-footer {
  display: flex;
  justify-content: center;
  padding: 10px 16px 16px;
}

/* Teams */
.match-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 110px;
}
.match-flag {
  width: 90px;
  height: 62px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.15));
}
.match-team-name {
  font-size: 12px;
  font-weight: 600;
  color: #333;
  text-align: center;
}

/* Center: VS or score */
.match-center {
  text-align: center;
  flex: 1;
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.match-vs {
  font-size: 13px;
  font-weight: 700;
  color: #ccc;
  letter-spacing: 3px;
}
.match-final-score {
  font-size: 30px;
  font-weight: 900;
  color: #222;
  letter-spacing: 4px;
  line-height: 1;
}
.score-x {
  color: #bbb;
  font-weight: 300;
}

/* Score inputs */
.match-score-input {
  width: 56px;
  padding: 6px 4px;
  border: 1.5px solid #e0e0e0;
  border-radius: 7px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: #333;
  background: #fafafa;
  outline: none;
  -moz-appearance: textfield;
  display: block;
}
.match-score-input::-webkit-outer-spin-button,
.match-score-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.match-score-input:focus {
  border-color: #4fc3f7;
  background: #f0faff;
}
.match-card--predicted .match-score-input {
  border-color: #b3e5fc;
  background: #f0faff;
}

/* Status badges */
.match-status-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.match-status-badge--upcoming  { background: #e3f2fd; color: #0288d1; }
.match-status-badge--predicted { background: #e3f2fd; color: #0277bd; }
.match-status-badge--finished  { background: #f5f5f5; color: #888; }

/* Action buttons */
.match-action-btn {
  border: none;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 700;
  padding: 9px 32px;
  cursor: pointer;
  letter-spacing: 1px;
  transition: opacity 0.2s, transform 0.1s;
}
.match-action-btn:hover  { opacity: 0.85; transform: scale(1.02); }
.match-action-btn--save  { background: #111; color: #fff; }
.match-action-btn--update {
  background: transparent;
  color: #0288d1;
  border: 1.5px solid #4fc3f7;
}

/* Details button */
.match-details-btn {
  background: #4fc3f7;
  border: none;
  color: #fff;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.match-details-btn:hover { background: #0288d1; color: #fff; }

/* Score result badges */
.match-score-badge {
  font-size: 16px;
  font-weight: 800;
  padding: 8px 28px;
  border-radius: 24px;
}
.match-score-badge--perfect { background: #e8f5e9; color: #2e7d32; }
.match-score-badge--partial { background: #fff3e0; color: #e65100; }
.match-score-badge--low     { background: #e3f2fd; color: #1565c0; }
.match-score-badge--wrong   { background: #ffebee; color: #c62828; }

/* Mobile tweaks */
@media screen and (max-width: 767px) {
  .match-team { width: 90px; }
  .match-flag { width: 64px; height: 44px; }
  .match-team-name { font-size: 10px; }
  .match-final-score { font-size: 22px; letter-spacing: 2px; }
  .match-score-input { width: 46px; font-size: 14px; }
  .match-card-body { padding: 12px 10px; }
  .match-action-btn { padding: 8px 20px; font-size: 10px; }
}

/* =============================================
   HOMEPAGE
   ============================================= */

/* Body wrapper */
.home-body {
  background: #f4f6f9;
  padding: 32px 0 48px;
}

/* Section structure */
.home-section {
  margin-bottom: 36px;
}
.home-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

/* Rules grid */
.home-rules-grid {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.home-rule-card {
  flex: 1;
  min-width: 180px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  padding: 24px 20px 20px;
  text-align: center;
  border-top: 4px solid transparent;
}
.home-rule-pts {
  font-size: 52px;
  font-weight: 900;
  line-height: 1;
}
.home-rule-unit {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 10px;
  opacity: 0.7;
}
.home-rule-pts--6 { color: #2e7d32; }
.home-rule-pts--3 { color: #e65100; }
.home-rule-pts--1 { color: #1565c0; }
.home-rule-card:nth-child(1) { border-top-color: #4caf50; }
.home-rule-card:nth-child(2) { border-top-color: #ff9800; }
.home-rule-card:nth-child(3) { border-top-color: #1976d2; }
.home-rule-desc {
  font-size: 13px;
  color: #555;
  line-height: 1.5;
  margin: 0;
}
.home-rules-note {
  font-size: 12px;
  color: #888;
  margin-top: 14px;
  letter-spacing: 0.3px;
}

/* Nav card grid */
.home-nav-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.home-nav-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  padding: 22px 16px 18px;
  text-decoration: none;
  color: #333;
  width: calc(25% - 11px);
  transition: box-shadow 0.18s, transform 0.15s;
  border: 1px solid #eaecef;
}
.home-nav-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  transform: translateY(-3px);
  text-decoration: none;
  color: #111;
}
.home-nav-icon-wrap {
  height: 114px;
 /* background: #f4f6f9; */
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.home-nav-icon-wrap--flag {
  border-radius: 50%;
}
.home-nav-icon {
  width: 84px;
  object-fit: contain;
}
.home-nav-icon-wrap--flag .home-nav-icon {
  width: 64px;
  height: 64px;
  object-fit: cover;
}
.home-nav-label {
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.3px;
  color: #444;
  line-height: 1.3;
}

/* Homepage responsive */
@media (max-width: 991px) {
  .home-nav-card { width: calc(33.33% - 10px); }
}
@media (max-width: 767px) {
  .home-rule-card { min-width: 140px; padding: 18px 14px 14px; }
  .home-rule-pts { font-size: 38px; }
  .home-nav-card { width: calc(50% - 7px); }
}
@media (max-width: 400px) {
  .home-nav-card { width: calc(50% - 7px); }
}

/* =============================================
   STATISTICS PAGE
   ============================================= */

.stat-body {
  background: #f4f6f9;
  padding: 32px 0 52px;
}

/* KPI cards row */
.stat-kpi-row {
  display: flex;
  gap: 16px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.stat-kpi-card {
  flex: 1;
  min-width: 160px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  border: 1px solid #eaecef;
  padding: 22px 20px;
  text-align: center;
}
.stat-kpi-icon {
  font-size: 28px;
  margin-bottom: 8px;
  line-height: 1;
}
.stat-kpi-value {
  font-size: 36px;
  font-weight: 800;
  color: #1a237e;
  line-height: 1;
  margin-bottom: 6px;
}
.stat-kpi-label {
  font-size: 11px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
}

/* Generic white card */
.stat-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  border: 1px solid #eaecef;
  overflow: hidden;
}
.stat-card--profiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 20px;
  gap: 8px;
  min-height: 80px;
}

/* Section spacing */
.stat-section {
  margin-bottom: 32px;
}

/* Two-column layout */
.stat-two-col {
  display: flex;
  gap: 20px;
  margin-bottom: 0;
}
.stat-two-col .stat-section {
  flex: 1;
  min-width: 0;
}

/* Unit ranking rows */
.stat-unit-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid #f0f2f5;
}
.stat-unit-row:last-child { border-bottom: none; }
.stat-rank {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}
.stat-rank--gold    { background: #fff8e1; color: #f9a825; }
.stat-rank--silver  { background: #f5f5f5; color: #757575; }
.stat-rank--bronze  { background: #fbe9e7; color: #bf360c; }
.stat-rank--default { background: #f4f6f9; color: #aaa;    }
.stat-flag {
  width: 38px;
  height: 26px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
  flex-shrink: 0;
}
.stat-unit-name {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}
.stat-unit-badges {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.stat-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
}
.stat-badge--emp { background: #e3f2fd; color: #1565c0; }
.stat-badge--pts { background: #fff8e1; color: #f57f17; }

/* Favorite teams */
.stat-fav-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.stat-fav-card {
  flex: 1;
  min-width: 160px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  border: 1px solid #eaecef;
  border-top: 4px solid #e0e0e0;
  padding: 20px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.stat-fav-card--gold   { border-top-color: #f9a825; }
.stat-fav-card--silver { border-top-color: #9e9e9e; }
.stat-fav-card--bronze { border-top-color: #bf360c; }
.stat-fav-rank {
  font-size: 12px;
  font-weight: 700;
  color: #666;
  letter-spacing: 0.5px;
}
.stat-fav-flag {
  width: 120px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  /* box-shadow: 0 2px 10px rgba(0,0,0,0.15); */
}
.stat-fav-count {
  font-size: 13px;
  color: #555;
  font-weight: 600;
}

/* Statistics responsive */
@media (max-width: 767px) {
  .stat-two-col { flex-direction: column; }
  .stat-kpi-card { min-width: 120px; }
  .stat-unit-badges { flex-direction: column; gap: 4px; }
}

/* =============================================
   DRAW TERMS PAGE
   ============================================= */

.dt-body {
  background: #f4f6f9;
  padding: 32px 0 52px;
}

/* Featured image */
.dt-feature-img-wrap {
  margin-bottom: 28px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}
.dt-feature-img {
  width: 100%;
  display: block;
  max-height: 340px;
  object-fit: cover;
  object-position: center;
}

/* Section label */
.dt-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #888;
  margin-bottom: 14px;
}

/* Zero-point rule card */
.home-rule-card--zero {
  border-top-color: #bdbdbd;
}
.home-rule-pts--0 {
  color: #9e9e9e;
}

/* Terms card */
.dt-terms-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  padding: 28px 32px;
  border: 1px solid #eaecef;
}
.dt-terms-list {
  margin: 0;
  padding-left: 20px;
}
.dt-terms-list li {
  font-size: 14px;
  line-height: 1.8;
  color: #444;
  padding: 6px 0;
  border-bottom: 1px solid #f0f2f5;
}
.dt-terms-list li:last-child {
  border-bottom: none;
}

/* Inline point badges */
.dt-pts {
  display: inline-block;
  font-weight: 700;
  font-size: 13px;
  padding: 1px 8px;
  border-radius: 12px;
}
.dt-pts--6 { background: #e8f5e9; color: #2e7d32; }
.dt-pts--3 { background: #fff3e0; color: #e65100; }
.dt-pts--1 { background: #e3f2fd; color: #1565c0; }

@media (max-width: 767px) {
  .dt-terms-card { padding: 20px 18px; }
  .dt-feature-img { max-height: 200px; }
}

/* =============================================
   MATCH DETAILS POPUP (PredictShow)
   ============================================= */

/* Modal header tweak */
.modal-new-title {
  font-size: 16px;
  font-weight: 700;
  color: #333;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 0;
}

/* Banner */
.ps-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #0d1b2a 0%, #1b2d45 100%);
  border-radius: 12px;
  padding: 24px 20px 20px;
  margin-bottom: 18px;
  gap: 10px;
}
.ps-banner-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.ps-banner-flag {
  width: 90px;
  height: 62px;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.45);
}
.ps-banner-team-name {
  color: #e0e6ed;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.3px;
}
.ps-banner-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-width: 110px;
}
.ps-banner-date {
  font-size: 11px;
  color: #7a8fa6;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.ps-banner-score {
  font-size: 38px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 3px;
  line-height: 1;
}
.ps-banner-score--vs {
  font-size: 26px;
  color: #7a8fa6;
  letter-spacing: 4px;
}
.ps-score-x {
  color: #4fc3f7;
  font-weight: 400;
  font-size: 28px;
}
.ps-status-pill {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
}
.ps-status-pill--finished { background: rgba(76,175,80,0.18); color: #81c784; }
.ps-status-pill--upcoming { background: rgba(79,195,247,0.15); color: #4fc3f7; }
.ps-my-pred {
  font-size: 11px;
  color: #9ab;
  margin-top: 2px;
}
.ps-my-pred strong { color: #fff; }

/* Stats row */
.ps-stats-row {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
}
.ps-stat-card {
  flex: 1;
  background: #fff;
  border: 1px solid #e8ecf0;
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.ps-stat-label {
  font-size: 11px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
}
.ps-stat-value {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}
.ps-stat-unit {
  font-size: 13px;
  font-weight: 400;
  color: #888;
}
.ps-pts--perfect { color: #2e7d32; }
.ps-pts--partial { color: #e65100; }
.ps-pts--wrong   { color: #c62828; }
.ps-pts--none    { color: #aaa; font-weight: 400; font-size: 16px; }
.ps-pts--count   { color: #1a237e; }

/* Section */
.ps-section {
  background: #fff;
  border: 1px solid #e8ecf0;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.ps-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #f7f9fc;
  border-bottom: 1px solid #e8ecf0;
}
.ps-section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #555;
}
.ps-section-badge {
  background: #4fc3f7;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
}
.ps-empty {
  padding: 20px 16px;
  color: #999;
  font-size: 13px;
  margin: 0;
}

/* Users grid (exact score) */
.ps-users-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 16px;
}
.ps-user-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 72px;
}
.ps-user-avatar-wrap {
  position: relative;
  width: 56px;
  height: 56px;
}
.ps-user-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-size: cover;
  background-position: center top;
  border: 2px solid #e0e6ed;
}
.ps-user-team {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 20px;
  height: 14px;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.ps-user-team img { width: 100%; height: 100%; object-fit: cover; }
.ps-user-name {
  font-size: 10px;
  color: #555;
  text-align: center;
  line-height: 1.3;
  word-break: break-word;
  max-width: 72px;
}

/* Prediction breakdown bars */
.ps-pred-list {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ps-pred-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ps-pred-score {
  font-size: 13px;
  font-weight: 700;
  color: #333;
  min-width: 36px;
  text-align: center;
}
.ps-pred-bar-wrap {
  flex: 1;
  height: 8px;
  background: #f0f2f5;
  border-radius: 4px;
  overflow: hidden;
}
.ps-pred-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #4fc3f7, #1565c0);
  border-radius: 4px;
  min-width: 4px;
  transition: width 0.4s ease;
}
.ps-pred-count {
  font-size: 12px;
  color: #888;
  min-width: 20px;
  text-align: right;
}

/* Responsive */
@media (max-width: 480px) {
  .ps-banner { padding: 16px 10px; }
  .ps-banner-flag { width: 60px; height: 42px; }
  .ps-banner-score { font-size: 28px; }
  .ps-banner-team-name { font-size: 11px; }
  .ps-stats-row { flex-direction: column; }
}
}

/* ── Rank change badges (top10-2.php) ── */
.rank-change { display:inline-block; font-size:10px; font-weight:700; margin-left:4px; vertical-align:middle; }
.rank-up   { color:#2e7d32; }
.rank-down { color:#c62828; }
.rank-new  { color:#1565c0; background:#e3f2fd; border-radius:10px; padding:1px 6px; font-size:9px; letter-spacing:.3px; }

/* ── Points tier badges (my-predictions, head-to-head) ── */
.pts-badge { display:inline-block; padding:2px 9px; border-radius:12px; font-size:12px; font-weight:700; line-height:1.6; }
.pts-badge--6    { background:#e8f5e9; color:#2e7d32; }
.pts-badge--3    { background:#fff8e1; color:#e65100; }
.pts-badge--1    { background:#e3f2fd; color:#1565c0; }
.pts-badge--0    { background:#ffebee; color:#c62828; }
.pts-badge--none { background:#f5f5f5; color:#bbb; }

/* ── Prediction history table (my-predictions.php) ── */
.mypred-table { width:100%; border-collapse:collapse; font-size:13px; }
.mypred-table th { background:#f8f9fa; color:#555; font-weight:600; padding:9px 10px; border-bottom:2px solid #e9ecef; white-space:nowrap; }
.mypred-table td { padding:9px 10px; border-bottom:1px solid #f0f0f0; vertical-align:middle; }
.mypred-table tr:last-child td { border-bottom:none; }
.mypred-team-cell { display:flex; align-items:center; gap:6px; }
.mypred-team-cell img { width:36px; height:25px; object-fit:contain; border-radius:2px; }
.mypred-score-display { font-size:15px; font-weight:700; color:#1a1a2e; letter-spacing:1px; }
.mypred-score-none { color:#ccc; }
.pred-summary { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px; }
.pred-summary-card { background:#fff; border-radius:10px; box-shadow:0 2px 8px rgba(0,0,0,.08); padding:14px 20px; text-align:center; flex:1; min-width:90px; }
.pred-summary-card .val { font-size:24px; font-weight:700; }
.pred-summary-card .lbl { font-size:10px; color:#aaa; text-transform:uppercase; letter-spacing:.6px; margin-top:3px; }

/* ── Head-to-head (headtohead.php) ── */
.hth-header { display:flex; align-items:center; justify-content:center; gap:16px; background:#fff; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,.08); padding:20px 24px; margin-bottom:24px; flex-wrap:wrap; }
.hth-user { display:flex; flex-direction:column; align-items:center; gap:6px; min-width:110px; }
.hth-user .ProfilePic { width:64px; height:64px; background-size:cover; background-position:center top; border-radius:50%; border:3px solid #e0e6ed; margin:0 auto; }
.hth-user .hth-name { font-size:13px; font-weight:700; color:#1a1a2e; text-align:center; }
.hth-user .hth-pts { font-size:22px; font-weight:700; }
.hth-vs { font-size:20px; font-weight:700; color:#aaa; }
.hth-table { width:100%; border-collapse:collapse; font-size:13px; }
.hth-table th { background:#f8f9fa; color:#555; font-weight:600; padding:8px 10px; border-bottom:2px solid #e9ecef; text-align:center; }
.hth-table td { padding:8px 10px; border-bottom:1px solid #f0f0f0; vertical-align:middle; text-align:center; }
.hth-table tr:last-child td { border-bottom:none; }
.hth-table .match-col { text-align:left; }
.hth-table .hth-win-row td { background:#f1f8e9; }
.hth-table .hth-lose-row td { background:#fff8f8; }
.hth-lead-bar-wrap { height:6px; background:#f0f2f5; border-radius:3px; overflow:hidden; margin-top:4px; }
.hth-lead-bar { height:100%; border-radius:3px; }
@media (max-width:600px) {
  .pred-summary-card { min-width:70px; padding:10px 12px; }
  .hth-header { padding:14px 12px; gap:10px; }
  .mypred-table th, .mypred-table td { padding:7px 6px; font-size:12px; }
  .hth-table th, .hth-table td { padding:6px 4px; font-size:11px; }
}