@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i');
@font-face {
    font-family: 'UTM Sharnay';
    src: url('fonts/UTMSharnay.woff2') format('woff2'),
        url('fonts/UTMSharnay.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


h1, h2,h3,h4,h5,h6{
    font-family: 'UTM Sharnay';
    margin: 0;
}

body{
    margin: 0;
    padding: 0;
    background: #01300c url(../images/background.jpg) top center no-repeat;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
}
.msgPop {
    display: none;
    position: fixed;
    width: 100%;
    top: 10px;
    right:10px;
    left:10px;
    z-index: 99999;
}
.successMsg {

}
.ng-hide{
    display: none;
}
.container {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
}
.ThisIsParentp {
    position: relative;
    border: 1px solid red;
}
.logo-container{
    margin-bottom: 10px;
}
.logo-container img{
    margin: 0 auto;
}
.schedule-sec {
    z-index: 9;
    position: relative;
}
.schedule-container{
    margin: 0 0 70px;
    position: relative;
    z-index: 8;
}
.ghead-title,.content-title {
    background-color: #046025;
    padding: 10px;
}
.ghead-title h2, .content-title h2{
    color: #fee71b;
    vertical-align: middle;
    text-transform: uppercase;
    line-height: normal;
}
.imgLogo {
    position: absolute;
    left: calc(100% - 30%);
    top: -5px;
}

.main-nav{
    margin-left: -20px;
    margin-right: -20px;
        
}
.main-nav ul{
    text-align: center;
    margin: 0;
    padding: 0;
    background-color: #03481a;
}
.main-nav ul li{
    display: block;
    width: 20%;
    float: left;
    border-right:1px solid #0a3e1c;
}
.main-nav ul li:last-child {
    border-right: none;
}
.main-nav ul:before,.main-nav ul:after{
    display: table;
    content: "";
}
.main-nav ul:after{
    clear: both;
}
.main-nav ul li > a{
    padding: 20px 0px;
    text-decoration: none;
    color: #fff;
    font-weight: 700;
    font-family: 'Roboto', sans-serif;
    display: block;
    outline: none;
        
}
.main-nav ul li > a:hover{
    background-color: yellow;
    color: #002309;
}
.gcontent-body {
    padding: 0 20px;
    background-color: rgba(8,61,25,0.85);
    overflow: hidden;
}
.gcontent-body  .group-name{
    color: #fff;
    font-family: 'Keep Calm Med', sans-serif;
    font-size: 24px;
    text-align: center;
    margin-top:20px;
    margin-bottom: 5px;
}


.no-padd{
    padding: 0;
}
.video-container{
    padding: 20px 15px;
    overflow:hidden;
}
.video-container iframe {
    width: 100%;
    min-height: 500px;
}


#liveVideo {
    min-height: 553px;
}
.btnVideos {
    padding: 5px 0;
}
.btnVideos .btnliveVideo {
    color:#000;
    height: 36px;
    line-height: 36px;
    width: 100px;
    border:none;
    background: #fee71b;
    margin-right: 5px;
}
.groupChat {
    position: absolute;
    right: -260px;
    top: 0;
    width: 250px;
}
.bannerGIF {
    padding: 0 0 10px; 0;
    text-align: center;
}
.bannerGIF img {
    cursor: pointer;
}

/*
    CHATWEE
*/
.chatwee-widget {
    width: 100% !important;
}
.groupChat #chch-splitterMainChat, #chch-embeddedSplitter, #chch-splitterControlBar, #chch-splitterTop {
    width: 100% !important;
}
#chch-chatweeWrapper textarea {
    color: #fff !important;
}

