/* Men's Club CSS */
* { box-sizing: border-box;
    width: 100%; max-width: 600px;
    } 
:root {
  /* Variables 005EB8 */
  --color0: #00081a;  /*          5% /* Very Dark Blue */
  --color1: #0038b8;  /*#0038b8; 36% /* Israeli Blue   */
  --color2: #004cff;  /*#80a6ff; 50% /* Blue Medium    */ 
  --color3: #4d82ff;  /*#4d82ff; 65% /* Blue           */
  --color4: #80a6ff;  /*#4d82ff; 75% /* Blue Light     */
  --color5: #ccdbff;  /*#CDF;    90% /* Blue Lighter   */
  --color_gray: #999; /* Gray          */
  --grey-dark: #333;
  --grey-medium: #A0A0A0;
  --grey-light: #EEE;
  --alert-background: #FF6;          /* Yellow */
  --error_background: #FFB3B3;
  --error_border_color: #C00;
  --warning-background: #FEEFB3;
  --warning-text: #9F6000;
  --success-background: #8F8;
  
  }
.color0 { color: var(--color0); } /* Very Dark Blue */
.color1 { color: var(--color1); } /* Blue Dark      */
.color2 { color: var(--color2); } /* Blue Medium    */ 
.color3 { color: var(--color3); } /* Blue           */
.color4 { color: var(--color4); } /* Blue Light     */
.color5 { color: var(--color5); } /* Blue Lighter   */
.color-gray { color: var(--color_gray); } /* Gray   */

.bgcolor1 { background-color: var(--color1) !important; } /* Blue Dark     */
.bgcolor2 { background-color: var(--color2) !important; } /* Blue Medium   */ 
.bgcolor3 { background-color: var(--color3) !important; } /* Blue          */
.bgcolor4 { background-color: var(--color4) !important; } /* Blue Light    */
.bgcolor5 { background-color: var(--color5) !important; } /* Blue Lighter  */
.bgcolor-gray { background-color: var(--color_gray); }    /* Gray          */
.bgcolor-alert { background-color: var(--alert-background); } /* Yellow    */

.border1 { border: 1px solid var(--color1); }
.border3 { border: 1px solid var(--color3); }
.border4 { border: 1px solid var(--color5); }

body { font-size: 14px; 
       margin: 0 5px;
       width: 100%; max-width: 600px;
       }
div, span  { 
  font-size: inherit; 
  font-family: inherit;
  }

.bold { font-weight: bold; }
.bottom { vertical-align: bottom; }

.CBCBlue    { color: var(--color1); }
.CBCLightBlue { background-color: var(--color5);  }
.CBC-Name { 
    font-family: "Times New Roman", serif; font-size: 275%; 
    font-variant: small-caps; font-style: italic; font-weight: bold;
    text-align: center; font-stretch: semi-expanded;
    }
.Page-Title { 
    font-family: "Times New Roman", serif; font-size: 225%; 
    font-variant: small-caps; font-weight: bold; color: var(--color0);
    width:100%; height:auto; margin-bottom:0px; padding-bottom:0px;
    text-align: center; font-stretch: semi-expanded;
    }
.Page-SubTitle { 
    font-family: "Times New Roman", serif; 
    font-size: 175%; 
    font-variant: small-caps;
    font-weight: bold;
    text-align: center; 
    font-stretch: semi-expanded;
    width:100%; height:auto;
    color: var(--color0);
    }
hr { 
    background-color: var(--color5);
    margin: 0; padding: 0; 
    width: 100%; height: 1px; border:0;
    }
.line {
    margin-bottom:0; padding-bottom:3px; 
    width:100%; height:1px; 
    border-bottom:1px solid var(--color5);
    }
.topline {
    margin-top:3px; padding-top:3px; 
    width:100%; height:1px; 
    border-top:1px solid var(--color3);
    }
form { 
  margin: 0; padding: 0; 
  font-size: 0.9rem;
  }
input:focus {
    outline: none !important;
    border-color: var(--color1);
    box-shadow: 0 0 10px var(--color1);
    }
textarea:focus {
    outline: none !important;
    border-color: var(--color1);
    box-shadow: 0 0 10px var(--color1);
    }
a:hover {
    color: var(--color1);
    box-shadow: 0 0 10px #0000FF; /* var(--color2) */
    } 
.requiredField {
  background-color:#FC9 !important;
  }
table { 
    margin: auto; 
    padding: 0px; 
    align-self: center;
    table-layout: auto;
    }
