/* Honeypot styling that hides an input by moving it off the form. 
If it is filled in on submit, probably a bot filled it in. */
.hp-container {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.nowrap {
    white-space: nowrap;
}

#pickleskills table {
  border-collapse: collapse;
}
#pickleskills td, th {
  padding: 2px; /* or 0 for no space */
  padding-left: 5px;
}

#pickleskills_s1 {
    background-color: #f0f8ff;
}

#pickleskills_s2 {
    background-color: #f5dbd7;
}

#pickleskills_s3 {
    background-color: #c3d6c9;
}

#pickleskills_s4 {
    background-color: #f5f5d7;
}

    /* Overlay styles */
  #show_overay_button {
    background: none;
    border: none;
    box-shadow: none;
    font-weight: normal;
    border-radius: 0;
    color: #005e9d;
    text-decoration: underline;
    cursor: pointer;
    font-size: small;
    text-align: left;
    padding: 0;
    padding-left: 2px;
    margin: 0;
}
    #overlay {
      position: fixed;
      display: none; /* Hidden by default */
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: rgba(0,0,0,0.5);
      z-index: 1000;
    }
    #overlay-content-save {
      position: fixed;
      top: 10%;
      left: 10%;

      background: white;
      padding: 40px;
      border-radius: 8px;
      text-align: center;

      min-width: 80%;
      min-height: 80%;
    }
    
#overlay-content {
  position: fixed;       /* Fixes the overlay relative to the viewport */
  top: 50%;              /* Position top at 50% of viewport height */
  left: 50%;             /* Position left at 50% of viewport width */
  width: 90vw;           /* Width is 80% of the viewport width */
  height: 90vh;          /* Height is 80% of the viewport height */
  transform: translate(-50%, -50%); /* Shift overlay back by half its own width and height to center */
  background: white;  /* Optional: semi-transparent background */
  z-index: 1000;         /* Ensure it appears above other content */
  box-sizing: border-box;/* Include padding and border in size */
  padding: 20px;         /* Optional padding */
  overflow: auto;        /* Allow scrolling if content overflows */
}
    #close-btn {
      margin-top: 20px;
      padding: 10px 20px;
      cursor: pointer;
    }



/*Styles for labels and inputs on 1 line for large screen and correctly stacked for small display*/

/*Styles the message across the header if they don't have javascript. See function add_noscript_message */
.no-js-message {
    background-color: #f44336;
    color: black;
    font: 25px Arial, sans-serif;
    font-weight: bold;
    text-align: center;
    padding: 30px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
}
        
        
/* Remove the up/down arrows or spinners on numberic fields. For Chrome, Safari, and newer versions of Edge */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Remove the up/down arrows or spinners on numberic fields. For Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

/*Used to add darker borders to the Pickleskills page tables*/
#pickleskills {
  border: 1px solid gray;
  border-collapse: collapse;
}

#pickleskills th, #pickleskills td {
  border: 1px solid gray;
}

/*This is used to remove the title from the page with the Pickleskills Class Simpay Payment Form, since the form has it's own title*/
.page-id-5390 .wp-block-post-title {
  display: none;
}

/*Used to hide the full Pickleskills class table when shown on small screens. All the information removed is somewhere else on the page*/
@media(max-width: 600px) {
    .hidden-on-mobile {
        display: none;
    }
}

/*Used to hide the small Pickleskills class table when shown on larger screens.*/
@media(min-width: 601px) {
    .hidden-on-tablet {
        display: none;
    }
}

@media(min-width: 600px) {
    .hidden-on-tablet {
        display: none;
    }
}

/*Added for WP Event Manager venue template */
.wpem-heading-text-pb{
    margin-bottom:0;
    padding-bottom:0;
    font-size: 1.875em;
}

.wpem-venue-description-pb{
    margin-top:0;
    padding-top:0;  
    color: blue;
}

.no-space-div{
    margin:0;
}
/*These next two entries were added to get the event list in 2 columns to stack for 1 column on phone without all the space between them.
They were added for the FITS content page but may impact other pages. */
@media screen and (min-width: 768px) {
  .wp-block-columns {
    display: flex;
  }
  .wp-block-column {
    flex-basis: 40%;
  }
}

