html, body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    padding: 0;
    margin: 0;
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    background-color: rgb(245,245,245);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

hr {
    width: 100%;
    height: 1px;
    margin: 0;
    border: 0;
    border-top: 1px solid rgb(220,220,220);
}

/* Display Flex */
.d-flex {
    display: flex;
}

.d-inline-flex {
    display: inline-flex;
}

/* Flex Direction */
.flex-row {
    flex-direction: row;
}

.flex-column {
    flex-direction: column;
}

.flex-row-reverse {
    flex-direction: row-reverse;
}

.flex-column-reverse {
    flex-direction: column-reverse;
}

/* Justify Content */
.justify-content-start {
    justify-content: flex-start;
}

.justify-content-end {
    justify-content: flex-end;
}

.justify-content-center {
    justify-content: center;
}

.justify-content-between {
    justify-content: space-between;
}

.justify-content-around {
    justify-content: space-around;
}

.justify-content-evenly {
    justify-content: space-evenly;
}

/* Align Items */
.align-items-start {
    align-items: flex-start;
}

.align-items-end {
    align-items: flex-end;
}

.align-items-center {
    align-items: center;
}

.align-items-baseline {
    align-items: baseline;
}

.align-items-stretch {
    align-items: stretch;
}

/* Flex Wrap */
.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

.flex-wrap-reverse {
    flex-wrap: wrap-reverse;
}

/* Flex Grow */
.flex-grow-0 {
    flex-grow: 0;
}

.flex-grow-1 {
    flex-grow: 1;
}

/* Flex Shrink */
.flex-shrink-0 {
    flex-shrink: 0;
}

.flex-shrink-1 {
    flex-shrink: 1;
}

/* Gap */
.gap-1 {
    gap: 0.25rem;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-3 {
    gap: 1rem;
}

.gap-4 {
    gap: 1.5rem;
}

.gap-5 {
    gap: 3rem;
}

::-webkit-scrollbar
{
    width: 0;
}

i.fa {
    font-size: 16px;
}

#loginContainer {
    width:100vw;
    height:100vh;
    background-color: rgb(42,53,72);
}

#pageContainer {

}

#loginPostForm {
    padding:0 18px;
}

#pageContainerContent {
    padding-bottom: 51px; /** footer fix */
}

.loginFormTable {
    width: 100%;
    color: rgb(250,250,250);
    border-collapse: collapse;
}

.loginFormTable td:first-child {
    width: 1%;
    padding-right: 18px;
}

.loginFormTable td {
    border-bottom: 1px solid rgb(63,81,103);
    box-shadow: 0 1px 0 rgb(59,77,99);
    padding: 14px 0;
    vertical-align: middle;
}

.loginFormTable tr:last-child td {
    box-shadow: 0 0 0;
}

.loginFormTable td i.fa {
    font-size: 22px;
    color: rgb(144,156,172);
}

.loginButton {
    width: 100%;
    margin-top: 28px;
    border: 0;
    border-radius: 3px;
    background-color: rgb(57,218,247);
    text-align: center;
    line-height: 38px;
    font-size: 19px;
    color: white;
    font-family: inherit;
    letter-spacing: 1px;
}

.loginButton.disabled {
    background-color: rgb(150,150,150);
    color: rgb(220,220,220);
}

.loginButtonLoader {
    float: left;
    line-height: 38px;
    display: none;
}

.loginButton.disabled .loginButtonLoader {
    display: block;
}

.loginFormTable input[type="email"],.loginFormTable input[type="password"] {
    margin: 0;
    min-height: 0;
    background-color: rgb(42,53,72);
    border: 0;
    border-radius: 0;
    color: rgb(200,200,200);
    padding: 0;
    line-height: 30px;
    width: 100%;
    outline: 0;
    font-family: inherit;
    font-size: 20px;
    font-weight: 300;
}

::-webkit-input-placeholder {
    color: rgb(190,190,190);
}

:-moz-placeholder {
    color: rgb(190,190,190);
    opacity: 1;
}

::-moz-placeholder {
    color: rgb(190,190,190);
    opacity: 1;
}

:-ms-input-placeholder {
    color: rgb(190,190,190);
}

::-ms-input-placeholder {
    color: rgb(190,190,190);
}


#pageFooter {
    position:fixed;
    z-index: 99999;
    bottom:0;
    left:0;
    right:0;
    background-color:white;
    border-top:1px solid rgb(220,220,220);
    padding:5px 0 4px 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

#pageHeader {
    position:fixed;
    z-index: 999;
    top:0;
    left:0;
    right:0;
    background-color: rgb(54,64,78);
    height:44px;
    color:white;
    box-shadow: 0 -6px 10px 5px rgba(0,0,0,0.5);
}
#pageHeader table {
    width:100%;border-collapse:collapse;height:44px;
}

.scrollToUp {
    display: none;
    position:fixed;
    z-index:99999;
    top:54px;
    right:13px;
    background-color: rgb(97,177,236);
    border-radius:40px;
    width:40px;
    height:40px;
    line-height:40px;
    text-align:center;
    color:white;
}

.icon {
    background-size: cover;
    width: 26px;
    height: 26px;
    opacity: 0.6;
    margin:0 auto;
}

