: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: #002626;  
    --button-fg-colour: #95C623; 
}

.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) !important;
    border-color: var(--bright-colour) !important;
    color: var(--dark-colour) !important;
}

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

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

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

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

.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;
}

button.inactive {
    opacity: 0.6;
}

.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;
}

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

.top-border-right {
    border-top-right-radius: 6px;
    border-top-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) !important;
    border-color: var(--menu-fg-colour) !important;
    color: var(--menu-bg-colour) !important;
}

.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);
}

.player-truncated {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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;
}

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

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

.dropdown-menu.header-child-link {
    border-color: var(--header-fg-colour) !important;
}

.dropdown-divider.header-menu {
    color: var(--header-fg-colour) !important;
}

.menu-selected {
    color: var(--menu-selected-colour);
    font-weight: bold;
}

.sub-menu-not-selected {
    opacity: 0.9;
}

.button-two-body.menu-selected {
    color: var(--menu-selected-colour) !important;
    font-weight: bold;
}

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

.menu-border {
    border-color: var(--header-fg-colour) !important;
    border-style: solid !important; 
    border-width: 1px !important;

    border-top-width: 0 !important;
    background-color: var(--header-bg-colour);
    /*color: var(--header-)*/

    /*border-left-color: var(--header-fg-colour) !important;
    border-right-color: var(--header-fg-colour) !important;*/
}

.menu-dropdown-item {
    background-color: var(--header-bg-colour);
    color: var(--header-fg-colour);
}

.menu-backing {
    background-color: var(--header-fg-colour);
}

.filter-backing {
     background-color: var(--body-bg-colour);
}

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

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

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

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

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

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

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

.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);
}

.club-sessions-header {
    background-color: var(--header-bg-colour);
    color: var(--header-fg-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%;
}

.full-width-imp {
    width: 100% !important;
    max-width: 100% !important;
}

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 !important;}
    .scrollable-area {
        white-space:nowrap;
        overflow-x: scroll;
    }
}

/* 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;}
    .scrollable-area {
        white-space:nowrap;
        overflow-x: scroll;
    }
}

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

.scrollable-area {
  width: 100%;
}

.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) !important;
    background-color: var(--header-fg-colour) !important;
}

app-root div.title-styled, #application-header, #top-search-header {
    background-color: var(--mid-colour);
    border-bottom: 0.2em solid var(--dark-colour);
    /* this is larger than the size of the content which is font-size, 2x8px of padding, 2x2px of shadow and 2x2px of blur*/
    height: 53px;
}

div.offcanvas-header {
    height: 53px;
}

app-root p.title-styled, h5.title-styled, #application-header-link  {
    font-family: var(--font-family-primary);
    color: var(--bright-colour);
    font-weight: bold;
    font-size: 24px;
    text-shadow: 2px 2px 4px var(--dark-colour);
}

#top-search {
    background-color: var(--light-colour);
    color: var(--dark-colour);
    height: 80%;
}

/* upright phone-ish shape*/
@media only screen and (max-width: 600px) and (min-height: 300px) {
    app-root p.title-styled, #application-header-link {
        font-size: 18px;
    }
    #application-header-sub {
        /* pixel difference in font size is 9 points, split this in half to move this halfway into the parent*/
        padding-top: 12px !important;
    }
}

/* particularly thin upright phone-ish shape*/
@media only screen and (max-width: 400px) and (min-height: 300px) {
    app-root p.title-styled, #application-header-link {
        font-size: 16px;
    }
}


/* horizontal phone-ish shape*/
@media only screen and (max-height: 600px) and (min-height: 300px) {
    app-root p.title-styled, #application-header-link {
        font-size: 18px;
    }
    #application-header-sub {
        /* pixel difference in font size is 9 points, split this in half to move this halfway into the parent*/
        padding-top: 12px !important;
    }
}

div.html-editor {
    color: black;
}

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

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

.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-header-custom {
    color:var(--header-fg-colour) !important;
    background-color: var(--header-bg-colour) !important;
}

.modal-body {
    background-color: var(--light-colour) !important;
    color: var(--dark-colour) !important;
}

.modal-body-custom {
    background-color: var(--body-bg-colour) !important;
    color: var(--body-fg-colour) !important;
}

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

button.fixed-width, a.fixed-width {
    width: 160px;
}

.fixed-width-label {
    min-width: 200px;
}

span.coming-up {
    background-color: var(--dark-colour);
    color: var(--bright-colour);
}

span.user-coming-up {
    background-color: var(--contrast-colour);
    color: var(--light-colour);
}

span.confirmed {
    background-color: var(--bright-colour);
    color: var(--dark-colour);
}

span.unconfirmed {
    background-color: var(--bright-colour);
    color: var(--dark-colour);
    opacity: 0.5;
}

span.unentered {
    background-color: var(--contrast-colour);
    color: var(--light-colour);
    opacity: 0.5;
}

span.overdue {
    background-color: var(--contrast-colour);
    color: var(--light-colour);
}

.invalid-player {
    color: var(--contrast-colour);
    font-weight: bold;
    
}