@font-face{
    font-family: 'HelveticaNeue';
    url('../webfonts/HelveticaNeueLTPro-Lt.woff') format('woff');
}

*, :after, :before {

    box-sizing: border-box;
}

svg:not(:root) {

    overflow: hidden;
}

.icon {

    display: inline-block;
}

body {

    letter-spacing: 1px;
    line-height: 1.4;
    font-family: 'HelveticaNeue', 'Arial', 'Helvetica', sans-serif;
    color: #ddd;
    background: #FF2523;
}

.live-container.sortable ul {

    margin-bottom: 0;
}

h1,h2,h3,h4,h5,h6 {

    font-family: Gotham, Arial, sans-serif;
    font-weight: 400;
    margin: 0;
    padding: 0;
}
h3 {
}
p {
    font-size: 0.8rem;
}
img {
    border: 0;
}

.clear {

    clear: both;
}

.bg-thirtiary {

    background: #FF2523;
}

nav a{

    color: #fff !important;
}

.navbar-brand.right {

    float: right;
}

nav a.navbar-brand {

    font-weight: 500;
    font-size: 100% !important;
}
.navbar-brand img {

    height: 1.8em;
}

.navbar-toggler {
    outline:none !important;
}


.live {

    margin: 0;
    background: rgb(255, 37, 35);
    width: 100%;
    height: 100%;
}