.icon-table {
    width:100%;
    border-collapse: collapse;
}
.icon-table tr td {
    vertical-align: top;
    text-align:center;
}

.icon-text {
    color: rgb(80,84,88);
    margin-top: 1px;
    font-size:11px;
    font-weight: 300;
}
.icon-text.active {
    color: rgb(24,138,226);
    font-weight: 500;
}

.icon.pitch {
    background-image: url('/assets/dist/controllers/app/img/icons/pitch.png');
}
.icon.pitch.active {
    background-image: url('/assets/dist/controllers/app/img/icons/pitch_active.png');
    opacity: 1.0;
}

.icon.favourite {
    background-image: url('/assets/dist/controllers/app/img/icons/favourite.png');
}
.icon.favourite.active {
    background-image: url('/assets/dist/controllers/app/img/icons/favourite_active.png');
    opacity: 1.0;
}

.icon.search {
    background-image: url('/assets/dist/controllers/app/img/icons/search.png');
}
.icon.search.active {
    background-image: url('/assets/dist/controllers/app/img/icons/search_active.png');
    opacity: 1.0;
}

.icon.live {
    background-image: url('/assets/dist/controllers/app/img/icons/live.png');
}
.icon.live.active {
    background-image: url('/assets/dist/controllers/app/img/icons/live_active.png');
    opacity: 1.0;
}

.icon.settings {
    background-image: url('/assets/dist/controllers/app/img/icons/settings.png');
}
.icon.settings.active {
    background-image: url('/assets/dist/controllers/app/img/icons/settings_active.png');
    opacity: 1.0;
}

.blink {
    animation: blinker 1.8s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0.3;
    }
}


#selectFilterContainer {
    position: fixed;
    z-index: 9999;
    overflow: show;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
    display:block;
}
#selectFilterContainer .content {
    position:absolute;
    background-color: rgba(255,255,255,0.97);
    left:10vw;
    top:10vh;
    width:80vw;
    overflow:hide;
    border-radius:13px;
    color: black;
    padding-bottom:3px;
}


/**
 * LOADER
 */
/* Absolute Center Spinner */
._loading {
    position: fixed;
    z-index: 99999999;
    height: 2em;
    width: 2em;
    overflow: show;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

/* Transparent Overlay */
._loading:before {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
}

/* :not(:required) hides these rules from IE9 and below */
._loading:not(:required) {
    /* hide "loading..." text */
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}

._loading:not(:required):after {
    content: '';
    display: block;
    font-size: 2.5vh;
    width: 1em;
    height: 1em;
    margin-top: -0.5em;
    -webkit-animation: spinner 1500ms infinite linear;
    -moz-animation: spinner 1500ms infinite linear;
    -ms-animation: spinner 1500ms infinite linear;
    -o-animation: spinner 1500ms infinite linear;
    animation: spinner 1500ms infinite linear;
    border-radius: 0.5em;
    -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
    box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
}

/* Animation */

@-webkit-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-moz-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-o-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.filterDialogHeader {
    font-size:18px;font-weight: 600;color:#505458;margin:16px 0 0 15px;
}
.filterDialogContent {
    max-height:70vh;margin-top:12px;overflow-y:scroll;overflow-x:hidden;border-top:1px solid rgb(225,225,225);padding:0 6px;
}
.filterDialogContent table {
    width:100%;border-collapse:collapse;
}
.filterDialogContent table tr {
    border-top:1px solid rgb(225,225,225);
}
.filterDialogContent table tr:first-child {
    border-top:0;
}
.filterDialogContent table tr td:first-child {
    padding: 10px 8px;
}
.filterDialogContent table tr td:nth-child(2) {
    width:26px;
}
.dialogFilterName {
    white-space:nowrap;max-width:calc(80vw - 54px);overflow: hidden;text-overflow: ellipsis;
}
.dialogFilterName.active {
    font-weight: 600;
}

#header_left {
    display: flex;align-items: center;
}

#header_left svg {
    width: 22px;
    height: 22px;
    color: rgb(220,220,220);
}

#header_right {
    display: flex;align-items: center;justify-content: end;
}

#header_right svg {
    width: 22px;
    height: 22px;
    color: rgb(220,220,220);
}

.matchList {
    margin:12px 0 0 0;
    width:100%;
    border-collapse:collapse;
    border-top:1px solid rgb(220,220,220);
    border-bottom:1px solid rgb(220,220,220);
}
.matchList table {
    width:100%;
    border-collapse:collapse;
}
.matchList > tbody > tr:first-child > td:first-child {
    padding:7px 10px;
    background-color:rgb(240,240,240);
    font-weight:300;
    font-size:11px;
}
.matchList > tbody > tr:nth-child(2) > td:first-child {
    padding:6px 0;
    background-color: rgb(250,250,250);
}
.matchList > tbody > tr:nth-child(3) > td:first-child {
    padding: 0;
    background-color: rgb(250, 250, 250);
    border-top: 1px solid rgb(235, 235, 235);
}
.matchList .competitionContainer {
    line-height: 20px;
    width: calc(100% - 12px);
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
    white-space: nowrap;
    font-weight: 300;
}
.matchList .competitionContainer img {
    width: 19px;
    margin-right: 6px;
    vertical-align: middle;
    margin-top: -1px;
}
.matchList .matchTime {
    font-size:13px;
    color:rgb(230,120,120);
    font-weight:400;
}
.matchList .matchTime span {
    font-weight:600;
    font-size:115%;
}
.teamName {
    width: calc(100vw - 84px);
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
    white-space: nowrap;
}
.teamScore {
    display: inline-block;
    font-family: sans-serif;
    font-size: 12px;
    background-color: rgb(44, 134, 248);
    padding: 2px 4px;
    border-radius: 2px;
    color: white;
    font-weight: 600;
}
.icon-center {
    display:table;
    margin:0 auto;
    color: rgb(111,111,111);
}
table.matchIcons tr td:not(:first-child) {
    width:25%;
    border-left:1px solid rgb(235,235,235)
}