/*.chch-primaryColor, .chch-borderColor {
    background: #046025;
}*/
/*.groupChat {
    padding: 20px 15px;
    min-height: 600px;
}*/
.duduanBtn{
    margin-top: 50px;7
}
.btnGoWhere {
    width: 230px;
    height: 49px;
    line-height: 49px;
    margin: 0 20px;
    color: #000000;
    background: #fee71b;
    border:none;
    border-radius: 5px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.btnGoWhere:focus,.btnGoWhere:hover {
    background: #f6cd01;
}


.anchor {
    text-decoration: none;
    color: #fee71b;
}
.anchor:hover, .anchor:focus {
    color: #fee71b;
}



.content-body{
      padding: 20px 15px;
}
p{
    color: #fff;
    font-size: 20px;
    font-weight: 300;
}

.list{
    margin-left: 30px;
}
.content-body ul li{
    color: #fff;
    margin-bottom: 10px;
    font-size: 20px;
     font-weight: 300;
}
.title-text{
    color: #f9cf1b;
    font-weight: 500;
    margin-bottom: 10px;
    font-size: 26px;
    font-weight: 400;
}
.subtitle-text{
    color: #f9cf1b;
    font-size: 24px;
    font-weight: 400;
}
.vi-vn .gcontent-body  .group-name{
    font-family: 'RobotoBold', sans-serif !important;
}
.gcontent-body .group-name {
    color: #fff;
    font-family: 'Keep Calm Med', sans-serif;
    font-size: 24px;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 5px;
}
html:lang(zh-CN) .gcontent-body .group-name {
    font-family: "Microsoft Yahei","微软雅黑", STXihei, "华文细黑", sans-serif;
}

.matches {
    padding: 0 1px;
    background-image: none;
    background: rgba(0, 53, 21, 0.87);
}


.match-row {
    display: block;
    width: 100%;
    position: relative;
   padding: 0 15px;
    
}

/*    .match-row > .row {
        margin: 0;
    }*/

        .match-row > .row > div {
            border-bottom: 1px solid #015f25;
            border-top: 1px solid #002309;
            border-right: solid 1px #00340d;
        }

            .match-row > .row > div:last-child {
                border-right: none;
            }

.team-match {
    padding: 10px 0;
    display: block;
    width: 100%;
    height: auto;
    min-height: 108px;
}

.match-title {
    text-align: center;
    font-family: sans-serif;
    font-size: 20px;
    display: block;
    color: #fee71b;
    font-weight: 500;

}

.final .match-title, .semi-lose .match-title {
   
}

.match-details {
    padding: 10px 0;
    position: relative;
    display: block;
}

    .match-details:after, .match-details:before {
        display: table;
        content: '';
    }

    .match-details:after {
        clear: both;
    }

    .match-details .match-sched, .match-details .country {
        display: block;
        float: left;
        color: #fff;
        font-family: 'Roboto', sans-serif;
        text-transform: uppercase;
        font-weight: 300;
    }

.match-sched {
    text-align: center;
    padding: 0;
}

    .match-sched > span {
        display: block;
    }

    .match-sched > .match-score {
        color: #fee71b;
        font-weight: 600;
    }

.team-match .match-details > .row {
    margin-left: -10px;
    margin-right: -10px;
}

.match-details > .country > .team {
    display: inline-block;
    height: 45px;
    margin: 0 15px 0 0;
    text-align: left;
}



.team .team-score {
    font-size: 20px;
    font-weight: 600;
    display: block;
    text-align: center;
    color: #fee71b;
}
.team span.flag-box {
    height: auto;
    display: block;
    vertical-align: middle;
}

    .team span.flag-box > img {
        max-width: 50px;
        box-shadow: 3px 3px 0 0px #033047;
        -webkit-box-shadow: 3px 3px 0 0px #033047;
        -ms-box-shadow: 3px 3px 0 0px #033047;
        vertical-align: middle;
        margin-bottom: 4px;
    }

.team span.vs-text {
    line-height: 27px;
}

.team span.vs-icon {
    height: 35px;
    width: 31px;
    margin-right: 15px;
    display: inline-block;
}

.team > span.vs-icon > img {
    max-width: 100%;
    vertical-align: middle;
}

.team > span.name {
    width: 110px;
    text-align: left;
    display: inline-block;
}

.team span.win-title {
    text-align: left;
    vertical-align: middle;
    display: inline-block;
    line-height: 30px;
    height: 35px;
}

.team > .row > div {

}

.team span {
    vertical-align: middle;
}
.match-sched {
    color: #fff;
}
.match-sched span {
    display: inline-block;
    color: #fff;
    margin: 0 5px;
}
.match-row.seperate {
    height: 80px
}

.rounds .match-sched {
    margin: 0;
}

.rounds .match-time {
    padding: 8px 0px;
}

.rounds .match-row:nth-child(even), .quarter .match-row:nth-child(even) {
    background-color: #025321
}

.matches .col-lg-6.col-md-6.col-sm-6.col-xs-12:nth-child(odd):not(:nth-child(4n+1)), .matches .col-lg-6.col-md-6.col-sm-6.col-xs-12:nth-child(even):not(:nth-child(4n-2)) {
    background-color: transparent;
}

.matches .col-lg-6.col-md-6.col-sm-6.col-xs-12:nth-child(even), .matches .col-lg-6.col-md-6.col-sm-6.col-xs-12:nth-child(odd) {
    background-color: #025321;
    
}
.matches .col-lg-6.col-md-6.col-sm-6.col-xs-12:nth-child(even){
    border-right: none;
}
.rounds .team > .row, .quarter .team > .row, .semis .team > .row {
    margin: 0;
}

.quarter .team > span.win-title {
    font-weight: 600;
    font-size: 24px;
    text-align: left;
    vertical-align: middle;
    display: inline-block;
    line-height: 30px;
    height: 35px;
}



.finals > .content-title{
    background-color: #2d2802;
}

.finals > .match-row  {
    background-color: #f9cf1b;
}

.finals .match-row, .round .match-row:nth-child(odd) {
    background-color: none !important;
}

.finals .match-details {
    text-align: center;
}

    .finals .match-details > .match-sched, .finals .match-details > .country {
        float: none;
        display: inline-block;
    }

.finals .win-title {
    font-size: 28px !important;
}

.finals .match-sched {
    font-size: 22px;
}

html:lang(zh-CN) .finals .match-sched {
    font-size: 16px;
}


.finals .match-details .match-sched, .finals .match-details .country, .finals .match-title {
    color: #000000 !important;
}

.semi-lose, .final {
    width: 75%;
    margin: 0 auto;
   
    position: relative;
}

    .finals .team > .row > div, .semi-lose .team > .row > div {
        text-align: center;
    }
.final .match-sched span{
    color: #000;
    font-size: 15px;
}

.text-yellow {
    color: #f9cf1b;
}

.world-sched{
    height: calc(100vh - 300px);
    overflow: hidden;
}


.spinner {
  margin: 100px auto;
  width: 50px;
  height: 40px;
  text-align: center;
  font-size: 10px;
}

.spinner > div {
  background-color: #fff;
  height: 100%;
  width: 6px;
  display: inline-block;
  
  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}
.navmob {
    color: #fff;
    font-size: 60px;
    line-height: 60px;
    cursor: pointer;
     display: none;
}

.disable {
    /*pointer-events: none;*/
    /*color: red;*/
}

.ng-hide{
    display: none;
}

/*Custom Modal*/

.modal-content{
    background-color: #025321;
        border-radius: 3px;
}
.modal-body  ul li{
    color: #fff;
    margin-bottom: 10px;
    font-size: 16px;
     font-weight: 300;
}
.modal-body p{
    font-size: 16px;
}
.modal-header{
    border-bottom: none;
    background-color: #00340d;
    color: #f9cf1b;
}
.modal-dialog{
    margin-top: 10%;
}
.close:hover{
    color: #f6cd01;
}
/*
  RESPONSIVE
*/

@media(max-width: 1199px) {
    .match-sched {
        margin-right: 0;
    }

        .match-sched span {
            display: inline-block;
            margin: 0 5px;
        }

    .match-details > .match-sched {
        float: none;
        display: block;
        margin-bottom: 10px;
    }

    .match-title {
        font-weight: bold;
    }
    /*.match-details .country {
    width: 100%;
    border-top: 1px solid red;
    border-bottom:1px solid red;
  }*/
    /*.schedule-container.rounds .match-details .country .team {
    width: 100%;
    background: red;
    margin:0;
  }
  .schedule-container.rounds .match-details .country .team span {
    border:1px solid yellow;
    width: 20%;
    display: inline-block;
    margin:0;
    text-align: center;
  }*/
}

.borderred {
    border: 1px solid red;
}

.rounds .match-sched > span, .semis .match-sched > span, .quarter .match-sched > span, .semi-lose .match-sched > span {
    padding: 8px 0;
}




/*
    MODAL LOGIN
*/
.loginFormTbl {
    width: 100%;
    border-collapse: collapse;
}
.loginFormTbl tr td {
    padding: 10px;
}
.loginFormTbl tr td input[type=text],.loginFormTbl tr td input[type=password] {
    border:1px solid #ccc;
    background-color: #eee;
    padding:10px;
    width:100%;
}
.loginFormTbl a {
    cursor: pointer;
    color: #fee71b;
    text-decoration: none;
}
.loginBtn {
    color: #000;
    height: 36px;
    line-height: 36px;
    width: 160px;
    border: none;
    background-color: #fee71b;
}



html:lang(vi-vn) .finals .win-title {
    font-size: 26px !important;
}

@media screen and (max-width:1024px) {
    html:lang(vi-vn) .semis .team span.win-title, html:lang(vi-vn) .quarter .team span.win-title {
        font-size: 1.4vw;
    }

    .team span.vs-icon {
        height: 35px;
        width: 31px;
        margin-right: 3px;
        display: inline-block;
    }

    .team > .row > div.col-sm-2 {
        text-align: center;
    }
    .groupChat {
        position: static;
        width: 100%;
        padding:10px;
    }
    #chch-embeddedSplitter {
        position: static !important;
    }

    /*.right-panel {
        border:2px solid red;
    }*/
    .row {
        margin:0;
    }
    .match-row {
        margin:0;
    }
    .bannerGIF {
        width: 100%;
    }
    .bannerGIF img {
        width: 100%;
        height: auto;
    }
    .video-container {
        padding: 20px 0;
    }
    #liveVideo {
        min-height: auto;
    }
}

