/***************************************************************************************************/
 /* Copyright on the content of this file is owned by The Backyards Ltd. All rights reserved. *******/
 /* Please respect the money, knowledge and effort involved in developing this code. ****************/
 /* Copying, reproducing, manipulating or using this code in any way, other than indirectly as a user/ 
 /* of the The Backyards website, requires written permission from The Backyards Ltd. ***************/
 /***************************************************************************************************/

/*************************
*******Typography*********
**************************/

/*------------------ Core Elements ---------------*/
html, body, select, input, div, p, h1, h2, h3, h4, h5 {
  font-size: var(--main-font-size);
}

body {
  background-color: whitesmoke;
  overscroll-behavior-x: none; /* Stops swipe behaviour */
  overscroll-behavior-y: none; /* Prevent pull-down to refresh Chrome 63+ */
}
html {
  overscroll-behavior-x: none; /* Stops swipe behaviour */
  /* Prevent pinch-zoom */
  touch-action: pan-x pan-y;
  min-height: 100%; /* prevent pinch-zoom at page bottom */
} 
li { padding-bottom: 0.25em; }
strong.w3-button:active { font-weight: 600; }
textarea:focus { accent-color: var(--main-color) !important; }
ul { padding-left: 1.5em; margin: 0.25em 0; }   
/*select:disabled { background-color: dimgray; color: white; } */
table {border-spacing: 0;}
.specBtn { background-color: brown!important; color:white;font-size: 0.9em;padding: 0.25em;border-radius: 0.33em;} 
.specBtn:hover { background-color: red!important; } 
/*------------------ Core Classes ----------------*/
/*.header {height: 3.5em !important;background-color: var(--main-bkgrd-color); z-index: 97;}  */
/*.footer {background-color: var(--main-bkgrd-color);z-index: 99;padding-right:0.25em;}       */   

.header { 
   height: 3.5em !important;
   background-color:rgba(220, 225, 230); 
   z-index: 97; 
}   
.footer {
   background-color: white; 
   z-index: 99;
   padding-right:0.25em;
   box-shadow: 0px -3px 5px rgba(220, 225, 230, 1);
   border-top: 1px solid rgba(220, 225, 230);
}

/* ------------------ W3 Overrides ---------------- */
/* ------------------ Custom Classes -------------- */
.accTD { width: 4em; text-align:right; }
.account { margin-right:0.5em; }
.adjBack { padding-left:1em; font-size: 0.75em; vertical-align:middle; }  
.adjActTitle { font-weight: 600; }
.adjOpt { color: var(--main-color); }

.backToMain {
  padding-top:0.15em;
  padding-right:0.5em;
  padding-left: 0.25em;
}

.backBtn {
/*   background-color: var(--main-page-color);
   border: 1px solid var(--main-color); */
   opacity: 0.6;
   border-radius: 1em;
   color: var(--main-color);
   text-align:center;
   display: inline-block;
}
   
.btBtn { font-size:1.25em; }
.btAct { color:blue;}
.btn {
   background-color: var(--main-note);
   border-color: transparent;
/*   opacity: 0.6; */
   border-radius: 1em;
   color: white;
   text-align:center;
   width: 1.5em;
}
.btn:disabled { background-color:gray; border-color: transparent; color:white !important; }   

.clearBtn {
   background-color: transparent;
   border: none;
   color: red;
   text-align:center;
   padding: 0 0.5em;
   font-size:1.25em;
} 
.core { padding: 0 0.5em 3.5em; } /* Bottom-padding needed to ensure not hidden behind footer */
.coreTbl { position: relative; top: 6.5em; padding-bottom:6.5em; max-width:52em; }
.devForce { color: gray; }
.devForceDiv { color: silver; font-size: 0.6em; width:2em; }
.dftAdd { font-size:1.5em; }
/* .dftGrpLoad { padding:0.25em; } */ /* button*/
#dftGrpLoad { padding-left:0.5em; }
.impRem, .impLblRem, .dftRem, .dftGrpRem, .hisRem {
   background-color: transparent;
   border: none;
   color: red;
   text-align:center;
   font-size:1.25em;
} 
.impRem { padding-left: 0.25em; padding-right:0.75em; }
.dim { color: dimgray; }
.disclaimer { color: var(--main-color); }
.elCent { margin: 0 auto; }
.elInline { display: inline-block; }
.elUL { text-decoration: underline; }
.elRight { width:100%; text-align: right; } 
.elRight1 { width:100%; text-align: right; padding-right:1em; }