@media screen and (max-width: 767px) {
  .wp-block-columns {
    display: block;
  }
}

/*
These styles are used on the Manage Meetings screen, and create are good for forms that have labels flush left and inputs aligned left. 
If longer labels are needed for the inputs, styles need to be added for small displays so the labels will appear on top of the inputs, as in the Member Profile page.
*/
.col-radio {
    white-space:nowrap;
  width: 75%;
  float: left;

}

.col-row{
    margin-top: 12px;
}
.col-25 {
  width: 25%;
  float: left;

}
/*This command sets the width of `<div> containing the col-75 class to a fraction of the total width of the row <div>*/
.col-75 {
  width: 75%;
  float: left;
}


/*This command sets the width of the tag you working with*/
.col-75 input {
    width : 97%;
    padding: 6px;
    border: 2px solid #abb3ad;
}


.col-75 input[type=text], .col-75 input[type=email], .col-75 textarea {
    width : 97%;
    padding: 6px;
    border: 2px solid #abb3ad;
}

.col-75 input[type=file]{
    width : 100%;
    padding: 6px;
    border: none; 

}

.col-75 select {
    width : 100%;
    padding: 6px;
    border: 2px solid #abb3ad;
}

/*This part ensures the text after each form element stays in place after the float command.*/
.col-row:after {
  content: "";
  display: table;
  clear: both;
}

/************* END OF .col- STYLES ***********************/

.date-time label {
  display: inline-block;

}

.date-time span{
        color: black; 
    font-weight: normal;
}

@media screen and (max-width: 768px) {
.date-time label {
    display: block;
    text-align: right;
    clear: both;
    float:left;
    margin-right:15px;
  }
  

}

/*Styles for drag-and-drop file upload used for headshots feature. */

.hero{
    width: 150px;
    /*min-height: 100vh;*/
    /*background: linear-gradient(#e7baff, #c2b6d9);*/
    display: flex;
    align-items: center;
    justify-content: center;

flex-direction: column;
}

#drop-area{
    width: 150px;
    height: 200px;
    padding: 10px;
    background: white;
    text-align: center;
    border-radius: 20px;
}

#img-view{
    width: 100%;
    height: 100%;
    border-radius: 20px;
    border: 2px dashed #bbb5ff;
    background: #f7f8ff;
    background-position: center;
    background-size: cover;

} 

#img-view img{
    width: 80px;
    margin-top: 15px;
}

#img-view span{
    display: block;
    font: 12px;
    color: #777;
    margin-top: 15px;
}

/*** SAVE. These are the styles for the full page centered drag and drop
.hero{
    width: 100%;
    min-height: 100vh;
    background: linear-gradient(#e7baff, #c2b6d9);
    display: flex;
    align-items: center;
    justify-content: center;

flex-direction: column;
}

#drop-area{
    width: 500px;
    height: 300px;
    padding: 30px;
    background: white;
    text-align: center;
    border-radius: 20px;
}

#img-view{
    width: 100%;
    height: 100%;
    border-radius: 20px;
    border: 2px dashed #bbb5ff;
    background: #f7f8ff;
    background-position: center;
    background-size: cover;

} 

#img-view img{
    width: 100px;
    margin-top: 25px;
}

#img-view span{
    display: block;
    font: 12px;
    color: #777;
    margin-top: 15px;
}
*******************/

/*This isn't working. Need to figure out how to get the text container to wrap below on small screens */
/*directory-img is used with search results in cc-membership.php */
@media (max-width: 640px) {
  /* CSS that should be displayed if width is equal to or less than 640px goes here */
    .directory-img {
      float: left;
      margin-right: 10px;
      width: 10px;
    }
}

.directory-img {
  width: 100px; /* Adjust as needed */
  height: auto;
  margin-right: 20px;
}