@media(max-width: 991px) {
    .vi-vn .team span.flag-box, .team span.flag-box {
        font-size: 12px;
    }

    .gcontent-body {
        text-align: center;
    }

    .match-details > .country > .team {
        margin-bottom: 15px;
        width: 100%;
    }

    .team > .row > div {
        padding: 10px 0;
    }

    .match-title {
        margin: 0;
    }
    .imgLogo {
        position: absolute;
        left: calc(100% - 20%);
        top: -5px;
    }
    .wclogotoHide {
        display: none;
    }
    
}

@media(max-width: 768px) {
    .match-row{
        padding: 0;
    }
    .match-title, .final .match-title, .semi-lose .match-title {
        margin: 0;
    }

    .welcome-text {
        margin-top: 20px;
    }

    .team-match {
        min-height: auto;
    }

    .team > .row > div {
        padding: 10px 0;
    }

    .welcome-text > img {
        max-width: 50%;
    }

    .team span.flag-box {
        font-size: 11px;
    }

    .ghead-title h2 {
        text-align: left;
        font-size: 4vw;
        margin: 10px 0;
    }

    .ghead-title .text-right {
        text-align: center !important;
    }

    .ghead-title img {
        height: 50px;
    }
    .imgLogo {
        width: 100%;
        position: static;
        left: inherit;
        top: inherit;
        text-align: center;
    }

    html:lang(vi-vn) .semis .team span.win-title, html:lang(vi-vn) .quarter .team span.win-title {
        font-size: 1.7vw;
    }

    html:lang(vi-vn) .rounds .team span.win-title {
        font-size: 2.7vw;
    }

    html:lang(vi-vn) .semis .semi-lose .win-title {
        font-size: 20px !important;
    }

    html:lang(vi-vn) .finals .win-title {
        font-size: 24px !important;
    }

    .semi-lose, .final {
        width: 100%;
        margin: 0 auto;
        left: 0px;
        position: relative;
    }
    






   /* .main-nav {
        overflow:auto;
    }
    .main-nav ul {
        min-width: 1000px;
    }
    .main-nav ul li a{
       font-size: 14px;
    }*/

    .navmob {
        display: block;
    }
    .holdernav, .navmob {
        /*float: left;*/
    }
    .holdernav{
    }
    .navmob{
        margin:0 5px;
    }
    .holdernav {
        /*width: calc(100vw - 60px);
        overflow-y:auto;*/
        /*border: 1px solid red;*/
    }
    .main-nav {
        background: #03481a;
        /*overflow-y:auto;*/
    }
    .main-nav ul {
        width: 100%;
    }
    .main-nav ul li {
        border-bottom: 1px solid #195431;
    }
    .holdernav ul{
       /* min-width: 1000px;*/
    }

    .list{
        margin-left: 0px;
    }


}