/*Alerts*/
.alert {
    -webkit-border-radius: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.11);
    padding:10px;
    border:1px solid transparent;
    border-radius:3px;
    margin:20px 12px;
    text-align:center;
    font-size:14px;
    line-height: 16px;
}
.alert .sign {
    font-size: 20px;
    vertical-align: middle;
    margin-right: 5px;
    text-align: center;
    width: 25px;
    display: inline-block;
}
.alert-success {
    background-color: #DBF6D3;
    border-color: #AED4A5;
    color: #569745;
}
.alert-info {
    background-color: #D9EDF7;
    border-color: #98cce6;
    color: #3A87AD;
}
.alert-warning {
    background-color: #FCF8E3;
    border-color: #F1DAAB;
    color: #C09853;
}
.alert-danger {
    background-color: #F2DEDE;
    border-color: #e0b1b8;
    color: #B94A48;
}
.alert-white {
    background-color: #f9f9f9;
    border-top-color: #d8d8d8;
    border-bottom-color: #bdbdbd;
    border-left-color: #cacaca;
    border-right-color: #cacaca;
    color: #404040;
    padding-left: 61px;
    position: relative;
}
.alert-white .icon {
    text-align: center;
    width: 45px;
    height: 103%;
    position: absolute;
    top: -1px;
    left: -1px;
    border: 1px solid #BDBDBD;
    padding-top: 15px;
}
.alert-white .icon:after {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    display: block;
    content: '';
    width: 10px;
    height: 10px;
    border: 1px solid #BDBDBD;
    position: absolute;
    border-left: 0;
    border-bottom: 0;
    top: 50%;
    right: -6px;
    margin-top: -3px;
    background: #fff;
}
.alert-white.rounded {
    border-radius: 3px;
    -webkit-border-radius: 3px;
}
.alert-white.rounded .icon {
    border-radius: 3px 0 0 3px;
    -webkit-border-radius: 3px 0 0 3px;
}
.alert-white .icon i {
    font-size: 20px;
    color: #FFF;
    left: 12px;
    margin-top: -10px;
    position: absolute;
    top: 50%;
}
.alert-white.alert-danger .icon,
.alert-white.alert-danger .icon:after {
    border-color: #ca452e;
    background: #da4932;
}
.alert-white.alert-info .icon,
.alert-white.alert-info .icon:after {
    border-color: #3A8ACE;
    background: #4D90FD;
}
.alert-white.alert-warning .icon,
.alert-white.alert-warning .icon:after {
    border-color: #D68000;
    background: #FC9700;
}
.alert-white.alert-success .icon,
.alert-white.alert-success .icon:after {
    border-color: #54A754;
    background: #60C060;
}


/**
 * ----------------------------- MATCH ------------------------------
 */
.donut-chart {
    position: relative;
    border-radius: 50%;
    overflow: hidden;
}
.donut-chart .slice {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.donut-chart .chart-center {
    position: absolute;
    border-radius: 50%;
}
.donut-chart .chart-center span {
    display: block;
    text-align: center;
}

.donut-chart.chart1 {
    margin: 0 auto;
    width: 30px;
    height: 30px;
    background: rgb(255,180,0);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.donut-chart.chart1 .slice.two {
    clip: rect(0 15px 30px 0);
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
    background: rgb(1,189,255);
}
.donut-chart.chart1 .chart-center {
    top: 5px;
    left: 5px;
    width: 20px;
    height: 20px;
    background: rgb(49,49,49);
}


/** iScroll */
#scrollWrapper {
    width: 100%;
    overflow:hidden;
    -ms-touch-action: none;
}

#scrollContain {
    display: inline-block;
    white-space: nowrap;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -o-text-size-adjust: none;
    text-size-adjust: none;
}


/**
 * -------------------------- MATCH DETAIL ----------------------------
 */
.matchHeaderContainer {
    background-color: rgb(57, 57, 57);
    color: white;
    padding-bottom: 6px;
}
.matchHeaderContainer table {
    width:100%;
    border-collapse:collapse;
    padding: 0;
}

.matchScoreContainer {
    background-color: #4d4d4d;
    color: #ffdf1b;
    line-height: 30px;
    text-align: center;
    font-size: 17px;
    border-left: 1px solid rgb(50, 50, 50);
    border-right: 1px solid rgb(50, 50, 50);
    font-family: 'Cairo', sans-serif;
}

