/*#region LAYOUT STYLES */
body, html {
    font-family: Montserrat;
    overflow: scroll;
    overflow-x: hidden;
    font-size: 16px;
    /* height: auto !important;*/
    height: 100%;
    min-height: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0 auto -142px;
}



a {
    text-decoration: none; /* override bootstrap */
    -webkit-transition: color 1s ease-out;
    -moz-transition: color 1s ease-out;
    -o-transition: color 1s ease-out;
    transition: color 1s ease-out;
    transition: color 0.1s ease-in, background 0.1s ease-in;
}

::-webkit-scrollbar {
    width: 0px; /* remove scrollbar space */
    background: transparent; /* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: transparent;
    /*background: #007bff !important;*/
}

pre {
    white-space: pre-wrap; /* Since CSS 2.1 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

header.desktop {
    display: block;
}
header.mobile {
    display: none;
}

#toplink {
    position: absolute;
    right: 0;
    top: 33px;
}

#toplink.mobile {
    display: none;
}

/*#endregion */

/*#region angular - angular ui */
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak, .ng-hide:not(.ng-hide-animate) {
    display: none !important;
}

.nav, .pagination, .carousel, .panel-title a {
    cursor: pointer;
}

.tab-pane {
    border-left: solid 1px #ddd;
    border-right: solid 1px #ddd;
    border-bottom: solid 1px #ddd;
    padding: 20px;
    min-height: 120px;
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-webkit-keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@-moz-keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.ng-active {
    opacity: 0; /* make things invisible upon start */
    -webkit-animation: fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation: fadeIn ease-in 1;
    animation: fadeIn ease-in 1;
    -webkit-animation-fill-mode: forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 0.7s;
    -moz-animation-duration: 0.7s;
    animation-duration: 0.7s;
}

.ng-inactive {
    opacity: 1; /* make things visible upon start */
    -webkit-animation: fadeOut ease-in 1; /* call our keyframe named fadeOut, use animattion ease-in and repeat it only 1 time */
    -moz-animation: fadeOut ease-in 1;
    animation: fadeOut ease-in 1;
    -webkit-animation-fill-mode: forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 0.7s;
    -moz-animation-duration: 0.7s;
    animation-duration: 0.7s;
}

.fade.ng-hide {
    transition: 0.5s linear all;
    opacity: 0;
}

.fadeIn.ng-show {
    transition: 0.5s linear all;
    opacity: 1;
}

input.ng-invalid.ng-dirty, textarea.ng-invalid.ng-dirty {
    border: dotted 2px var(--forest-red);
}

/*#endregion */

/*#region Material Overrides */
.spinner-border-sm {
    --bs-spinner-border-width: 0.1em;
}
/*#endregion */

/*#region FORM ELEMENTS */
input {
    height: 40px;
    border-radius: 0 !important;
}

input, input:active, input:focus, .form-control:focus {
    outline: none;
    box-shadow: none;
    border-radius: 0 !important;
}

ul.form-list {
    margin: 20px;
    padding: 0;
    list-style-type: none;
}

ul.form-list.no-margin {
    margin: 0;
}

ul.form-list > li {
    list-style-position: outside;
    list-style-type: none;
    display: block;
    position: relative;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #dedede !important;
}

::-moz-placeholder { /* Firefox 19+ */
    color: #dedede !important;
}

:-ms-input-placeholder { /* IE 10+ */
    color: #dedede !important;
}

:-moz-placeholder { /* Firefox 18- */
    color: #dedede !important;
}

input.ng-dirty.ng-invalid {
    border: dotted 1px red;
}

/*.mpm-form {
    padding-right: 30px;
}

    .mpm-form li {
        padding-right: 30px;
    }*/

    .mpm-form label {
        font-weight: 700;
        font-size: 14px;
    }

.mpm-form-group-container {
    position: relative;
}

    .mpm-form-group-container input {
        font-size: 16px;
    }

    .mpm-form-group-container .mpm-spinner {
        position: absolute;
        top: 8px;
        /*right:10px;*/
        left: 49%;
    }

.mpm-dialog-form {
    font-size: 14px;
    margin: 0;
}

.form-group {
    position: relative;
    margin-bottom: 15px;
}

    .form-group a.mpm-input-clear {
        position: absolute;
        right: 5px;
        top: 9px;
        color: #dcdcdc;
    }

    .form-group a.mpm-input-undo {
        position: absolute;
        right: 23px;
        top: 9px;
        color: #dcdcdc;
    }

.mpm-form-group label {
    font-weight: 600;
    display: block;
    margin-bottom: 0.5rem;
}

.form-group span.list-form-error {
    position: absolute;
    right: -26px;
    top: 3px;
    color: red;
    font-size: 20px;
}

.mpm-messages {
    width: 100%;
    min-height: 30px;
}

    .mpm-messages p {
        color: #dc3545 !important;
        font-size: 14px;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left;
    }

a.mpm-input-type {
    position: absolute;
    right: 43px;
    color: #dcdcdc;
    top: 8px;
}

    a.mpm-input-type.solo {
        right: 23px !important;
    }

i.mpm-input-success {
    font-size: 24px;
    position: absolute;
    right: -30px;
    top: 29px;
}

/*button.md-primary i.bi {
    position: relative;
    top: -2px;
}*/

.mpm-dropdown {
    font-size: 14px;
    width: 100%;
    margin: 0 0 0 0;
}

.mpm-form-button button.md-button {
    margin: 10px 0;
}
/* Fixes select not closing on doc outside click */
.md-select-menu-container {
    z-index: 900;
}

md-backdrop.md-select-backdrop {
    z-index: 899;
}

.md-datepicker-calendar-pane {
    z-index: 1000;
}

/*
//.md-select-menu-container {
//    z-index: 9000; /* must be more than 8000 so it shows in dialogs */
.mpm-textarea {
    position: relative;
}

    .mpm-textarea textarea {
        min-height: 80px;
    }

.mpm-textarea-icons {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 1px;
    right: 1px;
}

    .mpm-textarea-icons i {
        font-size: 30px;
        position: absolute;
        top: -3px;
        right: -2px;
        line-height: 0em;
    }

    .mpm-textarea-icons .spinner-border {
        position: relative;
        top: 5px;
        left: 2px;
        height: 20px;
        width: 20px;
    }

.mpm-form-buttons {
    width: 100%;
    text-align: right;
    position: relative;
}

    .mpm-form-buttons a.mpm-form-button-debug {
        font-size: 12px;
        color: #dcdcdc;
        position: absolute;
        left: 10px;
        top: 5px;
    }

        .mpm-form-buttons a.mpm-form-button-debug.debug {
            color: #007bff;
        }

.mpm-center-form {
    width: 500px;
    margin: auto;
}

.mpm-input {
    height: 60px;
}

.mpm-input-container {
    position: relative;
}

.mpm-input input {
    font-size: 16px;
}

.mpm-input a.mpm-input-clear {
    position: absolute;
    right: 5px;
    top: 8px;
    color: #dcdcdc;
}

.mpm-input a.mpm-input-undo {
    position: absolute;
    right: 23px;
    top: 8px;
    color: #dcdcdc;
}

.mpm-input span.list-form-error {
    position: absolute;
    right: 30px;
    top: 4px;
    color: red;
    font-size: 22px;
    z-index: 100;
}

.mpm-dropdown {
    font-size: 14px;
    width: 100%;
    margin: 0 0 0 0;
}


/* Fixes select not closing on doc outside click */
.md-select-menu-container {
    z-index: 900 !important;
}

md-backdrop.md-select-backdrop {
    z-index: 899 !important;
}

.mpm-as-checkbox {
    position: relative;
}

    .mpm-as-checkbox > i {
        position: absolute;
        top: -2px;
        left: 0px;
    }


.fg-textarea-error {
    position: absolute;
    bottom: 67px;
    z-index: 1000;
    width: 100%;
}
/*.style="width:100%; position:absolute; bottom:67px;z-index:1000" {

}*/
.mpm-val-unit-bubble {
    border-color: #dc3546;
    background: #dc3546;
    color: #fff !important;
    padding: 10px 15px;
    position: absolute;
    top: 80px;
    /*min-width: 400px;*/
    width:100%;
    max-width:100%;
    font-size: 16px;
    border-radius: 3px;
    z-index: 100;
    webkit-box-shadow: 5px 7px 11px 2px rgba(0,0,0,0.59);
    -moz-box-shadow: 5px 7px 11px 2px rgba(0,0,0,0.59);
    box-shadow: 5px 7px 11px 2px rgba(0,0,0,0.45);
}

    .mpm-val-unit-bubble i.bi {
        font-size: 20px;
        padding-right: 10px;
        padding-left: 5px;
    }

    .mpm-val-unit-bubble:after {
        content: "";
        position: absolute;
        top: -10px;
        left: 20px;
        /*border-top: 10px solid black;
    border-top-color: inherit;*/
        border-bottom: 10px solid black;
        border-bottom-color: inherit;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
    }

.disabled {
    background-color: #dedede !important;
    color: #fff;
}

/*overwrite stupid md bg */
.md-button.md-default-theme.md-raised:not([disabled]):hover, .md-button.md-raised:not([disabled]):hover {
    /* background-color: rgb(250, 250, 250); */
    background-color: rgba(158, 158, 158, 0.2);
}
}
.md-button.md-default-theme.md-raised:not([disabled]):hover, .md-button.md-raised:not([disabled]):hover {
    /* background-color: rgb(250, 250, 250); */
    background-color: rgba(158, 158, 158, 0.2);
}
}

