:root {
  /* not accepted by media queries */
  /* --mediaSwitch: 600px; /* 40 * 16 */ /* menu change, shrink fonts, maybe */
  /*  --mediaMax: 768px; /* max width of screen when forms stop scaling wider */

}
        
*, 
box-sizing 
::before,  ::after {
  box-sizing: inherit;
}

body {
  margin:0;
  overflow:hidden;
 
  --fontStandard:var(--fontBasis);
  --fontSmall:calc(  var(--fontBasis) - 1px );
  --fontLittleSmaller:calc( var(--fontBasis) - 2px);
  --fontSmaller:calc( var(--fontBasis) - 3px);
  --fontSmallest:calc( var(--fontBasis) - 5px );
  --fontBig:calc( var(--fontBasis) + 1px);
  --fontBigger:calc( var(--fontBasis) + 3px );
  --fontBiggest:calc(  var(--fontBasis) + 5px);

  --fontFamily:'Lato';
  --chatFontFamily: 'Arial';


 /* configured colors */
    --linearLight:aliceblue;
    --linearDark:slategray;
    --buttonColor: #79bbff;
    --buttonHoverColor: #378de5;
    --walkfestColor:black;
    --buttonTextColor:white;
    --extraTextColor:black;
    --backgroundImage:linear-gradient(to right, var(--linearLight), var(--linearDark));

    --borderSize:3px;
    --borderColor:#6D5A7A; /*maroon*/
    --borderRadius:16px;

    background-color: white;  
    box-sizing: border-box;
    font-family: var(--fontFamily),  'Helvetica', sans-serif, 'Courier New';
    background-image: var(--backgroundImage);
  
 
    --menuGray:hsl(0,0%,90%); 
    --menuFocusGray: hsl(0,0%,93%);
    --menuActionGray:hsl(0,0%,82%);

    --headerGray:hsl(0,0%, 90%); 
    --subheaderGray:hsl(0,0%,96%);
    --warningGray: hsl(0,0%,70%);


    /* text color, not bg */
   --instructionsColor: hsl(0,0%,35%); /* very dark gray */


/* The popup form - hidden by default */

  --screenDisableColor: rgba( 151, 151, 151, .1);
  --listZ: 6; /* lists at the bottom */
  --popupZ: 7 ; /*  yes/no/single button  middle */
  --backgroundZ: 8; /* animation at the top */
  --shadowColor:hsl( 5, 0%, 75% );


  --backgroundColor: white;

  --specialPopupHeaderColor:var(--linearLight);


  --buttonHighlightColor: var(--linearLight);

  /* lol backwards */

  --otherMessageColor:var(--linearDark);
  --myMessageColor:var(--linearLight);


  --modalFontSize: var(--fontStandard);
  --modalTitleFontSize:calc( 1.3* var(--modalFontSize));
  --modalPromptFontSize:calc( 1.1* var(--modalFontSize));
  --modalButtonFontSize:calc( 1 * var(--modalFontSize));
  --modalBackgroundColor:white;
 
  
 

  --buttonSizeBasis:var(--fontStandard);
  --buttonFontSize: var(--fontStandard);
  --shadowRadius:calc( .25 *  var(--fontStandard));
  --modalBlurRadius: calc( var(--buttonFontSize) + 2px);
  --buttonBlurRadius: calc( .5 * var(--fontStandard));
  

/* default is for phone */

  font-size:var(--fontStandard);
  --fontBasis:16px;

 
  --standingsContainerHeight:25em;

  --standingsSelf: var(--buttonHoverColor);
  --standingsTeam: var(--buttonColor);
  
 
    font-weight:400;



}


:root {
    
     --main-hue:220;
    --very-light:hsla( var(--main-hue),32%, 95%, .4 );
    --veryLight:hsla( var(--main-hue), 32%, 95%, .4 );
    --light:hsl(var(--main-hue), 32%, 92%);
    --dark: hsl(var(--main-hue),32%, 80%);     
    --veryDark: hsl(var(--main-hue),32%, 40%);  
}


/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  /* bigger than this */
  body{
    --fontBasis:16px;
    --standingsContainerHeight:80%;
  }
}
/* Bigger than this */
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  body{
    --fontBasis:16px;
    --contentMinWidth: 38em;
    --contentMaxWidth: 38em;
  }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

}

.walkfest-style,
.walkfest-style-no-color,
.walkfest-style-details {
  font-weight: bold;
  font-size:1.3em;
  font-family:'Boogaloo', var(--fontFamily),  'Helvetica', sans-serif, 'Courier New';

}
.walkfest-style {
    color:var(--walkfestColor);
}
.walkfest-style-details {
  color: #C43131;
}


.lineHeight {
  line-height: 1.4;
}
.floatLeft {
  float:left;
}
.floatRight{
  float:right;
}
.bold {
  font-weight: bold;
}
.italic {
  font-style:italic;
}
.textLeft {
  text-align: left;
}
.textRight {
  text-align: right;
}
.textCenter {
  text-align: center;
}
.fontStandard {
  font-size:var(--fontStandard);
}
.fontBig {
  font-size:var(--fontBig);
}
.fontSmall {
  font-size: var(--fontSmall);
}
.fontSmaller {
  font-size:var(--fontSmaller);
}
.fontSmallest {
  font-size:var(--fontSmallest);
}
.marginLeft {
  margin-left: 1em;
}
.marginRight {
  margin-right:1em;
}
.pushDown {
  transform:translateY(1.5em);
}

.resizeInputWrapper {
  display:flex;
}
.resizeInput {
  flex:1;
}



.note {
  margin: 1em;
}
.small-instructions {
  font-size: var(--fontSmallest);
  color:var(--instructionsColor);
}
.instructions {
  font-size: var(--fontSmaller);
  color: var(--instructionsColor);
}