@media (max-width: 767px) {
    .matches .col-lg-6.col-md-6.col-sm-6.col-xs-12:nth-child(odd):not(:nth-child(4n+1)), .matches .col-lg-6.col-md-6.col-sm-6.col-xs-12:nth-child(even):not(:nth-child(4n-2)) {
        background-color: transparent;
    }

    .matches .col-lg-6.col-md-6.col-sm-6.col-xs-12:nth-child(even), .matches .col-lg-6.col-md-6.col-sm-6.col-xs-12:nth-child(odd) {
        background-color: transparent;
    }

    .matches .col-lg-6.col-md-6.col-sm-6.col-xs-12:nth-child(even) {
        background-color: #025321 !important;
    }

    .matches .col-lg-6.col-md-6.col-sm-6.col-xs-12:nth-child(odd) {
        background-color: transparent !important;
    }

    .rounds .team .col-sm-5, .quarter .team .col-sm-5, .semis .team .col-sm-5, .team .col-sm-6 {
        width: 41.66666667%;
    }

    .rounds .team .col-sm-2, .quarter .team .col-sm-2, .semis .team .col-sm-2 {
        width: 16.66666667%;
        text-align: center !important;
    }

    .ghead-title {
        padding: 0px 0px 10px;
    }

        .ghead-title h2 {
            font-size: 5vw;
            text-align: center;
        }


}


