.night-option {
  top: 5px;
}

.main-comp-container {
  position: relative;
  /* background-color: red; */
  margin-bottom: 25px;
}

.main-container {
  position: relative;
  float: left;
  width: calc(77.5%);
  border-right: var(--container-border-base);
  padding: 2.5px;
  /* background-color: yellow; */
  /* margin-left: -15px; */
}

.comp-1 {
  position: relative;
  width: 100%;
  height: 150px;
}

.part-1 {
  position: absolute;
  height: 100%;
  width: 160px;
  left: 0px;
}

.part-2 {
  position: absolute;
  height: auto;
  bottom: 0px;
  /* height: 100%; */
  width: calc(100% - 160px);
  left: 160px;
  /* background-color: red; */
}

.summary-row {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: left;
  align-items: center;
}

.name-summary-row {
  margin-top: 10px;
  border-bottom: var(--datarow-border);
  font: 14px var(--font);
  color: var(--font-color-base);
  font-weight: bold;
  padding: 3px;
}

.name-summary-row > img {
  height: 15px; width: auto; margin-right: 2.5px;
}

.general-summary-row {
  font: 11px var(--font);
  color: var(--font-color-base);
  padding: 2.5px;
  padding-left: 5px;
}

.point-perc-bar {
  position: relative;
  float: left;
  height: 12.5px;
  width: 75px;
  border: var(--container-border-base);
  /* border: 1px solid var(--font-color-base); */
  /* background-color: var(--container-color-base); */
}

.point-per-bar-inner {
  position: absolute;
  height: 100%;
  left: 0px;
  top: 0px;
  background-color: var(--olive);
}

.last-summary-row {
  margin-bottom: 10px;
}

.boldyy {
  font-weight: bold;
}

.win-record {
  font-weight: bold;
  color: var(--olive);
}

.loss-record {
  font-weight: bold;
  color: var(--red);
}

.general-summary-row > img {
  height: 13px; width: auto; margin-left: 2.5px;
}

.general-summary-row > .fa-circle {
  font-size: 4px;
  margin-right: 4px;
}


.img-container {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 0px;
  bottom: 0px;
  height: 130px;
  width: calc(100% - 0px);
  /* background-color: var(--container-color-base); */
}

.player-comp-img {
  width: 120%;
  margin-top: 5px;
  height: auto;
  position: absolute;
  bottom: 0px;
}

.player-comp-img-void {
  width: 60%;
  margin-top: 5px;
}

.comp-2 {
    position: relative;
    width: 100%;
    border-top: var(--container-border-base);
    border-color: var(--font-color-base);
    margin-top: 0px;
    /* padding: 5px; */
}

.comp-3 {
    position: relative;
    width: 100%;
    border-top: var(--container-border-base);
    border-color: var(--font-color-base);
    margin-top: 15px;
    /* padding: 5px; */
}

.comp-title {
  position: absolute;
  width: 100%;
  top: -10px;
  height: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  /* top: 0px; */
}

.comp-title-inner {
  padding: 0px;
  padding-left: 5px;
  padding-right: 5px;
  font: 8px var(--font);
  background-color: var(--black-base);
  color: var(--font-color-base);
  font-weight: bold;
}

.cup-summary-wrapper {
  position: relative;
  border-bottom: var(--container-border-base);
}

.cup-summary-row, .cup-summary-header, .match-row-cup > .cup-summary-host {
  position: relative;
  width: 100%;
  height: 25px;
  /* background-color: red; */
  font: 11px var(--font);
  color: var(--font-color-base);
  cursor: pointer;
}

.cup-summary-header {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0px;
  background-color: var(--black-base);
  z-index: 1;
}

.match-row-cup > .cup-summary-host {
  justify-content: center;
}

.cup-summary-row:hover {
  background-color: var(--container-color-base);
}

.cup-summary-header {
  height: 20px;
  margin-top: 2.5px;
  border-bottom: var(--container-border-base);
  border-bottom-width: 1.5px;
}

