@import "../reset.css";

/*@font-face {*/
    /*font-family: 'Exo2';*/
    /*font-style: normal;*/
    /*font-weight: normal;*/
    /*src: local('Exo2'), url(/static/fonts/exo2/Exo2-Regular.ttf) format('truetype');*/
/*}*/

/*@font-face {*/
    /*font-family: 'Exo2';*/
    /*font-style: normal;*/
    /*font-weight: bold;*/
    /*src: local('Exo2'), url(/static/fonts/exo2/Exo2-Bold.ttf) format('truetype');*/
/*}*/

@font-face {
    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: normal;
    src: local('Rajdhani'), url(/static/fonts/rajdhani/Rajdhani-Regular.ttf) format('truetype');
}

@font-face {
    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: bold;
    src: local('Rajdhani'), url(/static/fonts/rajdhani/Rajdhani-Bold.ttf) format('truetype');
}

@font-face {
    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: 500;
    src: local('Rajdhani'), url(/static/fonts/rajdhani/Rajdhani-Medium.ttf) format('truetype');
}

@font-face {
    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: 600;
    src: local('Rajdhani'), url(/static/fonts/rajdhani/Rajdhani-SemiBold.ttf) format('truetype');
}

html, body {
    font-family: 'Rajdhani', Arial, Helvetica, sans-serif;
    color: #fff;
    height: 100vh;
    overflow: hidden;
    background: #04314c;
    font-size: 1vh;
}

.logo {
    background-color: #04314c;
    -webkit-transform: skewX(-18deg);
    display: inline-flex;
    align-items: center;
    padding: 0 20px;
}

.logo.premier {
    background-color: #fff;
}

.logo .logo-image {
    -webkit-transform: skewX(18deg);
}

#initializeLoader img {
    position: absolute;
    top: 50%;
}

.footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 2.5vh;
    font-size: 2em;
    font-weight: bold;
    padding: 0 10px;
}

.empty-message {
    display: flex;
    width: 100vw;
    height: 100vh;
    align-items: center;
    justify-content: center;
    font-size: 5vh;
}

.live-events-per-page {
    height: 97.5vh;
}

.event,
.sport-header {
    height: 6.5vh; /* 72px - 15 rows on screen */
}

.sport-header {
    display: flex;
}

.sport-header .betting-info {
    display: flex;
}

.sport-icon.sport-1 {
    background-image: url('/static/images/live-board/football-icon.svg');
}

.sport-icon.sport-2 {
    background-image: url('/static/images/live-board/basketball-icon.svg');
}

.sport-icon.sport-3 {
    background-image: url('/static/images/live-board/handball-icon.svg');
}

.sport-icon.sport-4 {
    background-image: url('/static/images/live-board/hockey-icon.svg');
}

.sport-icon.sport-5 {
    background-image: url('/static/images/live-board/voleyball-icon.svg');
}

.sport-icon.sport-6 {
    background-image: url('/static/images/live-board/tennis-icon.svg');
}

.sport-icon.sport-19 {
    background-image: url('/static/images/live-board/table-tennis-icon.svg');
}

.sport-header .sport-icon {
    -webkit-transform: skewX(18deg);
    background-size: contain;
    background-repeat: no-repeat;
}

.sport-header .sport-name {
    -webkit-transform: skewX(18deg);
    display: flex;
    align-items: center;
    font-size: 4.2em;
    font-weight: bold;
    margin-left: 15px;
}

.sport-header .sport {
    display: flex;
    align-items: center;
    position: relative;
    -webkit-transform: skewX(-18deg);
    padding: 0 20px 0 5px;
}

.sport-header .left-part-fix {
    -webkit-transform: skewX(18deg);
    width: 60px;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;;
}

.sport-header .header-group,
.event .odds-group {
    display: flex;
    justify-content: space-between;
    flex: 0 0 15.625vw;
}

.sport-header .header-group {
    font-weight: bold;
    font-size: 2.4em;
    flex-direction: column;
}

.sport-header .header-group div {
    display: flex;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 3.25vh;
    line-height: 3.25vh;
}

.sport-header .header-group .group-title-wrap {
    margin: 0 auto;
    width: 90%;
    box-sizing: border-box;
}

.sport-header .header-group .group-title {
    display: block;
    line-height: 4vh;
    text-align: center;
}

.sport-header .group-tips-info {
    display: flex;
    justify-content: space-between;
}

.group-tips-info .group-tip-info {
    text-align: center;
    width: 100%;
}

