@font-face {
    font-family: 'Engschrift';
    src: url('../fonts/TGL_0-1451Eng.woff') format('woff');
}

body {
    padding-bottom: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    letter-spacing: .5px;

}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 50px;
}

p input {
    margin-top: 10px;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {

}
h1, h2, h3, h4 {
    font-family: Engschrift;
    font-weight: bold;
}

h1 {
    margin-top: 0px;
}

h3 {
    font-size: 28px;
}

h4 {
    margin-bottom:0px;
    color: #333;
}

h5 {
    margin-top: 0px;
}

a.undecorated {
  color: inherit;
  text-decoration: none;
}

a.undecorated:hover {
  color: inherit;
}

hr {
    margin-top: 10px;
    margin-bottom: 10px;
}

.header-large {
    padding-top: 5px;
    width: 100%;
}

.header-collapsed {

}

.form-field {
    padding-bottom: 20px;
}

.summary-field {
    width: 75px !important;
    background-color : #d1d1d1;
}

.expand {
    width: 100%;
}
.clear {
    clear: both;
}

/*Bootstrap overrides*/
.navbar-default {
    background-color: #FFFFFF;
    border-color: #FFFFFF;
}
.navbar-collapse {
    /*background-color: #A7CB71;*/
}

.navbar-brand {
    font-size: 15px;
    font-weight: 600;
}

.icon-success {
    color: green;
}

.icon-fail {
    color: red;
}

.list-group-item {
    border: none;
    padding: 0px;
}



.three-quarters-loader {
    position: absolute;
}

.tee-rating {
    font-size: 8px;
    font-size: .8rem;
    margin-left: 15px;
}


.category-container {
    margin-top: 20px;
}

.category-selector {
    margin-right: 5px;
}

.condition-selector {
    margin-right: 5px;
    margin-bottom: 5px;
}

.tournament-highlight {
    border: solid;
    border-width: 2px;
    padding: 10px;
    margin-top: 20px;
}

.tournament-highlight h3, h2  {
    margin: 5px
}

.category-section h4{
    margin-top: 0px;
}

/*Course Finder*/

.finder-tabs {
    font-size: 10px;
    margin-top: 1px;
}

/*Homepage*/
.story-highlight {
    max-width: 65px;
    font-size: .85em;
    display:inline;
}

.header-image {
    width: 100%;
}

.header-title {
    position: absolute;
    color: #ffffff;
    font-size: 2.5em;
    font-family: Engschrift;
    position: absolute;
    top: 0;
    left: 0;  
    /*transform: translate(-50%, -50%);*/
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 5px;
    text-shadow: 3px 3px 3px #333333;
}

.story-feature {
    position: relative;
    /*max-width: 567px;
    display: inline;
    float: left;
    margin-right: 15px;*/
}

.icon {
    display:inline;
    float:left;
    margin-right:5px;
}

.bottom-highlight {
    clear: both;
    padding-top: 20px;
    position:relative;
}

.main-content {
    padding-top:20px;
}

.right-rail-ad {
    padding-top: 20px;
}

.first-section-callout {
    float:left;
    display: inline;
    width: 175px;
    margin-right: 5px;
}
.section-callout {
    float:left;
    display: inline;
    width: 165px;
    margin-right: 10px;
}

.challenge-highlight {
    float: left;
    display: inline;
    width:533px;
}
.large-highlight {
    width:250px; 
    display:inline; 
    float:left;
    margin-right: 15px;
}
.callout-container {
    width: 533px;
}
.small-icon {
    width: 20px;
    display:inline;
    float:left;
    margin-right: 10px;
}
h4 span {
    margin-right: 10px;
}
/*Article*/
.byline {
    float: left;
    font-weight: bold;
    font-size: 12px;
}

.social-icons {
    float: right;
    width: 60px;
    height: 60px;
}

.article-hero {
    padding-bottom: 20px;
}

.article-headline {
    font-family: Engschrift;
    font-weight: bold;
    font-size: 42px;
}

.article-subheadline {
    font-family: Engschrift;
    font-style: italic;
    font-size: 24px;
}

.related-article-section {
    margin-top: 30px;
}

.related-article {
    margin-bottom: 20px;
    color: #ffffff;
}

/*Score*/

.scoreColumnLabel {
    width:200px;
}

.scoreColumn {
    width: 40px;
    text-align: center;
}

.table-rating {
    font-size: .7em;
}

.scoreheader {
    display: inline;
    width: 100%;
}
.course-container {
    position:relative;
    display: inline-block;
    width: 100%;
    max-width: 1090px;
}

.course-list-item {
    border: 1px;
    border-style: solid;
    border-color: #cccccc;
    /*border-radius: 5px;*/
    padding: 5px;
    margin-top: 5px;
    box-shadow: 1px 1px 1px #888888;
    cursor: pointer; /* added: these are now real click targets (see dh-course.js fix #5) */
}

.course-list-item-selected {
    background-color: #e6e6e6;
}

.big-score {
    font-size: 64px;
    font-weight: bold;
    line-height: 1;
}
.round-details{
    width: 90%;
    display: inline-block;
}
.course-name {
    font-size: 28px;
    font-weight: bold;
    /*display:inline-block;*/ 
    vertical-align:bottom;
}

.handicap {

}
.round-date {
    font-size: 20px;
    font-weight: bold;
    /*display:inline-block;*/ 
    vertical-align:bottom;
}
.total-column {
    width: 50px;
    text-align: center;
}

.wide-form {
    width: 200px;
    background-color : #d1d1d1;
}

.rowheader {
    font-weight: bold;
    text-align: right;
    padding-right: 20px;
}

.scorecardTable {
    margin-bottom: 10px;
    text-align:center;
}

.scorecardTable input{
    padding: 6px 6px;
    width: 40px;
}

.scorecardfairway{
    width:40px;
    padding: 0px;
}

.courseSelector {
    width: 200px;
}

.narrow-container {
    width: 30%;
    margin-right: auto;
    margin-left: auto;
}

inline-heading {
    display: inline;
}

.legendsquare {
    border: 1px solid #666666;
    width: 15px;
    height: 15px;
    float: left;
    background-color: #ffffff;
}

.color-legend {
    height: 25px; 
    text-align: center;
    margin-top: 10px;
    display: inline-block;
}

/* FIXED (2026): recolored to the site's own porcelain-blue/gold brand palette (see
   dh-theme.css's --dh-porcelain/--dh-gold tokens) instead of the legacy site's generic
   blues/oranges - same under-par-blue/over-par-gold structure as before ("similar to what is
   there now"), just off different points on the color wheel so it actually matches the rest of
   the page. Intensity still scales with how far from par: darkest at the extremes (Albatross,
   Other), lightest right next to Par on either side (Birdie, Bogey). */
.color-albatross {
    background-color: #1e3a5f; /* == --dh-porcelain */
}

.color-eagle {
    background-color: #3f6390;
}

.color-birdie {
    background-color: #7fa4c9;
}

.color-par {
    background-color: #eee;
}

.color-bogey {
    background-color: #d9b871;
}

.color-double {
    background-color: #b98d3e; /* == --dh-gold */
}

.color-other {
    background-color: #8f6c2e; /* == --dh-gold-hover */
}

/* FIXED (2026): .edit-controls used to float:right inside a much wider Bootstrap column,
   landing well past the score table's own right edge. It's now a plain block inside
   .table-pin-wrap (see that class below), which is exactly as wide as the table - so
   text-align: right here is enough to pin the icons flush with the table's right edge,
   below it, without ever extending past the table's left edge. Grid placement (column 1,
   row 3) keeps it under the table and out of the sidebar's column. */
.edit-controls {
    text-align: right;
    margin-top: 10px;
    grid-column: 1;
    grid-row: 3;
}

.edit-icon {
    padding-left: 10px;
    color:#333333;
}

/* ViewScore page (2026): a little more breathing room on the sides of the page now that the
   old "Ad Area" placeholder column is gone - about half of what that col-md-1 placeholder used
   to take up (roughly 116px in the ~1392px-wide content area at full site width), so ~60px. */
#scorecardSection {
    padding-left: 60px;
    padding-right: 60px;
}