/*#endregion */

/*#region SELECT COMPONENT */

.fw-select {
    max-width: 400px;
}

.fw-select-label {    
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;    
}

.fw-select-icon {
    position: absolute;
    right: 1.25rem;
    width: 20px;
    height: 20px;    
    color: #000;
    display: inline-block;
    z-index: 5000;
}

.fw-select-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid var(--forest-dark-blue);
    padding: 1rem 2.25rem 1rem 1.25rem;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 2px;
    background-color: var(--forest-orange);
    color: var(--forest-dark-blue);
    font-size: 1.125rem;
    line-height: 1.8em;
}
/*#endregion */

/*#region DIALOG */

.mdm-dialog-header {
    background-color: var(--forest-red-dark);
    color: #fff;
}

md-dialog-content {
    padding: 20px 20px 0 20px;    
}

.md-title h4 {
    letter-spacing: 0.1em;
    max-width: 89%;
}

a.md-close {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #500612;
    outline: none;
}

.mpm-dialog-header-title {
    position:relative;
    top:5px;
}

.mpm-dialog-500 {
    width: 500px;
}

.mpm-dialog-900 {
    /*width: 900px;*/
}

.dialog-home .mdm-dialog-header, .dialog-home .mpm-dialog-actions {
    background-color: var(--forest-red);
    color: #fff;
}

.dialog-away .mdm-dialog-header, .dialog-away .mpm-dialog-actions {
    background-color: var(--forest-off-white-dark);
    color: var(--forest-dark-blue);
}

.dialog-third .mdm-dialog-header, .dialog-third .mpm-dialog-actions {
    background-color: var(--forest-navy);
    color: var(--forest-orange-light);
}

.dialog-home .mpm-dialog-content, .dialog-home .mpm-dialog-content-wrap {
    background-color: var(--forest-white);
    color: var(--forest-red);
}

.dialog-away .mpm-dialog-content, .dialog-away .mpm-dialog-content-wrap {
    background-color: var(--forest-off-white);
    color: var(--forest-dark-blue);
}

.dialog-third .mpm-dialog-content, .dialog-third .mpm-dialog-content-wrap {
    background-color: var(--forest-navy-light);
    color: var(--forest-orange-dark);
}

.dialog-home .mpm-dialog-actions .mpm-dialog-actions-ok {
    background-color: var(--forest-red-dark);
    color: #fff;
}
.dialog-away .mpm-dialog-actions .mpm-dialog-actions-ok {
    background-color: var(--forest-navy-dark);
    color: var(--forest-off-white);
}
.dialog-third .mpm-dialog-actions .mpm-dialog-actions-ok {
    background-color: var(--forest-orange-dark);
    color: var(--forest-navy-dark);
}

.mpm-confirm-dialog {
    min-height: 120px !important;
    font-size: 18px;
    color: #fff;
    background-color: var(--forest-red);
    margin-bottom: 0;
    border-bottom: solid 1px var(--forest-red-light);
}

.confirm-dialog-buttons {
    padding-top: 10px;
    padding-bottom: 15px;
}
/*#endregion */

/* #region THEME COLORS */
/*
    https://material.angularjs.org/latest/demo/colors
*/
.mdm-error-bg {
    background-color: #C62828 !important;
    color: #fff;
}

.mdm-error-bg-accent {
    background-color: #D32F2F !important;
    color: #fff;
}

.mdm-error-bg-accent-border {
    border: solid 1px #D32F2F !important;
}

.mdm-info-bg {
    background-color: #1565C0 !important;
    color: #fff;
}

.mdm-info-bg-accent {
    background-color: #1976D2 !important;
    color: #fff;
}

.mdm-info-bg-accent-border {
    border: solid 1px #1976D2 !important;
}

.mdm-success-bg {
    background-color: #2E7D32 !important;
    color: #fff;
}

.mdm-success-bg-accent {
    background-color: #388E3C !important;
    color: #fff;
}

.mdm-success-bg-accent-border {
    border: solid 1px #388E3C !important;
}

.mdm-warn-bg {
    background-color: #EF6C00 !important;
    color: #fff;
}

.mdm-warn-bg-accent {
    background-color: #F57C00 !important;
    color: #fff;
}

.mdm-warn-bg-accent-border {
    border: solid 1px #F57C00 !important;
}

.mdm-gray-bg {
    background-color: #bababa !important;
    color: #000;
}

.mdm-gray-bg-accent {
    background-color: #dcdcdc !important;
    color: #000;
}

.mdm-gray-bg-accent-border {
    border: solid 1px #dcdcdc !important;
}

/*#endregion */

/*#region MessageFactory Toasts */
.mpm-toast {
    z-index: 10000;
}

md-toast {
    z-index: 700;
    width: 420px;
}

    md-toast.md-capsule, md-toast .md-toast-content.md-capsule {
        border-radius: 5px;
        font-size: 16px;
        position: relative;
    }

    md-toast .md-toast-content i {
        position: absolute;
        top: 2px;
        left: 7px;
        font-size: 24px;
    }

.md-toast-text {
    padding: 8px 8px 8px 25px;
}