.directory-container {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.text-container {
  /*font-size: 16px;*/
}


.scrollable {
    border: 1px solid black; 
    height: 150px; /* or any value */
    width: 300px;
    overflow-y: auto;
}

.small_blue_text {
    font-size: 0.875em; 
    color:#4b5bad;
}

table.no_white td {
    margin: 0px;
    padding: 0px;
    width: 100px;
    border-top: 0;
    /*border-collapse: collapse;*/
}

.no_white thead {
    border: 0;  
}

.no_white input {
    margin: 0px;
    padding: 0px;
    /*width: 80px;*/
    width: 100px;
    border-collapse: collapse;   
}

.table > :not(:first-child) {
    border-top: 0;
}

/*
.cell_no_white td, .cell_no_white th, .cell_no_white table, .cell_no_white input[type=date], .cell_no_white input[type=text] {
    margin: 0px;
    padding: 0px;
    width: 80px;
    border-collapse: collapse;
}*/

.date_time_input input {
width: 30px;
}

/* Not working. I think I need to find and use the actual name of our sidebar. */
.pdfcrowd-body #sidebar { 
    display: none; 
}

.pdfcrowd-body #wpadminbar { 
    display: none; 
}

.td_new {
    background-color: #fcb3bf !important;
}

.td_waiting {
    background-color: #9aba77 !important;
}

.td_placed {
    background-color: #b5bae8 !important;
}

.td_test_in {
    background-color: #db95d5 !important;
}

.td_removed {
    background-color: #bab6ba !important;
}


.cc-forms-new {
	width: 100%;
    display: inline-block;
    font-size: small;
    
}
	
/* Change styles for span on extra small screens */
@media only screen and (max-width: 600px) {
	.cc-forms-new {
	width: 100%;
    display: block;
    text-align: left;
    font-size: small;
    
	}

}

/*Align labels right and inputs left */
.cc-forms-new label {
    display: inline-block;
    /* width: 100px; */
    width: 25%;
    text-align: right;
    font-size: small;
	box-sizing: border-box;
}

/*
.cc-forms-new input[type=radio], .cc-forms-new input.radio {
    float: left;
      clear: none;
      margin: 2px 0 0 2px;
    
}*/

.cc-forms-new input[type=email], .cc-forms-new input[type=text], .cc-forms-new input[type=tel], .cc-forms-new input[type=number], 
.cc-forms-new input[type=date], .cc-forms-new input[type=time], .cc-forms-new input[type=radio], .cc-forms-new input.radio, .cc-forms-new textarea{
    padding:5px;
    padding-right: 0;
    margin-top: 5px;
    margin-bottom:5px;
    margin-left: 0;
    margin-right: 0;
	border: 2px solid #abb3ad;
	box-sizing: border-box;
	width: 70%;
	color: black;
	background: white;
}

/*
.cc-forms-new input[type=readonly], .cc-forms-new input[type=date], .cc-forms-new input[type=time], .cc-forms-new select{
    padding:5px;
    padding-right: 0;
    margin-top: 5px;
    margin-bottom:5px;
    margin-left: 0;
    margin-right: 0;
	border: 2px solid #abb3ad;
	box-sizing: border-box;
	width: 30%;
	color: black;
	background: white;
} */

.cc-forms-new p{
    font-size: small;
    border: 0;
    width: 100%;
}

.cc-forms-new span{
    padding:5px;
    padding-right: 0;
    margin-top: 5px;
    margin-bottom:5px;
    margin-left: 0;
    margin-right: 0;
	width: 70%;
	color: black;
    font-size: small;
}

.cc-forms-left select{
    padding: 10px;
  margin-top: 10px;
  margin-bottom:10px;
}

.cc-forms-left input[type=email], .cc-forms-left input[type=text], .cc-forms-left input[type=tel], .cc-forms-left input[type=number], .cc-forms-left textarea{
    padding:10px;
  margin-top: 10px;
  margin-bottom:10px;
		border: 2px solid #abb3ad;
		box-sizing: border-box;
}


      
.cc-forms-left {
    width: 100%;
    position: relative;
  display: inline-block;


}

.cc-forms-left select{
    padding: 10px;
  margin-top: 10px;
  margin-bottom:10px;
}