.iconOverText {
  display:flex;
  flex-direction: column;
  margin-left: .5em;
  color:black;
  cursor:pointer;
  justify-content: center;
}
/* for inline icons */
.iconButton {
  color:slategray;
  cursor:pointer;
}
.iconButtonIcon {

}
.iconButtonIcon:not([disabled]):hover{
  color:darkgray;
}
.iconButtonIcon:[disabled]:hover {
  cursor: not-allowed;
}
.iconButton:action {
  position: relative;
  top:2px;
}
.delete::before,
.password::before,
.personAdd::before,
.person::before {
   font-family: 'Material Icons';
   color:lightgray;
   font-size:18px;
   content:'person ';
}
.personAdd::before {
  content:'person_add ';
}
.password::before {
  content:'lock ';
}
.delete::before{
  content:'delete_outline';
}
/* for iphone */
.mail::before,
.nomail::before {
  color: red;
  font-size:18px;
  font-family: 'Material Icons';
  content: 'mail_outline';
}
.nomail::before {
  color:lightgray;
}
.mail::after,
.mail::after {
  color: red;
  font-size:18px;
  font-family: 'Material Icons';
  content: '';
}
.nomail::after {
  color:lightgray;
}

/* for big screen */

@media screen and (min-width: 601px) {
  .mail::before {
    content:'';
  }
  .mail::after {
    content:'mail_outline';
  }
}


.standardImage {
  width:var(--fontStandard);
  height:var(--fontStandard);
}


/* the background page*/
.page {
  display:flex;
  flex-direction: column;
  height:100vh;
  height:100dvh;
}


.walkfest-header {
  display: flex;
  flex-direction: column;
  justify-content: center;

}
.walkfest-title {

}
.walkfest-edition {
  font-size: 13px;
}
@media only screen and (max-width: 600px) {
  .nav-item.install{
    display:flex;
    flex-direction: column;
    align-self: center;
    font-size: 11px;
    align-items: center;
    justify-content: center;
    width:5em;
    height:5em;
    clip-path:circle(50%);
    background-color: var(--linearLight);
  }
 /*.nav-item.install:hover,*/
  .nav-item.instsall:active,
  .nav-item.install:focus {
    background-color: var(--linearLight);
  }
}


.offline-text {
  background:var(--warningGray);
  color:white;
  font-weight: bold;
  text-align: center;
  padding:.5em;
  display:none;
}
.offline-text[offline] {
  display:block;
}

.nav-item.hidden {
  display:none;
}

/************** ALL MENU ITEMS **************/

.main {
  display:flex;
  flex-direction: column;
  /*overflow:auto; no - let the individual panels handle it */
  align-self: center;
  margin-top:10vh;
  margin-top:10dvh;
  /*margin-bottom: auto;*/
  margin-bottom:5vh;
  margin-bottom:5dvh;
  background-color: var(--headerGray );
  /*box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5);*/
  border: var(--borderSize) solid var(--borderColor);
  border-radius: var(--borderRadius);
  overflow:hidden; /* keep the divs below inside the radius!*/
}

.longContainer {
  /*min-height:80vh;
  min-height:80dvh;*/
  height:80vh;
  height:80dvh;

}
.conversationContainer {
  display:flex;
  flex-direction: column;
  height:60vh;
  height:60dvh;
}

.main:not(.longContainer) {
  overflow-y: auto;
}
  
/* phones */
@media only screen and (min-width:0px){
 .main {
    width:97%;
    max-width: calc( .97 * 600px);
    margin-top:3vh;
    margin-top:3dvh;
  } 
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .main {
    width:90%;
    max-width:calc( .9 * 768px);
    margin-top:5vh;
    margin-top:5dvh;

  } 
}

.tinyWord {
  font-size: 11px;
  font-weight: normal;
  text-transform: uppercase;
}

.scrollable{
  overflow-y:auto;
  overflow-x:hidden;
}

.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: var(--headerGray);
   color: black;
   padding:.5em;
   text-align: left;
}
/*--------------------------*/
/* top part of every card */

.headerContainer {
  display:flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding:.5rem 0;
  background-color: var(--headerGray);
}
.headerText {
  text-align: left;
  margin-left: 1em;
  font-size: var(--fontBigger);
  font-weight: bold;
}

/*--------------------------*/
/* Sign In, Account         */

.accountContainer {
  background-color: white;
  padding:1em 1.5em;
  display:flex;
  flex-direction: column;
  overflow-y: auto;
}
.checkboxWrapper{
  display:flex;
  justify-content: flex-end;
  margin: .4em 0;
}
.checker {
  margin-left: .5em;
}

.account_invalid,
input[account_invalid] {
  border:2px solid blue;
}


input[type='email']:invalid {
  border:2px solid red;
}

input[type='password']:invalid {
  border:2px solid red;
}
input[type='text']:invalid {
  border:2px solid red;
}

.link-box {
  display: flex;
  justify-content: center;
  font-size: var(--fontLittleSmaller);
  gap:.5em;
  padding-top: 1em;
  cursor: default;
}
.link-password {
  font-size: var(--fontLittleSmaller);
  cursor: default;
}

.link-text {

}
.link-password,
.link-account {
  color:var(--extraTextColor);
  font-weight: 400;
}
.link-password:hover,
.link-account:hover {
  font-weight: bold;
}

/* ----------------------*/
/* hello */

/* assume a phone */

.headerContainer.helloHeader {
  display:none;
}
.helloContainer {
  display:flex;
  flex-direction: column;
  background-color: white;
  align-items:stretch;
  padding:3em;
  gap: 1em;
  overflow-y: auto;
  min-height:fit-content;
}
.greetingContainer {
  display:flex;
  flex-direction: column;
  align-items:center;
  font-size: var(--fontBiggest);
  padding: 1.5em;
  gap: .25em;
  border: 3px solid var(--buttonHoverColor);
}
.imageContainer {
  display:flex;
  flex-direction: column;
  margin-top:1em;
  align-items:center;
  gap:1em;

}
.center-icon {
  width: 100px;
}
.left-icon {
  display: none;
}
.helloText {
  font-size: var(--fontSmall);
}

.hello-box {
  display:flex;
  flex-direction: row;
  align-self: center;
  align-items: center;
}
.hello-message-box {
  display:flex;
  flex-direction: row;
  align-self: center;
  align-items: center;
}