a.md-toast-close {
    position: absolute;
    top: 10px;
    right: 15px;
    color: #ffffff;
}

.bg-toast-info {
    background-color: #5a7de5 !important;
}
/*#endregion */

/*#region ALERT DIALOG */

.mpm-alert-dialog .mdm-dialog-header {
    height: 60px;
}

.mpm-alert-dialog .mdm-dialog-header h4{
    position:relative;
    left:10px;
    top:15px;
}

.mpm-alert-dialog {
    min-width: 500px;
    max-height: 85% !important; /* override material max height */
}

.mpm-alert-dialog .md-title {
    min-width: 350px;
}

.mpm-dialog-alert-icon {
    position: absolute;
    left: 8px;
    top: 6px;
    font-size: 32px;
    width: 32px;
}

.mpm-dialog-alert-icon i.bi-check-circle {
    color: #a5dca8;
}

.mpm-dialog-alert-icon i.bi-x-circle {
    color: #edacac;
}

.mpm-dialog-alert-icon i.bi-exclamation-circle {
    color: #ffcb95;
}

.mpm-dialog-alert-icon i.bi-info-circle {
    color: #9dc8f3;
}

.mdm-custom-dialog-header .md-title h4 span.mpm-dialog-header-title {
    display: block;
    height: 26px;
    overflow: hidden;
    margin-left: 45px;
    padding: 2px 0 0 0;
}

/*#endregion */

/*#region PAGE SPINNER */
.mpm-body-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1.25rem;
    background-color: #000;
    opacity: 0.5;
    z-index: 30;
    min-height: 130px;
    height: 100%;
    display: flex;
    justify-content: center;
}

.mpm-body-overlay span {
    position: relative;
    /*top: 40%;*/
}

.mpm-page-spinner-message {
    padding-top: 10px;
    color: #fff;
    font-size: 18px;
    width: 100%;
    position: absolute;
    top: 100px;
    z-index: 100;
}
/*#endregion */

/*#region PUBLIC STYLES */

#body-container {
    min-height: 100%;
    /*height: auto !important;*/
    height: 100%;
    overflow-y: scroll;
    /*max-height: 10000px;*/
}

.main-content {
    background-color: #fff;
    padding: 20px 0;
    min-height: 700px;
    overflow-y: scroll;
    /*max-height: 10000px;*/
}

body.theme-home .main-content {
    color: var(--forest-red-dark);
}

body.theme-away .main-content {
    color: var(--forest-dark-blue-light);
}

body.theme-third .main-content {
    color: var(--forest-navy-dark);
}

header {
    padding: 10px;
    height:140px;
    /*margin-bottom: 20px;*/
}

header h1{
    margin-top:34px;
}

header .forest-svg-logo {
    /*margin: auto;*/
}

body.theme-home header {
    background-color: var(--forest-red-dark);
    border-bottom: solid 2px var(--forest-red-light);
}

body.theme-home h1, body.theme-home h4.mobile-title {
    color: #fff;
}
/* 
body.theme-away header {
    background-color: var(--forest-dark-blue-dark);
    border-bottom: solid 2px var(--forest-light-blue-dark);
}

body.theme-away h1, body.theme-away h4.mobile-title {
    color: var(--forest-light-blue-light);
}
    */

body.theme-away header {
    background-color: var(--forest-off-white-dark);
    border-bottom: solid 2px var(--forest-dark-blue-dark);
}

body.theme-away h1, body.theme-away h4.mobile-title {
    color: var(--forest-dark-blue);
}

body.theme-third header {
    background-color: var(--forest-navy);
    border-bottom: solid 2px var(--forest-orange-dark);
}

body.theme-third h1, body.theme-third h4.mobile-title {
    color: var(--forest-white);
}

body.theme-third footer {
    color: var(--forest-white);   
}

footer {
    height: 90px;
    padding: 20px;
}

footer .copyright a {
    margin-left: 10px;
}

hr.theme-separator {
    display: none;
}

body.theme-home footer {
    border-top: solid 2px var(--forest-red-dark);
    background-color: var(--forest-red);
}

body.theme-away footer {
    border-top: solid 2px var(--forest-dark-blue);
    background-color: var(--forest-off-white);
}

body.theme-third footer {
    border-top: solid 2px var(--forest-navy-dark);
    background-color: var(--forest-navy);
}

body.theme-third footer .theme{    
    background-color: var(--forest-navy);
}

.theme-select-list li {
    width: 80px;    
}

ul.nav-list {
    padding: 0;
    list-style-type: none;
}

ul.nav-list > li {
    margin-bottom: 20px;
    /*padding: 5px 8px;*/
    list-style-position: outside;
    list-style-type: none;
    display: block;
    border-bottom: solid 2px transparent;
}

ul.nav-list > li:hover {
    cursor: pointer;
}

ul.nav-list li a {
    width: 100%;
    height: 100%;
    display: block;
    padding: 5px 8px;    
}

#alt-mobile-nav ul li a.current-nav {
    font-weight: 600;
    border-bottom: solid 2px var(--forest-red-light);
}

ul.nav-list li a i {
    padding-right: 8px;
}

body.theme-home ul.nav-list a {
    color: var(--forest-white)!important;
}

body.theme-home ul.nav-list li:hover a !important {
    color: var(--forest-red-dark);
    cursor: pointer;
}

body.theme-home ul.nav-list li.li-current-nav {
    border-bottom: solid 2px var(--forest-white);
}

body.theme-home ul.nav-list li:hover {
    background-color: var(--forest-red-light);
}

body.theme-home ul.nav-list a {
    color: var(--forest-off-white-dark);
}

body.theme-away ul.nav-list li:hover {
    background-color: var(--forest-off-white-light);
}

body.theme-away ul.nav-list li.li-current-nav {
    border-bottom: solid 2px var(--forest-gold);
}

body.theme-third ul.nav-list li:hover {
    background-color: var(--forest-orange-light);
}

body.theme-third ul.nav-list li.li-current-nav {
    border-bottom: solid 2px var(--forest-white);
}

body.theme-third ul.nav-list a {
    color: var(--forest-white) !important;
}

body.theme-third ul.nav-list a:hover {
    color: var(--forest-gold)!important;
}

table.match-table {
    width: 100%;
}

table.match-table th, table.match-table td {
    padding: 3px 5px 5px 5px;    
}

body.theme-home table.match-table tr.odd {
    background-color: var(--forest-off-white);
    color: #fff;
}

body.theme-home table.match-table tr:hover {
    background-color: var(--forest-red-light);
    color: #fff;
}

body.theme-away table.match-table tr:hover {
    background-color: var(--forest-off-white-light);
    color: #fff;
}

body.theme-third table.match-table tr:hover {
    background-color: var(--forest-orange-light);
    color: #fff;
}

body.theme-home table.match-table td, body.theme-home table.match-table td span {
    color: var(--forest-red-dark);    
}

body.theme-away table.match-table td, body.theme-away table.match-table td span {
    color: var(--forest-dark-blue-dark);
}

body.theme-third table.match-table td, body.theme-third table.match-table td span {
    color: var(--forest-navy-dark);
}

tfoot {
    border-top: solid 1px var(--forest-red-light);
    opacity: 0.75;
}

/*#endregion */

/*#region TABLE STYLES */
table.match-table tr {
    transition: background-color 1s linear;
    -moz-transition: background-color 1s linear;
    -webkit-transition: background-color 1s linear;
    -ms-transition: background-color 1s linear;
    background-color: #fff;
}