.cup-summary-div, .cup-summary-head {
  position: absolute;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cup-summary-row-expanded > .cup-summary-div {
  font-weight: bold !important;
  background-color: var(--container-color-base);
}

.cup-summary-head {
  font: 9px var(--font);
  color: var(--font-color-faint-2);
}

.cup-summary-host {
  left: 0px;
  width: calc(20% - 0px);
  justify-content: left;
  padding-left: 5px;
}

.cup-summary-age {
  left: 20%;
  width: 7.5%;
}

.cup-summary-select {
  left: 27.5%;
  width: 15%;
}

.cup-summary-record {
  left: 42.5%;
  width: 17.5%;
}

.cup-summary-point {
  left: 60%;
  width: 17.5%;
  font-size: 9.5px;
}

.cup-summary-result {
  left: 77.5%;
  width: 17.5%;
}

.cup-summary-expand {
  right: 0px;
  width: 5%;
  justify-content: right;
  padding-right: 10px;
}

.cup-summary-format, .cup-summary-partner {
  left: 0px;
  width: calc(22.5% - 0px);
  justify-content: left;
  padding-left: 5px;
}

.cup-summary-matches {
  left: 22.5%;
  width: 20%;
}

.cup-summary-record-2 {
  left: 42.5%;
  width: 17.5%;
}

.cup-summary-point-2 {
  left: 60%;
  width: 17.5%;
  font-size: 9.5px;
}

.select-auto {
  font-size: 9px;
  color: var(--olive);
}

.select-pick {
  font-size: 9px;
  color: var(--blue);
}

.result-win {
  color: var(--olive);
}

.result-loss {
  color: var(--red);
}

.score {
  position: relative;
  color: var(--font-color-base);
  font-size: 9px;
  margin-left: 5px;
  top: -0.5px;
}

.summary-div-year {
  /* font-weight: bold; */
}

.cup-summary-host > img {
  height: 15px; width: auto; margin-right: 2.5px; margin-left: 5px;
}

.matches-outer {
  position: relative;
  /* background-color: rgba(255, 220, 0, 0.15); */
  border-top: var(--container-border-base);
  /* border-bottom: var(--container-border-base); */
}

.match-hidden {
  display: none;
}

.match-row {
  position: relative;
  width: 100%;
  height: 35px;
}

.match-row-cup {
  height: 22.5px;
  background-color: rgba(255, 220, 0, 0.3) !important;
  /* border-top: var(--container-border-base); */
}

.match-row-0 { background-color: rgba(255, 220, 0, 0.1); }
:root[color-mode="dark"] .match-row-0 { background-color: #162119; }


.match-row-1 { background-color: rgba(255, 220, 0, 0.2); }
:root[color-mode="dark"] .match-row-1 { background-color: #18261c; }

:root[color-mode="dark"] .match-row-cup { background-color: #1f3324 !important; }

.match-row-singles {
  height: 35px;
}

.session-name-div, .session-partner-div, .session-opponent-div, .session-result-div {
  position: absolute;
  font: 11px var(--font);
  color: var(--font-color-base);
  height: 100%;
  width: 25%;
  display: flex;
  justify-content: left;
  font-weight: bold;
  align-items: center;
  padding-left: 5px;
  padding-top: 12px;
}

.session-name-div-cup {
  padding-top: 0px !important;
  /* padding-left: 15px; */
}

.session-partner-div {
  justify-content: center;
  font-weight: normal;
  left: 25%;
  width: 25%;
  padding-top: 12px;
}

.session-opponent-div {
  justify-content: center;
  font-weight: normal;
  left: 50%;
  width: 25%;
  padding-top: 12px;
}

.session-result-div {
  justify-content: center;
  font-weight: normal;
  left: 75%;
  width: 25%;
  /* font-weight: bold; */
  padding-top: 12.5px;
}

.session-partner-div > img, .session-opponent-div > img, .cup-summary-partner > img {
  height: 13px;
  width: auto;
  margin-right: 2.5px;
}

.session-partner-div > a, .session-opponent-div > a, .cup-summary-partner > a {
  color: inherit;
}

.small-and {
  color: var(--font-color-faint-2);
  font-size: 8px;
  font-weight: normal;
}

.session-numby, .session-partner-title, .session-result-binary {
  position: absolute;
  top: 7.5px;
  font-size: 9px;
  color: var(--olive);
  font-weight: normal;
}

.session-partner-title {
  top: 5px;
  font-weight: normal;
  color: var(--font-color-faint-2);
  opacity: 0.75;
}

.session-result-binary {
  top: 6px;
  font-size: 8.5px;
  font-weight: bold;
}

.result-div-won > .session-result-binary { color: var(--olive); }
.result-div-lost > .session-result-binary { color: var(--red); }
.result-div-halved { padding-top: 0px; color: var(--font-color-faint-2); font-size: 9px; }

.match-row-singles > .session-name-div {
  padding-top: 9px;
}

.match-row-singles > .session-name-div > .session-numby {
  top: 3.5px;
}

.match-row-singles > .session-partner-div {
  padding-top: 0px;
}

.main-sidebar {
  position: relative;
  float: right;
  width: calc(22.5%);
  padding: 5px;
  /* height: 100px; */
  /* margin-right: -15px; */
}

.side-inner {
  position: sticky;
  top: 5px;
  /* background-color: red; */
 }

 .side-title {
   position: relative;
   width: 100%;
   font: 10px var(--font);
   background-color: var(--container-color-base);
   border: var(--container-border-base);
   padding: 2px;
   color: var(--font-color-base);
   font-weight: bold;
 }

 .new-side-title {
   margin-top: 15px;
 }

 .side-dg-points {
   font: 11px var(--font);
   /* font-weight: bold; */
   color: var(--font-color-faint-2);
   line-height: 1.45;
   position: relative;
   width: 100%;
   padding: 5px;
 }

 .side-dg-points:hover {
   color: var(--font-color-base);
   /* font-weight: bold; */
 }

 .side-option {
   position: relative;
   width: 100%;
   font: 10px var(--font);
   padding-left: 5px;
   color: var(--font-color-faint-2);
   /* font-weight: bold; */
   height: 20px;
   display: flex;
   justify-content: left;
   align-items: center;
 }

 .side-option-topp {
   color: var(--font-color-base);
   border-bottom: var(--datarow-border);
 }

 .side-option-topp > a {
   color: inherit;
 }

 .side-option-section {
   cursor: pointer;
   -webkit-transition: all 200ms ease-out;
   -moz-transition: all 200s ease-out;
   -o-transition: all 200s ease-out;
   transition: all 200ms ease-out;
 }

 .side-option-section:hover {
   padding-left: 10px;
 }

 .current-side-option {
   color: var(--font-color-base);
   font-size: 10px;
   padding-left: 10px;
   cursor: default;
   pointer-events: none;
 }

 .side-option-hidden {
   display: none;
 }

 .side-option > img {
   height: 13px; width: auto; margin-right: 2px;
 }

 .top-guy-points {
   position: absolute;
   font-size: 8px;
   font-weight: bold;
   right: 0px;
   padding-right: 5px;
 }

 .side-option-show {
   color: var(--blue);
   cursor: pointer;
   justify-content: center;
 }

 .side-option-show:hover {
   background-color: var(--container-color-base);
 }

 .ryder-table-header {
   position: relative;
   margin-top: 10px;
   font: 18px var(--font);
   color: var(--font-color-base);
   width: 100%;
   border-bottom: var(--container-border-base);
   display: flex;
   justify-content: left;
   padding: 5px;
   align-items: center;
 }

 .ryder-table-options {
   position: relative;
 }

 .player-search-container {
   top: unset;
   right: 2px;
   bottom: 2px;
 }

 .ryder-table-options > .ryder-table-options-1, .ryder-table-options > .ryder-table-options-2 {
   position: relative;
   height: 25px;
   padding: 2.5px;
   width: 100%;
   display: flex;
   justify-content: left;
   align-items: center;
 }

 .ryder-table-options-2 {
   margin-top: -2.5px;
 }

 .ryder-option {
   float: left;
   display: flex;
   height: 20px;
   justify-content: center;
   align-items: center;
   border: var(--container-border-base);
   font: 10px var(--font);
   /* font-weight: bold; */
   color: var(--font-color-faint-2);
   margin-left: 2.5px;
   margin-right: 2.5px;
   padding: 2.5px;
   cursor: pointer;
 }

 .ryder-option > img {
   height: 13px;
   width: auto;
 }

 .ryder-option:hover {
   color: var(--font-color-base);
 }

 .ryder-option-selected {
    color: var(--font-color-base);
    background-color: var(--container-color-base);
 }

 .ryder-option-selected > .fa-check {
    color: var(--olive);
 }

 .ryder-head {
   position: -webkit-sticky; /* Safari */
   position: sticky;
   top: 0px;
   background-color: var(--black-base);
   z-index: 1;
   height: 22.5px;
   width: 100%;
   border-top: var(--container-border-base);
   border-bottom: var(--container-border-base);
   border-bottom-width: 1.5px;
 }

 .ryder-datahead, .ryder-data {
   position: absolute;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
   font: 11px var(--font);
   color: var(--font-color-faint-2);
 }

 .ryder-datahead {
   cursor: pointer;
 }

 .sorted {
   color: var(--font-color-base);
   border: none;
 }

 .ryder-datarow {
   position: relative;
   height: 25px;
   width: 100%;
   border-bottom: var(--datarow-border);
 }

 .ryder-datarow-hidden, .hidden-row {
   display: none;
 }

 .ryder-datarow:hover {
   background-color: var(--datarow-hover);
 }

 .ryder-data {
   font-size: 12px;
   color: var(--font-color-base);
 }

 .player-col {
   width: 25%;
   justify-content: left;
   padding-left: 5px;
 }

 .matches-col {
   left: 25%;
   width: 10%;
 }

 .record-col {
   left: 35%;
   width: 17.5%;
 }

 .points-col {
   left: 52.5%;
   width: 17.5%;
 }

 .points-perc-col {
   left: 70%;
   width: 17.5%;
 }

 .pm-col {
   right: 0px;
   width: 12.5%;
 }

 .player-col > img {
   height: 13px;
   width: auto;
 }

 .player-col > a {
   color: inherit;
 }

 .points-inner {
   position: absolute;
   width: 80%;
   height: 80%;
   border-left: 1px solid var(--font-color-base);
   display: flex;
   justify-content: center;
   align-items: center;
 }

 .points-bar {
   position: absolute;
   display: flex;
   justify-content: center;
   align-items: center;
   left: 0px;
   height: 80%;
   border-top-right-radius: 2px;
   border-bottom-right-radius: 2px;
 }

 .points-bar-europe {
     background-color: var(--blue-light);
     border: 1px solid var(--blue-light);
     border-left: none;
 }

 .points-bar-intl {
   background-color: rgba(60, 137, 63, 0.7);
   border: 1px solid rgba(60, 137, 63, 0.7);
   border-left: none;
 }

 .points-bar-usa {
   background-color: var(--red-light);
   border: 1px solid var(--red-light);
   border-left: none;
 }

 .points-bar-text {
   position: absolute;
   left: calc(100% + 2.5px);
   /* color: rgb(250,250,250); */
   font-size: 10px;
}

.points-bar-text-inside {
  left: unset;
  right: calc(2.5px);
  /* color: rgb(250,250,250); */
}

 .points-perc-inner {
   position: absolute;
   width: 70%;
   margin-left: 30px;
   height: 13px;
   border: var(--container-border-base);
   display: flex;
   justify-content: center;
   align-items: center;
 }

 .points-perc-text {
   position: absolute;
   right: calc(100% + 5px);
   font-size: 10px;
 }

 .points-perc-barr {
   position: absolute;
   left: 0px;
   height: 100%;
   top: 0px;
   background-color: var(--olive);
   opacity: 0.9;
 }

 .down-sorty, .up-sorty {
   display: none;
 }

 .back-to-list {
   position: absolute;
   display: flex;
   justify-content: center;
   align-items: center;
   padding:1px;
   font: 10px var(--font);
   z-index: 1;
 }

 .pm-col {
   /* font-size: 10px; */
 }

 .pm-pos {
   color: var(--olive);
   /* font-weight: bold; */
 }

 .pm-neg {
   color: var(--red);
   /* font-weight: bold; */
 }

 @media (max-width: 1000px) {

   .search-instructions { display: none; }

   .main-container {
     float: unset;
     width: 100%;
     border-right: none;
     padding: 1px;
     border-bottom: var(--container-border-base);
     border-color: var(--font-color-base);
     margin-bottom: 2px;
   }

   #opponent-history.comp-3 {
     margin-bottom: 10px;
   }

   .main-sidebar {
     float: unset;
     width: 100%;
     position: relative;
     border-top: var(--container-border-base);
     border-color: var(--font-color-base);
     padding-top: 10px;
   }

 }

 .international-flagger {
   height: 11px !important;
 }

 @media (max-width: 768px) {


   .comp-1 {
     height: 110px;
   }

   .back-to-list {
     top: 1px;
     font-size: 8.5px;
   }

   .part-1 {
     width: 120px;
   }

   .part-2 {
     width: calc(100% - 120px);
     left: 120px;
     bottom: -2.5px;
   }

   .name-summary-row {
     margin-top: 10px;
     font-size: 11px;
     padding: 2px;
   }

   .name-summary-row > img {
     height: 13px; margin-right: 2px;
   }

   .general-summary-row {
     font-size: 9px;
     padding: 1.5px;
     padding-left: 3px;
   }

   .point-perc-bar {
     height: 10px;
     width: 50px;
   }

   .last-summary-row {
     margin-bottom: 10px;
   }

   .general-summary-row > img {
     height: 11px; margin-left: 2px;
   }

   .general-summary-row > .fa-circle {
     font-size: 3px;
     margin-right: 2px;
   }


   .img-container {
     height: 100px;
   }

   .comp-3 {
       margin-top: 10px;
   }


   .cup-summary-row, .cup-summary-header, .match-row-cup > .cup-summary-host {
     height: 22.5px;
     font-size: 9.5px;
   }

   .cup-summary-header {
     height: 17.5px;
     margin-top: 2px;
   }

   .cup-summary-head {
     font-size: 8.5px !important;
   }

   .cup-summary-host {
     width: calc(27.5% - 0px);
     padding-left: 1px;
   }

   .cup-summary-age {
     left: 25%;
     width: 10%;
   }

   .cup-summary-select {
     left: 35%;
     width: 10%;
   }

   .cup-summary-record {
     left: 45%;
     width: 20%;
   }

   .cup-summary-point {
     left: 65%;
     width: 20%;
     font-size: 8px;
   }

   .cup-summary-result {
     left: 85%;
     width: 10%;
   }

   .cup-summary-expand {
     padding-right: 5px;
   }

   .cup-summary-format, .cup-summary-partner {
     width: calc(27.5% - 0px);
     justify-content: left;
     padding-left: 1px;
   }

   .cup-summary-matches {
     left: 27.5%;
     width: 17.5%;
   }

   .cup-summary-record-2 {
     left: 45%;
     width: 20%;
   }

   .cup-summary-point-2 {
     left: 65%;
     width: 20%;
     font-size: 8px;
   }

   .select-auto {
     font-size: 8px;
   }

   .select-pick {
     font-size: 8px;
   }

   .result-win {
     color: var(--olive);
   }

   .result-loss {
     color: var(--red);
   }

   .summary-div-year {
     /* font-weight: bold; */
   }

   .cup-summary-host > img {
     height: 12px; margin-right: 2px; margin-left: 3px;
   }

   .match-row {
     height: 30px;
   }

   .match-row-cup {
     height: 20px;
   }

   .match-row-singles {
     height: 30px;
   }

   .session-name-div, .session-partner-div, .session-opponent-div, .session-result-div {
     font-size: 9.5px;
     width: 17.5%;
     padding-left: 2.5px;
     padding-top: 7px;
   }

   .session-name-div-cup {
     padding-top: 0px !important;
   }

   .session-partner-div {
     left: 17.5%;
     width: 27.5%;
     padding-top: 7px;
   }

   .session-opponent-div {
     left: 45%;
     width: 40%;
     padding-top: 7px;
   }

   .session-result-div {
     left: 85%;
     width: 15%;
     padding-top: 7px;
   }

   .session-partner-div > img, .session-opponent-div > img, .cup-summary-partner > img {
     height: 11px;
     margin-right: 2px;
   }

   .small-and {
     font-size: 6px;
   }

   .session-numby, .session-partner-title, .session-result-binary {
     top: 5px;
     font-size: 7px;
   }

   .session-partner-title {
     top: 4px;
   }

   .session-result-binary {
     top: 4px;
     font-size: 7px;
   }

   .result-div-halved { padding-top: 0px; font-size: 7px; }

   .match-row-singles > .session-name-div {
     padding-top: 7px;
   }

   .match-row-singles > .session-name-div > .session-numby {
     top: 3.5px;
   }

   .match-row-singles > .session-partner-div {
     padding-top: 0px;
   }

   .ryder-table-header {
     margin-top: 7.5px;
     font-size: 15px;
     padding: 2.5px;
   }

   .player-search-container {
     top: unset;
     right: 1px;
     bottom: 1px;
   }

   .ryder-table-options > .ryder-table-options-1, .ryder-table-options > .ryder-table-options-2 {
     height: 20px;
     padding: 2px;
   }

   .ryder-table-options-2 {
     margin-top: -2px;
   }

   .ryder-option {
     height: 15px;
     font-size: 8.5px;
     margin-left: 2px;
     margin-right: 2px;
     padding: 2px;
   }

   .ryder-option > img {
     height: 11px;
   }


   .ryder-head {
     height: 20px;
   }

   .ryder-datahead, .ryder-data {
     font-size: 9.5px;
   }

   .ryder-datarow {
     height: 22.5px;
   }

   .ryder-data {
     font-size: 10px;
   }

   .player-col {
     width: 30%;
     justify-content: left;
     padding-left: 5px;
   }

   .matches-col {
     left: 30%;
     width: 7.5%;
   }

   .record-col {
     left: 37.5%;
     width: 17.5%;
   }

   .points-col {
     left: 55%;
     width: 17.5%;
   }

   .points-perc-col {
     left: 72.5%;
     width: 17.5%;
   }

   .pm-col {
     right: 0px;
     width: 10%;
   }

   .player-col > img {
     height: 11px;
     width: auto;
   }

   .player-col > a {
     color: inherit;
   }

   .points-bar {
     border-top-right-radius: 1px;
     border-bottom-right-radius: 1px;
   }

   .points-bar-text {
     font-size: 8px;
  }

   .points-perc-inner {
     width: 70%;
     margin-left: 30%;
     height: 12.5px;
   }

   .points-perc-text {
     right: calc(100% + 2.5px);
     font-size: 8.58px;
   }

   .ryder-table {
     margin-bottom: 5px;
   }

   .international-flagger {
     height: 9px !important;
   }

 }