@media (min-width: 600px) { /* but, if it's a fullscreen... */
  .main-wallpaper {
    margin:0;
    min-height: 100%;
    min-width: 100%;
    box-shadow:  none;
  }
  .left-icon {
    display:inline;
  }
  .greetingContainer {
    margin:auto;
    margin-top:20vh;
    margin-top:20dvh;
  }
  .imageContainer {
    margin-top: 1em;
    flex-direction: row;
    gap: 2em;
  }
  .bottom-icon-box {
    display:flex;
    flex-direction: column;
    gap: 1em;

  }
  .helloContainer {
    min-height: 100%;
    justify-content: center;
    padding:0;
    overflow-y: hidden;
  }
}

/*--------------------------*/
/* Contacts for messages */

.contactsContainer { 
  height:100%;
  background-color: white;
}
.contactCard {
    display: grid;
    padding: .5em .5em;
    background-color: white;
    border-bottom: 1px dotted lightgray;
    grid-template-columns: 2em auto 20% 10%;;
}
.contactTeam {
  /*border: 1px solid var(--standingsTeam);*/
  background: color-mix(in srgb, var(--standingsSelf) 15%, white);
}
.contactTeamMembers {
  /*border: 1px solid var(--standingsTeam);*/
  background: color-mix(in srgb, var(--standingsTeam) 5%, white);
}

/*--------------------------*/
/* Standings                */

.standingsContainer { 
  /*
  min-height:60vh;
  min-height:60dvh;
  max-height:60vh;
  max-height:60dvh;
  */
  height:100%;
  background-color: white;
}
.standingsSelectLabel {
  padding:.5em 0;
}
.standingsSelect {
  min-width:75%;
}
.standingsCard,
.teamStandingsCard {
    display: grid;
    padding: .5em .5em;
    background-color: white;
    border-bottom: 1px dotted lightgray;
    grid-template-columns: 2em auto 20% 10%;;
}
.standingsHeader {
  display:flex;
  flex-direction: column;
  padding:1.5em;
  background-color: white;
}


.standingsSelf {
  /*border: 1px solid var(--standingsTeam);*/
  background: color-mix(in srgb, var(--standingsSelf) 15%, white);
}
.standingsTeam {
  /*border: 1px solid var(--standingsTeam);*/
  background: color-mix(in srgb, var(--standingsTeam) 15%, white);
}

/* Team card - used for both Team and Standings */
/* a single team card */

/* header plus lines of score/rank plus member list */

.teamCard {
  padding: 4px 0px;
  margin: 1em;
}
.teamCard > div:last-child{
  font-weight: bold;
}
.participantCard {
  display:flex;
  flex-direction: column;
  margin: 1em;
  gap: .75em;

}
.scoreLine {
  display:grid;
  grid-template-columns: 50% 50%;
}
.participantLine {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  text-align: center;
}
/* score rank */
.teamScoreLine {
  display: grid;
  padding: 4px 0px;
  margin: 5px 0px;
}
.scoreRankCols {
  grid-template-columns: 40% auto;
}


/* lines holds teamDisplayLeft and Right */
/* use for header also */
/* grid or flex? */

.teamMemberLine {
  display:grid;
  grid-template-columns: 10em calc(100% - 10em);
  /*background-color:white;*/
  padding:.5em 0em;
  border-bottom:1px dotted lightgray;
}

.teamDisplayLeft {

}
.teamMemberName {
  white-space: nowrap;
}
.teamDisplayRight {
  display:flex;
  flex-direction: row;
  display:grid;
  /* (grid-template-columns: minmax(7em,auto) minmax(7em, auto) minmax(3em, auto) minmax(3em, auto) minmax(3em, auto);;*/
    grid-template-columns: 6fr 4fr 4fr 4fr 4fr;
}
.internal {
  grid-template-columns: 6fr 7fr 4fr 4fr 4fr 4fr;
}


@media (max-width: 600px) { /* if it's a phone... */
  .teamMemberLine {
    display:flex;
    flex-direction: column;
  }
}
/* for the invitations :< */
/* style for wide screen */

.wide-left-small-right {
  display:grid;
  grid-template-columns: 4fr 1fr;
  align-items: center;
  margin-top: .5em;
}
.wide-left {
  text-align: left; /* for any text elements */
}
.small-right {
  margin: 0 1em;
}
@media (max-width: 600px) { /* if it's a phone... */
  .flexible > .wide-left {
    width:100%;
  }
  .flexible.wide-left-small-right {
    display:flex;
    flex-direction: column;
    gap:.5em;

  }
  .flexible > .small-right {
    align-self: flex-end;
  }
}

/*-------------------------------------*/
/* Be on a Team, Team, Manage a Team   */

.ss-single {
  width:100%;
}

.startTeamContainer,.teamContainer {
  background-color: white;
  padding:.5em;
  display:flex;
  flex-direction: column;
  margin:.5em 0 0 0;
}
.startTeamContainer {
  margin:0;
}
.startTeamContainer > .rosterCard {
  border:none;
}


.headingMargin{
  margin-bottom:.5em;
}

.inviteDisplay {
  display:flex;
  flex-direction: column;
  margin-top: 1em;
  gap: 0.5em;
}
.inviteDisplay > div:nth-child(1) {
  text-align: left;
  font-weight: bold;
  font-size: var(--fontBig);
}

.inviteDisplay > div:not(:first-child) {
  text-align: left;
}


/*---------------------------*/
/*  activity        */

.enterContainer{
  background-color: white;
}
.activityContainer {
  height:100%;
  background-color: white;
}

.headerCardSplit{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 1em;
  background: white;

}
.headerCardLeft {
  display: grid;
  column-gap: 1em;
  grid-template-columns: auto auto;
}
.headerCardRight {
  float:right;
  display: flex;
  flex-direction: row;
  justify-content: end;
}

@media (max-width: 300px) { 
  .headerCardRight,
  .headerCardLeft {
    flex-direction: column;
  }
}
.enterCardHeader{
    display: flex;
    flex-direction: row;
    justify-content: end;
    /*border: 1px solid green;*/
    margin-bottom: 1em;
    gap:2em;
}

