/* Global Settings */
:root {
    --color: #C62828;
    --color-text: white;
    --color-secondary: #212121;
    --color-secondary-text: white;
    --color-sidebar-menu: #212121;
    --color-sidebar-menu-text: white;
    }

header .header-bkgrd.with-header-image{
    background-image: url('/images/106g-halloween.jpg');
}


/* Paddings & margins */
.bdl-pad-5 {padding: 5px;}
.bdl-pad-10 {padding: 10px;}
.bdl-pad-20 {padding: 20px;}
.bdl-pad-l-5 {padding-left: 5px;}
.bdl-pad-l-10 {padding-left: 10px;}
.bdl-pad-r-10 {padding-right: 10px;}
.bdl-pad-t-10 {padding-top: 10px;}
.bdl-pad-lr-10 {padding-left: 10px; padding-right: 10px;} 
.bdl-pad-tb-5 {padding-top: 5px; padding-bottom: 5px;}
.bdl-pad-tb-0 {padding-top: 0px; padding-bottom: 0px !important;}

.bdl-mrg-b-2 {margin: 2px;}
.bdl-mrg-b-3 {margin: 3px;}
.bdl-mrg-b-4 {margin-bottom: 4px;}
.bdl-mrg-b-10 {margin-bottom: 10px;}
.bdl-mrg-b-20 {margin-bottom: 20px;}
.bdl-mrg-b-30 {margin-bottom: 30px;}
.bdl-mrg-t-10 {margin-top: 10px;}
.bdl-mrg-t-20 {margin-top: 20px;}
.bdl-mrg-t-30 {margin-top: 30px;}
.bdl-mrg-lr-30 {margin-left: 30px; margin-right: 30px;}

.dbl-mrg-auto {margin:auto;}

/* text */
.bdl-txt-bold {font-weight: bold;}
.bdl-txt-italic {font-style: italic;}

