/* Poppins is vendored at vendor/poppins/ and linked from index.html. The
   remote fonts.googleapis.com @import that used to be on this line left the
   whole app unstyled on a device with no network. */

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
}

/* Item B66. This used to be a blanket `*:focus { outline: none }`, which
   deleted the focus indicator for the entire app in one line. What it was
   really aiming at is the ring a browser draws after a TAP or a click, and
   `:focus-visible` is exactly that distinction: pointer focus stays silent,
   keyboard / switch-control / Bluetooth-remote focus gets a ring back.
   Without this, a golfer driving the app from a switch or an external keyboard
   had no way to tell what was selected on any screen (WCAG 2.4.7). */
*:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* Two rings, not one: a dark ring for pale surfaces and a white halo behind it
   so the indicator survives the brand-green header and the dark scrims too.
   3px, not 1px - this has to be findable at arm's length in sunlight. */
*:focus-visible {
  outline: 3px solid #14361F;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.9);
}

.wrapper {
  max-width: 100%;
  margin: 0 auto;
  background: #A0C735;
}

.top-area {
  background: url(images/bg.png);
  background-repeat: no-repeat;
  background-position: 28% top;
  background-size: cover;
  padding: 60px 0 400px;
  text-align: center;
}

.top-area >img {
  width: 120px;
}

.reg-main {
    margin-top: -364px;
    background-color: #fff;
    padding: 40px 20px;
    border-radius: 30px 30px 0 0;

}

.form-area {
}

.form-group {  
    border: none;
    border-radius: 14px;
}

.form-control {
    display: block;
    width: 100%;
    height: auto;
    padding: 20.5px 19px; 
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: #475F7B;
    background-color: #FFF;
    border: none;
    border-radius: 14px;
    -webkit-transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}


/* Item B66. #D8D8D8 on white is 1.3:1. On several screens the placeholder is
   the field's only visible name ("Phone Number" on the sign-in screen), so a
   golfer who could not read it could not tell the fields apart. #767676 is the
   lightest grey that clears 4.5:1 (WCAG 1.4.3) and still reads as placeholder
   grey rather than as entered text. */
.form-control::placeholder {
  color: #767676;
  opacity: 1;
}


.form-control:focus {
    box-shadow: none;
    border: 2px solid #A0C735;
}

/* The `outline: 0` that used to sit in the rule above applied to keyboard focus
   as well, and this selector outranks the global :focus-visible ring, so every
   text field in the app was silently unindicated. Suppress it for pointer
   focus only. */
.form-control:focus:not(:focus-visible) {
    outline: 0;
}

.intl-tel-input,
.iti{
  width: 100%;
}

.iti__selected-flag {
  padding: 6px 20px 6px 6px;
  margin: 14px;
  background: #F5F9EA;
  height: auto;
  border-radius: 6px;
  color: #A0C735;
}

.iti__flag {
  width: 20px;
}

.iti__selected-flag>.iti__flag {
	display: none;
}

.iti__arrow::after {
  content: "\f078";
  margin-left: 6px;
  width: 0;
  height: 0;
  font-family: "Font Awesome 6 Pro";
  position: absolute;
  top: 6px;
  right: 22px;
}

.iti__arrow {
  border-left: none;
  border-right: none;
  border-top: none;
}

#phone {
	padding-left: 85px !important;
	border: 2px solid #A0C735;
}

/* Item B66. White on the brand green #A0C735 is 1.96:1 - the worst contrast
   pair in the app, on the primary action of the very first screen a golfer
   sees, read in daylight. The fill is untouched, so the button still reads as
   the brand-green primary; only the ink moves, to the dark brand green the
   headers already use (6.3:1). */
.reg-main button {
	font-size: 18px;
	font-weight: 500;
	border-radius: 14px;
	padding: 12px;
	color: #1F3B08;
	background: #A0C735;
	border: none;
	width: 100%;
	/*! margin-top: 190px; */
	margin-bottom: 30px;
}

.reg-main div {
	text-align: left;
}

.reg-main h2 {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 10px;
}

.reg-main p {
  font-size: 14px;
  margin-bottom: 30px;
  color: #7a869a;
}

.reg-main h4 {
	font-size: 12px;
	font-weight: 500;
	margin-bottom: 30px;
}

/* Same problem in reverse: brand green on its own pale tint is 1.8:1, on the
   12px recovery link ("I don't have access to my old number") that a golfer
   who has lost their phone number has to find. Same hue, readable (item B66). */
.reg-main a {
	font-size: 12px;
	font-weight: 500;
	border-radius: 14px;
	padding: 17px 12px;
	color: #46630F;
	background: #F5F9EA;
	border: none;
	width: 100%;
	display: block;
	margin-bottom: 30px;
	text-decoration: none;
}

.frm-sub {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px;
  text-align: center !important;
}

/* While the on-screen keyboard is up (js/utils/keyboard-state.js marks the
   document; Android resizes the WebView, iOS shrinks the visual viewport) a
   fixed footer rides up over the very fields being typed into: on the
   sign-in screen "Next" covered the email field. For that time the submit
   block goes back into the flow, after the fields, where it can be scrolled
   to; it is fixed again the moment the keyboard closes. */
html.keyboard-open .frm-sub {
  position: static;
  padding: 24px 0 0;
}


/*phone veeryfication*/

.phn-verify {
  display: flex;
  gap: 21px;
}

.phn-verify input {
  width: 25%;
  height: 68px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
  color: #475F7B;
  background-color: #FFF;
  border: 2px solid #A0C735;
  border-radius: 14px;
  text-align: center;
}

.phn-verify input::placeholder {
  color: #D8D8D8;
}

.phn-verify input::selection {
  background: transparent;
}


/*registration*/