.matchTeamNameContainer {
    font-size: 12px;
    font-weight: 300;
    margin-right: 5px;
    padding-left:5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(50vw - 42px);
    font-family: Montserrat, sans-serif;
}

.matchHistoryContainer {
    white-space: nowrap;
    overflow: hidden;
    max-width: calc(50vw - 42px);
}

.matchTimeContainer {
    background-color: #4d4d4d;
    color: rgb(250, 60, 60);
    border: 1px solid rgb(50, 50, 50);
    border-bottom: 2px solid rgb(50, 50, 50);
    border-top: 2px solid rgb(50, 50, 50);
    line-height: 22px;
    text-align: center;
    font-size: 12px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    font-family: 'Cairo', sans-serif;
}

.matchHistoryIcon {
    display: inline-block;
    text-align: center;
    width: 16px;
    height: 18px;
    line-height: 18px;
    font-size: 11px;
    border-radius: 2px;
    color: white;
    margin-left: 3px;
    font-family: 'Cairo', sans-serif;
}

.matchHistoryIcon.win {
    background-color: #44ac45;
}

.matchHistoryIcon.draw {
    background-color: #ffb22f;
}

.matchHistoryIcon.loss {
    background-color: #eb3f30;
}

.matchHistoryIcon.unknown {
    background-color: rgb(185,185,185);
}

.matchStatsHeaders td {
    padding: 0 0 6px 0;
    width: 33%;
    text-align: center;
}
.matchStatsHeaders td div {
    font-size: 11px;
    font-weight: 300;
    color: #bbb;
}

.matchStatsText {
    font-size: 14px;
    color: #ddd;
    font-family: sans-serif;
}

.matchCorner {
    position: relative;
}
.matchCorner div:first-child {
    width: 2px;
    background-color: white;
    height: 13px;
}
.matchCorner div:nth-child(2) {
    position: absolute;
    left: 2px;
    top: 0;
    width: 8px;
    height: 6px;
}

.matchCorner.home div:nth-child(2) {
    background-color: rgb(250, 180, 0);
}
.matchCorner.away div:nth-child(2) {
    background-color: rgb(1,189,255);
}

.matchRedCard {
    width: 10px;
    height: 13px;
    background-color: rgb(232, 55, 55);
    border-radius: 1px;
}
.matchYellowCard {
    width: 10px;
    height: 13px;
    background-color: rgb(236, 230, 61);
    border-radius: 1px;
}

.matchStatsSmallText {
    font-size: 12px;
    font-weight: 300;
    color: #ddd;
    font-family: sans-serif;
    text-align: center;
}

.matchHeaderText {
    font-size: 11px;
    line-height: 5px;
    font-weight: 300;
    color: #bbb;
    text-align: center;
}

.matchProgressBarHome {
    width: 100%;
    height: 4px;
    background-color: rgb(250, 180, 0);
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}

.matchProgressBarAway {
    width: 100%;
    height: 4px;
    background-color: rgb(1, 189, 255);
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
}

#matchMenu {
    top: 44px;
    width: 100%;
    background-color: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.12);
}
#matchMenu [data-matchmenu-item] {
    display: inline-block;
    font-size: 13px;
    color: rgb(128, 128, 128);
    font-weight: 600;
    margin: 8px 0 8px 5px;
    padding: 4px 6px;
}
#matchMenu [data-matchmenu-item]:first-child {
    margin-left:9px;
}
#matchMenu [data-matchmenu-item].active {
    color:rgb(48,48,48);
    padding:4px 6px;
    background-color: rgb(225,225,225);
    border-radius:6px;
}

.app-menu {
    width: 100%;
    background-color: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.12);
}
.app-menu [data-appmenu-item] {
    display: inline-block;
    font-size: 11px;
    color: rgb(128, 128, 128);
    font-weight: 600;
    margin: 4px 0 4px 7px;
    padding: 2px 3px;
}
.app-menu [data-appmenu-item]:first-child {
    margin-left:9px;
}
.app-menu [data-appmenu-item].active {
    color:rgb(48,48,48);
    padding:2px 4px;
    background-color: rgb(225,225,225);
    border-radius:6px;
}
[data-matchmenu-content] {
    display: none;
}


/** --- CHART --- */
.teams-devide-container {
    margin:10px 2px 4px 2px;
}
.teams-devide-container table tr td {
    width:50%;
    vertical-align:middle;
}
.teams-devide-team-name {
    white-space:nowrap;
    font-weight:300;
    font-size:11px;
    line-height:14px;
    color: rgb(80,80,80);
    max-width:40vw;
    overflow:hidden;
    text-overflow: ellipsis;
}

.inAppChart {
    margin: 0;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY3B3d/8PAAODAdWUPC4yAAAAAElFTkSuQmCC') repeat-x;
    background-position: center;
    background-color: rgb(57,57,57);
}
.inAppChart-home {
    margin: 2px 0 0 0;
    background-color: rgb(77,77,77);
}
.home-off_target {
    position:absolute;
    top:6px;
    width:6px;
    height:6px;
    border-radius:6px;
    border: 1px solid rgb(10,10,10);
    background-color:rgb(255,180,0);
    display: none;
    z-index:99;
}
.home-on_target {
    position:absolute;
    top:4px;
    width:10px;
    height:10px;
    border-radius:10px;
    border: 1px solid rgb(10,10,10);
    background-color:rgb(255,180,0);
    margin-left:2px;
    display: none;
    z-index:100;
}
.home-goal {
    position:absolute;
    top:2px;
    width:15px;
    height:15px;
    background: url(/assets/dist/controllers/app/img/goal.png);
    background-size:cover;
    background-repeat:no-repeat;
    display: none;
    z-index:101;
}