td { font-size: 0.9rem; } /* */
.right  { 
  text-align: right !important;
  }
.left   { 
  text-align: left !important;
  }
.center { 
  text-align:center !important;
  }
              
table.report {
  border: 1px solid var(--color_gray);
  text-align: left;
  border-collapse: collapse;
  margin-left: auto; margin-right: auto;
  caption-side: top;
  }
td.divider { 
  width:100%; height:auto; 
  margin-bottom:10px; 
  border-bottom:1px solid var(--color1);
  }

td.report {
  padding: 0.3em;
  border-bottom: 1px solid var(--color_gray); height:auto;
  }

th.report {
  padding: 0.3em;
  background-color: #eee;
  text-align: center;
  border-bottom: 1px solid var(--color_gray); 
  }
th.reportDivider {
  padding: 0em; height:1px;
  text-align: center;
  }
/*th.report:last-child {
  padding: 0.3em;
  border-bottom: 1px solid blue;
} */

caption.report {
  padding: 0.3em;
  font-size: 1.2rem;
  color: #fff;
  background: var(--color1); margin-bottom:5px;
  }
.report-head {
  padding: 0.3em;
  background-color: #eee;
  text-align: center;
  font-weight: bold;
  border-bottom: 1px solid #FFF; 
  height:auto; margin-top:10px;
  }
div.report {
  padding: 0.3em;
  font-size: 1.2rem;
  color: #fff;
  background: var(--color1); margin-bottom:5px;
  }

.button-submit, 
.button-submit-new,
.button-submit-faux, .button-other,
.button-copy, .button-delete,
.button-return {
  background-color: var(--color4); /* lightblue; */
  border: 2px solid var(--color1);
  border-radius: 10px;
  cursor: pointer;
  padding: 0px 10px; margin-right: 20px;
  width: fit-content; height: auto;
  }
.button-submit:hover {
  background-color:#000;
  color: #E77500; 
  border-color: #E77500;
  }
.button-copy {
  background-color: #9F9; 
  border-color: rgba(0,0,0,0.2);
  }
.button-copy:hover {
  background-color: rgba(204,255,204,1);
  border-color: #0C0;
  }
.button-submit-new {
  background-color:#FFF; 
  border:1px solid rgba(0,0,0,0.2);
  }
.button-submit-new:hover, 
.button-submit-new:focus {
  background-color:rgba(231,117,0,0.5);
  border: 2px solid #000;
  }