.cc-forms-left input[type=email], .cc-forms-left input[type=text], .cc-forms-left input[type=tel], .cc-forms-left input[type=number], .cc-forms-left textarea{
    padding:10px;
  margin-top: 10px;
  margin-bottom:10px;
		border: 2px solid #abb3ad;
		box-sizing: border-box;
}
.link { 
    border: none; background: none; display: inline; color: blue; text-decoration: underline;
}

/* Manage Applicants Page: Class */
.cc-forms-2col-applicants{
    display: grid;
    grid-template-columns: 25% 25%;
    column-gap:1%;
    /*grid-template-rows: 45px;*/
}


/* BHB Single Class Page: Class */
.cc-forms-2col{
    display: grid;
    grid-template-columns: 61% 25%;
    column-gap:1%;
    grid-template-rows: 45px;
}

/* BHB Classes Page: Classes */
.cc-forms-3col-bhb{
    display: grid;
    grid-template-columns: 35% 25% 25%;
    column-gap:1%;
    grid-template-rows: 45px;
}
.cc-forms-3col-bhb2{
    display: grid;
    grid-template-columns: 35% 25% 25%;
    column-gap:1%;
    grid-template-rows: 45px;
}
/* BHB Classes Page: Classes */
.cc-forms-3col{
    display: grid;
    /*grid-template-columns: 150px 200px 200px;*/
    grid-template-columns: 28% 25% 20%;
    /*grid-template-columns: minmax(20px, max-content) minmax(20px, max-content) minmax(30px, max-content)*/
    column-gap:5px;
    grid-template-rows: 35px;
}

.cc-forms-bhb select{
    border: 2px solid gray;
    height: 35px;
    padding: 0;
    padding-left: 10px;
    margin: 0;
    margin-top: 8px;
}

.cc-forms-bhb input[type=text], .cc-forms-bhb input[type=number], .cc-forms-bhb input[type=email], .cc-forms-bhb input[type=tel], .cc-forms-bhb input[type=date]
{
    border: 2px solid gray;
    height: 31px;
    padding: 0;
    padding-left: 10px;
    margin: 0;
    margin-top: 8px;
}

.cc-forms-bhb input[type=submit]
{
    height: 35px;
    padding: 0px 15px;
    margin: 0px;
    margin-top: 8px;
}


/* BHB Classes Page: Instructors */
.cc-forms-4col{
    display: grid;
    grid-template-columns: 21% 21% 21% 10%;
    column-gap:5px;
    grid-template-rows: 35px;
   /* margin: 0px 10px; */
}

.cc-forms-4col select{
    border: 2px solid gray;
    height: 35px;
    padding: 0px;
    padding-left: 10px;
    margin: 0px;
    margin-top: 10px;
}

.cc-forms-4col input[type=text], .cc-forms-4col input[type=date],.cc-forms-4col input[type=time] {
    border: 2px solid gray;
    height: 31px;
    padding: 0px;
    padding-left: 10px;
    margin: 0px;
    margin-top: 10px;
}

.cc-forms-4col input[type=submit]
{
    height: 35px;
    padding: 0px;
    margin: 0px;
    margin-top: 10px;
}



/* Monitor Subs Page */
.cc-forms-3column{
    display: grid;
    grid-template-columns: 32% 38% 25%;
    column-gap:5px;
    grid-template-rows: 45px;
   /* margin: 0px 10px; */
}

.cc-forms-3column input[type=text]{
    border: 2px solid gray;
    height: 35px;
    padding: 0px;
    padding-left: 10px;
    margin-top: 10px;
}

.cc-forms-3column input[type=submit]
{
    height: 35px;
    padding: 0px;
    margin-top: 10px;
}

/*Used to change the Ticket Price in WP Event Manager*/
.wpem-heading-text-custom{
    font-size: 24px;
    font-weight: normal;
    padding-top: 0;
    margin-top: 0;
}


/*Used to make main class image smaller than full screen */
.wpem-event-single-image-custom img {
    /*width: 40%;*/
    height: auto;
    display: block;
    margin-left: auto; 
    margin-right: auto;
    /*background-color: #e5e5e5;*/
    color:white;
    padding-left: 30%;
    padding-right: 30%;
}