.reg-form label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 8px;
  text-align: left;
}

.reg-form label span {
  display: inline-block;
  width: 13px;
  height: 9px;
  background: #A0C735;
  margin-right: 10px;
}

.reg-form .form-group {  
    border: 2px solid #A0C735;
    border-radius: 14px;
    padding: 9px 15px; 
}

.reg-form .form-control {
    display: block;
    width: 100%;
    height: auto;
    padding: 0px; 
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: #475F7B;
    background-color: #FFF;
    border: none;
    border-radius: 14px;
    -webkit-transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}


/*get-start*/

.calendar[type="text"] {
  border: none;
  color: #D8D8D8;
  font-size: 13px;
  width: 100%;
  font-weight: 600;
}

.input-field {
  position: relative;
  font-family: "Font Awesome 6 Pro";
}

.input-field:after {
  content: "\f073";
  position: absolute;
  display: inline-block;
  font-size: 25px;
  color: #46630F;  /* was #a0c735 at 1.9:1 (item B66) */
  right: 0px;
  top: -19px;
}

.s-hidden {
    visibility:hidden;
    /*! padding:10px 12px; */
    width: 100%;
    border: none;
}
.select {
    cursor:pointer;
    display:inline-block;
    position:relative;
    /*! font:normal 11px/22px Arial, Sans-Serif; */
    color:#D8D8D8;
    border:1px solid #ccc;
    width: 100%;
    background: #FFFFFF;
    border: 1px solid #E1E1E1;
    border-radius: 4px;
    opacity: 1;
    border: none;
}
.styledSelect {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background-color:white;
    padding:0px 2px 0;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #D8D8D8;
    width: 100%;
    border: none;
}
.styledSelect:after {
    content:"\f078";
    font-family: "Font Awesome 6 Pro";
    width:0;
    height:0;
    position:absolute;
    top: -11px;
    right: 16px;
    color: #7F7F7F;
    font-weight: 600;
}
.styledSelect:active, .styledSelect.active {
    background-color:#fff;
}
.options {
    display:none;
    position:absolute;
    top:100%;
    right:0;
    left:0;
    z-index:999;
    margin:0 0;
    padding:0 0;
    list-style:none;
    border:1px solid #ccc;
    background-color:white;
    -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);
}
.options li {
    padding:0 6px;
    margin:0 0;
    padding:0 10px;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #6C758F;
}

.options li:hover {
    background-color:#39f;
    color:white;
}


.ctn-form [type="date"] {
  border: none;
  color: #D8D8D8;
  font-size: 14px;
  width: 100%;
}

.rangeslider,
.rangeslider__fill {
  border-radius: 4px;
}

.rangeslider {
  background: #fff;
  position: relative;
  /*! border-radius: 4px; */
}

.rangeslider--horizontal {
  height: 7px;
  width: 100%;
  margin: 25px 0 8px;
}

.rangeslider--vertical {
  width: 20px;
  min-height: 150px;
  max-height: 100%;
}

.rangeslider--disabled {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
  opacity: 0.4;
}

.rangeslider__fill {
  background: #fff;
  position: absolute;
}

.rangeslider--horizontal .rangeslider__fill {
  top: 0;
  height: 100%;
}

.rangeslider--vertical .rangeslider__fill {
  bottom: 0;
  width: 100%;
}

.rangeslider__handle {
  width: 27px;
  height: 27px;
  border-radius: 14px;
  filter: drop-shadow(0px 2px 6px rgba(170,170,170,0.5));
  background-color: #a0c735;
  border: 3px solid #ffffff;
  font-size: 9px;
  letter-spacing: 0px;
  color: #ffffff;
  font-weight: 500;
  cursor: pointer;
  display: inline-block;
  line-height: 25px;
  text-align: center !important;
  position: absolute;
}

.rangeslider--horizontal .rangeslider__handle {
  top: -10px;
  touch-action: pan-y;
  -ms-touch-action: pan-y;
}

.rangeslider--vertical .rangeslider__handle {
  left: -10px;
  touch-action: pan-x;
  -ms-touch-action: pan-x;
}

input[type=range]:focus + .rangeslider .rangeslider__handle {
  -moz-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
  -webkit-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
  box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
}
  
.min {
  padding-top: 5px;
  padding-left: 10px;
  color: #545454;
}
.pull-left {
  float: left !important;
}

.max {
  padding-top: 5px;
  padding-right: 10px;
  color: #545454;
}
.pull-right {
  float: right !important;
}
small {
  font-size: 80%;
}

.range-area {
width: 100%;
height: 108px;
border: 2px solid #e9e9e9 !important;
background-color: #e9e9e9;
}

/* Native HTML5 range slider styles */
input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 7px;
  background: #fff;
  border-radius: 4px;
  outline: none;
  margin: 25px 0 8px;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 27px;
  height: 27px;
  background: #a0c735;
  border: 3px solid #fff;
  border-radius: 50%;
  cursor: pointer;
  filter: drop-shadow(0px 2px 6px rgba(170,170,170,0.5));
}

input[type="range"]::-moz-range-thumb {
  width: 27px;
  height: 27px;
  background: #a0c735;
  border: 3px solid #fff;
  border-radius: 50%;
  cursor: pointer;
  filter: drop-shadow(0px 2px 6px rgba(170,170,170,0.5));
}

.range-value-display {
  font-size: 16px;
  color: #46630F;  /* was #a0c735 at 1.9:1 (item B66) */
  font-weight: 600;
}



/*setup-profile*/

.ques {
  font-size: 12px;
  letter-spacing: 0px;
  color: #000000;
  font-weight: 500;
  margin-bottom: 13px;
  margin-top: 17px;
}

.ctn-form .frm-sub {
  position: initial;
  width: 100%;
  padding: 0px;
}