table.match-table tr.newscore {
    background-color: lightgoldenrodyellow;
    transition: background-color 1s linear;
    -moz-transition: background-color 1s linear;
    -webkit-transition: background-color 1s linear;
    -ms-transition: background-color 1s linear;
}

    table.match-table tr.nextmatch {
        background-color: var(--forest-red-light);
        transition: background-color 1s linear;
        -moz-transition: background-color 1s linear;
        -webkit-transition: background-color 1s linear;
        -ms-transition: background-color 1s linear;
    }

        table.match-table tr.nextmatch td, table.match-table tr.nextmatch td a{
            color:#fff;
        }


table.match-table th.match-competition {
    width: 300px;
}

table.match-table th.match-day {
    width: 50px;
}

table.match-table th.match-date {
    width: 200px;
}

table.match-table th.match-venue {
    text-align: center;
    width: 120px;
}

table.match-table th.match-result {
    text-align: center;
    width: 210px;
}

table.match-table th.match-opponent-logo, table.match-table td.match-opponent-logo, table.match-table td.match-opponent-logo img.match-opponent-logo {
    width: 30px;
}

table.match-table td.match-opponent-logo i {
    font-size: 22px;
    color: #dcdcdc;
    position: relative;
    top: 2px;
    /*left: 4px;*/
}

.fw-opponent-logo img {
    max-width: 100%;
}

.fw-opponent-logo {
    display: inline-block;
}

.opponent-logo-item .fw-opponent-logo img {
    max-height:100px;
}


body.theme-home #page-clear-selection a i {
    color: var(--forest-red);
}

body.theme-away #page-clear-selection a i {
    color: var(--forest-gold);
}

body.theme-third #page-clear-selection a i {
    color: var(--forest-navy);
}

#page-clear-selection {
    font-size: 26px;
    position: absolute;
    top: -10px;
    right: 0;
}

div.fw-wdl-footer {
    padding: 10px 0 0 0;
    margin: 10px 0 0 0;
    border-top: solid 1px #dcdcdc;
}

div.fw-wdl-footer div.col-md-12 {
    text-align:right;
}

div.fw-wdl-footer.wdl {
    display: inline-block;
    padding: 0 20px 0 0;
}

div.fw-wdl-footer.listing {
}

/*#endregion */

/*#region HOME PAGE STYLES */
#next-match {
    margin: 0 0 20px 0;
    border-bottom: #dcdcdc;
}

#show-next {
    position: absolute;
    top: 0;
    right: 40px;
    font-size: 24px;
}

#show-next:hover {
    color: var(--forest-gold);
}

#next-up {
    position: absolute;
    top: 0;
    right: 10px;
    font-size: 24px;
}


#close-next {
    position: absolute;
    top: -5px;
    right: 10px;
    font-size: 24px;
}
#close-next:hover {
    color: var(--forest-gold);
}

/*#endregion */

/*#region SEASON PAGE STYLES */
ul.season-selection-list li {
    position: relative;
    width: 120px;
    text-align: center;
    padding: 0 5px 10px 5px;
}

ul.season-selection-list li a {
    color:#000;
}

ul.season-selection-list li a i{    
    font-size: 90px;
}

body.theme-home ul.season-selection-list li a i {
    color: var(--forest-red-dark);
}

body.theme-home ul.season-selection-list li a i:hover {
    color: var(--forest-red-light);
}

body.theme-away ul.season-selection-list li a i {
    color: var(--forest-gold-dark);
}

    body.theme-away ul.season-selection-list li a i:hover {
        color: var(--forest-gold-light);
    }

body.theme-third ul.season-selection-list li a i {
    color: var(--forest-navy-light);
}

    body.theme-third ul.season-selection-list li a i:hover {
        color: var(--forest-navy-dark);
    }

ul.season-selection-list li a span {
    position:absolute;
    top:60px;
    left:32px;
}

a.season-sort {
    font-size: 22px;
    position:absolute;
    top:10px;
    right:10px;
}

/*#endregion */

/*#region OPPONENT PAGE STYLES */
.opponent-typeahead {
    font-size: 24px;
    height:60px;
    padding:10px;
    font-family: monospace;
}

.opponent-typeahead-clear {
    position:absolute;
    top:1px;
    right:10px;
    font-size:42px;
}

.opponent-typeahead-spinner {
    position: relative;
    top: 8px;   
    left:45%;
}

.opponent-typeahead-spinner .spinner-border {
    height: 42px !important;
    width: 42px !important;
}

ul.opponent-selection-list li {
    position: relative;
    width: 160px;
    height: 130px;
    text-align: center;
    padding: 7px;    
    margin: 0 10px 10px 10px;
    vertical-align: top;    
}

ul.opponent-selection-list li:hover {
    background-color: var(--forest-off-white-dark);
}

ul.opponent-selection-list li a {
    font-weight: 600;
    display: inline-block;
    width: 100%;
    text-align: center;
    color: var(--forest-red);
}

ul.opponent-selection-list li div {
   /* height: 70px;
    width: 70px;*/
    margin: auto;
    text-align: center;    
    position:relative;
}

ul.opponent-selection-list li img.opponent-logo {
    max-width: 100%;
    width: 70px;
    margin: auto;
}

ul.opponent-selection-list li i {
    color:#dcdcdc;
    font-size:82px;
    position:relative;
    top:-10px;
}

ul.opponent-selection-list li div.icon-logo {        
    position: relative;
    top: -22px;
}

.-opponent-logo-item {
    position: relative;
}


/*#endregion */

/*#region COMPETITION PAGE STYLES */
ul.competition-selection-list li {
    position: relative;
    width: 160px;
    height: 150px;
    text-align: center;
    padding: 7px;
    /*border: solid 2px #000;*/
    /*border-radius: 10px;*/
    margin: 0 10px 10px 10px;
    vertical-align: top;
}

ul.competition-selection-list li a {
    position:relative;
    display:block;
    height:100%;
    width:100%;
    /*top:-7px;*/
    /*background-color: yellow;*/
}

ul.competition-selection-list li a i{
    font-size: 100px;
    color:#efefef;
}

ul.competition-selection-list li a span {    
    color: #000;
    position:relative;
    top:-95px;    
    display: inline-block;
}


/*#endregion */

/*#region MPM-ALERT */
.mpm-alert {
    position: relative;
    padding: 10px 10px !important;
    text-align: left;
}

.mpm-alert-icon {
    font-size: 20px;
    width: 30px;
    height: 35px;
    display: inline-block;
    position: relative;
}

    .mpm-alert-icon i {
        position: absolute;
        top: -5px;
        left: 0;
    }

.mpm-alert-title {
    font-size: 16px;
    display: inline-block;
    width: 85%;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 30px;
    height: 30px;
    overflow: hidden;
    position: relative;
    top: -10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 0; /* 0 0 5px;*/
    text-align: left;
}

mpm-title {
    display: inline-block;
}

.mpm-alert-text {
    text-align: left;
}

.mpm-alert-close {
    color: #fff;
    position: absolute;
    top: 4px;
    right: 5px;
    font-size: 18px;
    color: #1565C0;
}
/*#endregion */

/*#region UPDATE */

#updater {
    max-width: 600px;
}

#update-container {
}