.wpem-slider-items-custom img{
    width: 40%;
    height: auto;
    display: block;
    margin-left: auto; 
    margin-right: auto;
    /*background-color: #e5e5e5;*/
    	color:white;
    padding-left: 30%;
    padding-right: 30%;
}
/* Used to justify and place the Waiting List button to the right */
.button-right {
	display:-webkit-flex;
  display:flex;
  list-style-type:none;
	padding: 5px;
  justify-content:flex-end;
	padding-left:15px;
}
.text-left {
	display:flex;
  margin-right:auto;
	margin-left: 10px;
	align-items: center;
}


.form-center {
  display:flex;
  justify-content: center;
  margin: 0 auto;
  padding: 10px;
  width: 100%;
} 

.warning {
	font-weight: bold;
	color: #ba2d44;
}

.warning_lite {
	color: #ba2d44;
}

.response{
    font-weight: bold;
	color: #005e9d;
}

.response-med{
	color: #005e9d;
}

/*Limit the size(s) of the wp_event_manager single page class listing*/
.wp_event_img_size{
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    
    max-height:500px;
    max-width:500px;
    height:auto;
    width:auto;
}

.wp_event_img_size_pb{
    text-align: left;
    display: flex; 
    max-height:450px;
    max-width: 95%;

}

/* Change styles for span on extra small screens 
@media screen and (max-width: 300px) {
    .wp_event_img_size_pb{
        text-align: left;
        display: flex; 
        max-height:350px;

        max-width: 100%;
    }
}*/

/*Use for Monitor Check-In */
.center{
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-left:30px; 
    margin-right:30px;
}

/*Use for Monitor Check-In */
.extra-large-font{
    font-size: xx-large; 
}

.large_font{
    font-size: xx-large;   
}

.reccard{
    border-width: 4px;
    border-style: solid;
    border-color: #ba2d44;
    width:250px;
}

div.settings {
    display:grid;
    grid-template-columns: max-content max-content;
    column-gap:5px;
}
div.settings label       { text-align:right; }
div.settings label:after { content: ":"; }


/* Used for text messages to the user */
.cc-response {
	font-weight: bold;
	color: #005e9d;
}
/* Used for text error/warning messages to the user */
.cc-warning {
	font-weight: bold;
	color: #ba2d44;
}

/* Used to gray out the readonly input fields on Member Info */
input[readonly]
{
    background-color:#D3D3D3;
}
/* Used to justify and place the Waiting List button to the right */
.button-right {
    display:-webkit-flex;
    display:flex;
    list-style-type:none;
	padding: 5px;
    justify-content:flex-end;
	padding-left:15px;
}
.text-left {
	display:flex;
  margin-right:auto;
	margin-left: 10px;
	align-items: center;
}

/* Used on the front end Service Hours screen. */
.cc-admin-settings span {
    color: red; 
    font-weight: bold;
}

/* Used for forms such as the Waiting List form */
cc-forms form {
	display: flex;
	justify-content: center;
	border: 5px solid #f1f1f1;
}

cc-forms div {
    line-height: 1em;
    display: block;
}

/* Used to provide red asterisk for required fields */
.cc-forms span {
    color: red; 
    font-weight: bold;
}



.cc-forms select {
	/*display: block;*/
	margin: 0 auto;
	padding: 10px;

  /*right: auto;
  direction: ltr;*/

}
.cc-forms input[type=email], .cc-forms input[type=text], .cc-forms input[type=tel], .cc-forms input[type=number], .cc-forms textarea {
		width: 100%;
		padding: 10px 8px; 
		margin: 8px 0;
		display: inline-block;
		/*border: 1px solid #ccc;*/
		border: 2px solid #abb3ad;
		box-sizing: border-box;

}

