/* Have fun adding your style here :) - PS: At all times this file should contain a comment or a rule, otherwise opera might act buggy :( */

/* General Custom CSS */




/*
Desktop Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the desktop view of your site */
.dropdown_widget_cart {
   
    overflow-y: auto;
}
@media only screen and (min-width: 768px) {
  /* Add your Desktop Styles here */
  .round {
	  float:left;
	  margin-left: 10px;
	  font-size: 1em;
	  background-color: #8c11a2;
	  color: white;
  }
  .radio_button{
	  float:left;
	  margin-right: 20px;
  }
  .round:hover {
    -webkit-transform: translateY(-10%);
        -ms-transform: translateY(-10%);
            transform: translateY(-10%); }
			
	.round:focus {
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0); }
}
.declineExtra{
	margin-left: 20px;
}
@media (min-width: 1279px) {
 }
 #done {
 	
 	/*background-color: white;
 	color: black;*/
 	float: right;
 }
 
#overlay {
  
 position: fixed;
     top: 0;
     left: 0;
     height: 100%;
     width: 100%;
     background-color: rgba(0,0,0,0.5);
     z-index: 10;
}

#modal, .modal {
	margin: auto; /* 15% from the top and centered */
	padding: 40px;
	border: 1px solid #888;
	/*width: 80%;  Could be more or less, depending on screen size */
	
    width: 80%;
    height: 90%;
    background-color: white;
    border-radius: 5px;
  	overflow-y: auto;
    z-index: 11; /* 1px higher than the overlay layer */
}
#modal_two, .modal_two {
	margin: 15% auto; /* 15% from the top and centered */
	padding: 40px;
	border: 1px solid #888;
	/*width: 80%;  Could be more or less, depending on screen size */
	
    width: 60%;
    height: 60%;
   /* position: fixed;
	padding: 40px;
    top: 20%; 
    left: 20%;
    margin-top: -100px;
    margin-left: -150px;*/
    background-color: white;
    border-radius: 5px;
  	overflow-y: scroll;
    z-index: 11; /* 1px higher than the overlay layer */
}
#details {
	clear: both;
}
/* Experimenting with Grids
*/

.grid-container{
	display: grid;
	grid-template-columns: auto auto auto auto auto;
	row-gap: 10px;
}
.session-container{
	display: flex; /* or inline-flex */
	flex-direction: row;
	width: 100%;
	padding-top: 10px;
	border-top: gray solid 1px;
	
	
}
.grid-session-container{
    display: grid;
    grid-template-columns: repeat(7, 1fr); /* 7 columns */
    grid-gap: 5px; /* Adjust as needed */
}
.grid-item {
  padding: 5px;
  text-align: left;
}
.flex-container{
	display: flex; /* or inline-flex */
	flex-direction: row;
	height: 20px;
}

.my_sessions label,
.my_sessions input {
  text-align: right;
  align-items: right;
  justify-content: center;
  position: absolute;
  display: flex;
  width: 75px;
  height: 30px;
  border: 1px solid #CCC;
  padding: 5px;
  cursor: pointer;
  background-color: #CE7ADD;
  color: white;
}
.my_sessions input[type="radio"] {
 display: none;
}
.my_sessions input[type="radio"]:checked+label{
  background: #8c11a2;
  color: white;
}
.my_sessions label:hover {
  background: #8c11a2;
  color: white;
}


.gray{
	background-color: gray;
}
.stage_school_button{
	padding: 1em;
	margin: .5em;
	width:	35%;
}
/*pseudo table*/
.cart_totals{
	width: 50%;
	float: right;
}
.pseudo-table {
  display: flex;
  flex-direction: column;
  overflow-x: auto; /* Enable horizontal scrolling */
}

.pseudo-header-row,
.pseudo-row,
.pseudo-row-total {
  display: flex;
 /* flex-wrap: wrap;*/
}