/*almost.html*/

#t-message {
  font-size: 12px;
  letter-spacing: 0px;
  color: #696969;
  font-weight: 500;
  padding-bottom: 60px;
}


/*uploadbox*/

.upload__box {
  padding: 15px;
  text-align: center !important;
  width: 100%;
  border-radius: 14px;
  background-color: #f3f3f3;
  margin-bottom: 20px;
}
.upload__inputfile {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}
.upload__btn {
  text-align: center !important;
  min-width: 80px;
  padding: 5px;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
  background-color: #9c9b9b;
  border-color: #4045ba;
  border-radius: 10px;
  line-height: 77px;
  height: 80px;
  margin: 3px !important;
}

.upload__btn i {
  font-size: 24px;
  color: #fff;
}
.upload__btn:hover {
  background-color: #c9c9c9;
}

.upload__img-wrap {
  display: flex;
  flex-wrap: wrap;
  margin: 0px;
}
.upload__img-box {
  margin: 3px;
  height: 180px;
  width: 80px;
  height: 80px;
  border-radius: 8px;
  filter: drop-shadow(0px 4px 7px rgba(87,91,125,0.1));
  background-color: #9c9b9b;
}

.upload__img-close {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  top: 6px;
  right: 6px;
  text-align: center;
  line-height: 13px;
  z-index: 1;
  cursor: pointer;
  text-align: center !important;
}
.upload__img-close:after {
  content: "✖";
  font-size: 10px;
  color: #888;
  /*! top: 2px; */
}

.img-bg {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
  padding-bottom: 100%;
  border-radius: 8px;
}

.upload__box h4 {
  font-size: 12px;
  color: #393939;
  font-weight: 600;
  padding-bottom: 15px;
  margin-bottom: 0;
}

.upload__box span.border-up {
  width: 80%;
  height: 1px;
  background: #979797;;
  display: inline-block;
  margin-bottom: 15px;
}





/*dashboard.html*/

.tp-tbl {
  padding-left: 15px;
  padding-right: 15px;
}

.tp-tbl table {
  width: 100%;
}

.tp-tbl table tr td {
  width: 20%;
}

.tp-tbl table tr td:nth-child(2){
  width: 60%;
}

.tp-tbl table tr td i {
  font-size: 22px;
  display: inline-block;
  color: #AECF53;
  background: #fff;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  text-align: center;
  line-height: 1.8;
  cursor: pointer;
}

.tp-tbl table tr td span {
  display: inline-block;
  font-size: 16px;
  color: #ffffff;
  font-weight: 600;
  text-align: center;
}

.time-date-area {
  /*width: 375px;
  height: 847px;*/
  padding: 15px 15px 210px;
  border-radius: 30px 30px 0 0;
  background-color: #ffffff;
  margin: -380px 0 0 0;
}

.text-box {
  /*width: 345px;
  height: 97px;*/
  padding: 15px;
  border-radius: 14px;
  background-color: #ececec;
  margin-bottom: 12px !important;
}

.text-box h5 {
  font-size: 10px;
  letter-spacing: 0px;
  color: #e02020;
  font-weight: 500;
}

.text-box a {
  text-decoration: none;
  border-radius: 6px;
  background-color: #ffffff;
  padding: 8px 11px 9px;
  position: relative;
}

.text-box table{
  width: 100%;
}

.text-box table tr td:first-child {
  font-size: 12px;
  letter-spacing: 0px;
  color: #000000;
  font-weight: 500;
  width: 60%;
}

.text-box table tr td img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  filter: drop-shadow(0px 2px 2px rgba(181,181,181,0.5));
  border: 2px solid #ffffff;

}

.text-box table tr td .thus img {
  border: 2px solid #215a37;

}

.text-box table tr td span {
  display: inline-block;
  /*! opacity: 0.102; */
  /*! width: 35px; */
  height: 30px;
  border-radius: 7px;
  background-color: #D7E2DB;
  font-size: 10px;
  letter-spacing: 0px;
  color: #215a37;
  font-weight: 500;
  line-height: 1.5;
  padding: 8px 10px;
  margin: 0 10px;
  vertical-align: middle;
}

.text-box table tr td i {
  color: #7F7F7F;
  font-size: 10px;
}

.past_a {
  background-color: transparent !important;
  font-size: 10px;
  letter-spacing: 0px;
  color: #215a37;
  font-weight: 500;
  font-family: "Poppins";
  text-align: right;
  display: block !important;
  width: 70%;
  padding: 0 !important;
}

.past_a i {
  margin-left: 5px;
  display: inline-block;
}

.tee_h3 {
  font-size: 10px;
  letter-spacing: 0px;
  color: #000000;
  font-weight: 600;
  width: 30%;
  margin: 0;
  vertical-align: middle;
}

.spn-im {
  position: absolute;
  top: 50%;
  right: 75px;
  transform: translate(0%,-50%);
}

.spn-im span {
  width: 30px;
  height: 30px;
  border-radius: 15px;
  filter: drop-shadow(0px 2px 2px rgba(181,181,181,0.5));
  border: 2px solid #ffffff;
  display: inline-block;
  margin-left: -13px;
}

.spn_1 {
  /*! margin: 0 -15px 0 0px; */
}

.spn_2 {
  margin: 0 0 0 -6px;
}

.angle__down a {
  border: none;
  background-color: transparent;
  color: #000;
}

.angle__down a i {
  font-size: 16px;
  display: inline-block;
  opacity: 0.502;
}

.bx-spn {
  border: none;
  background-color: transparent !important;
  width: 30px;
  height: 30px;
  border-radius: 15px !important;
  filter: drop-shadow(0px 2px 2px rgba(181,181,181,0.5));
  border: 2px solid #ffffff !important;
  display: inline-block !important;
}