.eye {
   height: 30px;
   aspect-ratio: 1;
   display: grid;
   background:
      radial-gradient(farthest-side,white 15%,#0000 18%),
      radial-gradient(50% 100% at 50% 160%,var(--main-color) 95%,#0000) top/100% 50%,
      radial-gradient(50% 100% at 50% -60%,var(--main-color) 95%,#0000) bottom/100% 50%;
   background-repeat: no-repeat;
}
.eye:before {
  content: "";
  background: inherit;
  opacity: 0.6;
  animation: l1 2.5s infinite;
  padding-left:1em;
}
@keyframes l1 {
  to {transform:scale(2.5);opacity:0}
}
 
.faSize { transform: scale(1.5, 1.5); font-size:1.25em; }
.finger { font-size:2em; padding-right:0.25em; }
.fldTDmax { max-width:15em; }
.fldHdrSel { font-weight: 600; }

/* Hide scrollbars for the body during portrait enforcement */

.ftrBT { color: silver; }
.fsp85 {font-size: 85%;}
.fsp90 { font-size: 90%; }
.grpTD { max-width: 12em; }
.test { font-size: 1.5em; }
.hdrTitle { text-align:center; min-width: 8em; width:100%; padding:0; }
.helpFG { padding-top:0.3em; }
.helpOpt { margin-left: 1em; display:inline-grid;}
.helpTD { margin-left: 1em; display:inline-grid; font-size:1em; }
.helpWand { display:inline-grid; font-size:1.25em; }
.hisAdd { font-size:1.5em; }
.hisWandTst { min-width:6em;font-size:0.5em;color:silver;vertical-align:bottom; }
.impErr { padding-top: 0.5em; }
.impExp { font-size: 1.25em; } 
.impIDRem {
   background-color: transparent;
   border: none;
   color: red;
   text-align:center;
   font-size:1.25em;
}
.impIDAddWgt { 
   background-color: transparent;
   border: none;
   color: green;
   text-align:center;
   font-size:1.25em;
   font-weight: 600;
}

.impIDskip { color:brown; }
.impIDTblTop {
   text-decoration: underline;
}   
.impCapIndShow {
   width: 1.2em;
   height: 1.2em;
   background-color: red; /* Circle background color */
   color: white; /* Text color */
   font-size: 0.9em; /* Text size */
   line-height: 1.2em; /* Center the text vertically */
   text-align: center; /* Center the text horizontally */
   border-radius: 50%; /* Make the element a circle */
   display: inline-block; /* Prevent the div from stretching out */
   font-weight:600;
   cursor: pointer;
}
.impCapIndHide {
   width: 1.2em;
   height: 1.2em;
   color: ghostwhite; /* Text color */
   font-size: 0.9em; /* Text size */
   line-height: 1.2em; /* Center the text vertically */
   text-align: center; /* Center the text horizontally */
   border-radius: 50%; /* Make the element a circle */
   display: inline-block; /* Prevent the div from stretching out */
   cursor: none;
}
.infoBtn {
   display: inline-block;
   border-radius: 50%;
   border: 1px var(--main-color) solid;
   width: 1.15em;
   height: 1.15em;
   text-align: center;
   margin: 0 auto;
   font-size: 1em;
}

.main {
  padding: 0em;
  position: relative;
  top: 6.25em;
  margin: -0.5em auto 0;
  max-width:23em;
  /*  padding-bottom: 2.5em; /* Need to ensure not hidden behind footer */
}
.maxw2  { max-width:2em; }
.maxw25 { max-width:25em; }
.maxw30 { max-width:30em; }
.maxw32 { max-width:32em; }
.maxw35 { max-width:35em; }
.maxw37 { max-width:37em; }
.maxw42 { max-width: 42em; }
.maxw52 { max-width: 52em; }
.mbdiv1 { margin: 0.5em 0 0; padding:0 0 0 0; }
.mbdiv2 { margin: 0.5em 0 0; padding:0 0 0 0; text-align: right; }
.mbrBtn { width: 8em; font-size: 1em; }
.minw3 { min-width: 3em; }
.minw5 { min-width: 5em; }
.minw6 { min-width: 5em; }
.minw8 { min-width: 8em; }
.minw12 { min-width: 12em; }
.minw15 { min-width: 15em; }
.minw18 { min-width: 18em; }
.minw21 { min-width: 21em; }
/* .menu { color: var(--main-note) !important; } */
/* .menu2Btn { margin-top: 0.5em; } */
.menubtn { width:18.5em; margin: 1.5em 0 0; padding:0.5em 0.25em; }
.menubtn0 { width:18.5em; margin: 1em 0 0; padding:0.5em 0.25em; }
.menubtn1 { width:10em; }
.menubtn2 {/* width:6em; */}
.menuHdr {width:22em;background-color: var(--main-page-color); margin: 0 auto; }
.modEdit {  max-width:23em; margin: 1em auto; }
.navbar-header { background-color: var(--main-bkgrd-color); }
.notifyBtn {
   display: inline-block;
   color: red;
   border-radius: 50%;
   border: 1px red solid;
   width: 1.15em;
   height: 1.15em;
   text-align: center;
   margin: 0 auto;
   font-size: 0.85em;
}
.old { color: gray; }
.optGrpAdd { margin-top: 0.25em; }
.padLeftHalf { padding-left: 0.5em; }
.padLeft1 { padding-left: 1em; }
.padRight1 { padding-right: 1em; }
.padTop1 { padding-top: 1em; }
.padTop2 { padding-top: 2em; }
.pgHdrTD { padding-left:1.25em; }
.pgLoc {padding-left: 0.25em;padding-bottom: 3.5em;}
.priorBtn {
   -webkit-appearance: button;
   text-align:center;
   vertical-align:middle;
   display: inline-block;
   border:none;
   -moz-user-select:none;
   -ms-user-select:none;
   overflow:auto;
   user-select:none;
   background-color: #9EB8D1; 
   color:var(--main-note);
   font-size: 0.9em;
   padding: 0.3em 0.25em 0.25em;
   border-radius: 0.5em;
} 
/*.priorBtn:hover { background-color: var(--main-note)!important; } */
.privacy { color: var(--main-color); }
.pvtESsuper { color: var(--main-alt); }
.rndBtn { 
   width: 2em; /* Adjust size as needed */
   height: 2em; /* Adjust size as needed */
   border-radius: 50%; /* Make it round */
   background-color: var(--main-color); /* Button background color */
   color: white; /* Button text color */
/*   font-size: 24px; /* Adjust font size as needed */
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
}
.setw2 { width: 2em; }
.setw3 { width: 3em; }
.setw4 {width: 4em;}
.setw5 {width: 5em;}
.setw6 {width: 6em;}
.setw8 { width: 8em; }
.setw8-5 { width: 8.5em; }
.setw10 { width: 10em; }
.setw11 { width: 11em; }
.setw12 { width: 12em; }
.setw15 { width: 15em; }
.setw18-5 { width: 18.5em; }
/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #003300;
}
.soMenu { text-align:right; width:6em; }
.suNotify { zoom:70%; position: absolute; margin-left:0.25em; }

a.active {
   font-weight: 600;
}
.status { width:21em; }
.subHeader { position: absolute; top: 3em; padding: 0.5em 0.5em 0.25em 0; width:100%;}
.tdCent { text-align:center !important; }
.tdBold { font-weight:600; }
.toolTip { position:absolute; left:0em; top:3em; background-color:var(--main-page-color); color:var(--main-note); width: 100%; text-align:center; }
.traitAdd { font-size:1.5em; vertical-align:middle; padding-left:0.5em; }
.ui-disabled { pointer-events: none; color: dimgray!important; accent-color: gray!important; }
.width18 { width:18em !important; }
.width21 { width:21em !important; }
.width23 { width:23em !important; }
.width30 { width:30em !important; }
.wrap { 
   word-break: break-word; /* Breaks long words at arbitrary points */
   overflow-wrap: break-word; /* Wraps long words onto the next line */
}
.wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}

a.fldUp.ui-disabled { color: silver!important; }
a.stUp.ui-disabled { color: silver!important; }

/*------------------ Page/Window Specific Classes--------------*/
/*--- Page: Support ---*/



/*------------------ Window Specific Elements -------------*/
/*--- Window: Menu ---*/
#logging-in { width:23em; text-align:center; margin: 2em auto; padding-left:63px; }
#mainOpts { width:23em; padding-left:0em; }
/*--- Window: Load ---*/
#email { line-height: 19px; min-width:15.5em }
#impGrpTD { min-width: 5em; }
#ghoCBall {padding: 0 0.5em 0.5em;}
#ghoApplyCB { margin-right:0.5em; }
#hisWand { display:inline-flex;   }
#hisHelpB2 { display:inline-grid; }
#lastTbl.tablesaw-bar { min-width:22em; max-width:52em; margin: 0 auto; }
#memB1 {padding-top:1em; }
#memExpMod { z-index: 100; } /* Ensures modal is on top of any other modal */
#memStatMod { z-index: 100; } /* Ensures modal is on top of any other modal */
#mbrBuyBtn { padding: 0.5em 0 !important; }
#mbrUpdBtn { padding: 0.5em 0 !important; }
#impBTID { position:absolute; left: -9999px; border:none; outline:none; } /*Effectively hides inputs */
#hisBTID { position:absolute; left: -9999px; border:none; outline:none; } /*Effectively hides inputs */

/*------------------ TableSaw Overrides ----------*/
.tablesaw-advance { float: unset; }
.tablesaw th {
   background-color: var(--main-note);
   color: white;
   font-weight: 700;
   font-size: 0.75em;
   padding: 0.25em;
   line-height: 1.1em; 
   box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
}
.tablesaw thead tr:first-child th { vertical-align: middle; }
.tablesaw-sortable-arrow { display: inline-block; }
.tablesaw-sortable-arrow:after {
  width: 0.5833em;
  height: 0.9em;
  right:0.5em;
} 
.tablesaw-sortable-btn {
   color: var(--main-btn) !important;
   padding: 0.25em !important;
   min-width: 2.5em !important;
   background-color: transparent !important;
   border: none;
}
.tablesaw-swipe .tablesaw-swipe-cellpersist { border-right: none; }
.tablesaw {
   border-collapse: separate;
   box-shadow: 0 0.166em 0.166em rgba(0, 0, 0, 0.25);
   background-color: var(--main-page-color);
   width: unset;
   /* min-width: 21em; */
}
.tablesaw td { padding: 0.2em !important; border-right: 2px solid silver !important; }
.tablesaw td p { margin:0.15em; padding:0 0.1em; }
.table-stripe tbody tr:nth-child(odd) td, .table-stripe tbody tr:nth-child(odd) { background-color: var(--main-page-color); }
.table-stripe tbody tr:nth-child(even) td, .table-stripe tbody tr:nth-child(odd) { background-color: rgba(220, 225, 230);  }
.tablesaw-advance a.tablesaw-nav-btn.left:before { border-right: 5px solid var(--main-note);  } 
.tablesaw-advance a.tablesaw-nav-btn.right:before { border-left: 5px solid var(--main-note);  } 
.tablesaw-advance a.btn  { border-color: var(--main-note); background-color: transparent; opacity: 1; }
.tablesaw-advance-dots li i { background: gray; }

/* Create Session buttons */
.button-container {
   width:100%;
   display: flex;
   flex-wrap: wrap;
   justify-content: left;
}
.dynamic-button {
   margin: 1%;
   padding: 0 0.25em;  
   max-height: 2em;
   height: 2em;
   white-space: normal;
   word-wrap: break-word;
   display: block;
   font-size: 1em;   
   text-align: center;
   box-sizing: border-box;
   border: 1px solid #ccc;
   border-radius: 0.5em;            
   cursor: pointer;
   color: var(--main-color);
}
.button-container button.selected {
  background-color: var(--main-color);
  color: white;
  font-weight:600;
}


/*------------------ UNCONFIRMED -------------*/
  
.dftMsg {
   font-size: 85%;
   color: brown;
}
.expMsg {
   font-size: 85%;
   color: brown;
}

textarea {
   color: var(--main-color);
   border-radius: 0.5em;
   padding: 0.5em 0.25em; 
}   

/*TableSaw */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  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.4); /* Black w/ opacity */
}