.pseudo-cell, .pseudo-cell-mobile {
display: flex;
  border: .5px solid #e1e1e1;
  padding: 10px;
  flex: 1;
  text-align: center; /* Optional: Center text within cell */
 /* width: 100%;*/
  flex-basis: calc(100% / 6); /* Set equal width for 6 columns */
  /* max-width: calc(100% / 6);*/ /* Optional: Set maximum width */
  /* word-wrap: break-word;*/ /* Add this line */
}
.row-even{
	background-color: #fcfcfc;
}

.cell-label {
	display: none
}

.pseudo-cell-total {
  border: .5px solid #e1e1e1;
  padding: 10px;
  flex: 1;
  text-align: center; /* Optional: Center text within cell */
  width: 100%;
  flex-basis: calc(100% / 2); /* Set equal width for 6 columns */
   max-width: calc(100% / 2); /* Optional: Set maximum width */
   word-wrap: break-word; /* Add this line */
}
.pseudo-cell-total-checkout {
  border: .5px solid #e1e1e1;
  padding: 10px;
  flex: 1;
  text-align: center; /* Optional: Center text within cell */
  width: 100%;
  flex-basis: calc(100% / 3); /* Set equal width for 6 columns */
   max-width: calc(100% / 3); /* Optional: Set maximum width */
   word-wrap: break-word; /* Add this line */
}
.psedudo-header-row {
  font-weight: bold;
}
.blank-cell{
	border: none;
}
.admin-desktop{
	display: block;
}
.admin-mobile{
	display: none;
}  
/*.pseudo-cell:nth-child(1) {
  flex-basis: 10%;
}

.pseudo-cell:nth-child(2) {
  flex-basis: 10%;
}
.pseudo-cell:nth-child(3) {
  flex-basis: 15%;
}
.pseudo-cell:nth-child(4) {
  flex-basis: 10%;
}
.pseudo-cell:nth-child(5) {
  flex-basis: 10%;
}
.pseudo-cell:nth-child(6) {
  flex-basis: 10%;
}*/

/* stuff for tabs */


/**
 * Tabs
 */
#tab-container{
	z-index: 1;
}
.tabs {
	display: flex;
	flex-wrap: wrap; // make sure it wraps
}
.tab-label {
	order: 1; // Put the labels first
	display: block;
	padding: 1rem 2rem;
	/*margin-right: 0.2rem;*/
	cursor: pointer;
	background: rgb(140, 66, 162);
	font-weight: bold;
	transition: background ease 0.2s;
	color: white;
	border: 2px solid #999;
	opacity:.6;
}
.tabs tab-2 label {
	order: 1; // Put the labels first
	display: block;
	padding: 1rem 2rem;
	/*margin-right: 0.2rem;*/
	cursor: pointer;
 /*background: rgb(255, 39, 18);*/
  font-weight: bold;
  transition: background ease 0.2s;
  color: white;
  border: 2px solid #999;
}
.tabs .tab {
	order: 99; // Put the tabs last
	flex-grow: 1;
	width: 100%;
	display: none;
	padding: 1rem;
	background: #fff;

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

}

.tabs input[type="radio"]:checked + label + .tab {
	display: block;
	opacity: 1;
}
#tab-container .tab-label:hover {
    opacity: .8;
}
#tab-container .tab-radio:checked + .tab-label {
   opacity: 1;
}

.opacity100{
	opacity: 1;
}
.opacity80, .opacity60{
	opacity: 0.6;
}
.default_button{
	font-weight: 700;
	border: 2px solid white !important;
	padding: 7px 20px;
	outline: 2px solid #8c11a2 !important;
}
@media (max-width: 45em) {
  .tabs .tab,
  .tabs label {
    order: initial;
  }
  .tabs label {
    width: 100%;
    margin-right: 0;
    margin-top: 0.2rem;
  }
  }'/* Modal Stuff for the "Dialog Box" */
#myModal{
	z-index: 999999;
}
.modal-header {
  padding: 2px 16px;
  background-color: #8c11a2;
  color: white;
}

/* Modal Body */
.modal-body {padding: 2px 16px;}

/* Modal Footer */
.modal-footer {
  padding: 2px 16px;
  background-color: #8c11a2;
  color: white;
}