.msg {
  border-radius: 4px;
  background-color: #E8EEEB;
  display: inline-block;
  font-size: 15px !important;
  padding: 7px;
  color: #215A36 !important;
}

.ftr-a:hover span,#active_a {
  color: #215A36;
  opacity: 1!important;
}

.ftr-a span {
  opacity: 0.200;
  font-size: 11px;
  line-height: 14px;
  color: #000000;
  font-weight: 500;
  font-family: "Poppins";
  text-align: center;
  display: inline-block;
  transition: 0.3s all ease;
}

.ftr-a i {
  color: #CCCCCC;
  display: inline-block;
  transition: 0.3s all ease;
}

.ftr-div {
  margin: -38px 0 0 0;
  outline: 10px solid #fff;
  border-radius: 50%;
  border: 15px solid #F6F6F6;
}

.pson {
  position: relative;
}

.ftr-a {
  transition: 0.3s all ease;
}

.ftr-a:hover .brd {
  opacity: 1 !important;
}

.ftr-a:hover i{
  color: #215A36 !important;;
}

.brd {
  display: inline-block;
  width: 30px;
  height: 2px;
  background: #215A36;
  position: absolute;
  top: -37%;
  left: 50%;
  transform: translate(-50%,-50%);
  opacity:  0 !important;
  transition: 0.3s all ease;
}

.ftr-img {
  width: 50px;
  height: 50px;
}

.footer-area .col {
  padding: 0;
}

.footer-area {
    background: transparent;
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 9;
}

.inr-footer-area {
  padding: 20px 10px 40px;
  border-radius: 40px 40px 0 0;
  filter: drop-shadow(0px 2px 6px rgba(172,172,172,0.5));
  background-color: #ffffff;
}




/*notification.html*/

.thus {
  width: 30px;
  height: 30px;
  background: transparent !important;
  padding: 0 !important;
}

.spn-im2 {
  right: 75px;
  top: 27%;
}

.clock_i {
  font-size: 18px !important;
  color: #215A36 !important;
  margin-right: 6px;
  vertical-align: middle;
}

.spn-im span img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.td-bg {
  background-color: rgba(224,32,32,0.10196078431372549) !important;
}

.left__td {
  border-radius: 7px;
  background-color: #ececec;
  padding: 8px;
  font-size: 10px !important;
}

.angle__right {
  margin: 0 0 0 0;
  position: absolute;
  top: 45%;
  right: 4%;
  font-size: 13px !important;
  font-weight: 400 !important;
}

.image__text span {
  display: inline-block;
}

.image__text span img {
  display: inline-block;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid #215a37;
}

.text__content {
  margin: 0 0 0 10px;
  width: 40%;
}

.text__content h4 {
  font-size: 10px;
  color: #e02020;
  font-weight: 500;
  margin: 0 0 6px;
}

.text__content h2 {
  font-size: 14px;
  color: #000000;
  font-weight: 600;
  margin: 0 0 5px;
}

.text__content p {
  opacity: 0.502;
  font-size: 10px;
  color: #000000;
  font-weight: 500;
  margin: 0 0 20px 0;
}

.phill_mac {
  border-radius: 14px;
  filter: drop-shadow(0px 2px 6px rgba(182,182,182,0.5));
  background-color: #ffffff;
  padding: 15px;
  margin: 0 0 15px 0;
}

.phill_mac2 {
  margin: 0 0 104px 0;
}

.button-area {
  border-radius: 6px;
  background-color: #ececec;
  position: relative;
}

.button-area button {
  width: 50%;
  border: none;
  text-align: center;
  font-size: 10px;
  color: #000000;
  font-weight: 600;
  padding: 10px;
  border-radius: 6px;
  transition: 0.3s all ease;
}

.button-area button:first-child i {
  display: inline-block;
  background: #3ec3a4;
  padding: 3px;
  border-radius: 50%;
  color: #fff;
  font-weight: 900;
  outline: 3.5px solid #9be69d;
  margin-right: 10px;
}

.button-area button:nth-child(2) i {
  display: inline-block;
  background: #fd4755;
  padding: 3px 4.5px;
  border-radius: 50%;
  color: #fff;
  font-weight: 900;
  outline: 3.5px solid #fd8087;
  margin-right: 10px;
}

.button-area span {
  display: inline-block;
  position: absolute;
  width: 2px;
  height: 22px;
  background-color: #fff;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.horizental {
  color: #ECECEC !important;
  opacity: 1 !important;
  margin: 1rem 10%;
}




/*golf-invitation*/

.image_slide .mySlides img {
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
  filter: drop-shadow(0px 2px 6px rgba(176,176,176,0.39));
}

.image_slide .container {
  position: relative;
  padding: 0;
}

.image_slide .row {
  padding: 0 7px;
}

.image_slide .mySlides {
  display: none;
}

.image_slide .cursor {
  cursor: pointer;
}

.image_slide .next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.image_slide .numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.image_slide .row:after {
  content: "";
  display: table;
  clear: both;
}

.image_slide .column {
  float: left;
  width: 25%;
  padding: 0 5px;
  object-fit: cover;
  margin: 8px 0 0 0;
}

.image_slide .column img {
  width: 78px;
  height: 78px;
  border-radius: 12px;
  filter: drop-shadow(0px 2px 6px rgba(176,176,176,0.39));
  object-fit: cover;
  border: 1px solid transparent;
}


.image_slide .active {
  border: 1px solid #215a37 !important;
}

.rory-area {
  border-radius: 14px;
  filter: drop-shadow(0px 2px 6px rgba(182,182,182,0.5));
  background-color: #ffffff;
  padding: 15px;
  margin-top: 15px;
}