/* Scores list page (2026): roughly 100px of margin on both sides on standard/wide monitors so
   the table isn't flush against the edges of .dh-shell. Tapers down at narrower widths so it
   doesn't eat into the table itself on tablet/mobile. */
#scoresListSection {
    padding-left: 100px;
    padding-right: 100px;
}

@media (max-width: 900px) {
    #scoresListSection {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media (max-width: 520px) {
    #scoresListSection {
        padding-left: 16px;
        padding-right: 16px;
    }
}

.scorecard-main {
    min-width: 0;
}

/* .table-pin-wrap is a grid with two explicit columns: column 1 (table-pin-top, the table,
   edit-controls) and column 2 (the sidebar). Each column's width is computed only from the
   items actually placed in it via grid-column below, so the sidebar sitting in column 2 can't
   widen column 1 and throw off the table-pin-top/edit-controls right-alignment to the table -
   unlike the old display: inline-block version, where anything inside it counted toward the
   wrapper's own shrink-wrapped width. */
.table-pin-wrap {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 20px;
}

.score-table {
    grid-column: 1;
    grid-row: 2;
}

/* FIXED: the sidebar used to be a flex sibling of the whole score-summary+table block, so it
   always started level with the header line above the table, not the table itself, no matter
   how its own spacing was tuned. It's grid-row: 2 now - the same row as the table (row 1 is
   .table-pin-top, row 3 is .edit-controls) - so it starts exactly where the table starts. */