/* prevent pull-to-refresh for Safari 16+ */
@media screen and (pointer: coarse) {
  @supports (-webkit-backdrop-filter: blur(1px)) and (overscroll-behavior-y: none)  {
    html {
      min-height: 100.3%;
      overscroll-behavior-y: none;
    }
  }
}

/*Modals for Windcave */
#mbrWC { padding: 0; text-align:center; }
#mbrWCFr { padding:0.5em; }
#verWC { padding: 0; text-align:center; }
#verWCFr { padding:0.5em; }

/* WindCave iFrame */
/* Control the height of the iframe */
/* From WC: min HxW: 400x570 */
/* 37.5em = 600px @ 16px per em*/
.responsive-iframe { 
   min-height: 95%; 
   height:97%; /* Temporary: change to 100% after initial period once confident in payments*/
   min-width:100%; 
   max-width:50em; 
   background-color: var(--main-color); 
   overflow: auto; 
   border: 1px solid #000; 
} 

/* Small devices (tablets, 768px and up) */

:root {
   --main-media-adj: 1;
   --main-font-size: calc(16px * var(--main-media-adj));
}

/* Font sizing - larger on larger screen devices BUT without re-sizing for landscape */
@media screen and (orientation:portrait) and (min-width: 541px ) { :root {  --main-media-adj: 1.15; } } 
@media screen and (orientation:portrait) and (min-width: 601px ) { :root {  --main-media-adj: 1.20; } } 
@media screen and (orientation:portrait) and (min-width: 769px ) { :root {  --main-media-adj: 1.35; } } 
@media screen and (orientation:portrait) and (min-width: 912px ) { :root {  --main-media-adj: 1.45; } }