.activityCard,
.enterStepsCard,
.enterActivityCard {
  display:grid;
  /*background-color:white;*/
  padding:.5em .5em;
  border-bottom:1px dotted lightgray;
  grid-template-columns: 20% 40% 15% 15% 10%;
}
.enterActivityCard,
.enterStepsCard {
  grid-template-columns: auto 7em 5em 3em;
}
.activityContainer > div:first-child {
  border: 1px;
  border-color: var(--buttonHoverColor);
  background-color: color-mix(in srgb, var(--buttonHoverColor) 5%, white);
  border-style: solid;
  padding: .75em;
  margin-top: .5em;
}
.activityContainer > div:first-child > div > span {
 font-size: 32px;
 font-weight: bolder;
}



.enterActivityCard {
  display:grid;
  grid-template-columns: auto 15em;
}

.walkLabel {
  text-align: left;
  display: inline-block;
  vertical-align: top;
  margin: 3px 12px;
}

.activitySteps {
  display:flex;
  flex-direction: row;
  justify-content: flex-start;
  font-size:var(--fontSmaller) ;
}

@media (max-width: 600px) { /* if it's a phone... */
  .enterActivityCard{
    display:flex;
    flex-direction: column;
    height:7em;
    column-gap: 1em;
    justify-content: space-around;
  }
  .activitySteps {
    flex-direction: column;
  }
}

.enterActivitySelect {
  margin: 0 1em 0 0;
}

.enterActivityCardRight {
  display:flex;
  gap:.25em;
}
.showSteps {
  width:5em;
}


.overFlowWrapAnywhere {
  overflow-wrap: anywhere;
}
.split {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  background-color: white;
  padding-top: .5em;
}


/* rosters... */

.rosterContainer {
  /*
  min-height:70vh;
  min-height:70dvh;
  max-height:70vh;
  max-height:70dvh;
  */
  height:100%;
  background-color: white;
}
.rosterGroup {
  display: flex;
  flex-direction: column;
}
.rosterGroup > div:nth-child(1) {
  text-align: center;
  font-weight: bolder;
  padding: .5em 0;
  background-color: var(--subheaderGray);
}
/* many on a page */
.rosterCard {
  display:flex;
  flex-direction: column;
  padding:.5em .5em;
  overflow-wrap: anywhere; 
  border:1px solid lightgray;
  background-color: white;
}
.rosterCard.userTeam {
 /*border:2px solid var(--standingsTeam);*/
 background: color-mix(in srgb, var(--standingsTeam) 5%, white);
}
.rosterCard > div:nth-child(1) {
  text-align: center;
  font-size: var(--fontBig);
  font-weight:bolder;
  margin: .5em 0;
}
.rosterCard > div:nth-child(1):hover {
   background-color: rgb(245,245,245);
}
.rosterCard > div:nth-child(2) {
  font-weight: bolder;
  margin-left: 1em;
  margin-bottom:.5em;
}

.rosterCard > div:nth-child(2):hover {
   background-color: var(--headerGray);
}
.rosterMembersContainer {
  display: grid;
  grid-template-columns: repeat(auto-fill, 50%);
  grid-row-gap: .5em;
  margin-left: 1em;
}
.rosterMembersContainer > div:hover {
   background-color: var(--headerGray);
}


/* messages ...*/

.messageContainer {
  display:flex;
  flex-direction: column;
  /*
  min-height:70vh;
  min-height:70dvh;
  max-height:70vh;
  max-height:70dvh;
  */
    height:100%;
  background-color: white;
}

.replyBox {
  display:flex;
  flex-direction: row;
  gap: .5em;
  margin:1em;
}
.replyBox > textarea {
  flex: 1;
  font-size: 1rem;
  font-family: var(--fontFamily),  'Helvetica', sans-serif, 'Courier New';
}
.replyBox > button {
  /*background-color: orange;
  border-color: pink;*/
  margin:.5em .5em .5em auto;
}
.replyBox > .walkButton:not([disabled]):hover {
  /*background-color: yellow;*/
}
.sendMessage {
  height:3em;
}


/* used by test */
.formTitleRow {
    margin: 0 auto 20px;
}
.title {
    color: #4C565E;
    font-size: 24px;
    padding: 0 0 12px 0;
    margin: 0;
}

.svg-icon {
    width:2rem;
    height:2rem;
}

.masked {
  width: 20px;
  height: 20px;
  background-color: #8cffa0;
  -webkit-mask-image: url(./images/one-bird.png);
  mask-image: url(./images/one-bird.png);
}




.select{
    background-color: #ffffff;
    color: var(--headerGray);
    width: 240px;
    box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);
    padding: 12px 18px;
    border: 1px solid #dbdbdb;
}

/* admin to select a user */
.selectContainer {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 1em;
  min-height:40vh;
  min-height:40dvh;
  max-height:40vh;
  max-height:40dvh;
  background-color: white;
}




/* image over text */
/* team card */
.imageAndScore{
  display: flex;
  flex-direction: column;  
}
.statusIcon {
  text-align: center;
}
.statusScore {
  font-size:.7em;
  text-align: center;
}
.labelSelect {
  padding-top:.5em;
}



/*********** TEXT INPUT **********/
/* https://wave.free-now.com/components/input */
.formItemMargin {
  margin: .5em 0em .5em 0; /* changed to put margin ont the right */
}

.inputWrapper {
  display: inline-block;
  position: relative;
  box-sizing: border-box;

  text-align: center;
  font-size: var(--fontStandard); /** FIXME **/
  line-height: 1.5;
  
}

.baseInput {
  margin: 0px;
  box-sizing: border-box;
  background: rgb(255, 255, 255);
  color: rgb(0, 30, 62);
  /*font-family: "Open Sans", sans-serif;*/
  transition: box-shadow 100ms ease 0s, border 100ms ease 0s;
  outline: none;
  appearance: none;
  width: 100%;
  border-radius: 0.25rem;
  border: 0.0625rem solid rgb(198, 205, 212);
  font-size: 1rem;
  height: 3rem;
  padding: 0px 0.75rem;
}
.smallerBaseInput {
  height:2rem;
}

.baseInput:disabled {
  color: rgb(198, 205, 212);
  border-color: rgb(198, 205, 212);
  box-shadow: none;
  cursor: not-allowed;
}