.rory-area .col-8,
.rory-area .col-4,
.rory-area .col-5,
.rory-area .col-8
.rory-area .col-2 {
  padding: 0;
}

.numbers {
  border-radius: 5px;
  background-color: #F5F9EA;
  padding: 20px 0px 13px;
  margin-right: 0px;
  width: 67%;
}

.numbers h2 {
  font-size: 35px;
  color: #46630F;  /* was #a0c735 at 1.8:1 on #F5F9EA (item B66) */
  font-weight: 600;
  text-align: center;
  font-family: tahoma;
  margin: 0;
}

.rory__content {
  margin: 0 0 0 -34px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.rory__content h2 {
  font-size: 20px;
  color: #000000;
  font-weight: 600;
  margin: 0 0 6px 0;
}

.rory__content p {
  opacity: 0.502;
  font-size: 12px;
  color: #000000;
  font-weight: 600;
  margin: 0;
}

.side_h3 {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: -4px 0 0 0;
}

.side_h3 h3 {
  font-size: 14px;
  color: #000000;
  font-weight: 600;
  margin: 0;
}

.daniel_text {
  font-size: 10px;
  color: #000000;
  margin: 26px 0 36px 0;
  font-weight: 600;
}

.connect_reject a i {
  display: inline-block;
  font-size: 29px;
  color: #fff;
  background: #F55A5A;
  padding: 16px 21.5px;
  border-radius: 50%;
}

.connect_reject a span {
  display: inline-block;
  font-size: 12px;
  color: #000000;
  margin: 10px 0 0;
  font-weight: 600;
}

.connect_reject1 a i {
  display: inline-block;
  font-size: 29px;
  color: #fff;
  background: #215A36;
  padding: 16px 16px;
  border-radius: 50%;
}

.shadow_bg {
  border-radius: 30px 30px 0 0;
  /*! filter: drop-shadow(0px 2px 6px rgba(142,142,142,0.5)); */
  background-color: #ffffff;
  padding: 14px 0 50px !important;
  margin: -41px 0 65px 0;
  box-shadow: 0px -3px 17px #ddd;
  position: fixed;
  z-index: 1;
  width: 100%;
  bottom: 0;
  left: 0;
}

/*setup profile select*/



.radio_container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-radius: 8px;
    background-color: #e9e9e9;
    width: 100%;
    height: 50px;
    padding: 5px;
    margin-bottom: 25px;
}

.radio_container input[type="radio"] {
    appearance: none;
    display: none;
}

.radio_container label {
    display: flex;
    gap: 5px;
    justify-content: center;
    align-items: center;
    width: 33.33%;
    height: 40px;
    text-align: center;
    overflow: hidden;
    transition: linear 0.3s;
    color: #545454;
    border-radius: 8px;
    background-color: transparent;
    margin: 0;
    font-size: 13px;
    letter-spacing: 0px;
    font-weight: 500;
}

.radio_container input[type="radio"]:checked + label {
    background-color: #a0c735;
    color: #1F3B08;  /* #f1f3f5 on this green was 1.9:1 (item B66) */
    transition: 0.3s;
}

.pro-form p {
  font-size: 13px;
  letter-spacing: 0px;
  color: #000000;
  font-weight: 500;
  
  margin-bottom: 15px;
}

.pro-form .form-group {
  height: 68px;
  padding: 20px 15px;
  margin-bottom: 20px;
}

.pro-form input {
  border: none;
  width: 100%;
}

.pro-form span {
  display: inline-block;
  width: 80%;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.251);
  margin-bottom: 25px;
}


/* qr code scan*/

.time-date-area p.result-f {
  opacity: 0.502;
  font-size: 12px;
  color: #000000;
  font-weight: 600;
  margin-bottom: 15px;
}

.add-icon {
  text-align: right;
  width: calc(50% - 60px);
  margin-left: auto;
}

.add-icon i {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  line-height: 42px;
  background-color: rgba(33,90,55,0.10);
  font-size: 20px;
  color: #215a37;
  text-align: center;
}

/* The legacy scan page styled its one search form here as a 50px grey pill
   (`.time-date-area form` / `.time-date-area form input`). That page is gone,
   and the rule kept applying to every form rendered inside the white content
   area: the access-code entry, the booking history filters, the search
   location form and the team editor were each squeezed into a 50px box with
   their controls overflowing onto whatever followed. Forms now lay out with
   their own view styles only. */

.qr-area {
  width: 100%;
  height: 297px;
  border-radius: 10px;
  background-color: #F5F9EA;
  padding: 15px;
  margin-top: 80px;
}

.qr-area > a {
  width: 100%;
  height: 50px;
  border-radius: 9px;
  background-color: #215a37;
  font-size: 14px;
  color: #ffffff;
  font-weight: 600;
  text-align: center;
  display: block;
  margin-top: 15px;
  text-decoration: none;
  padding: 15px 0;
}

.qr-area .qr-icon {
  width: 202px;
  height: 202px;
  border-radius: 20px;
  background-color: #ffffff;
  margin: 0 auto;
  padding: 15px;
  text-align: center;
}

.qr-area .qr-icon h5 {
  font-size: 12px;
  color: #000000;
  font-weight: 600;
  margin-bottom: 15px;
}

.qr-area .qr-icon i {
  font-size: 120px
}

.connection-btn a i {
  color: #3ec3a4;
  background-color: #fff;
  font-size: 22px;
  width: 21px;
  height: 19px;
  border-radius: 50%;
  line-height: 19px;
}

.connection-btn a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #9be69d;
  display: inline-block;
  line-height: 37.5px;
  text-align: center;
  padding-right: 1px;
}

.connection-btn a:last-child i {
  color: #fd4755;
}

