:root {  
    --light-colour: #EFE7DA;
    --bright-colour: #95C623;
    --dark-colour: #002626;
    --mid-colour: #0E4749;
    --contrast-colour: #E55812;
    --font-family-primary: "Montserrat";
    --font-size-primary: 18px;
    --font-weight-primary: 400;

    /* --body-light-colour: #EFE7DA;  grey
    --body-mid-colour: #0E4749; white 
    --body-dark-colour: black 
    --body-contrast-colour: #95C623; blue
    */

    --body-bg-colour: #EFE7DA;
    --body-fg-colour: #002626; 
    --body-font-family-primary: "Montserrat";
    --body-font-size-primary: 16px;

    --header-bg-colour: #002626;
    --header-fg-colour: #95C623; 
    --header-border-colour: #002626;
    --header-font-family-primary: "Montserrat";

    --menu-bg-colour: #002626;
    --menu-fg-colour: #EFE7DA;
    --menu-selected-colour: #95C623;

    --button-bg-colour: #95C623;
    --button-fg-colour: #002626;
}

.user-header {
    background-color: var(--dark-colour);
    color: var(--bright-colour);
}

body.global {
    background-color: var(--body-bg-colour);
    color: var(--body-fg-colour);
    font-family: var(--body-font-family-primary);
    font-size: var(--body-font-size-primary);
    font-weight: var(--font-weight-primary);
    margin-bottom: 50px;
}

a.search-result {
    background-color: var(--body-bg-colour) !important;
    color: var(--body-fg-colour) !important;
}

body.global a.body-colour {
    text-decoration: underline;
    color: var(--body-fg-colour);
}

.container-vertical-margin {
    margin-top: 1em;
    margin-bottom: 1em;
}

.button-one, .button-one:hover {
    background-color: var(--bright-colour);
    border-color: var(--bright-colour);
    color: var(--dark-colour);
}

.button-two, .button-two:hover {
    background-color: var(--dark-colour);
    border-color: var(--dark-colour);
    color: var(--bright-colour);
    /*color: color-contrast(var(--dark-colour));*/
}