.inAppChart-away {
    margin: 0;
    background-color: rgb(77,77,77);
}
.away-off_target {
    position:absolute;
    top:6px;
    width:6px;
    height:6px;
    border-radius:6px;
    border: 1px solid rgb(10,10,10);
    background-color:rgb(1,189,255);
    display: none;
    z-index:99;
}
.away-on_target {
    position:absolute;
    top:4px;
    width:10px;
    height:10px;
    border-radius:10px;
    border: 1px solid rgb(10,10,10);
    background-color:rgb(1,189,255);
    margin-left:2px;
    display: none;
    z-index:100;
}
.away-goal {
    position:absolute;
    top:2px;
    width:15px;
    height:15px;
    background: url(/assets/dist/controllers/app/img/goal.png);
    background-size:cover;
    background-repeat:no-repeat;
    display: none;
    z-index:101;
}

.data-fieldset-label {
    padding-top:1px;
    text-align:center;
    font-weight:300;
    font-size:11px;
    line-height:13px;
    color:rgb(80,80,80);
}
.data-fieldset {
    width:100%;
    font-weight:300;
    font-size:11px;
    color:rgb(80,80,80);
    margin-bottom:4px;
}

.h2h_teamName {
    font-size:12px;
    font-weight:300;
    white-space:nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.h2h_teamName.bold {
    font-weight:600;
}

.h2h_score {
    font-weight: 600;
    font-size: 12px;
    font-family: Cairo, sans-serif;
    margin-left: 4px;
}

.h2h_header {
    width: 100%;
    z-index: 999;
    background-color: white;
    text-align: center;
    color: rgb(128, 128, 128);
    font-size: 11px;
    border-top: 1px solid rgb(220, 220, 220);
    line-height: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.12);
}

.h2h_showMore {
    text-align: center;
    font-size: 11px;
    padding: 8px 0 9px 0;
    font-weight: 400;
    color: rgb(100, 100, 100);
}
.h2h_showMore i {
    vertical-align: middle;
    margin-left: 2px;
    font-size: 11px;
}

.matchExternalLink {
    margin: 20px 12px;
    padding: 11px;
    border: 1px solid rgb(200, 200, 200);
    background-color: white;
    font-size: 12px;
    font-weight: 400;
    border-radius: 4px;
}
.matchExternalLink i {
    color: rgb(100, 100, 100);
    font-size: 12px;
    vertical-align: middle;
    margin-right: 3px;
}
.matchExternalLink img {
    height: 13px;
    vertical-align: middle;
    margin-left: 6px;
}

.oddsList {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-family: sans-serif;
}
.oddsList.asian tbody > tr td {
    border-top: 1px solid rgb(220,220,220);
}

.oddsList.asian tbody > tr:first-child td {
    border-top: 0;
}

.oddsList td {
    background-color: rgb(250, 250, 250);
    color: rgb(80, 80, 80);
    padding: 9px 8px;
    font-weight: 400;
    font-size: 12px;
    border-left: 1px solid rgb(220,220,220);
}

.oddsList td:first-child {
    border-left: 0;
}

.oddsList td span {
    margin-left: 5px;
    color: rgb(230, 120, 0);
}

.oddsHeaderText {
    background-color: #188ae2;
    color: white;
    padding: 8px;
    font-weight: 500;
    font-size: 14px;
}

.oddsListOverUnder {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-family: sans-serif;
}

.oddsListOverUnder td {
    background-color: rgb(250, 250, 250);
    color: rgb(80, 80, 80);
    padding: 9px 8px;
    font-weight: 400;
    font-size: 12px;
    border-left: 1px solid rgb(220,220,220);
    border-top: 1px solid rgb(220,220,220);
    text-align:center;
}

.oddsListOverUnder td span {
    color: rgb(230, 120, 0);
}

.oddsListOverUnder td:first-child {
    border-left: 0;
    background-color: rgb(240, 240, 240);
}

.oddsListOverUnder tr:first-child td {
    padding: 4px 0;
    font-size: 11px;
    background-color: rgb(225, 225, 225);
    border-top: 0;
    border-left: 0;
    color: rgb(120,120,120);
}


.form-control {
    width: 100%;
    font-family: Montserrat, sans-serif;
    line-height: 1.42857143;
    color: rgb(60,60,60);
    font-size: 13px;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    padding: 7px 12px;
    max-width: 100%;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;

    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
.form-control:focus {
    border: 1px solid #aaaaaa;
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: 0 !important;
}

.btn {
    border-radius: 2px;
    padding: 6px 14px;
    background-color: #188ae2;
    border: 1px solid #188ae2;
    color: white;
    font-weight: 400;
    line-height: 1.42857143;
    text-align:center;
    white-space:nowrap;
    vertical-align:middle;
    cursor:pointer;
    user-select: none;
    font-family: Montserrat, sans-serif;
}

#toast-container > div {
    opacity:0.92;
}