.baseInputLabel {
  text-align: center;
  cursor:default;

  position: absolute;
  pointer-events: none;
  background-color: transparent;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: calc(100% - 2rem);
  transition: top 100ms ease-out 0s, left 100ms ease-out 0s, padding 100ms ease-out 0s, font-size 100ms ease-out 0s, color 100ms ease-out 0s, background 100ms ease-out 0s;
  top: 0.75rem;
  left: 0.5rem;
  padding: 0px 0.25rem;
  font-size: 1rem;

  font-weight: bolder;
  top: -0.5rem;
  font-size: 0.75rem;
  color: rgb(99, 118, 137);
  background: linear-gradient(0deg, rgb(255, 255, 255) calc(50% + 0.0625rem), transparent 50%);
}
.baseInput:disabled + .baseInputLabel {
  color: rgb(198, 205, 212);
  linear-gradient(0deg, rgb(255, 255, 255) calc(50% + 0.0625rem), transparent 50%)
}



/* place to hang the selects */
.selectBox {
   
}

/* do these get used? YES */

.selectBox select {
  background-color: white;
  padding: 12px;
  border: none;
  font-size: var(--fontStandard);
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
  -webkit-appearance:button;
  outline: none;
  min-width:80%;
}

.selectBox .greyOut {
  color:var(--light);
  background-color:orange;
  font-weight:bold;
}

.selectBox:hover::before {
  color: rgba(255, 255, 255, 0.6);
  background-color: rgba(255, 255, 255, 0.2);
}


.disappear{
  visibility: hidden;
}


/* invisible background where all modals live */
.loaderBackground,
.backgroundContainer {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: var(--listZ );
  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.1); /* Black w/ opacity */
  background-color: var(--screenDisableColor);
  
}

.loaderBackground {
  align-items: center;
  justify-content: center;
  z-index: 400;
}

.popupContainer {
  align-items: center;
  justify-content: center;
  transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
}


/* visible portion of the modal */
/* its top is set in code */
.contentPanel {
  position: relative;
  display:flex;
  flex-direction: column;
  background-color: var(--modalBackgroundColor);
  margin: 2em auto auto auto;
  box-shadow: 0px 6px var(--modalBlurRadius) -5px  var(--shadowColor);
  border: none;
  border-radius: var(--shadowRadius);
  width:80%;
  overflow-y:auto;
  border: var(--borderSize) solid var(--borderColor);
  border-radius: var(--borderRadius);
  overflow:hidden; /* keep the divs below inside the radius!*/
}


/* phones */
@media only screen and (max-width:600px){
 .contentPanel {
    min-width: 90%;
    margin: auto auto auto auto;
  } 
 .contentPanel.wide-content {
  min-width: 95%;
 }
}

@media only screen and (min-width: 600px) {
  .contentPanel {
    max-width:calc( .8 * 768px);
  } 
  .contentPanel.wide-content {
    min-width:30rem;
    width: 50rem;
    max-width:50rem;
    margin: auto auto auto auto;
 }
}

/* the x for closing */
/* The Close Button */
/* note - it's a whole div, 100% where x on right */
.close {
  color: #898989;
  font-size: 1.5em;
  font-weight: bold;
  padding-right: .5em;
  text-align: right;
  /*margin-left: auto;*/
  width:100%;
}
.close:hover {
  color: var(--buttonHoverColor);
  background-color: color-mix(in srgb, var(--buttonHoverColor) 15%, white);
}
.closeHover:hover {
  color: #000;
  text-decoration: none;
}

/* the title */

.contentTitle {
  font-size: var(--modalTitleFontSize);
  text-align: center;
  color:var(--titleFontColor);
  text-transform: capitalize;
  border-bottom: .3em solid var(--headerGray);
  transform: translateY(-.5em);
  padding-bottom: .5em;
}

/* put the element into this */
.contentFrame {
  overflow-y: auto;
  max-height:85vh;
  max-height: 85dvh;
}


.walkButton, .modalButton, .modalButtonHighlight, .button-details { 
  background-color:var(--buttonColor);
  border:1px solid var(--buttonColor);
  color:var(--buttonTextColor);
  display:flex;
  border-radius: 15px;
  align-items: center;
  font-size: var(--fontSmall);
  font-weight: bold;
  height:36px;
  justify-content: center;
  position: relative;
  padding: 0 16px;
  vertical-align: middle;
  width:fit-content;
  white-space:nowrap;


}
.walkButton:not([disabled]):active {
  position:relative;
  top:2px;
}
.walkButton:not([disabled]):hover  {
  background-color:var(--buttonHoverColor);
  border:1px solid var(--buttonHoverColor);
}

.walkButton:disabled {
   cursor: not-allowed;
}

.wideButton {
  width: unset;
  margin-top: 10px;
}

/* x can be default, but it's not highlighted */
.defaultButton {

}
.defaultButton:hover {
  font-weight: bolder;
  cursor:pointer; 
  background-color: var(--buttonHoverColor);

  opacity: var(--buttonOpacity );
}
/* Add styles to the form container (white area) */
.popupPanel {
 /* border: 3px solid purple;*/
  display:inline-block;
  background-color: #fefefe;
  border: 1px solid #888;
  width:75%;
  box-shadow: 0px 6px var(--modalBlurRadius) -5px  var(--shadowColor);
  border: none;
  border-radius: var(--shadowRadius);
  transform:translateY(-50%);
  border: var(--borderSize) solid var(--borderColor);
  border-radius: var(--borderRadius);
  overflow:hidden; /* keep the divs below inside the radius!*/
}

/* phones */
@media only screen and (min-width:0px){
 .popupPanel {
    max-width: calc( .75 * 600px);
  } 
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .popupPanel {
    max-width:calc( .75 * 768px);
  } 
}

.popupTitle, .paddedPopupTitle {
  font-size: var(--modalTitleFontSize);
  padding:1em 0 .5em 0;
  text-align: center;
  border-bottom: 1px solid var(--linearDark);
}

.paddedPopupTitle {
   padding:1em 0 .5em 0;

}
.centerText{
  text-align: center;
}
.centerTextWithBackground {
  text-align: center;
  padding: .5em 0;

}
.textWithBackground{
  padding: .5em;
  border-bottom:1px solid var(--headerColor);
}

.popupPrompt{

    font-size: var(--modalPromptFontSize);
    /*margin:10px 0 10px 0;*/
    padding: .5em 1em 1em 1em;
    text-align: center;
}