@media(max-width: 640px) {
    .main-nav ul li a {
        font-size: 10px;
    }
    .main-nav ul li{
        width: 33.3%;
    }
    .main-nav ul li:nth-last-child(2), .main-nav ul li:last-child{
        width: 50%;
    }
}

@media(max-width: 500px) {
    .match-details .team .row {
        margin: 0 0;
    }

    .match-row.seperate {
        display: none;
    }

    .rounds .team .col-sm-5, .quarter .team .col-sm-5, .semis .team .col-sm-5, .team .col-sm-6 {
        width: 100%;
    }

    .rounds .team .col-sm-2, .quarter .team .col-sm-2, .semis .team .col-sm-2 {
        width: 100%;
        text-align: center !important;
    }

    .semi-lose, .final {
        width: 100%;
        margin: 0 auto;
    }

    .ghead-title h2 {
        font-size: 7vw;
        text-align: center;
    }

    html:lang(vi-vn) .semis .team span.win-title, html:lang(vi-vn) .quarter .team span.win-title, html:lang(vi-vn) .rounds .team span.win-title {
        font-size: 5vw;
    }

    html:lang(vi-vn) .team span.vs-icon {
        height: 35px;
        width: 31px;
        margin-right: 5px;
        display: inline-block;
    }
    .team > .row > div {
       
    }

}

@media(max-width: 577px) {
    .container.nopadd {
        padding: 0 10px;
    }
}

@media(max-width: 480px) {

    .ghead-title h2 {
        font-size: 7.2vw;
        text-align: center;
    }

    .welcome-text {
        margin-top: 20px;
    }

        .welcome-text > h3 {
            text-align: center;
            text-transform: uppercase;
            font-size: 5vw;
        }
}






@media(max-height: 600px) {
    .world-sched {
        height: calc(100vh - 200px);
    }
}

@media(max-width: 320px) {
    .groupChat {
        padding:10px 0 ;
        margin-left: -5px;
    }
    .main-nav ul li a {
        font-size: 9px;
    }
}