.logout {
    width: 50vw;
    line-height: 35px;
    background-color: white;
    color: #f5707a;
    border: 1px solid rgb(230, 230, 230);
    text-align: center;
    margin: 40px auto 0 auto;
    border-radius:7px;
}


/* Switchery defaults. */

.switchery {
    background-color: #fff;
    border: 1px solid rgb(190,190,190);
    border-radius: 20px;
    cursor: pointer;
    display: inline-block;
    height: 30px;
    position: relative;
    vertical-align: middle;
    width: 50px;

    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    box-sizing: content-box;
    background-clip: content-box;
}

.switchery > small {
    background: #fff;
    border-radius: 100%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    height: 30px;
    position: absolute;
    top: 0;
    width: 30px;
}

/* Switchery sizes. */

.switchery-small {
    border-radius: 20px;
    height: 17px;
    width: 36px;
}

.switchery-small > small {
    height: 17px;
    width: 17px;
}

.switchery-large {
    border-radius: 40px;
    height: 40px;
    width: 66px;
}

.switchery-large > small {
    height: 40px;
    width: 40px;
}

#soundTable i, #soundTableUn i {
    color: white;
}

.fa.fa-angle-left {
    width: 10vw;
}


.pricingButton{
    display:table;
    margin:0 auto;
    padding: 5px 30px;
    color: #fff;
    border-radius: 4px;
    background-color: #3e70f8;
    font-weight: 800;
    transition: all 0.35s ease 0s;
    text-align:center;
}

.pricingButton:hover {
    cursor: pointer;
    background-color: rgb(45,85,240);
    box-shadow: 0 0 6px 3px rgba(0,0,0,0.12);
}


.slider-container {
    margin:24px 12px;
}
.slider {
    -webkit-appearance: none;
    width: calc(100% - 4px);
    height: 8px;
    border-radius: 2px;
    background: rgb(140,140,140);
    outline: none;
    opacity: 1;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgb(244,166,46);
    border: 1px solid black;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgb(244,166,46);
    border: 1px solid black;
    cursor: pointer;
}


.half-select-table {
    width:160px;
    border-collapse: separate !important;
    border-spacing: 0;
    border:1px solid rgb(120,120,120);
    border-radius:4px;
    table-layout: fixed;
}

.half-select-table td {
    padding:0;
    white-space:nowrap;
}

.half-select-table .item {
    text-align:center;
    padding:0 16px;
    line-height:22px;
    font-size:11px;
    font-weight:300;
}

.half-select-table .item.disabled {
    color: rgb(120,120,120);
    font-style: italic;
    border-left:1px solid rgb(70,70,70) !important;
}

.half-select-table .item:hover:not(.disabled) {
    background-color: rgba(120,120,120, 0.3);
    cursor:pointer;
}

.half-select-table .item.active {
    background-color: rgba(120,120,120, 0.3);
    font-weight:600;
}

.half-select-table .item.first {
    border-top-left-radius:2px;
    border-bottom-left-radius:2px;
}

.half-select-table .item.last {
    border-top-right-radius:2px;
    border-bottom-right-radius:2px;
}

.half-select-table .item:not(.first) {
    border-left:1px solid rgb(120,120,120);
}

.globe-color {
    color: rgb(160,160,160);
}

.header-title-color {
    color:#505458;
}

.header-title-separator-color {
    background-color:rgb(233,233,233);
}

.match-globe-color {
    color: rgb(120,120,120);
}

.finished-picked-color {
    color: rgb(80,80,80);
}

#liveSearchBar {
    position: fixed;
    z-index: 2;
    background-color:white;
    height:45px;
    top:44px;
    width:100%;
    border-bottom:1px solid rgb(220,220,220);
    padding:0 10px;
    box-sizing: border-box;
}

#liveSearchBar table {
    width:100%;
    border-collapse: separate;
    border: 1px solid #e3e3e3;
    border-radius: 5px;
    height: 33px;
    color: #555;
    margin-top:6px;
}

#liveSearchBar table i {
    color: rgb(140,140,140);
}

#liveSearchBar table input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family:Montserrat, sans-serif;
    width:100%;
    line-height:21px;
    font-size:13px;
    color: rgb(40,40,40);
    padding:0;
    border:0;
    outline: none;
}

.live-match-td {
    padding:2px 0 !important;
    background-color:rgb(250,250,250);
    border-top:1px solid rgb(235,235,235);
}

.settings-container-color {
    color: rgb(60,60,60);
}

.settings-days-color {
    color: rgb(120,120,120)
}

.settings-days-green {
    color: green;
}

.settings-days-red {
    color: #f5707a;
}

.setting-days-orange {
    color: rgb(255,165,0);
}

.settings-window {
    background-color:white;
    border:1px solid rgb(230,230,230);
}

.settings-window i {
    color: rgb(120,120,120);
}

.settings-window-text {
    color: rgb(120,120,120);
}

.settings-page-content-color {
    color: rgb(100,100,100);
}