.popupContent {
  /*margin-top: 1em;*/

  margin-bottom: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
}
.popupTextContainer {

}

.inputBox {
  display: flex;
}

/* Full-width input fields */
.popupPanel input[type=text] {
  width: 7em;
  padding: 5px 0 5px 0;
  margin: 5px 0 10px auto;
  border: none;
  font-size: 1.1em;
  background-color: #ddd;
 }

.signinButtonBox,
.enterButtonBox {
  display: flex;
  text-align: center;
  margin: 1em 0;
  flex-wrap: wrap;
  align-content: space-around;
  justify-content: space-around;
}
.signinButton {
  padding: 0 4em;
}
.buttonHolder {

}

.buttonBox,
.modalButtonBox {
  display:flex;
  flex-direction: row;
  justify-content: flex-end; 
  padding: .5em 2em .5em 1em;
  gap:1.5em;
  /*background-color: white;*/
}

.modalButtonBoxCenter {
  justify-content: center;
}

.boxStart {
  justify-content: flex-start;
}

.oneButtonBox {
  justify-content: center;
}


/* Add some hover effects to buttons */
.choosePanel .btn:hover, .open-button:hover {
  opacity: .8;
}




/**
 * ----------------------------------------
 * animation slide-out-bottom
 * ----------------------------------------
 */
@-webkit-keyframes slide-out-bottom {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY( var(--panelTop));
            transform: translateY( var(--panelTop));
    opacity: 0;
  }
}
@keyframes slide-out-bottom {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY( var(--panelTop));
            transform: translateY( var(--panelTop));
    opacity: 0;
  }
}

/* ----------------------------------------------
 * Generated by Animista on 2023-2-3 13:8:3
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
.fade-out {
  -webkit-animation: fade-out .3s ease-out both;
          animation: fade-out .3s ease-out both;
}
.fade-in {
  -webkit-animation: fade-in .3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
          animation: fade-in .3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
/**
 * ----------------------------------------
 * animation fade-in
 * ----------------------------------------
 */
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation fade-out
 * ----------------------------------------
 */
@-webkit-keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


/* ----------------------------------------------
 * Generated by Animista on 2021-9-13 14:16:39
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

.slide-out-bottom {
  -webkit-animation: slide-out-bottom 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
          animation: slide-out-bottom 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

.slide-in-bottom {
  /*--topOfPanel: var(--panelTop );*/
  -webkit-animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
          animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/**
 * ----------------------------------------
 * animation slide-in-bottom
 * ----------------------------------------
 */

@keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY( var(--panelTop));
            transform: translateY( var(--panelTop));
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}


/**
 * ----------------------------------------
 * animation slide-out-bottom
 * ----------------------------------------
 */
@-webkit-keyframes slide-out-bottom {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY( var(--panelTop));
            transform: translateY( var(--panelTop));
    opacity: 0;
  }
}
@keyframes slide-out-bottom {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY( var(--panelTop));
            transform: translateY( var(--panelTop));
    opacity: 0;
  }
}


/* test form https://codepen.io/havardob/pen/eYJPwdb*/

 *, *:after, *:before {
   box-sizing: border-box;
}

/*******************************************/
/* allows text boxes to stretch **/

/* https://philipwalton.github.io/solved-by-flexbox/demos/input-add-ons/*/

.InputAddOn {
  display: flex;
  flex-direction: row;
  gap:1em;
  align-items: center;
}

.InputAddOn-field {
  flex: 1;

  /* field styles */
}

.InputAddOn-item {
  /* item styles */
}


/*********** menu again ************/
/* default is phone */
.toggle {
  color:black;
  font-size: var(--fontBigger);
}

.toggle[disabled] {
  color:#bfbfbf;
   cursor: not-allowed;
}

/* each menu item's styling */
.nav-item {
  display:flex; 
  align-items: center;
  height:3em;
  text-decoration: none;
  cursor:default;
  font-size: var(--fontBig);
}
.nav-item[disabled] {
  color:#bfbfbf;
  cursor: not-allowed;
}

.nav-item:not([disabled]):hover {
  font-weight:bolder;
  background-color: #dfdfdf;
}

.nav-item:not([disabled]):focus {
  font-weight:bolder;
  background-color: var(--menuFocusGray);
}
.nav-item:not([disabled]):active {
  font-weight:bolder;
  background-color: var(--menuActionGray);
}

.nav-item-remove {
  display:none;
}

.ph-menu.ph-header {
  display:flex;
}
.bs-menu {
  display:none;
}
.ph-header {
  flex-direction: row;
  justify-content: flex-end;
  font-size:var(--fontBiggest);
  padding: .5em;
  gap:.5em;
  border-radius: .2em;
  margin:0;
  background:var(--menuGray);
}
.ph-header > div:first-child {
  margin-right:.5em;
}
.ph-header > div:nth-child(2){
  margin-right: auto;
}

.ph-overlay {
  width: 0;
  height:100%;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  overflow-x: hidden;
  transition: width 250ms ease-in-out;
  background-color: var(--screenDisableColor);
  
}

.ph-show {
  width:100%;
}
.ph-content {
  border:1px solid var(--menuGray);
  position: absolute;
  flex-direction: column;
  width:75%;
  top:3em;
  text-align: right;
  background: white;
  /*flex-wrap:wrap; /* aligns need this/?? */
  align-items: center;
}
.ph-content > .nav-item {
  border-top:1px solid #ccc;
  padding-right: 2em;
  font-size: var(--fontBiggest);
  white-space: nowrap;
  overflow-x:hidden;
  justify-content: flex-end;
}

.ph-logo {
  display:flex;
  background-color: var(--subheaderGray);
  justify-content: space-around;
  padding: .5em 0;
}

.bs-menu {
  display: none;
  justify-content: flex-end;
  flex-wrap: wrap;
  border-radius: .2em;
  margin:0;
  background: var(--menuGray);
  align-items: center;
}
.bs-menu > .nav-item {
  margin-top: 0;
  margin-right: 1.5em;
}
.bs-menu> .nav-item:last-child {
 /* leave in case want to use it */
}
.bs-menu> .nav-item:nth-child(1) {
  margin-left:1em;
  margin-right: .5em;
}
.bs-menu > .nav-item:nth-child(2) {
  padding:0 .25em 0 .5em;
  margin-right:auto;
}