.bdl-txt-black {color: black;}
.bdl-txt-darkgrey {color: rgb(71, 71, 71);}
.bdl-txt-grey {color: grey;}
.bdl-txt-white {color: white;}
.bdl-txt-facebookblue {color: #0866ff}
.bdl-txt-red {color: red;}
.bdl-txt-redshade {color: #c62828;}
.bdl-txt-darkred {color: rgb(128, 0, 0);}
.bdl-txt-darkgreen {color: rgb(0, 128, 0);}

.bdl-txt-smaller {font-size: 0.6em;}
.bdl-txt-small {font-size: 0.8em;}
.bdl-txt-medium {font-size: 1.25em;}
.bdl-txt-large {font-size: 1.5em;}
.bdl-txt-larger {font-size: 2em;}

.bdl-txt-aligncenter {text-align: center;}
.bdl-txt-alignleft {text-align: left;}
.bdl-txt-alignright {text-align: right;}

/* widths and heights */
.bdl-width-f14 {width: 14px;}
.bdl-width-f25 {width: 25px;}
.bdl-width-f36 {width: 36px;}
.bdl-width-f50 {width: 50px;}
.bdl-width-f75 {width: 75px;}
.bdl-width-f100 {width: 100px;}
.bdl-width-f250 {width: 250px;}
.bdl-width-p100 {width: 100%;}
.bdl-width-p50 {width: 50%;}


.bdl-width-pmin50 {min-width: 50% !important;}

.bdl-height-f24 {height: 24px;}
.bdl-height-f140 {height: 140px;}

.bdl-width-v10 {width: 10vw;}
.bdl-width-v25 {width: 25vw;}
.bdl-height-v25 {height: 25vw;}

.bdl-width-p100 {width: 100%;}

.bdl-width-max200 {max-width: 200px;}
.bdl-width-max500 {max-width: 500px;}
.bdl-height-max200 {max-height: 200px;}

.bdl-width-min150 {min-width: 150px;}

/* Borders */
.bdl-outsetborder {border: 1px outset black;}
.bdl-border-grid {border: 1px solid #00000066;}
.bdl-solidborder-darkgrey {border: 1px solid darkgrey;}
.bdl-solidborder-white {border: 1px solid white;}
.bdl-solidborder-black {border: 1px solid black;}
.bdl-solidborder-black-2 {border: 2px solid black;}
.bdl-leftborder {border-left: 1px solid black;}
.bdl-radius-5 {border-radius: 5px;}
.bdl-radius-tl-5 {border-radius: 5px 0 0 0;}
.bdl-radius-tr-5 {border-radius: 0 5px 0 0;}
.bdl-radius-bl-5 {border-radius: 0 0 0 5px;}
.bdl-radius-br-5 {border-radius: 0 0 5px 0;}
.bdl-radius-tlr-5 {border-radius: 5px 5px 0 0;}
.bdl-radius-blr-5 {border-radius: 0 0 5px 5px;}
.bdl-border-b-black {border-bottom: 1px solid black;}
.bdl-border-b-lightgrey {border-bottom: 1px solid #e8e8e8;}

/* Background Colors */
.bdl-bg-black {background-color: black;}
.bdl-bg-grey {background-color: grey;}
.bdl-bg-lightgrey {background-color: lightgrey;}
.bdl-bg-lightgrey:hover {background-color: #80ff80;}
.bdl-bg-lightergrey {background-color: #f5f5f5;}

.bdl-bg-lightgreen {background-color:  #80ff80;}
.bdl-bg-lightred {background-color:  #ff8080;}
.bdl-bg-yellow {background-color:  #ffff00;}
.bdl-bg-lightergreen {background-color: #d9ffe9;}
.bdl-bg-darkred {background-color: #C62828;}
.bdl-bg-green {background-color: #148A00;}


/* scrolling and overflows */
.bdl-overflowx-auto {overflow-x: auto;}

/* Flex and Grid */
.bdl-flex {display: flex;}
.bdl-flex-column {display: flex; flex-direction: column;}
.bdl-flex-valign {align-items: center;}
.bdl-flex-baseline {align-items: baseline;}
.bdl-flex-halign {justify-content: center;}
.bdl-gap-5 {gap: 5px;}
.bdl-gap-10 {gap: 10px;}
.bdl-gap-20 {gap: 20px;}
.bdl-gap-30 {gap: 30px;}
.bdl-gap-40 {gap: 40px;}
.bdl-gap-50 {gap: 50px;}
.bdl-flex-wrap {flex-wrap: wrap;}
.bdl-flex-noshrink {flex-shrink: 0;}
.bdl-flex-justify {justify-content: space-between;}
.bdl-flex-center {justify-content: center;}
.bdl-flex-grow-1 {flex-grow: 1;}
.bdl-displayblock {display:block;}
.bdl-grid {display: grid;}


/* styles */
.bdl-shadow {box-shadow: 3px 3px 3px #00000044;}
.bdl-mousepointer:hover {cursor: pointer;}

/* displays */
.bdl-displaynone {display:none;}

/* Win / Lose */
.bdl-formbar-blank {width: 16px; height: 3px; }
.bdl-formbar-win {width: 16px; height: 3px; background-color: #00bb00;}
.bdl-formbar-lose {width: 16px; height: 3px; background-color: #bb0000;}

/* For use in pop images */
/* The Modal (background) */
.bdl-img-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 9999; /* Sit on top */
    padding-top: 20px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
    }

    /* The Close Button */
    .bdl-img-close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.15s;
    }

    /* Modal Content (image) */
    .bdl-img-modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    }

    /* Add Animation */
    .bdl-img-modal-content, #caption {  
    -webkit-animation-name: bdl-img-zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: bdl-img-zoom;
    animation-duration: 0.3s;
    }

    @-webkit-keyframes bdl-img-zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
    }

    @keyframes bdl-img-zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
    }

    .bdl-img-close:hover,
    .bdl-img-close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
    }

    /* 100% Image Width on Smaller Screens */
    @media only screen and (max-width: 700px){
    .bdl-img-modal-content {
        width: 100%;
    }
    }

/* Win/Lose 'graphics' */
.bdl-wl-sep {
    height: 8px;
    width: 2px;
    margin: 1px;
    background-color: black;
}

.bdl-wl-win {
    height: 8px;
    width: 8px;
    margin: 1px;
    background-color: green;
    border-radius: 50%;
}

/* Fixtures Scorecard and Data menus */
.bdl-relative { position: relative; }
.bdl-score-menu {
    position: absolute;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
    z-index: 1000;
    top: -15px;
    left: 50px;
}
.bdl-hidden { display: none; }
.bdl-score-menu div {
    cursor: pointer;
    padding: 5px;
}
.bdl-score-menu div:hover {
    background-color: #f0f0f0;
}


/* Player Cards */
.playercontainer {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
.player {
    width: 50%;
    min-width: 600px;
    margin: auto;
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    flex: 1;
    justify-content: center;
    align-items: center;
}
.playerimage {
    height: 300px;
    width: 200px;
    min-width: 200px;
    background-image: url('/images/playercards/lukelittler.jpg');
    background-repeat: no-repeat;
    background-position: center;
}
.playerinfo {
    margin: 10px;
    width: 100%;
    height: 300px;
    background-color: #5e5e5e;
}

@media screen and (max-width: 768px) {
    .player {
        flex-direction: column;
        width: 90%;
        min-width: 200px;
    }
   
    .playerimage {
        width: 100%;
    }
   
    .playerinfo {
        width: 100%;
    }
}

.bdl-matchup-modal-content {
    background-color: white;
    margin: auto;
    padding: 10px;
    width: 90%;
    max-width: 1200px;
    max-height: 80vh;
    overflow-y: auto;
    border-radius: 5px;
}

.bdl-matchup-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}