.connection-btn a:last-child {
  background: #fd8087;
  margin-left: 6px;
}

.connection-req-area .updown-border {
  border-top: 1px solid #f1f1f1;
  border-bottom: 1px solid #f1f1f1;
}

.connection-req-area .image__text {
  padding: 15px 0;
}


/*golf-invitation2*/


.golf-setting {
  border-radius: 6px;
  filter: drop-shadow(0px 2px 6px rgba(182,182,182,0.5));
  background-color: #ffffff;
  width: 100%;
  padding: 15px;
  position: relative;
}

.golf-setting .golf-action {
  position: absolute;
  top: 12px;
  right: 15px;
}


.golf-setting .golf-action a i {
  font-size: 16px;
  color: #46630F;  /* was #a0c735 at 1.9:1 (item B66) */
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: rgba(160,199,53,0.101);
  text-align: center;
  line-height: 32px;
  border: 1px solid #a0c735;
  margin-left: 2px;
}

.golf-setting .golf-action a:first-child i.fa-xmark {
  color: #f65a5a;
  background-color: rgba(246,90,90,0.101);
  border: 1px solid #f65a5a;
}

.golf-setting .golf-action a:nth-child(2) i {
  color: #215a37;
  background-color: rgba(33,90,55,0.101);
  border: 1px solid #215a37;
}

.golf-setting ul {
  padding: 0;
  list-style-type: none;
}

.address-line ul li {
  font-size: 10px;
  letter-spacing: 0px;
  color: #000000;
  font-weight: 500;
  margin-bottom: 6px;
}

.address-line ul li i {
  font-size: 12px;
  color: #215a37;
  width: 25px;
  height: 25px;
  border-radius: 4px;
  background-color: rgba(33,90,55,0.10196078431372549);
  text-align: center;
  line-height: 25px;
  margin-right: 5px;
}

.address-select form {
  background-color: transparent;
  height: auto;
  margin-bottom: 0;
}

.address-select .form-group {
  display: inline-block;
  margin: 0 10px 15px 0px;
  margin-bottom: 0;
}

.address-select .form-group input {
  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0;
  display: none;
  cursor: pointer;
}

.address-select .form-group label {
  position: relative;
  cursor: pointer;
  font-size: 10px;
  letter-spacing: 0px;
  color: #000000;
  font-weight: 600;
  margin-bottom: 0;
}

.address-select .form-group label:before {
  content:'';
  -webkit-appearance: none;
  background-color: transparent;
  border: 2px solid #215a37;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
  padding: 8px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 5px;
}

.address-select .form-group input:checked + label:after {
  content: '';
  display: block;
  position: absolute;
  top: 2px;
  left: 6.8px;
  width: 6px;
  height: 12px;
  border: solid #215a37;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}


.address-select {
  border: 1px solid #979797;
  border-right: none;
  border-left: none;
  padding: 15px 0;
}

.address-btn a {
  font-size: 10px;
  letter-spacing: 0px;
  color: #000000;
  font-weight: 500;
  border-radius: 7px;
  background-color: #ececec;
  padding: 8px 21px;
  text-decoration: none;
  display: inline-block;
  margin-top: 15px;
}

.organizer {
  border-radius: 12px;
  background-color: #ececec;
  padding: 15px;
  margin-top: 15px;
}

.organizer h4 {
  opacity: 0.502;
  font-size: 12px;
  color: #000000;
  font-weight: 600;
  padding-bottom: 15px;
  border-bottom: 1px solid #979797;
}

.organizer img {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  border: 2px solid #215a37;
  margin-bottom: 10px;
}

.organizer h3 {
  font-size: 12px;
  color: #000000;
  font-weight: 500;
}

.player1 {
  width: 33.33%;
}

.join-tee {
  border-radius: 0;
  background-color: #ffffff;
  padding: 14px 0 0px !important;
  margin: 15px 0 0px 0;

}

.join-tee .connect_reject1 a i {
  display: inline-block;
  font-size: 29px;
  color: #fff;
  background: #215A36;
  padding: 16px 18px;
  border-radius: 50%;
}

.org_player {
  border-radius: 12px;
  background-color: #ececec;
  padding: 6px;
  margin-top: 15px;
}

.org_player .organizer {
  padding: 8px;
  width: 22%;
}

.org_player .organizer:last-child {
  width: 78%;
}


.org_player .organizer h4 {
  padding-bottom: 8px;
  border-bottom: 1px solid #979797;
  font-size: 10px;
  font-weight: 600;
}

.org_player .organizer:first-child h4 {
  padding-bottom: 8px;
  border-bottom: 1px solid transparent;
}

.org_player .organizer img {
  width: 30px;
  height: 30px;
}

.org_player .organizer h3 {
  font-size: 10px;
}


/*message*/
.gollf-message {
  /*! width: 345px; */
  /*! height: 256px; */
  /*! overflow-y: auto; */
  padding: 0px;
  border-radius: 14px;
  filter: drop-shadow(0px 2px 6px rgba(196,196,196,0.5));
  background-color: #ffffff;
  margin: 15px 0;
  position: relative;
}


/* The chat and direct-message markup these rules styled belongs to the
   pre-SPA HTML pages, which are gone. Every selector was verified to have no
   consumer in any view or template before removal. They are not kept as a
   reference because they were also WRONG for messages: fixed widths -- a 230px
   bubble and a 345px list, wider than a 320px phone -- with no wrap rule, so a
   pasted URL escaped the bubble and the list scrolled the page sideways. Left in
   place, the next chat screen would have been built from them. */

.g-msg {
  margin-bottom: 8px
}













.g_msg {
  margin-bottom: 10px;
}



.gollf-message form {
  height: 54px;
  border-radius: 14px;
  background-color: #ffffff;
  border: 1px solid #bfc4d3;
  position: relative;
}

.gollf-message form .emojis {
  position: absolute;
  left: 10px;
  top: 17px;
}

.gollf-message form .emojis i {
  font-size: 20px;
  color: #bfc4d3;
  margin: 0 3px;
  position: initial;
  cursor: pointer;
}

.gollf-message form input {
  width: 100%;
  height: 54px;
  margin-bottom: 0;
  padding: 0 10px 0 75px;
  font-size: 13px;
  color: #63697b;
  font-weight: 400;
  opacity: 1;
}

.gollf-message form button {
  border: none;
  background: transparent;
  position: absolute;
  right: 10px;
  top: 16px;
  padding: 0;
}

.gollf-message form button i {
  position: initial;
  color: #215a37;
  opacity: 1;
}


.inr-footer-area .fa-bell:after {
  content: "1";
  font-size: 4px;
  width: 10px;
  height: 10px;
  background: #a0c735;
  border-radius: 50%;
  display: inline-block;
  color: #fff;
  line-height: 8px;
  position: absolute;
  left: 50%;
  top: 0;
  border: 1px solid #fff
}

/* Dashboard UI Improvements */

/* Notification Badge Styles */
#notificationBadge {
    font-size: 0.6rem !important;
    padding: 2px 6px !important;
    min-width: 18px;
    height: 18px;
    line-height: 14px;
    border-radius: 9px !important;
    background-color: #dc3545 !important;
    color: white !important;
    border: 1px solid white;
    font-weight: 600;
    text-align: center;
    transform: translate(50%, -50%);
}