/* big screen menu*/
@media screen and (min-width: 600px) {
  .ph-menu.ph-header{
    display: none; 
  }
  .ph-menu {
    display:none;
  }
  .bs-menu {
    display:flex;
  }

}

.site-nav > .toggle {
  display: none;
}


.side-header {
  display:none;
}
.circle {
 -webkit-clip-path: circle(50%);
  clip-path: circle(50%);
}

@media screen and (max-width: 600px) {
  .site-nav > .nav-item {
    display: none; 

  }
  .side-header,.site-nav {
    font-weight:400;
  }
  .nav-horiz-only {
    display:none;
  }


 
  .display-menu {
    display:flex;
    flex-wrap: wrap;
    align-content: flex-end;
    /*
    transform-origin: 0 0;
    transform:scaleY( 1 );
    transition: .5s ease ;
    */
  }

  .nav-horiz-only {
 
  }
  .site-nav.nav-horiz-only {
    display: block;
  }
  .ph-overlay >.toggle {
    display: block;
    margin-left: auto;
  }

 .ph-overlay.display-menu > .nav-item  {
    display:block;
  }
  .ph-overlay.display-menu > .nav-item:nth-child(-n+2) { /* first 2 elems */
    display:none;
  }
  .ph-overlay.display-menu > .nav-item:last-child {
    display:none;
  }
  
  /* click the button and turn them all on */
  /*.site-nav.display-menu > .nav-item:not(:nth-child(-n+1)) {
    display:block;
  }*/


}

.wide-content {
}

.faq_outer {
  display:flex;
  flex-direction: column;
  gap: .5em;
  font-size: var(--fontSmaller);
  background-color: var(--headerGray); /* match header color */
  overflow-y: auto;
}


.long_date {
  display:none;
}
.short_date {
  display:block;
}
@media only screen and (min-width: 600px) {
 .long_date {
    display:block;
  }
  .short_date {
    display:none;
  }
}

.headerContainer >* div.long_date {
  display:block;
}
.headerContainer >* div.short_date {
  display:none;
}

.faq_outer>div:first-child {
  font-size:var(--fontStandard);
}


.faq_icon {
  font-size: 28px;
}
.faq_section {
  display: flex;
  flex-direction: column;
  background:white;
  padding: .75em;
  /*box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5);*/
}
.faq_section>div {
   margin: .25em .25em 0 .25em;
}
.faq_section>div:first-child {
  font-size: var(--fontStandard);
  font-weight:bold;
  color:var(--extraTextColor); /* darkest */
  margin-bottom: .25em;
}
/*
.faq_outer>div:first-child>div:first-child {
  /*text-align: center;
  font-size: 1.5em; */
  /*color:black;
  font-weight: normal;
}*/

.faq_section>div:not(first-child) {
 
}
.faq_title {
  font-weight: bold;
}
.faq_menu {
  font-style: italic;
}

.faq_scoring {
  display:grid;
  grid-template-columns: 50% 25% 25%;
  align-items: center;
}
.faq_dates {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  margin: .25em;
}
.all_dates > div:last-child {
  grid-template-columns: 2fr 1fr;
} 

.faq_scoring > div:nth-child(4) {
   text-transform: capitalize;
}