#update-container > li.score-input {
    padding-left: 10px;
    max-width: 40%;
}

.update-logo {
    width: 50px;
    text-align: center;
    margin: 0 auto 20px auto;
}

.update-logo img{
    max-width: 100%;
}

.forest-input {
    width: 150px;
    text-align: center;
    margin:auto;
}


.update-opponent-logo {
    width: 90px;
    text-align: center;
    margin: 0 auto 20px auto;
}

.update-opponent-logo img {
    max-width: 100%;
}

.update-buttons {
    margin: 10px 0;
}

body.theme-home .dialog-footer {
    background-color: var(--forest-red);
}

body.theme-away .dialog-footer {
    background-color: var(--forest-off-white-dark);
}

.dialog-third .dialog-footer {
    background-color: var(--forest-navy);    
}

body.theme-home .mpm-dialog-actions-ok,
body.theme-home .mpm-dialog-actions-cancel {
    background-color: var(--forest-red);
    color: var(--forest-white);
}

    body.theme-home .mpm-dialog-actions-ok:not(.disabled):hover, body.theme-home .mpm-dialog-actions-cancel:hover {
        background-color: var(--forest-red-dark) !important;
        color: var(--forest-white);
    }

body.theme-away .mpm-dialog-actions-ok, body.theme-away .mpm-dialog-actions-cancel {
    background-color: var(--forest-dark-blue-dark);
    color: var(--forest-gold);
}

    body.theme-away .mpm-dialog-actions-ok:not(.disabled):hover, body.theme-away .mpm-dialog-actions-cancel:hover {
        background-color: var(--forest-dark-blue-dark) !important;
        color: var(--forest-gold);
    }

body.theme-third .mpm-dialog-actions-ok, body.theme-third .mpm-dialog-actions-cancel {
    background-color: var(--forest-navy-dark);
    color: var(--forest-orange-light);
}

    body.theme-third .mpm-dialog-actions-ok:not(.disabled):hover, body.theme-third .mpm-dialog-actions-cancel:hover {
        background-color: var(--forest-navy-light) !important;
        color: var(--forest-orange-dark);
    }

span.load-next {
    padding: 0 0 0 20px;
}

div.versus {
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    position: relative;
}

div.versus span {
    position: relative;
    top:30%;
}

button.update-submit-button {
    height:40px;
    width:110px;
    position:relative;
    top:22px;
}

button.update-submit-button.disabled-button {
    background-color: #dedede;
    color: gray;
    border-color: gray;
}

a.it-toggle {
    position: absolute;
    top: 38px;
    right: 19px;
}

#passcode, #username {
    font-family: monospace;
}

/*#endregion */

/*#region SEARCH */
ul.search-form-list {
    /*background-color: orange;*/
}

ul.search-form-list > li{
    padding: 10px 0;
    border-bottom: solid 1px var(--forest-red-light);
    margin-bottom: 30px;
}

.search-opponent-typeahead {
    font-size: 24px;
    height: 60px;
    padding: 10px;
    font-family: monospace;
}

.search-opponent-typeahead-clear {
    position: absolute;
    top: 0;
    right: 10px;
    font-size: 42px;
}

.search-competition-dropdown {
    font-size: 24px;
    font-family: monospace;    
}

.search-opponent-logo-item {
    position:relative;
}

input.search-date {
    display: inline-block;
    font-size: 20px;
    margin-left: 10px;
    width: 190px;
    font-family: monospace;
}

.search-season-typeahead {
    font-size: 30px;
    height: 60px;
    padding: 10px;
    font-family: monospace;
    width: 120px;
}

/* Chrome, Safari, Edge, Opera */
input.search-season-typeahead::-webkit-outer-spin-button,
input.search-season-typeahead::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number].search-season-typeahead {
    -moz-appearance: textfield;
}

.search-spinner .spinner-border, .search-comp-spinner .spinner-border {
    width: 36px;
    height: 36px;
    position: relative;
    top: 4px;
}
.search-comp-spinner {    
    position: absolute;
    top: 66px;
    left:48%;
    z-index:10;
}

ul.venue-list {
    font-size:24px;
}

.venue-list md-radio-button {
    display: inline-block;
    margin-right: 20px;
}

.search-opponent-typeahead-spinner {
    position: absolute;
    top: 9px;
    left: 48%;
}

.search-opponent-typeahead-spinner .spinner-border {
    height: 42px !important;
    width: 42px !important;
}


body.theme-home .main-content a.venue-radio-select:hover {
    color: var(--forest-red-dark)!important;
}

body.theme-away .main-content a.venue-radio-select:hover {
    color: var(--forest-pink-dark) !important;
}

body.theme-third .main-content a.venue-radio-select:hover {
    color: var(--forest-lightblue24-dark) !important;
}

ul.search-results-criteria {
    
}

ul.search-results-criteria li{
    list-style: none;
    height: 40px;
}

/*#endregion */

/*#region MATCH DATE/KO TIMEPICKER */
input.fw-dateinput, input.fw-timeinput {
    width: 200px;
    display: inline-block;
    font-size: 22px;
    font-family: Montserrat;
}

span.fw-time-contain {
    display: inline-block;
    position:relative;
    font-size: 24px;
}

a.fw-datetime-clear {
    position: absolute;
    top: 3px;
    left: 210px;
    font-size: 24px;
}

/*#endregion */

/*#region DIALOG [NEW] */

dialog:focus, dialog:active {
    border: none;
}

dialog:active {
    outline: none;
    border: none;
}

dialog:focus {
    outline: 0;
}

dialog {
    z-index: 10;
    padding: 0;
    /*margin-top: 10px;
    background: green;*/
    border: none;
    /*border-radius: 1rem;*/
}

dialog::backdrop {
    background-color: #000;
    opacity: 0.6;
}

.dialog-body-content {
    padding:  10px 20px;
    min-height:80px;
}

dialog hr{
    margin: 5px 0;
}

.dialog-footer {    
    padding: 10px 20px 10px 20px;
}

dialog .md-title h4 {
    text-transform:capitalize;
}

dialog md-progress-linear {
    
}

#contact-dialog {
    width: 400px;
}

/*#endregion */

/*#region MOBILE NAV */

#hidden-nav {
    position:relative;
    /*background-color:yellow;*/
    height: 40px;
}

#mobile-nav-opener {
    color:#fff;
    font-size:24px;
    position:absolute;
    left:14px;
    top:2px;    
}

#mobile-nav-closer {
    color: #fff;
    font-size: 24px;
    position: absolute;
    right: 12px;
    top: 4px;
    z-index: 10010;
}

#mobile-nav {
    position: absolute;    
    width: 94%;
    z-index: 10000;
    padding: 10px;
}

body.theme-home #mobile-nav {
    background-color: var(--forest-red-dark);
    border-bottom: solid 2px var(--forest-red-light);
}

body.theme-away #mobile-nav {
    background-color: var(--forest-gold-dark);
    border-bottom: solid 2px var(--forest-dark-blue);
}

body.theme-third #mobile-nav {
    background-color: var(--forest-orange);
    border-bottom: solid 2px var(--forest-navy-dark);
}

#mobile-nav ul li {
    padding-bottom: 10px;
}

#mobile-nav ul li a {
    font-size: 24px;
    color:#fff;
}

body.theme-home #mobile-nav ul li a.current-nav {
    color: var(--forest-red-light);
}