/* Top area button improvements */
.top-area .d-flex {
    align-items: center;
    display: flex !important;
}

.top-area .gap-2 {
    gap: 15px !important;
}

.top-area i {
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s ease;
}

.top-area i:hover {
    color: rgba(255, 255, 255, 0.8);
}

.top-area .position-relative {
    position: relative;
}

/* Footer icon improvements for new navigation */
.footer-area .fa-layer-group:before {
    content: "\f5fd"; /* FontAwesome icon for cards/layers */
}

.footer-area .fa-video:before {
    content: "\f03d"; /* FontAwesome video camera icon */
}

.footer-area .fa-user-tie:before {
    content: "\f508"; /* FontAwesome user-tie icon for coach */
}

.footer-area .fa-user-gear:before {
    content: "\f4fe"; /* FontAwesome user-gear icon for caddy */
}

/* Ensure notification button has proper positioning */
#notificationBtn {
    position: relative;
}

#scanBtn:hover {
    opacity: 0.8;
}

/* =============================================================================
   View My Profile Styles (Updated for App Design System)
   ============================================================================= */

/* Profile Card Styles */
.profile-card {
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    margin-bottom: 15px;
}

.card-images {
    position: relative;
    height: 400px;
    overflow: hidden;
}

.profile-images-slider {
    position: relative;
    height: 100%;
    display: flex;
}

.card-image {
    min-width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

.card-image.active {
    display: block;
}

.image-indicators {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 5;
}

.image-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background-color 0.3s;
}

.image-indicator.active {
    background: white;
}

.photo-nav-left,
.photo-nav-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
    z-index: 5;
}

.photo-nav-left {
    left: 15px;
}

.photo-nav-right {
    right: 15px;
}

.photo-nav-left:hover,
.photo-nav-right:hover {
    background: rgba(0, 0, 0, 0.7);
}