.scorecard-sidebar {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
}

/* align-items: flex-end (from .row-fluid) bottom-anchors course-name against big-score, so if
   a long course name wraps to two lines, the wrap happens upward (the first line pushes up,
   the last line stays put right next to the score number) instead of pushing the block down. */
.score-summary {
    gap: 24px;
}

/* Plain font size again (this used to be an empty .handicap rule with no font-size override -
   it should look the same as it always did, not larger). */
.handicap-line {
}

/* FIXED: this used to be two stacked rows above the table (score-summary, then a separate
   handicap/date row) - no matter how their margins were tuned, the score number could never
   actually touch the table because the handicap/date row was always sandwiched in between,
   reserving its own full line of height. They're one flex row now: score-summary on the left,
   handicap+date (.table-pin-meta) pushed to the far right by justify-content: space-between.
   This single row is what's actually adjacent to the table (margin-bottom is small on purpose -
   this is the "directly on the table" line), and handicap+date still land flush with the
   table's right edge same as before. Grid placement (column 1, row 1) keeps this row above the
   table and out of the sidebar's column. */
.table-pin-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 4px;
    grid-column: 1;
    grid-row: 1;
}

/* Handicap and date sit together at the right end of .table-pin-top, close to each other but
   with a real gap - roughly what the old Bootstrap column gutters gave them - rather than
   crammed right up against each other. white-space: nowrap keeps this pair on one line even
   if .table-pin-top has to shrink for a very long course name. */
.table-pin-meta {
    display: flex;
    align-items: baseline;
    gap: 30px;
    white-space: nowrap;
}

/* 4px of left padding so the row-label column (Distance/Par/Score/etc., and the "Hole" header)
   isn't hugging the table's left border. */
.score-table td:first-child,
.score-table th:first-child {
    padding-left: 4px;
}

.share-icon {
    height: 32px;
    margin-right:10px;
}

/* Arrows-only pager for "Your scores at this course" (UserScoresForCourse component).
   Page-number links are turned off in the render options, so this only ever needs to
   style the previous/next chevrons - no blue numbered links to worry about. */
.score-pager {
    margin-top: 10px;
}

.score-pager .pagination {
    margin: 0;
}

.score-pager .pagination > li > a {
    color: #333333;
    border-color: #dddddd;
}

.score-pager .pagination > li > a:hover,
.score-pager .pagination > li > a:focus {
    color: #000000;
    background-color: #f5f5f5;
}

.margin-auto {
    margin: auto;
}

.row-fluid {
    display: flex;
    align-items: flex-end;
}

.section-callout:before {
    content:" ";
    margin:0 -15px;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #666666;
}
input[name="searchTerm"] {
    padding-bottom: 5px;
}

.in-text-image {
    margin: 10px 10px 10px 10px;
}

  /*Fix for modal backdrop being over thead modal form choose course*/
  .modal-backdrop {
    z-index: 0;
}

  #NewTeeInfo {
      display: none;
  }

  #submitBtn {
      margin-top: 20px;
  }

@media (min-width: 1024px) {
    .mapContainer {
        height: 950px;
    }
}