.pricing-border-color {
    border: 2px solid #eee;
    border-radius: 2px;
}

.match-odds-displayed {
    color: rgb(110,110,110);
}

.odds-top-border {
    border-top:1px solid rgb(220,220,220);
}

.table-data-matches-tr {
    border-bottom:1px solid rgb(220,220,220);
}

.h2h-matches-border-bottom {
    border-bottom: 1px solid rgb(250,120,120) !important;
}

.settings-my-filters-tr {
    border-bottom:1px solid rgb(237,237,237);
}

.settings-my-filters-td {
    color: rgb(85,85,85);
}

.settings-links-color {
    color: rgb(54,64,78);
}

.settings-notify {
    background-color: white;border-top:1px solid rgb(237,237,237);
}

.settings-header-music {
    color:rgb(109,109,114);
}

.settings-music-container {
    background-color: white;
    border-top:1px solid rgb(237,237,237);
    border-bottom:1px solid rgb(237,237,237);
    color:rgb(85,85,85);
}

.settings-music-td {
    border-bottom:1px solid rgb(237,237,237);
}


.theme-switcher {
    border: 1px solid rgb(200,200,200);
    border-radius:24px;
    line-height:24px;
    padding:0 2px;
    cursor: pointer;
    margin-top: 5px;
}

.theme-switcher i {
    font-size:13px !important;
}

.switcher-light {
    display:inline-block;
    width:20px;
    line-height:20px;
    text-align:center;
}

.switcher-light.active {
    background-color: rgb(200,200,200);
    border-radius: 20px;
}

.switcher-light.active i {
    color: rgb(60,60,60) !important;
}

.switcher-dark {
    display:inline-block;
    width:20px;
    line-height:20px;
    padding-left:4px;
    color: rgb(160,160,160);
}

.switcher-dark.active {
    background-color: rgb(100,100,100);
    border-radius: 20px;
    color: rgb(190,190,190);
}

.match-date {
    color: rgb(90,90,90);
}

.alerts-border-top {
    border-top: 1px solid rgb(220,220,220);
}

.match-alert:not(.active) {
    opacity: 0.3;
}

.match-alert:not(.active) input {
    display: none;
}

.match-alert:not(.active) span.switchery {
    display: none;
}

.h2h-pitch {
    background-image: url(/assets/dist/controllers/app/img/icons/pitch.png);
    background-size: cover;
    background-repeat: no-repeat;
    width:19px;
    height: 19px;
    vertical-align:top;
    margin-top:4px;
}

.h2h-pitch:hover {
    background-image: url(/assets/dist/controllers/app/img/icons/pitch_active.png);
    cursor:pointer;
}

.asianOddsColor {
    color: rgb(230, 120, 0) !important;
}

.onTarget {
    position:relative;
    width:15px;
    height:15px;
}

.onTarget div:nth-child(1) {
    position:absolute;
    top:2px;
    left:2px;
    width:9px;
    height:9px;
    border-radius:9px;
    border:1px solid rgb(230,230,230);
    z-index:1;
}

.onTarget.home div:nth-child(1) {
    background-color: rgb(250, 180, 0);
}

.onTarget.away div:nth-child(1) {
    background-color: rgb(1,189,255);
}

.onTarget div:nth-child(2) {
    position:absolute;
    width:0;
    border-right: 1px solid rgb(230,230,230);
    height:15px;
    left:7px;
    z-index:2;
}

.onTarget div:nth-child(3) {
    position:absolute;
    width:15px;
    height:0;
    border-bottom: 1px solid rgb(230,230,230);
    top:7px;
    z-index:2;
}

.indexRedCard {
    display:inline-block;
    vertical-align:bottom;
    width:8px;
    height:12px;
    border-radius:2px;
    border: 1px solid rgb(232, 55, 55);
    background-color:rgb(230,70,70);
    margin-right:0;
}



.loginBtn {
    box-sizing: border-box;
    position: relative;
    /* width: 13em;  - apply for fixed size */
    margin: 0 auto;
    display: block;
    padding: 0 25px 0 56px;
    border: none;
    text-align: left;
    line-height: 34px;
    white-space: nowrap;
    border-radius: 0.2em;
    font-size: 14px;
    color: #FFF;
    font-family: Montserrat, sans-serif;
}
.loginBtn:before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    width: 34px;
    height: 100%;
}
.loginBtn:focus {
    outline: none;
}
.loginBtn:active {
    box-shadow: inset 0 0 0 32px rgba(0,0,0,0.1);
}