.photo-counter {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.card-info {
    padding: 20px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
}

.card-name-age {
    flex: 1;
    /* `flex: 1` is `flex: 1 1 0%`, but min-width stays `auto`, so this column
       cannot shrink below its longest unbreakable word. A 35-character surname
       therefore pushed the handicap chip off the card and made the whole
       document scroll sideways. min-width: 0 is what actually lets it shrink;
       it is not inherited, so it has to be stated here. */
    min-width: 0;
}

.card-name {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
    /* At 24px a long token is wider than the card. The card clips with
       overflow: hidden and no ellipsis, so without this the name just stopped
       mid-word. */
    overflow-wrap: anywhere;
}

.card-location {
    color: #666;
    font-size: 16px;
    margin-bottom: 5px;
    overflow-wrap: anywhere;
}

.card-handicap {
    text-align: center;
    background: #A0C735;
    color: #1F3B08;  /* white on this green was 1.96:1 (item B66) */
    padding: 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    min-width: 50px;
}

.card-bio {
    color: #444;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 20px;
    font-style: italic;
    /* A pasted profile URL has no break opportunity, so the enclosing card's
       overflow: hidden swallowed everything past roughly 25 characters with no
       ellipsis -- it read as silent data loss rather than as truncation. */
    overflow-wrap: anywhere;
}

.bio-questions {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.bio-question {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 12px;
    border-left: 4px solid #A0C735;
}

.bio-question-text {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
    font-weight: 500;
}

.bio-answer {
    color: #333;
    font-size: 16px;
    line-height: 1.4;
    /* Free text a golfer typed, inside a box the question's 15px padding and 4px
       border have already narrowed. */
    overflow-wrap: anywhere;
}

/* =====================================================================
   BIDIRECTIONAL TEXT
   =====================================================================
   Every selector below holds text a PERSON typed -- a name, a location, a bio,
   a side-game note, a tournament title. A right-to-left name inside an
   otherwise left-to-right screen needs its own paragraph direction, or the
   punctuation and the separators this app adds around it land on the wrong
   side: "(الرياض) محمد" renders with the bracket detached from what it encloses,
   and a name followed by " · 9:00 AM" puts the separator at the wrong end.

   `unicode-bidi: plaintext` applies exactly the heuristic `dir="auto"` applies
   -- direction taken from the first strong character of the content -- and it is
   stated here rather than as an attribute on 733 interpolation sites, which is
   the only way this stays true as views change. It is a no-op for Latin text.

   Nothing here sets a direction outright: the app's own chrome stays
   left-to-right, and only the run of user text inside these elements is
   resolved from its own content.
   ===================================================================== */
.card-name,
.card-location,
.card-bio,
.bio-answer,
.tp-tbl table tr td:nth-child(2) > span {
  unicode-bidi: plaintext;
}


/* Profile Details */
.profile-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.profile-detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

.profile-detail-item:last-child {
    border-bottom: none;
}

.detail-label {
    font-weight: 500;
    color: #666;
}

.detail-value {
    font-weight: 600;
    color: #333;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .card-images {
        height: 350px;
    }
    
    .card-name {
        font-size: 20px;
    }
    
    .card-location {
        font-size: 14px;
    }
    
    .card-bio {
        font-size: 14px;
    }
}

/* =========================================================================
   ACCESSIBILITY BASELINE  (item B66)
   =========================================================================
   Appended last on purpose: everything here has to beat a rule written
   earlier in this file, and nothing here changes a layout, a size or a
   typeface. It adds contrast, hit area and motion safety only.

   The weighting is specific to this app rather than generic: Cartners is used
   OUTDOORS, in direct sunlight, ONE-HANDED, frequently with a glove on, by a
   population that skews well older than a typical mobile audience. Low
   contrast that merely looks subtle indoors is unreadable on the 7th tee, and
   a 20x20 icon is not a target a gloved thumb can hit while holding a bag.
   ========================================================================= */

/* --- 1. Screen-reader-only text ----------------------------------------
   Bootstrap ships .visually-hidden, but views that render outside a
   Bootstrap container still need it, and .sr-only is used by the shell's
   loading overlay. Both are defined here so a label can never silently
   become visible text. */
.visually-hidden,
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* --- 2. The bottom tab bar ---------------------------------------------
   The five-slot footer is the app's primary navigation and it was drawn at
   `opacity: 0.2` over black for the labels and #CCCCCC for the icons: about
   1.6:1 against the white tab bar. That is below the 3:1 floor for a
   graphical control and far below the 4.5:1 floor for its 11px label, and it
   applies to four of the five destinations at all times.

   The active/inactive DISTINCTION is preserved exactly as designed - the
   selected tab is still brand dark-green and the others are still grey. Only
   the grey moves, from unreadable to readable. */
.ftr-a span {
  opacity: 1;
  color: #5F6368;      /* 5.9:1 on white, still clearly the quiet state */
}

.ftr-a i {
  color: #6E7378;      /* 4.8:1 on white; was #CCCCCC at 1.6:1 */
}

.ftr-a.active span,
.ftr-a.active i,
.ftr-a:hover span,
.ftr-a:hover i,
#active_a {
  color: #215A36;
  opacity: 1;
}

/* --- 3. Touch targets ---------------------------------------------------
   WCAG 2.5.5 asks for 44x44 CSS px. These controls are icon-sized glyphs, so
   the target is grown with an INVISIBLE overlay rather than with padding:
   padding would move the icons and this design is deliberately preserved.
   `position: relative` on the anchor plus an absolutely-positioned ::after
   enlarges only the hit region. */
.ftr-a,
.top-area a,
.top-area td a {
  position: relative;
}

.ftr-a::after,
.top-area td a::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  min-width: 44px;
  min-height: 44px;
  transform: translate(-50%, -50%);
  /* Purely a hit region - never paints, never intercepts a scroll. */
  background: transparent;
  pointer-events: auto;
}

/* The bar's own icons are 18px glyphs inside those anchors; the ::after above
   is what receives the tap, so the glyph itself must not swallow it. */
.top-area td a > i,
.ftr-a > i,
.ftr-a > span {
  pointer-events: none;
}

/* --- 4. Focus ring on controls that opt out of one ----------------------
   input[type="range"] sets `outline: none` unconditionally, which outranks
   the global :focus-visible ring by specificity. The distance and handicap
   sliders were therefore unusable from a keyboard or a switch. */
input[type="range"]:focus-visible,
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #14361F;
  outline-offset: 2px;
}

/* --- 5. Motion ----------------------------------------------------------
   WCAG 2.3.3. The view fade, the tab transitions and the drawer slide are all
   decorative. Vestibular disorders are more common in the age band that plays
   most of this app's rounds, and a moving screen is harder to read in glare
   for everyone. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Global loading indicator (utils showLoading/hideLoading). Non-blocking:
   a centred spinner over a light veil while a screen fetches, nothing
   otherwise. */
.loader-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9998;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.6);
  pointer-events: none;
}

.loader-overlay.active {
  display: flex;
}

.loader-content {
  padding: 16px 22px;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  text-align: center;
  color: #333333;
  font-size: 14px;
}

.loader-spinner {
  width: 34px;
  height: 34px;
  margin: 0 auto 10px;
  border: 3px solid #e6e6e6;
  border-top-color: #A0C735;
  border-radius: 50%;
  animation: cartners-loader-spin 0.8s linear infinite;
}

@keyframes cartners-loader-spin {
  to { transform: rotate(360deg); }
}

/* Header titles: long names wrap to two lines at most instead of pushing the
   header down. This is the middle cell of every shared header, and it holds a
   user-supplied tournament, league or organization title. -webkit-line-clamp and overflow: hidden below
   clip what is PAINTED but do not reduce this span's min-content contribution,
   and `.tp-tbl table { width: 100% }` is auto layout, where min-content wins --
   so a long unbroken title pushed the table past the viewport and carried the
   back chevron off the left edge. */
.tp-tbl table tr td:nth-child(2) > span {
  overflow-wrap: anywhere;
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
}