body.theme-away #mobile-nav ul li a.current-nav {
    color: var(--forest-dark-blue-light);
}

body.theme-third #mobile-nav ul li a.current-nav {    
    color: var(--forest-orange-light);
}

#mobile-nav ul li a span {
    padding-left: 15px;
}
/*#endregion */

/*#region ALT MOBILE NAV */
#alt-mobile-nav {
    padding: 10px;
    text-align:center;
    /**/
    width:100%;
}

body.theme-home #alt-mobile-nav {
    background-color: var(--forest-red-dark);
    border-bottom: solid 2px var(--forest-red-light);
}

body.theme-away #alt-mobile-nav {
    background-color: var(--forest-blue24-dark);
    border-bottom: solid 2px var(--forest-pink-dark);
}

body.theme-third #alt-mobile-nav {
    background-color: var(--forest-lightblue24);
    border-bottom: solid 2px var(--forest-lightblue24-dark);
}

#alt-mobile-nav ul li {
    width: 50px;
    text-align:center;
}

#alt-mobile-nav ul li a {
    font-size: 24px;
    color: #fff;
}

body.theme-home #alt-mobile-nav ul li a.current-nav {
    color: var(--forest-red-light);
}

body.theme-away #alt-mobile-nav ul li a.current-nav {
    color: var(--forest-blue24-light);
}

body.theme-third #alt-mobile-nav ul li a.current-nav {
    color: var(--forest-lightblue24-light);
}



/*#endregion */

#email-page-data {
    position:relative;
}

#email-page-data button {
    font-size:42px;
    height:30px;
    line-height:30px;
    display: inline-block;
    /*position:relative;
    top:10px;*/
}

#email-page-data button i {
    color: #fff;
    position: relative;
    top: -8px;
}

.yellow-card {
    color: #ffed29;
}

.red-card {
    color: #ff000d;
}

.md-spinner {
    display:inline-block;
    padding-left:10px;
    position: relative;
    top:-3px;
}

    .md-spinner .spinner-border-sm {
        width: 20px;
        height: 20px;
        border-width: 0.05em;
    }

/*#region RESPONSIVE STYLES */
@media only screen and (min-device-width: 1442px) {
    body, html {
        font-size: 14px;
    }
}

@media only screen and (min-device-width: 370px) and (max-device-width: 389px) and (orientation: portrait) {

    #viewer-container {
    }

    .md-dialog-container {
        /*max-width: 300px;*/
    }

    .mpm-alert-dialog {
        min-width: 360px;
    }

    table.match-table th {
        vertical-align: top;
    }

    table.match-table th, table.match-table td {
        padding: 3px 2px 3px 1px;
    }

    .nav-list > li {
        margin-bottom: 0 !important;
        padding: 0 !important;
        display: inline-block !important;
        width: 19%;
        text-align: center;
    }

    .nav-list.authenticated > li {
        width: 13%;
    }

    .nav-list > li i {
        font-size: 18px;
        position: relative;
        left: 5px;
    }

    .nav-list > li span {
        display: none;
    }

    header.desktop {
        display: none;
    }

    header.mobile {
        display: block;
        padding: 15px;
    }

        header.mobile h4 {
            display: block;
            line-height: 1.7em !important;
        }

    #toplink.mobile {
        display: block;
        right: 10px;
    }

    .mobile-title-item {
        width: 200px;
        padding-top: 18px;
    }

        .mobile-title-item h4 {
            font-size: 20px;
        }

    .mpm-dialog-content-form {
        max-width: 100%;
    }

    div.fw-wdl-footer .col-md-12 {
        padding-left: 0 !important;
    }

    footer {
        line-height: 2em;
    }

    .main-footer-row {
        margin: 0 -20px;
    }

    footer .copyright a {
        display: block;
        margin-left: 0;
    }

    body.theme-third footer .copyright a, body.theme-third footer .copyright {
        background-color: var(--forest-navy);
    }

    hr.theme-separator {
        display: block;
    }

    .theme-select-list {
        padding-bottom: 30px !important;
    }

    .update-buttons {
        max-width: 95%;
    }

    .scores-inputs .col-md-5 {
        width: 45%;
    }

    .scores-inputs .col-md-2 {
        width: 10%;
    }

    div.versus span {
        display: inline-block;
        font-size: 20px;
        padding-top: 30px;
    }

    span.load-next {
        padding: 0 0 0 0;
        display: block;
        margin-top: 10px;
    }

    button.save-button {
        margin: 0 0 8px 0 !important;
    }

    button.cancel-button {
        margin: 8px 0 0 0 !important;
    }

    .more-matches {
        text-align: center;
    }

    table.match-table {
        font-size: 12px;
    }

        table.match-table th, table.match-table td {
            /*border:solid 1px #000;*/
        }

            table.match-table th.match-competition {
                width: 110px !important;
            }

            table.match-table th.round-name {
                width: 150px !important;
            }

            table.match-table th.match-day {
                /*width: 0px !important;*/
            }

            table.match-table th.match-date {
                width: 60px !important;
            }

                table.match-table th.match-date.search-match-date {
                    width: 117px !important;
                }

            table.match-table th.match-venue {
                width: 45px !important;
            }

            table.match-table th.match-result {
                width: 81px !important; /*was 66*/
            }

    td span.match-date-value {
        display: none;
    }

    td span.mobile-match-date-value {
        display: inline;
    }

    table.match-table th.match-opponent-logo, table.match-table td.match-opponent-logo, table.match-table td.match-opponent-logo img.match-opponent-logo {
        width: 24px;
    }

    div.season-select {
        width: 50%;
    }

    tr.row-underline {
        border-bottom: solid 1px #dcdcdc;
    }

    h2.seasons-title {
        text-align: center;
    }

    .opponents-competition-name, .mobile-block {
        display: block;
        margin-bottom: 10px;
    }

    #page-clear-selection {
        font-size: 24px;
        top: -20px;
        right: -5px;
    }

    ul.season-selection-list {
        width: 370px;
        margin: auto;
    }

    ul.competition-selection-list, ul.opponent-selection-list {
        width: 360px;
        margin: auto;
    }

    ul.venue-list {
        font-size: 16px;
        margin-left: 45px;
    }

    #next-up {
        position: absolute;
        top: -3px;
        right: 20px;
        font-size: 20px;
    }

    .ml45 {
        margin-left: 45px;
    }

    .passcode-contain {
        margin-top: 20px;
    }

    .passcode-button-contain {
        margin-top: 20px;
        text-align: center;
    }

    

    #next-match h3 {
        font-size: 17px;
        margin-bottom: 20px;
    }

    #next-match .col-md-5, #next-match .col-md-2 {
        display: inline-block;
    }

    #next-match .col-md-5 {
        width: 40%
    }

    #next-match .col-md-2 {
        width: 20%
    }

    #next-match .versus {
        top: -40px;
    }

    .search-dates h4 {
        font-size: 18px;
    }
}