.live-disabled {

    z-index: 1001;
    position: fixed;
    background: rgba(221, 221, 221, 0.7);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.live-disabled-text {

    position: relative;
    top: 40%;
    width: 75%;
    margin: 0 auto;
    text-align: center;
    color: #ddd;
    cursor: pointer;
}

.live-disabled-text div {

    padding: 1em 2em;
    background: #000;
}

.live-disabled-text div:nth-child(2) {

    padding-top: 0;
}

.live-header {

    background: rgba(0,0,0,0) url('../../img/team.jpg') no-repeat scroll center top -40px/cover;
}

.live-mask {

    background: rgba(255,37, 35, 0.85);
    padding: 30px 30px 0 30px;
}

.live-gradient {
    /*background: repeating-linear-gradient(
            -55deg,
            rgba(0,0,0,0),
            #c40900 5px,
            rgba(0,0,0,0) 2.5px,
            rgba(0,0,0,0) 2.5px
    );*/
    background: url('../../img/red-hash-pattern.png') repeat;
    width: 100%;
}

.live-teams {

    position: relative;
    top: 40px;
    font-size: 1em;
    line-height: 1.4;
}

.live-teams-summary {

    display: inline-block;
    margin-right: 20px;
    margin-left: 20px;
    width: auto;
    padding-top: 0;
}

.live-teams-summary h4 {

    margin-top: 0.5rem;
}

.live-scorers {

    margin: 15px 0 10px 0;
    padding: 0 0 10px 0;
    list-style-type: none;
}

.live-scorers.home {

    margin-top: 15px;
    margin-left: 20px;
}

.live-team-crest {

    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: 70px;
    height: 70px;
    display: inline-block;
    vertical-align: top;
    zoom: 1;
}

.live-teams-home, .live-teams-away, .live-teams-result {

    vertical-align:top;
    display: inline-block;
    width: 49%;
}

.live-teams-home {

    text-align: right;
}

.live-teams-result {

    position: absolute;
    left: 0;
    width: 100%;
    font-family: Gotham, sans-serif;
    top: 110px;
    text-align:center;
    font-size: 70px;
    font-weight: 500;
    margin: 0;
}

.live-time {

    margin-top: 50px;
    font-size: 16px;
}
.live-time-box {

    padding: 3em 0 2em 0;
    text-align:center;
    margin: 0;
}
.live-time-box .time-minutes {

    position: relative;
    margin: 0 auto;
    text-transform: uppercase;
    display: inline-block;
    vertical-align: top;
    zoom: 1;
    background: #2f3133;
    padding: 1em 2em;
    color: white;
    font-weight: 700;
}

/** Additional **/

.live-additional {

    padding: 0 30px;
}

/** Live Timeline **/

.live-timeline {

    background: #fff;
    height: 150px;
    padding: 0 30px;
}

.live-timeline-bar {

    position: relative;
    margin-left: 2rem;
    top: 45px;
    height: 8px;
    border: 1px solid #ddd;
}

.live-timeline-bar.package {
    top: 0;
    margin: .5rem 2rem;
}

.live-timeline-inner {

    background: #7e0900;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.live-timeline-progress {

    background: #FF2523;
    width: 100%;
    height: 100%;
}

.live-timeline-crests-home {

}

.live-timeline-crests-away {

    top: 35px;
    position: relative;
}

.live-timeline-events {
    margin-left: 2rem;
}

.live-timeline-events ul.live-timeline-events-list{

    position: relative;
    top: -44px;
    width: 100%;
    list-style-type: none;
    color: #32383e;
    padding: 0;
    margin: 0;
}

.live-timeline-events .live-timeline-events-list li {

    position: absolute;
    height: 5px;
    width: 2px;
}

.live-timeline-events-content {

    display: none;
    bottom: auto;
    top: 25px;
    left: -19px;
    right: auto!important;
    background: #2f3133;
    padding: 1.7em .5em;
    border-radius: 0;
    text-align: left;
    position: absolute;
    width: 200px;
    z-index: 10;
}

.live-timeline-events-content li {

    color: #fff;
    font-weight: normal;
    font-size: 14px;
    line-height: 1.4;
    padding: 4px;
    margin: 0;
}

.live-timeline-events-content li:after {

    content: " ";
    position: absolute;
    top: -35px;
    margin-left: -8px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 8px 8px 8px;
    border-color: transparent transparent #2f3133 transparent;
    left: 13px;
}

.live-timeline-events-content .live-timeline-events-icon {

    top: -14px;
    left: 0;
}

.live-timeline-events-home, .live-timeline-events-away {

    background: #FF2523;
}

.live-timeline-events-home {

    top: 27px;
}
.live-timeline-events-home img {

    position: relative;
    top: -35px;
    left: -15px;
}
.live-timeline-events-away {

    top: 38px;
}
.live-timeline-events-away img {

    position: relative;
    top: 10px;
    left: -15px;
}

.live-timeline-events-header {

    display: block;
}

.live-timeline-events-icon {

    background: url(../../img/spritesx2.png) no-repeat;
    background-position: 0 0;
    background-size: 154px 80px;
    width: 26px;
    height:26px;
    position: relative;
    right: 9px;
    top: -25px;
    display: block;
}

.live-timeline-events-away .live-timeline-events-icon {

    top: 10px;
}

.live-timeline-times {

    margin-top: 45px;
    margin-left: 2rem;
    overflow:hidden;
}

.live-timeline-times ul{

    padding: 0;
    margin: 0;
    display: table;
    list-style-type: none;
    color: #2b2b2b;
    width: 115%;
}

.live-timeline-times li {

    display: table-cell;
}

.live-timeline-times li:last-of-type {

    position: relative;
    left: -.5rem;
}


/** Live nav **/

.live-nav {

    display: none;
    background: #333;
    width: 100%;
    color: #ddd;
}

.live-nav ul {

    list-style-type: none;
    padding: 0 !important;
    width: 100%;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
    margin-bottom: 0;
}

.live-nav li {
    display: inline-block;
    text-align: center;
    width: 49%;
    padding:0.5em 0;
    margin:0;
    cursor: pointer;
    user-select: none;
}
.live-nav li:first-child {

    border-right: 1px solid #ddd;
}
.live-nav li.selected {

    color: #FF2523;
}

.live-container {

    padding: 10px 0 10px 10px;
    background: white;
}

.live-container.sortable {

    cursor: pointer;
}

/** Events **/
.live-events {

    vertical-align: top;
    background: #333;
    color: #ddd;
    width: 60%;
    display: inline-block;
}

.live-events-event {

    border-bottom: 1px solid #ddd;
    padding: 0.5em;
}

.event-time {

    padding-left: 1em;
    color: #FF2523;
    font-size: 2rem;
    font-weight: 400;
    display: inline-block;
    vertical-align: top;
    margin-top: .1em;
}
.event-symbol {

    display: inline-block;
    top: -10px;
    margin: 8px 8px 0 8px;
}

.event-symbol span {

    background: url(../../img/spritesx2.png) no-repeat;
    background-size: 154px 80px;
    display: block;
    width: 25px;
    height: 25px;
}

span.yellow-card {

    background-position: 0 -27px;
}
span.red-card {

    background-position: -29px -27px;
}
span.red-card-second-yellow {
    background-position: -107px -27px;
}

.event-description {

    display:inline-block;
}

.event-description .event-topline {

    font-weight: bold;
}

/** Live Lineup **/

.live-lineup-container {

    display: inline-block;
    width: 39%;
    background: #FF2523;
}

.live-lineup {

    letter-spacing: 1px;
    background: url(../../img/red-hash-pattern.png) repeat;
}

.live-lineup-team {

    width: 99%;
    display: inline-block;
    vertical-align: top;
}

.live-lineup-team {

    padding: 20px;
}

.live-lineup .crest {

    height: 50px;
    padding-right: 8px;
}

.live-lineup h2, .live-lineup-creator h2 {

    text-transform: uppercase;
    display: inline-block;
    vertical-align:middle;
}

.live-lineup-header {

    font-size: 1em;
    border-bottom: 1px solid #d80a00;
    padding: 0.5em 0;
    font-weight: bold;
}

.live-lineup-counter {

    float: right;
}

.live-lineup ul {

    font-size: 14px;
    list-style-type: none;
    padding: 0;
    margin: .5em 0 0 0;
}

.live-lineup li {

    margin-top: .8em;
}

.live-lineup-number {

    display: block;
    float: left;
    width: 10%;
}

.live-lineup-creator {

    width: 59%;
    display: inline-block;
    vertical-align: top;
    background: #FF2523;
}
.live-lineup-creator-cause, .live-lineup-creator-position {

    display: inline-block;
    float: right;
}

.lineup-starter .live-lineup-creator-cause,
.lineup-substitutes .live-lineup-creator-cause,
.lineup-reserve .live-lineup-creator-position {

    display: none;
}

.live-lineup-creator-cause input {

    padding: .100rem .40rem;
    font-size: 1rem;
    color: #495057;
    border-radius: .25rem;
    border: 1px solid #ced4da;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s
}

.live-lineup-creator-cause input:focus {

    outline: #2f3133;
}

.sortable li {

    user-select:none;
}

.live-lineup-creator-container {

    background: url(../../img/red-hash-pattern.png) repeat;
}
.clear {

    clear: both;
}

/**************************
****** LIVE control *******
***************************/

:root {

    --live-color: #333;
    --live-background: #eee;
    --live-box-background: #ddd;
    --live-box-background-active: #ff2523;
    --live-border: #333;
}

.live-control {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    color: var(--live-color);
    font-weight: bold;
    bottom: 0;
    width: 80%;
}

.live-control-header {

    background: var(--live-background);
    border: 1px solid var(--live-border);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom:none;
    position: relative;
    text-align: center;
    left: 50%;
    width: 150px;
    transform: translateX(-50%);
    font-size: 120%;
    cursor: pointer;
}

.live-control-content {

    border: 1px solid var(--live-border);
    border-top-left-radius: 5px;
    border-top-right-radius:5px;
    border-bottom: none;
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}

.live-control-event {

    background: #ff2523;
    text-align: center;
}

.live-control-event-box {

    height: 50px;
    padding-top: 8px;
    width: 30%;
    display: inline-block;
}

.live-control-event-box:not(:last-of-type) {
    border-right: 1px solid #333;
}

.live-control-subcontent {

    background: var(--live-background);
}

.live-control-menu {

    padding-top: 1em;
    text-align: center;
}

.live-control-menu-box {

    padding: 1rem;
    background: var(--live-box-background);
    border: 1px solid var(--live-border);
    border-radius: 5px;
    width: 20%;
    margin-bottom: 1em;
    display: inline-block;
    text-align: center;
    cursor:pointer;
    position: relative;
}
.live-control-menu-box-symbol span {
    background: url(../../img/spritesx2.png) no-repeat;
    background-size: 154px 80px;
    display: block;
    width: 25px;
    height: 25px;
}

.event-subevent {

    background: #eee;
    padding: 0.3rem;
    position: absolute;
    bottom: -1px;
    border: 1px solid #333;
    font-size: 0.5rem;
    right: auto;
    left: -1px;
    width: calc(50% + 2px);
}

.event-subevent:not(:last-of-type) {

    border-right: 1px solid #333;
    border-bottom-left-radius: 5px!important;
}

.event-subevent.active {

    background: var(--live-box-background-active);
    color: white;
}

.event-subevent.own-goal {

    right: -1px;
}

.event-subevent.pen {

    right: 27px;
}

.live-control-menu-box-symbol {

    position: absolute;
    right: 0;
    bottom: 0;
}

.live-control-menu-box:not(:nth-of-type(1)) {

    margin-left: 4%;
}

.live-control-menu-box.active, .live-control-teams-box.active, .live-control-players-box.active {

    background: var(--live-box-background-active);
}

.live-control-menu-box[data-event-type='goal'] .event-symbol {

    position: relative;
    top: -10px;
}

.event-subevent:last-of-type {

    left: auto;
    right: -1px;
    width: calc(50% + 1px);
    border-bottom-right-radius:5px;
}

.live-control-players-box.active {
    color: white;
}

.live-control-teams {

    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.live-control-teams-box {

    margin: 0 2%;
    border: 1px solid var(--live-border);
    background: var(--live-box-background);
    border-radius: 5px;
    padding: 1rem;
    display: inline-block;
    cursor: pointer;
}

.live-control-players {
    text-align: center;
    margin-top: 1rem;
}

.live-control-players-box {

    margin: 0 1rem 1rem 1rem ;
    border: 1px solid var(--live-border);
    background: var(--live-box-background);
    border-radius: 5px;
    display: inline-block;
    cursor: pointer;
}

.live-control-players-box-image {

    padding: 0.5rem 1rem 0 1rem;
}
.live-control-players-box-image img {
    width: 96px;
}
.live-control-players-box-name {

    font-size:80%;
    padding: 0.1rem 1rem 0.1rem 1rem;
    border-top: 1px solid var(--live-border);
}

.live-control-controls button, .live-control-controls input[type='number'], .live-control-controls .options {

    width: 90%!important;
    margin: 0 auto !important;
}

.live-error {

    width: 90%!important;
    margin: 1rem auto !important;
}

.live-control-bottom-filler {

    padding-top: 5em;
}

@media (min-width: 925px) {

    .live-teams-home {

        padding-right: 100px;
    }
    .live-teams-away {

        padding-left: 100px;
    }
}
@media (max-width: 1450px) and (min-width: 526px) {

    .live-lineup-team {

        width: 100%;
        display: block;
    }
}

@media (min-width: 525px) {

    .footer {

        display: block;
        height: 70px;
        background: #FF2523;
    }
}

@media (max-width: 1024px) {

    .live {

        width: 100%;
    }
    .live-nav {

        display: block;
    }
    .live-events {

        width: 100%;
    }
    .live-container {

        padding: 0;
    }
    .live-lineup-container {

        width: 100%;
    }
    .live-lineup.only-live {

        display: none;
    }
    .live-lineup-creator {

        display: block;
        width: 100%;
    }
}

@media (max-width: 925px) {

    .live-header {

        background: rgba(0,0,0,0) url('../../img/team.jpg') no-repeat scroll center top -90px;
    }
    .live-teams {

        position: relative;
        top: 20px;
    }
    .live-teams-home {

        text-align:left;
        position: relative;
        left: 10px;
    }
    .live-teams-summary {

        margin: 0;
        position: relative;
        top: 70px;
    }
    .live-team-crest {

        float: none;
        position: absolute;
        top: 0;
    }
    .live-team-crest.home {

        left: 0;
    }
    .live-team-crest:not(.home) {

        right: 0;
    }
    .live-teams-away {

        position: relative;
        text-align: right;
        right: 10px;
    }
}

@media (max-width:900px) {

    .live-header {

        background: rgba(0,0,0,0) url('../../img/team.jpg') no-repeat scroll center top -40px;
    }
    .live-lineup.only-live {

        width: 100%;
    }
}

@media (min-width: 575px) and (max-width: 1024px) {

    .live-lineup-team.only-live {

        width: 49%;
        display: inline-block;
    }
}

@media (max-width: 575px) {

    .live-mask {

        padding: 30px 0 0 0;
    }
    .live-teams {

        font-size: 0.9em;
    }
    .live-teams h4 {

        font-size: 1.4em;
        font-weight: bold;
    }
    .event-time {

        padding-left: 0;
    }

    .live-lineup-team {

        width: 100%;
    }

    .live-lineup-number {

        width: 8%;
    }
    .live-lineup-handle {

        display: inline-block;
        width: 40%;
    }
    .live-lineup-creator-cause {

        width: 40%;
    }
    .live-lineup-creator-cause input {

        width: 8rem;
    }
    .live-additional {

        padding: 0;
    }
    .live-timeline-times ul {

        width: 113%;
    }

    .live-control-menu-box {
        width: 24%;
        padding: 1rem 0;
    }

    .live-control-players-box {
        width: 40%;
        text-align: center;
        margin: 0 0.5rem 0.5rem 0.5rem;
    }

    .live-control-players-box-image {

        padding: 0.25rem 0.5rem 0 0.5rem;
    }
    .live-control-players-box-image img {
        width: 48px;
    }
}