body {
    padding-top: 60px;
    padding-bottom: 20px;
    font-family: Montserrat, 'Roboto', 'Helvetica', Sans-Serif;
}

.dark-mode {
    background-color: black;
    color: white;
}

    .dark-mode:before {
        content: "";
        z-index: -1;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: inherit;
    }

.black-text {
    color: black;
}

.jumbotron {
    background-color: #fafafa;
    border: solid 2px #21467E;
}

.section-header {
    border-radius: 7px 7px 0px 0px;
    background-color: #f19d38;
    padding: 8px;
    color: #21467E;
}

.home-page-header {
    border: solid 2px #21467E;
    background-color: #f8f8f8;
    border-radius: 7px;
    padding-top: 10px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 30px;
}

.home-page-foursome {
    text-align: center;
}


hr {
    display: block;
    position: relative;
    padding: 0;
    margin: 8px auto;
    height: 0;
    width: 100%;
    max-height: 0;
    font-size: 2px;
    line-height: 0;
    clear: both;
    border: none;
    border-top: 1px solid #f19d38;
    border-bottom: 1px solid #ffffff;
}

.navbar-inverse .navbar-brand {
    background-color: #f19d38;
    color: #21467E;
}

.btn-primary,
.bg-primary,
.pagination > .active > a,
.nav-pills > li.active > a {
    background-color: #21467E;
}

.navbar-inverse {
    background-color: #f19d38;
    color: #21467E;
    border-color: #E7E7E7;
    text-transform: capitalize;
}

.navbar-brand:hover,
.navbar-brand,
.navbar-brand:focus {
    color: #21467E;
}

/* Link */
.navbar-inverse .navbar-nav > li > a {
    color: #21467E;
    text-transform: capitalize;
}

.buffer {
    margin-top: 55px;
}

.vert-border {
    border-right: 1px solid #f19d38;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
    max-width: 280px;
}

/* Carousel */
.carousel-caption p {
    font-size: 20px;
    line-height: 1.4;
}

/* Make .svg files in the carousel display properly in older browsers */
.carousel-inner .item img[src$=".svg"] {
    width: 100%;
}

/* Hide/rearrange for smaller screens */
@media screen and (max-width: 767px) {
    /* Hide captions */
    .carousel-caption {
        display: none
    }
}

.verticalTableHeader {
    text-align: center;
    white-space: nowrap;
    g-origin: 50% 50%;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    max-width: 30px;
}

    .verticalTableHeader.red {
        background-color: lightcoral;
    }

    .verticalTableHeader.blue {
        background-color: lightblue;
    }


    .verticalTableHeader p {
        margin: 0 -9999%;
        display: inline-block;
    }

        .verticalTableHeader p:before {
            content: '';
            width: 0;
            padding-top: 100%; /* takes width as reference, + 10% for faking some extra padding */
            display: inline-block;
            vertical-align: middle;
        }


viewScoresTable {
}

.viewScoresTable td {
    text-align: center
}

td.winner {
    background-color: green
}

td.tie {
    background-color: lightgreen
}

span.birdie {
    border-radius: 100%;
    width: 24px;
    height: 24px;
    border: 1px solid;
    text-align: center;
    display: inline-block;
    padding: 1px;
}

span.eagle {
    border-radius: 100%;
    width: 27px;
    height: 27px;
    border: 1px solid;
    text-align: center;
    display: inline-block;
    padding: 2px;
    margin: -3px;
    position: relative;
}

    span.eagle::before {
        content: " ";
        position: absolute;
        border-radius: 100%;
        top: 2px;
        left: 2px;
        right: 2px;
        bottom: 2px;
        border: 1px solid;
    }


span.bogey {
    width: 24px;
    height: 24px;
    border: 1px solid;
    text-align: center;
    display: inline-block;
    padding: 1px;
}

span.doubleBogey {
    width: 27px;
    height: 27px;
    border: 1px solid;
    text-align: center;
    display: inline-block;
    position: relative;
    padding: 2px;
    margin: -3px
}

    span.doubleBogey::before {
        content: " ";
        position: absolute;
        top: 2px;
        left: 2px;
        right: 2px;
        bottom: 2px;
        border: 1px solid;
    }

.lockedWeek {
    float: right;
}

.unlockedWeek {
    float: right;
}

.input-label {
    font-weight: bold;
    float: right;
}

.radio-group label {
    overflow: hidden;
}

.radio-group input {
    /* This is on purpose for accessibility. Using display: hidden is evil.
    This makes things keyboard friendly right out tha box! */
    height: 1px;
    width: 1px;
    position: absolute;
    top: -20px;
}

.radio-group .not-active {
    color: #3276b1;
    background-color: #fff;
}

.capped {
    background-color: rgba(33,70,126, 0.3)
}

.included {
    background-color: rgba(241,157,56, 0.3)
}

.bg-birdie {
    background-color: #dff0d8;
}

.bg-eagle {
    background-color: #fcf8e3;
}

.bg-bogey {
    background-color: #f2dede;
}

.bg-double {
    background-color: #dca7a7;
}

.tmargin {
    margin-top: 20px;
}

td.red {
    background-color: lightcoral;
}

td.blue {
    background-color: lightblue;
}

.chat {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .chat li {
        margin-bottom: 10px;
        padding-bottom: 5px;
        border-bottom: 1px dotted #B3A9A9;
    }

        .chat li .chat-body p {
            margin: 0;
            color: #777777;
        }

    .panel .slidedown .glyphicon, .chat .glyphicon {
        margin-right: 5px;
    }

.panel-body {
    overflow-y: scroll;
    height: 250px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}

.schedule-standings {
    font-size: 10pt;
}

#center {
    text-align: center;
}


.video-thumbnail-wrapper {
    position: relative;
    display: inline-block;
    cursor: pointer;
    max-width: 150px;
}

    .video-thumbnail-wrapper .chat-thumbnail {
        display: block;
        width: 100%;
        border-radius: 5px;
    }

.play-icon-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}