.button-submit-faux:hover, 
.button-submit-faux:focus { 
  /*background-color:rgba(231,117,0,0.5); 
  color:#000; border:2px solid #000;*/
  background-color:#000;
  color: #E77500; 
  border-color: #FF6000; }
.button-return {
  background-color: #FFFF80;
  }
.button-delete {
  background-color: #FF6666;
  }
.button-other {
  background-color: #c9c9c9;
  }

.menubar { 
  display:block; position:relative;
  width:100%; height:35px; 
  padding-bottom:1px;
  }
.menubar::before {
  content: "";
  width: 100%; height:40px; top:1px;
  background-image:url(https://BethChaimMensClub.org/images/StarOfDavid.gif);
  background-size: auto 100%;
  background-position: top center;
  background-repeat: space;
  position:absolute;
  opacity: 0.5;
  z-index:-1;
  }
    
.mylist     { width:125px;              }
.newbullet  { list-style : url(images/PULogoTiny.gif) disc }
.myButton   { width  : 200px; 
              height :  40px; 
	          background-color:#FF8040;        }
.mybutton1  { width  : 120px; 
              height :  25px; 
	          background-color:#FF8040;        }
.myButtonS  { width  : 200px; 
              height :  25px; 
	          background-color:#FF8040;        }
.myButtonSh { width  : 150px; 
              height :  25px; 
	          background-color:#FF8040;        }
.myButtonSS { width  :  50px; 
              height :  25px; 
	          background-color:#FF8040;        }
.myButtonW  { width  : 600px; 
              height :  40px; 
	          background-color:#FF8040; 
			  border-color:black;              }

  .grid-container {
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: 5px;
    /* border: 2px solid var(--color1); */
    border-radius: 8px;
    }
  .grid-box {
    display: block;
    border: 2px solid var(--color1);
    border-radius: 8px;
    }
  .fieldset {
    display: block;
    border: 2px solid var(--color1);
    border-radius: 8px;
    margin-bottom:2px;
    }
  .legend {
    border: 2px solid var(--color1);
    border-radius: 8px;
    -webkit-border-radius: 8px;
    background-color:#80a6ff;
    text-transform: capitalize;
    font-variant: small-caps;
    font-weight: bold;
    vertical-align:middle; 
    width:fit-content;
    padding: 0px 20px;
    /* box-shadow: 0 0 15px #011F5B; */
    }
  .FAQClosed { border:none; }
  .FAQOpen {  }
  .legendClosed { border: none; background-color: #FFF; }
  .legendOpen {  }
    
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted #002e99;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 500px; height: auto;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.label  { display:inline-block; width: auto;  height: auto; vertical-align: top; color:#3370FF;}
.label70{ display:inline-block; width: 60px;  height: auto; vertical-align: top; font-size:12px; color:#3370FF;}
.label1 { display:inline-block; width: 110px; height: auto; vertical-align: top; color:#3370FF;}
.label2 { display:inline-block; width: 125px; height: auto; vertical-align: top; font-size:12px; color:#3370FF; }
.label3 { display:inline-block; width: 200px; height: auto; vertical-align: top; font-size:12px; color:#3370FF; }
.label4 { display:inline-block; width: 300px; height: auto; vertical-align: top; font-size:12px; color:#3370FF;}
.label5 { display:inline-block; width: 400px; height: auto; vertical-align: top; font-size:12px; color:#3370FF;}
.label7 { display:inline-block; width: 700px; height: auto; vertical-align: top; font-size:12px; color:#3370FF;}
.data   { display:inline-block; width:  auto; height: auto; vertical-align: top;}
.data0  { display:inline-block; width:  75px; height: auto; vertical-align: top;}
.data1  { display:inline-block; width: 100px; height: auto; vertical-align: top;}
.data2  { display:inline-block; width: 200px; height: auto; vertical-align: top;}
.data250{ display:inline-block; width: 250px; height: auto; vertical-align: top;}
.data3  { display:inline-block; width: 300px; height: auto; vertical-align: top;}
.data4  { display:inline-block; width: 400px; height: auto; vertical-align: top;}
.data5  { display:inline-block; width: 500px; height: auto; vertical-align: top;}
.data6  { display:inline-block; width: 600px; height: auto; vertical-align: top;}
.data7  { display:inline-block; width: 700px; height: auto; vertical-align: top;}

.width-175 { width: 175px; }
.font09 { font-size:0.9em; }

input:required { background-color: #cce6ff; }
input { caret-color: #00F; }

.label {
  font-family: 'sans serif';
  /*font-size: 12px;
  color: #000;*/
  }
.requiredLabel {
  color: #003dcc; /* 002e99; */
  font-family:  'Old Standard TT', sans-serif;
  font-size: 14px;
  font-weight: bold;
  font-style: italic;
  }   
.requiredInput {
  background-color: #cce6ff;
  }

.errorMsg:before { /* Used by HTML/Javascript */
  content: " ERROR: ";  
  }
.errorMsg { /* Used by HTML/Javascript */
  display: none;
  width: auto; height:auto;
  text-align: left;
  white-space:pre-line;
  background-color: #FFB3B3;/* color: #D8000C; background-color: #FFD2D2;*/
  outline:3px solid #C00;
  margin: 5px 25px; 
  margin-left:50px;
  }
.error_message { /* Used by PHP  */
  display: grid;/*  */
  border: 3px solid var(--error_border_color);
  border-radius: 8px;
  background-color: #FFB3B3;/* color: #D8000C; background-color: #FFD2D2;*/
  background-color: var(--error_background);
  margin: 5px 25px 10px;
  padding: 2px 10px;
  height: auto; width: auto;
  text-align: left;
  white-space:pre-line;
  }
.error_fieldName {
  border: 1px solid var(--error_border_color);
  background-color: var(--error_background);
  }
.error_legend { /* User by PHP */
  border-radius: 8px;
  border: 3px solid #C00;
  background-color:#FFB3B3;
  /* text-transform: capitalize; */
  font-variant: small-caps; font-weight: bold;
  padding: 0 20px;
  }
.warningMsg:before { /* Used by HTML/Javascript */
  content: "Warning:\A";
  white-space: pre;
  }
.warningMsg { /* Used by HTML/Javascript */
  display: none;
  width: auto; height:auto;
  text-align: left;
  white-space:pre-line;
  color: #9F6000;
  background-color: #FEEFB3; /* color: #9F6000; background-color: #FEEFB3; */
  outline:2px solid red;
  margin: 5px 25px;
  }
.warning_message { /* Used by PHP  */
  display: block;
  width: auto; height:auto;
  white-space:pre-line;
  text-align: left;
  border-radius: 8px;
  border: 3px solid #FC0;
  background-color: #FFC; 
  color: #663d00;
  margin: 5px 25px;
  }
.warning_legend {
  border-radius: 8px;
  border: 3px solid #FC0;
  color: #663d00;
  background-color: #FFC;
  text-transform: capitalize;
  font-variant: small-caps; font-weight: bold;
  padding: 0 20px;
  }
.successMsg { /* Used by HTML/Javascript */
  display: none;
  width: auto; height:auto;
  text-align: center;
  background-color: #8F8; /* color: #4F8A10; background-color: #DFF2BF; */
  color: #000;
  outline:2px solid #000;
  margin: 5px 25px;
  }
.success_message { /* Used by PHP  */
  display: block;
  width: auto; height:auto;
  white-space:pre-line;
  text-align: left;
  border-radius: 8px;
  border: 3px solid #090;
  background-color: #8F8; /* color: #4F8A10; background-color: #DFF2BF; */
  color: #000;
  margin: 5px 25px;
  }
.success_legend {
  border-radius: 8px;
  border: 3px solid #090;
  background-color:#8F8;
  text-transform: capitalize;
  font-variant: small-caps; font-weight: bold;
  padding: 0 20px;
  }
.noticeMsg { /* Used by HTML/Javascript */
  display: none;
  width: auto; height:auto;
  white-space:pre-line;
  text-align: left;
  color: #00529B;
  background-color: #BDE5F8; 
  outline:2px solid red;
  margin: 5px 25px;
  }
.noticeMsg:before { /* Used by HTML/Javascript */
  content: "Notice:\A";  
  }
.warnMsg {
  display:none;
  }
.alertMessage { background-color: #FFC; height:auto; }
  
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 7; /* Sit on top */
  padding-top: 0px; /* Location of the box 50 */
  left: 0;
  top: 0px; padding-bottom:0px;
  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 */
  }
/* Modal Content */
.modal-content {
  width: 100%; max-width:100%; 
  height: fit-content; min-height:fit-content; max-height:90%; 
  padding:5px; overscroll-behavior-y: contain;
  }
/* The Close Button */
.close {
  color: #595959;
  float: right;
  font-size: 28px;
  font-weight: bold;
  }
.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
  }
.infoButton {
  display:inline; 
  /*float:right;
  background: url("https://Princeton79.org/images/info.png") no-repeat scroll 0 0 transparent;
  background-size: contain; */
  width:250px; margin-top:2px;
  background-color: #80a6ff; /* lightblue; */
  border: 2px solid var(--color1);
  border-radius: 10px;
  padding: 0px 10px;
  cursor: pointer;
  }   
  .closeDialog {
    float:right; height:20px; width:23px; 
    text-align:center; font-weight:bold; 
    border:1px solid var(--color1); border-radius:50px; 
    cursor:pointer;
    }
/******************************************************************************/
/* Modal Buttons - work with javascript code in MensClub.js                   */
.modalButtonRounded { border-radius:8px; }
.modalButton {
  display:inline; float:right;
  background: url("https://Princeton79.org/images/info-icon2.png") no-repeat scroll 0 0 transparent;
  height: 20px; width:20px;
  background-size: contain; 
  border: none;
  cursor: pointer;
  }
.modalButtonIcon {
  display:inline; float:right;
  background: url("https://Princeton79.org/images/info-icon2.png") no-repeat scroll 0 0 transparent;
  height: 20px; width:20px;
  background-size: contain; 
  border: none;
  cursor: pointer;
  }
.modalButtonPlain {
  display: inline; float: none;
  background: none;
  height: auto; width:fit-content;
  border: 1px solid black;
  cursor: pointer;
  }
.modalButtonPlainFaux {
  display: inline; float: none;
  background: none;
  height: auto; width:fit-content;
  border: 1px solid black;
  cursor: pointer;
  }
.modalButton:hover, 
.modalButtonIcon:hover,
.modalButton:focus,
.modalButtonIcon:focus {
  border: 1px solid #000; 
  background: url("https://Princeton79.org/images/info-icon3.png") no-repeat scroll 0 0 transparent;
  background-size: contain;  
  background-color:rgba(231,117,0,0.5) !important; 
  color:#000;
  }
.modalButtonPlain:hover,
.modalButtonPlain:focus,
.modalButtonPlainFaux:hover,
.modalButtonPlainFaux:focus {
  border: 1px solid #000; 
  background-size: contain; 
  background-color:rgba(231,117,0,0.5) !important; 
  color:#000;
  }
.modalButtonInfo {
  display:inline; float:none;
  height: auto; width:fit-content;
  background: none;
  background-color:#FFC; 
  border:1px solid black;
  border-radius: 8px;
  cursor: pointer;
  }

@media screen and (max-width: 760px) {
  .CBCMCLogo { display: none; }
  }
    
/* Flex Box */
.container {
  display:flex;
  flex-direction: row;
  flex-wrap: nowrap;/* */
  align-content: flex-start;
  width: 100%;
  max-width: 1000px;
  height: auto;
  }
.content-1 {
  position: relative;
  width: 49%;
  min-width: 49%;
  /*max-width: 500px;*/
  height: auto;
  padding-right: 10px;
  flex-basis: 50%; 
  flex-shrink: 1;  /*shrinks to 0 to apply 70% width*/
  }
.content-2 {
  position: relative;
  width: 49%;
  min-width: 49%;
  height: auto;
  }
.column-1 {
  height: auto;
  padding-right: 10px;
  /* order: 1; */
  }
.column-2 {
  float: right;
  margin-right: 0;
  width: 49%;
  min-width: 49%;
  height: auto;
  /*max-width: 50%;*/
  flex-shrink: 1;
  flex-basis: 50%;
  }
.data-block {
  height: auto;
  width: 100%; 
  display: block;
  padding-bottom: 10px;
  }

@media  screen and (max-width: 850px) {
  .container {
    flex-direction: column;
    }
  .column-1, .column-2 {
    float:left;
    width: 100%;
    max-width:100%; 
    clear:both;
    }
  .content-1 {
    width:100%;
    }
  .content-2 {
    width:100%;
    }
  /*textarea { max-width: 40em; }*/
  }

/******************************************************************************/
/* New Page Headers             */
.PageTop {/* Page Top container */
    display:flex; 
    flex-direction:row; 
    align-items:flex-start;
    width: 100%; 
    height:auto; min-height: 60px;
    vertical-align: top;
    padding-top: 0px; 
    padding-bottom: 4px; 
    border-bottom: 1px solid var(--color2);
    }
.PageHeader {    /* Page Title */
    width: 200px; 
    height:auto; min-height: 60px;
    vertical-align: middle;
    font-size: 32px; 
    font-weight: bold; 
    color: #000; /*#E77500*/
    }
.PageHeaderAdmin::before {
    content: "";
    white-space: pre;
    }
.PageHeaderAdmin {/* Admin Menu */
    width: 100%; height: 60px;
    vertical-align: top;
    font-size: 32px; 
    font-weight: bold; 
    text-align: center;
    color: #000; /*#E77500*/
    }

/******************************************************************************/
/* Page Messages                                                              */
.PageMessages {
  display: block; 
  width: calc(100% - 10px); height: auto; 
  margin: 5px 5px 5px; padding: 5px 10px;
  border: 3px solid var(--color1); border-radius: 8px;
  background-color: #FF6;
  }
.msgNum { display: inline-block; width: 15px; height: auto; text-align: right; }

.emailIcon {
  display: inline-block;
  height: 20px; width: 20px;
  }

.section {
  padding-bottom:10px;
  border-bottom:1px solid rgba(195,195,195,0.3);
  width: 100%; height:auto;
  }
.section:not(:first-of-type) {
  padding-bottom:10px; padding-top: 10px;
  border-bottom:1px solid rgba(195,195,195,0.3);
  height:auto;
  }
.sectionLabel { 
  display: inline-block;
  width:275px; height:auto; 
  vertical-align:top; float:left;
  margin-bottom:5px; 
  font:bold 20px 'Old Standard TT', serif;
  }
.sectionBlock { 
  display:inline-block; 
  max-width:300px; height:auto; 
  padding:0 5px 0 0;
  }
.prompt { 
  display: inline-block; 
  margin:0; padding:0; padding-right:15px;
  width:auto; height:auto;
  }
.forgot {
  background-color:#FFF;
  font-size:12px;
  font-style:italic;
  text-decoration:underline blue; 
  }
.divI { 
  padding-bottom:10px; 
  width:300px; height:auto;
  }

/******************************************************************************/
.footerButton {
  display:inline-block; width:75px; height:30px; 
  text-align:center; vertical-align:bottom; 
  padding:0;
  }
  
/******************************************************************************/
/* Full-width border under text                                               */
xh2 {
  display: inline-block;
  position: relative;
}
xh2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background: gold;
  z-index: -1;
}