/* Facebook */
.loginBtn--facebook {
    background-color: #4C69BA;
    background-image: linear-gradient(#4C69BA, #3B55A0);
    /*font-family: "Helvetica neue", Helvetica Neue, Helvetica, Arial, sans-serif;*/
    text-shadow: 0 -1px 0 #354C8C;
}
.loginBtn--facebook:before {
    border-right: #364e92 1px solid;
    background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_facebook.png') 6px 6px no-repeat;
}
.loginBtn--facebook:hover,
.loginBtn--facebook:focus {
    background-color: #5B7BD5;
    background-image: linear-gradient(#5B7BD5, #4864B1);
}


/* Google */
.loginBtn--google {
    /*font-family: "Roboto", Roboto, arial, sans-serif;*/
    background: #DD4B39;
}
.loginBtn--google:before {
    border-right: #BB3F30 1px solid;
    background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_google.png') 6px 6px no-repeat;
}
.loginBtn--google:hover,
.loginBtn--google:focus {
    background: #E74B37;
}


.main-panel {
    width: 100%;
    padding: 16px;
    border: 1px solid #e5e5e5;
    background: #fff;
    border-radius: 8px;
    margin-bottom: 15px;
    font-family: Montserrat, sans-serif;
}

.panel-light {
    font-family: 'Montserrat', sans-serif !important;
    background: white !important;
}

.app-fixture {
    position: relative;margin-top:24px;padding:0 10px 6px 10px;
}

.app-fixture-picked-ago {
    position: absolute;top: 2px;right: 8px;color: rgb(255,120,120);font-size: 10px;font-weight: 300;
}

.app-fixture-competition {
    display: inline-block;width:auto;position:absolute;padding:6px 7px 6px 7px;transform:translateY(-50%);
}

.app-fixture-competition.has-new-ribbon {
    left: 44px;
}

.notification-ribbon {
    width: 60px;
    height: 60px;
    overflow: hidden;
    position: absolute;
    top: -1px;
    left:-1px;
}

.notification-ribbon span {
    position: absolute;
    display: block;
    width: 100px;
    padding: 3px 0;
    background-color: #f91f3e;
    box-shadow: 0 1.5px 3px rgba(0,0,0,.1);
    color: #fff;
    font: 400 11px/1 'Montserrat', sans-serif;
    text-shadow: 0 0.3px 0.3px rgba(0,0,0,.2);
    text-transform: uppercase;
    text-align: center;
}

.ribbon-top-left span {
    right: -7.5px;
    top: 9px;
    transform: rotate(-45deg);
}

.app-fixture-teams-wrapper {
    font-size: 12px;font-weight: 400;cursor: pointer;
}

.app-fixture-home-kit-color {
    flex-shrink:0;width:5px;height:5px;border-radius:2px;background: #ffb400
}

.app-fixture-away-kit-color {
    flex-shrink:0;width:5px;height:5px;border-radius:2px;background: #01bdff
}

.app-fixture-red-card {
    width:10px;height:14px;background:#fa3c3c;border-radius:2px;flex-shrink: 0;
}

.app-fixture-score-wrapper {
    display: flex;flex-direction: column;gap:4px;font-family: 'Cairo', sans-serif;font-weight:400;font-size:13px;line-height: 16px;color:white;margin-left: auto;
}

.app-fixture-score-card {
    background: rgb(44, 134, 248);border-radius:3px;padding:1px 4px;font-weight: 500;
}

hr.fancy {
    border: 0;height: 1px;background-image: linear-gradient(to right, rgba(245,245,245, 1), rgba(210,210,210, 0.5), rgba(245,245,245, 1));
    margin: 6px 0;
}

.app-fixture-field-icon {
    width: 22px;height: 17px;opacity: .5;
}

.app-fixture-field-icon.small {
    width: 20px;height: 15px;opacity: .5;
}

.app-fixture-field-icon.active {
    opacity: .7;
}

.app-fixture-field-icon.active path {
    fill: #51a8ea;
}

.text-success {
    color: #2E8B57;
}

.text-danger {
    color: #DC143C;
}






.btn--shockwave {
    -webkit-animation: shockwaveJump 1.15s ease-out;
    animation: shockwaveJump 1.15s ease-out;
}
.btn--shockwave:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 50%;
    -webkit-animation: shockwave 1s 0.65s ease-out;
    animation: shockwave 1s 0.65s ease-out;
}
.btn--shockwave:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 50%;
    -webkit-animation: shockwave 1s 0.5s ease-out;
    animation: shockwave 1s 0.5s ease-out;
}

@-webkit-keyframes shockwaveJump {
    0% {
        transform: scale(1);
    }
    40% {
        transform: scale(1.08);
    }
    50% {
        transform: scale(0.98);
    }
    55% {
        transform: scale(1.02);
    }
    60% {
        transform: scale(0.98);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes shockwaveJump {
    0% {
        transform: scale(1);
    }
    40% {
        transform: scale(1.08);
    }
    50% {
        transform: scale(0.98);
    }
    55% {
        transform: scale(1.02);
    }
    60% {
        transform: scale(0.98);
    }
    100% {
        transform: scale(1);
    }
}
@-webkit-keyframes shockwave {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(2.25);
    }
}
@keyframes shockwave {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(2.25);
    }
}

.refresh-spin {
    -webkit-animation:refresh-spin 2s infinite linear;
    animation:refresh-spin 2s infinite linear
}

@-webkit-keyframes refresh-spin {
    0% {
        -webkit-transform:rotate(0deg);
        transform:rotate(0deg)
    }
    100% {
        -webkit-transform:rotate(-359deg);
        transform:rotate(-359deg)
    }
}
@keyframes refresh-spin {
    0% {
        -webkit-transform:rotate(0deg);
        transform:rotate(0deg)
    }
    100% {
        -webkit-transform:rotate(-359deg);
        transform:rotate(-359deg)
    }
}