.button-one[disabled], .button-two[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

.button-one-body, .button-one-body:hover {
    background-color: var(--button-fg-colour);
    border-color: var(--button-fg-colour);
    color: var(--button-bg-colour);
}

.button-one-body-with-border {
    background-color: var(--button-fg-colour);
    border-color: var(--button-bg-colour);
    border-style: solid;
    border-width: 2px;   
    color: var(--button-bg-colour);
}

.button-two-body, .button-two-body:hover, h5.button-two-body, .h5.button-two-body {
    background-color: var(--button-bg-colour) !important;
    border-color: var(--button-bg-colour) !important;
    color: var(--button-fg-colour) !important;
}

.button-two-body-with-border {
    background-color: var(--button-fg-colour);
    border-color: var(--button-bg-colour);
    border-style: solid;
    border-width: 2px;   
    color: var(--button-bg-colour);
}

.button-one-body[disabled], .button-two-body[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

.body-border {
    color: var(--header-bg-colour);
}

.bottom-border-left {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 0px;
}

.bottom-border-right {
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 0px;
}

.custom-menu-area {
    background-color: var(--menu-bg-colour);
    color: var(--menu-fg-colour);
}

a.custom-styled-link {
    color: var(--body-fg-colour);
}

.custom-card-border {
    border-bottom-color: var(--header-bg-colour);
    border-right-color: var(--header-bg-colour);
    border-top-color: var(--header-bg-colour);
    border-left-color: var(--header-bg-colour);
}

.border-bottom-dark {
    border-bottom-color: var(--body-fg-colour);
    border-top-color: var(--body-fg-colour);
    border-left-color: var(--body-fg-colour);
    border-right-color: var(--body-fg-colour);
    border-bottom-style: solid; 
    border-bottom-width: 2px;
}

.border-bottom-dark-invert {
    border-bottom-color: var(--body-bg-colour);
    border-top-color: var(--body-bg-colour);
    border-left-color: var(--body-bg-colour);
    border-right-color: var(--body-bg-colour);
    border-bottom-style: solid; 
    border-bottom-width: 2px;
}

.menu-header-border {
    border-bottom-color: var(--menu-fg-colour);
    border-top-color: var(--menu-fg-colour);
    border-left-color: var(--menu-fg-colour);
    border-right-color: var(--menu-fg-colour);
    border-bottom-style: solid; 
    border-bottom-width: 2px;
}

.menu-close-button, .menu-close-button:hover {
    background-color: var(--menu-fg-colour);
    border-color: var(--menu-fg-colour);
    color: var(--menu-bg-colour);
}

.badge {
    color: var(--light-colour);
}

.contrast-bg {
    background-color: var(--contrast-colour);
}

.contrast-fg {
    color: var(--contrast-colour);
}

.dark-bg {
    background-color: var(--dark-colour);
}

footer {
    height: auto;
    text-align: center;
    vertical-align: middle;
    position: fixed;
    bottom: 0;
    width: 100%;

    > span {
        display: list-item;
    }
}

.login-section {
    margin-bottom: 0.5em;
}

league-content > section, club-content > section {
    margin:     auto;
    text-align: center;
}

.league-welcome-header, .club-welcome-header {
    max-height: 10%;

    background-color: var(--header-bg-colour);
    color: var(--header-fg-colour);
    font-family: var(--header-font-family-primary);

    border-bottom-color: var(--header-border-colour);
    border-bottom-style: solid; 
    border-bottom-width: 4px;

    > span {
        font-size: x-large;
    }    
}

.league-welcome-sub-header, .club-welcome-sub-header {
    background-color: var(--body-bg-colour);
    color: var(--border-fg-colour);
}

.league-buttons, .club-buttons {
    text-align: center;
    margin-top: 2px;
    margin-bottom: 2px;
    > ul {
        display: inline-block;
        margin:0;
        padding:0;
        vertical-align: middle !important;
        > li {
            float: left;
            margin: 2px;
            background-color: var(--dark-colour);
            border-radius:      5px;
            -moz-border-radius: 5px;
            > a {
                color: var(--u);
            }
        }
    }
}

.fixture-header {
    background-color: var(--header-bg-colour);
    color: var(--header-fg-colour);
}

.fixture-header-alternate {
    background-color: var(--header-fg-colour);
    color: var(--header-bg-colour);
}

.note-header {
    background-color: var(--header-bg-colour);
    border-color: var(--header-bg-colour) !important;
    color: var(--header-fg-colour);
}

.note-body {
    background-color: var(--body-bg-colour) !important;
    border-color: var(--header-bg-colour) !important;
    color: var(--body-fg-colour);
}

.full-width {
    width: 100%;
    max-width: 100%;
}

div.single-row {
    display: inline;
}

/* upright phone-ish shape*/
@media only screen and (max-width: 600px) and (min-height: 300px) {
    .hide-on-small-screen, .row.hide-on-small-screen { display: none;}
}

/* horizontal phone-ish shape*/
@media only screen and (max-height: 600px) and (min-height: 300px) {
    .hide-on-small-screen, .row.hide-on-small-screen { display: none;}
}

@media only screen and (min-width: 600px) and (min-height: 600px) {
    .hide-on-large-screen { display: none !important;}
}

.input-group {
    margin-bottom: 0.5em
}

.error-message {
    font-weight: bolder;
    color: var(--contrast-colour);
}

/*@keyframes menubutton {
    0% {background-color: var(--body-bg-colour);}
    100% {background-color: var(--body-fg-colour);}
}*/

.menubutton {
    color: var(--header-bg-colour);
    background-color: var(--header-fg-colour);
}

app-root div.title-styled {
    height: 100%;
    background-color: var(--mid-colour);
    border-bottom: 0.2em solid var(--dark-colour);
    z-index: 1000;
    height: calc(var(--font-size-primary) * 4);
}

app-root p.title-styled {
    font-family: var(--font-family-primary);
    color: var(--bright-colour);
    font-weight: bold;
    text-shadow: 2px 2px 4px var(--dark-colour);
}

/* upright phone-ish shape*/
@media only screen and (max-width: 600px) and (min-height: 300px) {
    app-root p.title-styled {
        font-size: 4.5vw;
    }
}

/* horizontal phone-ish shape*/
@media only screen and (max-height: 600px) and (min-height: 300px) {
    app-root p.title-styled {
        font-size: 4.5vw;
    }
}

@media only screen and (min-width: 600px) and (min-height: 600px) {
    app-root p.title-styled {
        font-size: 1.5vw;
    }
}

div.html-editor {
    color: black;
}

div.angular-editor-wrapper {
    background-color: white; /*var(--body-bg-colour);*/
}

input[type="color"] {
    padding: 0;
}

a.no-decoration {
    text-decoration: none !important;
}

.form-check-input:checked {
    background-color: var(--button-bg-colour) !important;
}

.modal-header, .modal-footer, .btn-close {
    color:var(--bright-colour) !important;
    background-color: var(--dark-colour) !important;
}
.modal-body {
    background-color: var(--light-colour) !important;
}