.attrib-box {
  display: flex;
  white-space:nowrap;
  flex-wrap:wrap;
  gap: .1em;
}
.about_outer {
  display:flex;
  flex-direction: column;
  margin: 1em;
  text-align: center;
  gap: 1em;
}
.about_attrib {
  font-size: var(--fontSmallest);
  text-align: right;
}
/* HTML: <div class="loader"></div> */
/* HTML: <div class="loader"></div> */
.rloader {
  width: 100px;
  height: 50px;
  border-radius: 100px 100px 0 0;
  position: relative;
  overflow: hidden;
}
.rloader:before {
  content: "";
  position: absolute;
  inset: 0 0 -100%;
  background: radial-gradient(farthest-side at top,#0000 35%,#aa47be,#039be6,#26c6dc,#459e44,#f9ec44,#f68524,#fa3536,#0000) bottom/100% 50% no-repeat;
  animation: l8 2s infinite;
}
@keyframes l8 {
  0%,20%   {transform: rotate(0)}
  40%,60%  {transform: rotate(.5turn)}
  80%,100% {transform: rotate(1turn)}
}
/* loaders */
.xloader {
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* HTML: <div class="loader"></div> */
/* https://css-loaders.com/spinner/ */
/* HTML: <div class="loader"></div> */
/* HTML: <div class="loader"></div> */
.loader {
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 3px;
  background: 
    radial-gradient(farthest-side,var(--walkfestColor) 95%,#0000) 50% 0/12px 12px no-repeat,
    radial-gradient(farthest-side,#0000 calc(100% - 5px),var(--walkfestColor) calc(100% - 4px)) content-box;
  animation: l6 2s infinite ;
}
@keyframes l6 {to{transform: rotate(1turn)}}

/*https://cssloaders.github.io/*/
.Yloader {
        transform: rotateZ(45deg);
        perspective: 1000px;
        border-radius: 50%;
        width: 48px;
        height: 48px;
        color: #fff;
      }
        .loader:before,
        .loader:after {
          content: '';
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          width: inherit;
          height: inherit;
          border-radius: 50%;
          transform: rotateX(70deg);
          animation: 1s spin linear infinite;
        }
        .loader:after {
          color: #FF3D00;
          transform: rotateY(70deg);
          animation-delay: .4s;
        }

      @keyframes rotate {
        0% {
          transform: translate(-50%, -50%) rotateZ(0deg);
        }
        100% {
          transform: translate(-50%, -50%) rotateZ(360deg);
        }
      }

      @keyframes rotateccw {
        0% {
          transform: translate(-50%, -50%) rotate(0deg);
        }
        100% {
          transform: translate(-50%, -50%) rotate(-360deg);
        }
      }

      @keyframes spin {
        0%,
        100% {
          box-shadow: .2em 0px 0 0px currentcolor;
        }
        12% {
          box-shadow: .2em .2em 0 0 currentcolor;
        }
        25% {
          box-shadow: 0 .2em 0 0px currentcolor;
        }
        37% {
          box-shadow: -.2em .2em 0 0 currentcolor;
        }
        50% {
          box-shadow: -.2em 0 0 0 currentcolor;
        }
        62% {
          box-shadow: -.2em -.2em 0 0 currentcolor;
        }
        75% {
          box-shadow: 0px -.2em 0 0 currentcolor;
        }
        87% {
          box-shadow: .2em -.2em 0 0 currentcolor;
        }
      }




      /* why not https://codepen.io/drehimself/pen/KdXwxR */



.message-box {
  display:flex;
  flex-direction: column;
}
.message-other {
  align-items: flex-start;
}
.message-self {
  align-items: flex-end;
}


.chat {
  flex: 1;
  font-family:var(--chatFontFamily);
}

.chat .chat-history {
  padding: 30px 30px 20px;
  padding: 1em .5em;
  border-bottom: 2px solid white;
  margin: 0 1em;
}
.chat .chat-history .message-data {
  margin-bottom: 5px;
}
.chat .chat-history .message-data-time {
  color: #a8aab1;
  padding-left: 6px;
  font-size:var(--fontSmaller);
}
.chat .chat-history .message-data-name {
  color: black;
  padding-left: 6px;
  font-size:var(--fontSmaller);
}
.chat .chat-history .message {
  color: black;
  padding: 18px 20px;
  padding: 8px 12px;
  line-height: 26px;
  line-height: 20px;
  font-size: 16px;
  border-radius: 16px;
  margin-bottom: 30px;
  margin-bottom: 15px;
  width: 75%;
  width:fit-content;
  position: relative;
}

.chat .chat-history .my-message {
  background: var(--myMessageColor);
}
.chat .chat-history .other-message {
  background: var(--otherMessageColor);
}
.chat .chat-history .other-message:after {
  border-bottom-color: var(--otherMessageColor);
  left: 93%;
}
.chat .chat-message {
  padding: 30px;
}
.chat .chat-message textarea {
  width: 100%;
  border: none;
  padding: 10px 20px;
  font: 14px/22px "Lato", Arial, sans-serif;
  margin-bottom: 10px;
  border-radius: 5px;
  resize: none;
}


/* extra stuff for the details.html page */

/* page 286*/
/* use this for FAQs, help text, etc */
/* supposed to be 45 - 75 character range */

.details-page {
  font-family: 'Roboto',  'Helvetica', sans-serif, 'Courier New';
  font-size:14px;
  background-color: white;
  padding: 1em;
}

.bold-details {
  font-weight:bold;
}
.menu-details {
  background-color: var(--menuGray);
  padding:2px;
}
.button-details {
  display:inline;
  padding:2px 16px;
  font-size: calc( var(--fontSmall) - 1px);
}
.link-details {
  color:#79bbff;
}
.highlight-details {
  color: gray;
}
.strikeout-details {
  text-decoration: line-through;
}
.details-box {
  margin: 1rem;
  font-size: 13px;
  outline-color: #8cba77;
  outline-style: solid;
  padding: .5rem;
}
.question,
.answer,
.pg {
  margin:0rem auto 1rem auto;
  width:94%;
  display:inline-block;
}
.pg {
  width:100%;
}
.answer {
  position: relative;
  width:80%;
  left:20%;
}
.question {
  position: relative;
  width:80%;
  left: 0;
  text-align:left;
}

.top-title {
  font-size: 35px;
  text-align: center;
  margin:2rem auto;
}

.header1 {
  font-size: 24px;
  margin-bottom: 1rem;
  padding: .5em;
  background-color: #E3F1FF;
}

.header2 {
  font-size: 20px;
  margin-bottom: 1rem;
  padding: .5em;
  background-color: #E3F1FF;
}
.screen-image {
  min-width:250px;
  max-width:90dvw;
 
  align-self: center;
  margin-bottom: 1rem;
}
.three-phone-image {
   min-width:250px;
  max-width:90dvw;
 
  align-self: center;
  margin-bottom: 1rem;
}
.phone-image {
  min-width:250px;
  max-width:60dvw;

  align-self: center;
  margin-bottom: 1rem;
}
.text-container {
  display:flex;
  flex-direction: column;
  justify-content: center;
}
.image-text-container {
  display: flex;
  flex-direction: column;
}
.details-text {
  align-self:flex-start;
  line-height: 1.4rem;
}
.details-image {
  display:flex;
  justify-content: space-around;
}
/* big scrreen */
@media screen and (min-width:600px ){
  .phone-image {
      max-width:200px;
  }
  .screen-image {
     max-width:500px;
  }
  .text-container{
    margin-left:30%;
  }
  .image-text-container {
    display: grid;
    grid-template-columns: 50% 50%;
    margin: 0 3em;
    gap: 2em;
  }
  .details-text {
    text-align: left;
  }
  .details-page {
    margin: 2em 0;
    border: 3px solid #BFB8C2;
    font-size: 16px;
  }
}
.details-copywrite {
  font-size: 13;
}
.details-body {
  background:white;
  overflow-y:auto;
  max-width:850px;
  margin-left: auto;
  margin-right:auto;
}


.collapsibleHeader {
  /*background-color:var(--collapsibleHeaderColor);*/
  color: black;
  cursor: pointer;
  margin-top: 2px;
  padding: 10px 0px  10px  0px;
  width: 100%;
  border: 1px solid #ebf3e7;
  text-align: left;
  outline: none;
}
/* Unicode character for "plus" sign (+) */

.collapsibleHeader:after {
  content: '\02795'; 
  color: black;
  float: right;
  margin-right: 6px;
  margin-top: -4px;
}


.collapsibleActive, .collapsibleHeader:hover {
  /*background-color: palegreen;*/
 /* background-color: var(--collapsibleHeaderHoverColor);*/
}

/* unicode minus */
 
.collapsibleActive:after {
  content: "\2796"; 
}

.collapsibleContent {
  max-height: 0;
  display: block;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  /*background-color: var(--collapsibleContentColor);*/
}