@media only screen and (min-device-width: 370px) and (max-device-width: 389px) and (orientation: landscape) {

    #viewer-container {
    }

    .md-dialog-container {
        /*max-width: 300px;*/
    }

    .mpm-alert-dialog {
        min-width: 360px;
    }

    table.match-table th {
        vertical-align: top;
    }

    table.match-table th, table.match-table td {
        padding: 3px 2px 3px 1px;
    }

    .nav-list > li {
        margin-bottom: 0 !important;
        padding: 0 !important;
        display: inline-block !important;
        width: 16%;
        text-align: center;
    }

    .nav-list.authenticated > li {
        width: 13%;
    }

    .nav-list > li i {
        font-size: 18px;
        position: relative;
        left: 5px;
    }

    .nav-list > li span {
        display: none;
    }

    header.desktop {
        display: none;
    }

    header.mobile {
        display: block;
        padding: 15px;
    }

        header.mobile h4 {
            display: block;
            line-height: 1.7em !important;
        }

    #toplink.mobile {
        display: block;
        right: 10px;
    }

    .mobile-title-item {
        /*width: 200px;*/
        padding-top: 32px;
    }

        .mobile-title-item h4 {
            font-size: 26px;
        }

    .mpm-dialog-content-form {
        max-width: 100%;
    }

    div.fw-wdl-footer .col-md-12 {
        padding-left: 0 !important;
    }

    footer {
        line-height: 2em;
    }

        footer .app-version {
            padding-bottom: 10px;
        }

        footer .copyright a.contact-link {
            position: relative;
            left: 0;
        }

        footer .copyright a {
            display: block;
            margin-left: 0;
        }

    .main-footer-row {
        margin: 0 -20px;
    }

        .main-footer-row .col-md-4 {
            display: block;
            width: 100%;
        }

    body.theme-third footer .copyright a, body.theme-third footer .copyright, body.theme-third footer .main-footer-row {
        background-color: var(--forest-navy);
    }

    .theme {
        display: block;
        width: 100%;
        margin-top: 0 !important;
        margin-bottom: 30px !important;
    }


    hr.theme-separator {
        display: block;
    }

    .theme-select-list {
        padding-bottom: 30px !important;
    }

    .update-buttons {
        max-width: 95%;
    }

    .scores-inputs .col-md-5 {
        width: 45%;
    }

    .scores-inputs .col-md-2 {
        width: 10%;
    }

    div.versus span {
        display: inline-block;
        font-size: 20px;
        padding-top: 30px;
    }

    span.load-next {
        padding: 0 0 0 0;
        display: block;
        margin-top: 10px;
    }

    button.save-button {
        margin: 0 0 8px 0 !important;
    }

    button.cancel-button {
        margin: 8px 0 0 0 !important;
    }

    .more-matches {
        text-align: center;
    }

    table.match-table {
        font-size: 12px;
    }

        table.match-table th, table.match-table td {
            /*border:solid 1px #000;*/
        }

            table.match-table th.match-competition {
                width: 110px !important;
            }

            table.match-table th.round-name {
                width: 150px !important;
            }

            table.match-table th.match-day {
                /*width: 0px !important;*/
            }

            table.match-table th.match-date {
                width: 60px !important;
            }

                table.match-table th.match-date.search-match-date {
                    width: 117px !important;
                }

            table.match-table th.match-venue {
                width: 45px !important;
            }

            table.match-table th.match-result {
                width: 81px !important; /*was 66*/
            }

    td span.match-date-value {
        display: none;
    }

    td span.mobile-match-date-value {
        display: inline;
    }

    table.match-table th.match-opponent-logo, table.match-table td.match-opponent-logo, table.match-table td.match-opponent-logo img.match-opponent-logo {
        width: 24px;
    }

    div.season-select {
        width: 50%;
    }

    tr.row-underline {
        border-bottom: solid 1px #dcdcdc;
    }

    h2.seasons-title {
        text-align: center;
    }

    .opponents-competition-name, .mobile-block {
        display: block;
        margin-bottom: 10px;
    }

    #page-clear-selection {
        font-size: 24px;
        top: -20px;
        right: -5px;
    }

    ul.season-selection-list {
        width: 550px;
        margin: auto;
    }

    ul.competition-selection-list, ul.opponent-selection-list {
        width: 550px;
        margin: auto;
    }

    ul.venue-list {
        font-size: 16px;
        margin-left: 45px;
    }

    #next-up {
        position: absolute;
        top: -3px;
        right: 20px;
        font-size: 20px;
    }

    .ml45 {
        margin-left: 45px;
    }

    .passcode-contain {
        margin-top: 20px;
    }

    .passcode-button-contain {
        margin-top: 20px;
        text-align: center;
    }

    #next-match h3 {
        font-size: 17px;
        margin-bottom: 20px;
    }

    #next-match .col-md-5, #next-match .col-md-2 {
        display: inline-block;
    }

    #next-match .col-md-5 {
        width: 40%
    }

    #next-match .col-md-2 {
        width: 20%
    }

    #next-match .versus {
        top: -40px;
    }

    .search-dates h4 {
        font-size: 18px;
    }
}


@media only screen and (min-device-width: 390px) and (orientation: portrait) {

    .md-dialog-container{
        /*max-width: 300px;*/
    }

    .mpm-alert-dialog {
        min-width: 380px;
    }

    table.match-table th, table.match-table td {
        padding: 3px 2px 3px 1px;
    }

    .nav-list > li {
        margin-bottom: 0 !important;
        padding: 0 !important;
        display: inline-block !important;
        width: 19%;
        text-align: center;
    }

    .nav-list.authenticated > li {
        width: 13%;
    }    

    .nav-list > li i {
        font-size: 18px;
        position: relative;
        left: 5px;
    }

    .nav-list > li span {
        display: none;
    }

    header.desktop {
        display: none;
    }

    header.mobile {
        display: block;
        padding: 15px;
    }

    header.mobile h4 {
        display: block;
        line-height: 1.7em !important;
    }

    #toplink.mobile {
        display: block;
    }

    .mobile-title-item {
        width: 220px;
    }

    .mpm-dialog-content-form {
        max-width: 100%;
    }

    div.fw-wdl-footer {
        
    }
    div.fw-wdl-footer .col-md-12{        
        padding-left:0!important;
    }

    footer {
        line-height: 2em;
    }

    footer .copyright a {
        display: block;
        margin-left: 0;
    }

    hr.theme-separator {
        display: block;
    }

    .theme-select-list {
        padding-bottom: 30px !important;
    }

    .update-buttons {
        max-width: 95%;
    }

    #updater {
    }

    .scores-inputs {
    }

    .scores-inputs .col-md-5 {
        width: 45%;
    }

    .scores-inputs .col-md-2 {
        width: 10%;
    }

    div.versus span {
        display: inline-block;
        font-size: 20px;
        padding-top: 30px;
    }

    span.load-next {
        padding: 0 0 0 0;
        display: block;
        margin-top: 10px;
    }

    button.save-button {
        margin: 0 0 8px 0 !important;
    }

    button.cancel-button {
        margin: 8px 0 0 0 !important;
    }

    .more-matches {
        text-align: center;
    }

    table.match-table {
        font-size: 12px;
    }

    table.match-table th, table.match-table td {
        /*border:solid 1px #000;*/
    }

    table.match-table th.match-competition {
        width: 110px !important;
    }

    table.match-table th.round-name {
        width: 150px !important;
    }

    table.match-table th.match-day {
        /*width: 0px !important;*/
    }

    table.match-table th.match-date {
        width: 60px !important;
    }

    table.match-table th.match-date.search-match-date {
        width: 117px !important;
    }

    table.match-table th.match-venue {
        width: 45px !important;
    }

    table.match-table th.match-result {
        width: 81px!important; /*was 66*/
    }

    td span.match-date-value {
        display: none;
    }

    td span.mobile-match-date-value {
        display: inline;
    }

    table.match-table th.match-opponent-logo, table.match-table td.match-opponent-logo, table.match-table td.match-opponent-logo img.match-opponent-logo {
        width: 24px; 
    }

    div.season-select {
        width: 50%;
    }

    tr.row-underline {
        border-bottom: solid 1px #dcdcdc;
    }

    h2.seasons-title {
        text-align: center;
    }

    .opponents-competition-name, .mobile-block {
        display: block;
        margin-bottom: 10px;
    }

    #page-clear-selection {
        font-size: 24px;
        top: -20px;
        right: -5px;
    }

    ul.season-selection-list  {        
        width: 370px;
        margin:auto;
    }

    ul.competition-selection-list, ul.opponent-selection-list {
        width: 360px;
        margin: auto;
    }

    ul.venue-list {
        font-size: 16px;
        margin-left:45px;
    }

    #next-up {
        position: absolute;
        top: -3px;
        right: 20px;
        font-size: 20px;
    }

    .ml45 {
        margin-left: 45px;
    }

    .passcode-contain {
        margin-top:20px;
    }

    .passcode-button-contain {
        margin-top: 20px;
        text-align:center;
    }

    #next-match h3 {
        font-size: 17px;
        margin-bottom: 20px;
    }

    #next-match .col-md-5, #next-match .col-md-2{
        display:inline-block;
    }

    #next-match .col-md-5 {
        width: 40%
    }

    #next-match .col-md-2 {
        width: 20%
    }

    #next-match .versus {
        top:-40px;
    }

    .search-dates h4 {
        font-size:18px;        
    }

    .search-opponent-typeahead {
        font-size:22px;
    }

}