.cc-forms label{
	font-size: small;
	padding-bottom: 2px;
	margin-bottom: 2px;
}
.cc-forms p{
	font-size: small;
}
.cc-forms button {
	/*background-color: #8ebf42;*/
	background-color:#005e9d;
	color: white;
	/*padding: 14px 0;*/
	padding-left: 50px;
	padding-right: 50px;
	/*margin: 10px 0;*/
	border: none;
	cursor: grabbing;
	/*width: 100%;*/
	width: auto;
	display: inline-block;
	margin: 0 auto;
	margin-top: 20px;

/*added for 2024 template*/
padding-top: 15px;
padding-bottom: 15px;
}
.cc-forms button:hover {
	opacity: 0.8;
}
.cc-forms .formcontainer {
	text-align: left;
	margin: 24px 35px 12px;

}
.cc-forms .container {
	padding: 16px 0px;
	text-align:left;
}

.cc-indent input[type=submit]{
	background-color: gray;
	color: white;

	padding-left: 2px;
	padding-right: 2px;
    padding-top: 2px;
    padding-bottom: 2px;
	border: none;
	cursor: grabbing;

	width: auto;
	display: inline-block;
	margin: 0 auto;
}

.cc-indent{
    margin-left: 24px;
}

/* Change styles for span on extra small screens */
@media screen and (max-width: 300px) {
	cc-forms .container {
		display: block;
		float: none;
	}
}

div.centered 
{
    text-align: center;
}

div.centered table 
{
    margin: 0 auto; 
    text-align: left;
}

.cc_table_csv_button td:last-child {
    width: 30%;
    border-width : 0;
    background-color:#e4e4e4;
}

.cc_table_csv_button td {
    /*white-space: nowrap;*/
}

.cc_tables_fixed {
  border-collapse: collapse;
  display: inline;
  line-height: 16px;
    table-layout: fixed;

}

.cc_tables_fixed td, .cc_tables_fixed th {
  border: 2px solid DimGrey;
  padding-right: 10px;
  font-size: 14px;
  
     word-wrap: break-word;       /* Internet Explorer 5.5+, Chrome, Firefox 3+ */
    overflow-wrap: break-word;   /* CSS3 standard: Chrome & Opera 2013+ */
}

/* For admin tables like the one on the Members page */

.cc_tables {
  border-collapse: collapse;
  display: inline;
  line-height: 16px;
}

.link-submit {
    background: none;
    border: none;
    box-shadow: none;
    font-weight: normal;
    border-radius: 0;
    color: #005e9d;
    text-decoration: underline;
    cursor: pointer;
    font-size: small;
    vertical-align: middle;
    padding: 0;
    padding-left: 2px;
    margin: 0;
}

/*Couldn't get the class above to work, so added this for the specific Add Row element on New Class Submission page */
#add_row{
    background: none;
    border: none;
    box-shadow: none;
    font-weight: normal;
    border-radius: 0;
    color: #005e9d;
    text-decoration: underline;
    cursor: pointer;
    font-size: small;
    vertical-align: middle;
    padding: 0;
    padding-left: 2px;
    margin: 0;
    margin-bottom: 12px;
}

.link_submit input[type="submit"]{
    background: none;
    border: none;
    box-shadow: none;
    font-weight: normal;
    font-size: small;
    border-radius: 0;
    color: #005e9d;
    text-decoration: underline;
    padding: 0;
    margin: 0;
}

.cc_tables input[type=text] {
    padding: 0;
    margin: 0;
    border:0;
    outline:0;
    display:inline-block;
    font-size:small;
    width:65px;
}
.cc_tables_tight td, .cc_tables_tight th {
  padding: 4px;
  border-spacing: 0;
}

.cc_tables td, .cc_tables th {
  border: 2px solid #696969;
  width: auto;
  padding-right: 10px;
  /*font-size: 14px;*/
  font-size: 70%;
}

.cc_tables_85 table{
  border-collapse: collapse;
    border: 1px solid #000000;
}
.cc_tables_85 td, .cc_tables_85 th{
  border-collapse: collapse;
    font-size: 85%;
    border: 1px solid #000000;
    padding-left: 8px;
    margin-left: 8px;
}

.cc_tables th {
  text-align: left;
  background-color: #4d4a49;
  color: white;
}

.cc_tables tr:nth-child(even){background-color: white;}

.cc_tables tr:hover {
    background-color: #ddd;
}

.tr_warning {
    background-color: #fcb3bf !important;
}

.tr_lead {
    background-color: #a7c7fa !important;
}