.sport-1 {
    background: #41811e; /* Old browsers */
    background: -moz-linear-gradient(top,  #41811e 0%, #61a72a 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #41811e 0%,#61a72a 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #41811e 0%,#61a72a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#41811e', endColorstr='#61a72a',GradientType=0 ); /* IE6-9 */
}

.sport-2 {
    background: #c87d01; /* Old browsers */
    background: -moz-linear-gradient(top,  #c87d01 0%, #ef9c1e 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #c87d01 0%,#ef9c1e 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #c87d01 0%,#ef9c1e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c87d01', endColorstr='#ef9c1e',GradientType=0 ); /* IE6-9 */
}

.sport-3 {
    background: #89181b; /* Old browsers */
    background: -moz-linear-gradient(top,  #89181b 0%, #cc0000 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #89181b 0%,#cc0000 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #89181b 0%,#cc0000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#89181b', endColorstr='#cc0000',GradientType=0 ); /* IE6-9 */
}

.sport-4 {
    background: #184c94; /* Old browsers */
    background: -moz-linear-gradient(top,  #184c94 0%, #0d61d4 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #184c94 0%,#0d61d4 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #184c94 0%,#0d61d4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#184c94', endColorstr='#0d61d4',GradientType=0 ); /* IE6-9 */
}

.sport-5 {
    background: #cc9933; /* Old browsers */
    background: -moz-linear-gradient(top,  #cc9933 0%, #ffcc00 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #cc9933 0%,#ffcc00 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #cc9933 0%,#ffcc00 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc9933', endColorstr='#ffcc00',GradientType=0 ); /* IE6-9 */
}

.sport-6 {
    background: #1285a2; /* Old browsers */
    background: -moz-linear-gradient(top,  #1285a2 0%, #01b1dd 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #1285a2 0%,#01b1dd 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #1285a2 0%,#01b1dd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1285a2', endColorstr='#01b1dd',GradientType=0 ); /* IE6-9 */
}

.sport-19 {
    background: #1285a2; /* Old browsers */
    background: -moz-linear-gradient(top,  #1285a2 0%, #01b1dd 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #1285a2 0%,#01b1dd 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #1285a2 0%,#01b1dd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1285a2', endColorstr='#01b1dd',GradientType=0 ); /* IE6-9 */
}

.event .event-info-data,
.header-info-data {
    display: flex;
    flex-shrink: 0;
    width: 37.5vw;
}

.event .event-betting-items,
.betting-info-header {
    display: flex;
    width: 62.5vw;
    flex-direction: column;
    flex-shrink: 0;
}

.betting-info-header {
    flex-direction: row;
}

.event-betting-items .f-row,
.event-betting-items .s-row {
    display: flex;
    flex-grow: 1;
    width: 100%;
}

.odds-group .odd {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    font-size: 2.8em;
    font-weight: 500;
}

.odds-group .odd.limit {
    color: #ffd400;
    background-color: rgba(0,0,0,0.5);
    font-weight: 600;
}

.odds-group .odd .odd-box {
    padding: 1px 0;
}

.odds-group .odd.quota-down {
    background: url('/static/images/live-board/quota-down.png') no-repeat 5px center;
}

.odds-group .odd.quota-up {
    background: url('/static/images/live-board/quota-up.png') no-repeat 5px center;
}


@media screen and ( max-width: 1600px ) {

    .odds-group .odd.quota-down {
        background: url('/static/images/live-board/quota-down.png') no-repeat 1px center;
        background-size: 11px;
    }
    
    .odds-group .odd.quota-up {
        background: url('/static/images/live-board/quota-up.png') no-repeat 1px center;
        background-size: 11px;
    }
    
} 
    



.eventsWrap .event {
    display: flex;
    overflow: hidden;
    /*box-shadow: 0 -1px 0 0 #FFF inset;*/
}


.f-row .odds-group:nth-child(odd),
.s-row .odds-group:nth-child(odd),
.betting-info .header-group:nth-child(odd),
.event .code-and-time {
    background: rgba(34, 29, 29, 0.3);
}

.event .event-info-data {
    justify-content: space-between;
    font-weight: 600;
    position: relative;
}

.event-info-data .fh-info {
    color: #fff;
    position: absolute;
    bottom: 0.7vh;
    right: 1vh;
    font-size: 2.4vh;
    font-weight: bold;
}

.event .participants {
    display: flex;
    justify-content: space-between;
    flex-grow: 1;
}

/* Events info in two row - start */
.event-info-data.two-row .participants {
    flex-direction: column;
    justify-content: space-around;
}

.event-info-data.two-row .participants .participant {
    text-align: right !important;
    justify-content: flex-end;
}

.event-info-data.two-row .result-wrap {
    display: flex;
    flex-basis: 160px;
}

.event.sport-6 .two-row .result-wrap,
.event.sport-19 .two-row .result-wrap {
    flex-basis: 120px;
}

.sport-2 .event-info-data.two-row .result-wrap {
    flex-basis: 80px;
}

.event-info-data.two-row .result {
    flex-direction: column;
    flex-basis: 40px;
    font-size: 2.8em;
    justify-content: space-between;
    padding: 2px 0;
    border: none;
    margin: 5px 5px 5px 10px;
}

.event-info-data.two-row .result.in-set {
    flex-basis: 45px;
    margin-right: 0;
}
/* Events info in two row - start */


.participants .participant {
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    font-weight: bold;
    font-size: 2.8vh;
    letter-spacing: 1px;
    width: 100%;
}

.event .red-card {
    width: 20px;
    height: 28px;
    border-radius: 2px;
    background: red;
    margin: -30px 5px 0 5px;
    flex-shrink: 0;
}

.event .serve {
    /*background: url('/static/images/live-board/tennis_serve.svg') no-repeat;*/
    width: 25px;
    height: 25px;
    margin: 0 5px;
    background-size: contain;
}

.event.sport-5 .serve {
    background: url('/static/images/live-board/serve_voleyball.svg') no-repeat;
}

.event.sport-6 .serve {
    background: url('/static/images/live-board/serve_tennis.svg') no-repeat;
}

.event.sport-19 .serve {
    background: url('/static/images/live-board/serve_table_tennis.svg') no-repeat;
}

.participants .participant-name {
    display: inline;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 2.4vh;
}


.participants .participant-name.football {
    white-space: normal;
}

.participants .participant1 .participant-name {
    text-align: right;
}

.participants .participant2 .participant-name {
    text-align: left;
}

.event .code-and-time {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 0 5px;
    width: 80px;
    flex-shrink: 0;
    text-align: center;
    align-items: center;
    font-size: 2.4em;
}

.event .event-time {
    font-size: 1.2em;
}



.sport-2 .code-and-time .event-time,
.sport-4 .code-and-time .event-time {
    font-size: 1em;
}

.sport-2 .code-and-time .event-time .live_minute:before,
.sport-4 .code-and-time .event-time .live_minute:before {
    content: '/';
}

.event div {
    display: flex;
    overflow: hidden;
}

.event-info-data .result {
    flex-basis: 100px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    font-size: 3.8em;
    border: 2px solid #000;
    background: #fff;
    border-radius: 5px;
    color: #000;
    margin: 10px;
    font-weight: bold;
}


.sport-1 .event-info-data .participants .result {
    flex-basis: 80px;
}


.sport-6 .event-info-data .participant-name{
   max-width: 300px;
   text-align: right;
}


.sport-6 .event-info-data .participant-name .participant1,
.sport-6 .event-info-data .participant-name .participant2 {
    text-align: right;
}

@media screen and (max-width: 1400px) {
    .event-info-data .result.firstHalf {
        display: none;
    }

    .participant-name {
        max-width: 200px;
    }


    .sport-1 .event-info-data .participants .result {
        flex-basis: 50px;
    }

    .sport-6 .event-info-data .participants .participant-name{
        width: 200px;
    }
}

.event-info-data .result.firstHalf {
    flex-basis: 60px;
    font-size: 3em;
}
.context-menu-list {
    color: #000;
}

.context-menu-item {
    padding: 6px 15px 6px 24px !important;
    font-size: 14px;
}

.context-menu-submenu:after {
    top: 6px !important;
}

/*Page loader*/
.page-details {
    display: flex;
    align-items: center;
}

#page-info {
    width: 50px;
}

.loader-wrapper {
    width: 250px;
    height: 10px;
    margin-left: 15px;
    background: #000;
    position: relative;
}

.animate .page-loader {
    width: 100%;
    height: 6px;
    margin: 2px 0;
    background: #2187e7;
    position: absolute;
    box-shadow: 0 0 10px 1px rgba(0,198,255,0.7);
}

@-moz-keyframes fullexpand {
    0%  { width:0;}
    100%{ width:100%;}
}
@-webkit-keyframes fullexpand {
    0%  { width:0;}
    100%{ width:100%;}
}