@media only screen and (min-device-width: 850px) and (max-device-width: 1000px) and (orientation: landscape) {    

    .nav-list > li {
        margin-bottom: 20px !important;
        padding: 0 !important;
        display: block !important;
        /*width: 24%;*/
        text-align: center;
    }

    .nav-list > li i {
        font-size: 32px;
        position: relative;
        left: 5px;
    }

    .nav-list > li span {
        display: none;
    }

    header.desktop {
        display: none;
    }

    header.mobile {
        display: block;
        padding: 15px;
    }

    header.mobile h4 {
        display: block;
        line-height: 1.7em !important;
    }

    .app-version {
        width: 50%;
    }

    .copyright {
        width: 50%;
    }

    .theme {
        display: block;
        width: 100%;
        margin-top: 30px;
    }

    hr.theme-separator {
    }

    .theme-select-list {
        padding-bottom: 30px !important;
    }

    table.match-table {
        font-size: 12px;
    }

    table.match-table th, table.match-table td {
        /*border:solid 1px #000;*/
    }

    table.match-table th.match-competition {
        width: 210px !important;
    }

    table.match-table th.match-day {
        width: 30px !important;
    }

    table.match-table th.match-date {
    }

    table.match-table th.match-venue {
        width: 50px;
    }

    table.match-table th.match-result {
        width: 80px;
    }

    ul.opponent-selection-list li {
        width: 148px;
    }

    ul.competition-selection-list li {
        width: 148px;
    }

    #page-clear-selection {
        top: -10px;
    }

    ul.season-selection-list li {
        width: 135px;
    }
}

@media only screen and (min-device-width: 600px) and (max-device-width: 849px) and (orientation: landscape) {

    .container {
        max-width: 95%;        
    }

    .nav-list > li {
        margin-bottom: 20px !important;
        padding: 0 !important;
        /*display: inline-block !important;*/
       /* width: 13%;*/
        text-align: center;
        display:none;
        vertical-align: top;
    }

    .nav-list > li a {
        font-size: 14px;            
    }

    .nav-list > li i {
        font-size: 32px;
        position: relative;
        left: 5px;
    }

    .nav-list > li span {
        display: block;
    }

    header.desktop {
        display: none;
    }

    header.mobile {
        display: block;
        padding: 15px;
    }

    header.mobile h4 {
        display: block;
        line-height: 1.7em !important;
    }

    .app-version {
        width: 50%;
    }

    .copyright {
        width: 50%;
    }

    a.contact-link {
        display:block;
        margin-top:10px;
        position:relative;
        left:-10px;
    }

    .theme {
        display: block;
        width: 100%;
        margin-top: 30px;
    }

    hr.theme-separator {
    }

    .theme-select-list {
        padding-bottom: 30px !important;
    }

    table.match-table {
        font-size: 12px;
    }

    table.match-table th, table.match-table td {
        /*border:solid 1px #000;*/
    }

    table.match-table th.match-competition {
        width: 210px !important;
    }

    table.match-table th.match-day {
        width: 30px !important;
    }

    table.match-table th.match-date {
    }

    table.match-table th.match-venue {
        width: 50px;
    }

    table.match-table th.match-result {
        width: 80px;
    }

    ul.opponent-selection-list li {
        width: 148px;
    }

    ul.competition-selection-list li {
        width: 148px;
    }

    #page-clear-selection {
        top: -10px;
    }

    ul.season-selection-list li {
        width: 135px;
    }

    .public-login-form .col-md-2, .public-login-form .col-md-3, .public-login-form .col-md-4, .public-login-form .col-md-5 {
        display: block!important;
        width:60%;
    }
}

/* temp fix for IOS bug */
@media only screen and (min-device-width: 393px) and (max-device-width: 599px) and (orientation: landscape) {

    .container {
        max-width: 95%;
    }

    .nav-list > li {
        margin-bottom: 20px !important;
        padding: 0 !important;
        display: inline-block !important;
        width: 13%;
        text-align: center;
        display: none;
        vertical-align: top;
    }

        .nav-list > li a {
            font-size: 14px;
        }

        .nav-list > li i {
            font-size: 32px;
            position: relative;
            left: 5px;
        }

        .nav-list > li span {
            display: block;
        }

    header.desktop {
        display: none;
    }

    header.mobile {
        display: block;
        padding: 15px;
    }

        header.mobile h4 {
            display: block;
            line-height: 1.7em !important;
        }

    .app-version {
        width: 50%;
    }

    .copyright {
        width: 50%;
    }

    a.contact-link {
        display: block;
        margin-top: 10px;
        position: relative;
        left: -10px;
    }

    .theme {
        display: block;
        width: 100%;
        margin-top: 30px;
    }

    hr.theme-separator {
    }

    .theme-select-list {
        padding-bottom: 30px !important;
    }

    table.match-table {
        font-size: 12px;
    }

        table.match-table th, table.match-table td {
            /*border:solid 1px #000;*/
        }

            table.match-table th.match-competition {
                width: 210px !important;
            }

            table.match-table th.match-day {
                width: 30px !important;
            }

            table.match-table th.match-date {
            }

            table.match-table th.match-venue {
                width: 50px;
            }

            table.match-table th.match-result {
                width: 80px;
            }

    ul.opponent-selection-list li {
        width: 148px;
    }

    ul.competition-selection-list li {
        width: 148px;
    }

    #page-clear-selection {
        top: -10px;
    }

    ul.season-selection-list li {
        width: 135px;
    }

    .search-dates h4 {
        font-size: 18px;
    }
}

/*#endregion */