/* Modal Content */
.modal-content {
  position: fixed;
  z-index: 999999;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  background-color: #fefefe;
  margin: auto;
  padding: 10px;
  border: 2px solid #8c11a2;
  width: 70%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  /*animation-name: animatetop;
  animation-duration: 0.4s*/
}
.idle_modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.idle_modal-content {
    background: #fff;
    padding: 20px;
    width: 300px;
    margin: 100px auto;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

#select_payments, #select_medical{
	z-index: 999999;
}
.select_payments-header, .select_medical-header {
  padding: 2px 16px;
  background-color: gray;
  color: white;
}

/* Modal Body */
.select_payments-body, .select_medical-body{padding: 2px 16px;}

/* Modal Footer */
.select_payments-footer, .select_medical-footer {
  padding: 2px 16px;
  background-color: gray;
  color: white;
}

/* Modal Content */
.select_payments-content, .select_medical-content {
	display: block;
  position: fixed;
  z-index: 999999;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  background-color: #fefefe;
  margin: auto;
  padding: 10px;
  border: 2px solid #8c11a2;
  width: 50%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  /*animation-name: animatetop;
  animation-duration: 0.4s*/
}
.margin-top-20{
	margin-top: 20px
}
.front_page_button{
	margin: 10px;
	float: left;
}
#important_notice{
	clear:both;
}

/*
Mobile Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */

@media only screen and (max-width: 767px) {
	
	h3{
		font-size: 1em;
	}
  /* Add your Mobile Styles here */
  .cart_totals{
  	width: 100%;
  	float: none;
  }
  .round {
	  float: right;
	  clear: both;
	  margin: 5px;
  }
  .button{
	  padding: 4px 12px;
	  
  }
  .front_page_button{
	margin: 0;
	  clear:both;
	  
  }
  .radio_button{
	  float:left;
	  clear:both;
  }
  .margin-top-20{
  	margin-top: 10px
  }
  .spacer{
	  padding: 5px;
  }
  .account_details{
	  width: 70%;
  } 
  .pseudo-row {
	display: flex;
    flex-direction: column;
	padding: 0px;
  }
  .pseudo-cell {
	  display: flex;
  		padding: 0px;
	    border: none;
    flex-basis: 100%; /* Reset flex-basis for full width on mobile */
  }

  .pseudo-header-row{
	  display: none;
  }
	.mobile_spacer{
		clear: both;
		padding-top: 50px;
	}
	.cell-label,
	.cell-data,
	.admin-cell-label,
	.admin-cell-data {
	border: 1px solid black;
	display: block;
	flex-basis: calc(100% / 2);
	  flex: 1; /* Make label and data share the same space */
	  /*width: 50%;*/ /* Set equal width for label and data */
	  box-sizing: border-box; /* Include padding in width calculation */
	}
	.remove{
		text-align: center;
	}
	.stage_school_button{

		width:	95%;
	}
.admin-desktop{
	display: none;
}
.blank-cell{
	border: none;
}
.my_content {
   z-index: -3 !important;
}
/*.admin-mobile{
	display: block;
}*/
}
/* Modal Content */
.select_payments-content, .select_medical-content {
  position: fixed;
  z-index: 999999;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  background-color: #fefefe;
  margin: auto;
  padding: 5px;
  border: 2px solid #8c11a2;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  /*animation-name: animatetop;
  animation-duration: 0.4s*/
}
#overlay {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0; 
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
  /* Add padding to create the 50px border */
   padding: 5%;
   /* Use box-sizing to include padding in dimensions */
   box-sizing: border-box;
}

/* ------------------------------------------------------------ *\
	Fonts
\* ------------------------------------------------------------ */
@font-face {
  font-family: 'Graphik';
  src: url("../fonts/graphik/Graphik-Light.eot");
  src: url("../fonts/graphik/Graphik-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/graphik/Graphik-Light.woff") format("woff"), url("../fonts/graphik/Graphik-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal; }

@font-face {
  font-family: 'Graphik';
  src: url("../fonts/graphik/Graphik-Regular.eot");
  src: url("../fonts/graphik/Graphik-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/graphik/Graphik-Regular.woff") format("woff"), url("../fonts/graphik/Graphik-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }