* {
  box-sizing: border-box;
}
body {
	margin: 0;
	background-color: #dfe7f5;
	overflow-y: scroll;
	font-family:  verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", "ＭＳ ゴシック" , "MS Gothic", "Noto Sans CJK JP", TakaoPGothic, sans-serif;

}

H1, H2{
	font-size: 16px;
	
}
.account_flex_container {
	display: flex; /* Enables Flexbox for the container */
  flex-direction: row; /* Arranges children horizontally (default) */
  justify-content: space-between; /* Distributes space between columns */
  gap: 0px; /* Adds a gap between columns */
	margin: 0 10%;
	margin-bottom: 30px;

}
.odd {
	background: gray;
	
	
}

 table.table_list  {
	width: 100%;
	border: 1px solid black;
	border-collapse: collapse;
	
}
.table_list td, th  {
	
	border: 1px solid black;
	
	
}



.table_list tr:nth-child(even) {
  background-color: #D6EEEE;
}



.account_left_column_container {
	
	

  flex: 1; /* Allows the right column to grow and shrink proportionally */
  /* You can also set a specific width if needed, e.g., width: 30%; */
	
}
.account_right_column_container {
	padding: 0 20px;
	 flex: 2; /* Allows the left column to grow and shrink proportionally */
  /* You can also set a specific width if needed, e.g., width: 70%; */
	
}

.subheading {
	
	padding-left: 5px;
	font-weight: bold;

	
}
.footer {
	width: 100%;
	margin: 50px auto;
	
}
.footer a {
	color: white;
	text-decoration: none;
	

  }
  .footer a:hover {
	  text-decoration: underline;
	  
  }

	  
	  .information {
		  margin: auto;
		  margin-top: 10px;
		background: white;
		width: 50%;		
		  border: 2px solid Black;
		  border-radius: 10px;
		  padding-left: 10px;
		  
	
	  
	  }
  
  
.header {
	height: 30px;
}

.content {
  width: 100%;
	margin:  0;

}
.td {
	background-color: #2779BF;
}
.nottoday {
	background-color: white;
}
.black {
	color: black;

}



.links_container {
	
	 min-height:60px;
background: rgba(0, 71, 97, 10);
background: linear-gradient(180deg,rgba(0, 71, 97, 1) 52%, rgba(5, 5, 5, 1) 100%);



}
.full_links_container {
	 display: flex;

}



.links {
 display: flex; /* Makes the container a flex container */
  flex-direction: row;
flex:1;
margin: auto;
gap:10px;
justify-content: space-between;

  }

.side_links, .side_links_right {
	
 display: flex; /* Makes the container a flex container */
  flex-direction: row;
flex:0.5;

}

.side_links_right {
	
	justify-content: right;
	margin-right: 10px;
}


  
.links a, .mobilebut a, .introlinks a, .side_links a, .side_links_right a {

 text-decoration: none;
  color:white;
  margin: auto;
 font-size: 1.3vw;

 
}
  .links a:hover, .mobilebut a:hover, .introlinks a:hover, .side_links a:hover, .side_links_right a:hover {


text-decoration: underline;

}
.my_page_links {
		border: 2px solid #dbdfe6;
	display: flex;
	width: 100%;

	margin: auto;
  }
.my_page_links a {
  padding: 21px 20px;
 text-decoration: none;
    color:white;
  font-size: 20px;
  margin: auto;
}
	.my_page_links  a:hover{


 background: red;

}
	selected .my_page_links  {
		
		 background: red;
		
		
	}
.icon {
	float:left;
	padding-right: 15px;


}
.float_left {
	
	padding: 15px 0;
	color: white;
 font-size: 1.3vw;
  }
  
.float_left_admin {
	border: 1px solid black;

	
}

.float_left_intro {
width: 14%;

}


.float_left a, .float_left_intro a, .float_left_admin a  {
	  color:white;
		text-decoration: none;
}
.float_left a:link, .mobilebut a:link, .float_left_intro a:link, .float_left_admin a:link {
	
	  color:white;
}
.float_left a:hover, .float_left_intro a:hover, .float_left_admin a:hover {
	text-decoration: underline;
	  color:white;
}




.introlinks {
	background: #5a615c;
	width: 60%;
	margin: auto;
	padding: 5px;
	border: 2px solid white;
	border-top: none;
	border-radius: 0 0 5px 5px;
	min-height: 62px;

}

.introlinks::after {
    content: "";
    display: table;
    clear: both;

}
.cursor {
	text-align: center;
	width:80%;
	min-width: 20px;
	font-size:  12px; 
	cursor:pointer;
	line-height: 20px; 
	margin: 1px;
	padding: 0px;


  } 
  .subscription_payment {
	  border-radius: 15px;
	  border: 4px solid black;
	 padding: 10px 10px 10px 30px;
	  margin: 5px;
	 text-align: left;
  }
  
  .pay_button {
	 
	  margin-top: 5px;
	padding: 5px 40px;
    border: 1px solid black;
    border-radius: 3px;
    color: white;
    background-color: #84ab93;
    text-decoration: none;

}
}
  .time_selector {
	 
	
		
		background: white;
		
	

	
	
  }
  .time_selector_container {


float:left;
padding-top: 42px;
width: 80%;


  }	  
  
    .list_of_dates {
		float: left;
		width: 20%;
		
		font-size: 20px;
		height: 100%;
	padding-top: 10px;

	  background: white;
	  display: block;
	  text-align: center;
  } 
  .clearunder{
	 clear: both;
	  
	  

  }

.choose_date {
	
color: red;

	   }
	   
.month_form  {
	
	     min-width: 100px;
		 height: 30px;

	margin-right: 5px;
  float: left;
  line-height: 30px;
	

}
table.time_table  {
	
	margin: 0 auto;

	 border-collapse: collapse;
}

table.time_table td {
	
	width: 10%;
	height: 30px;
    font-size: 90%;
	color: black;
	text-align: center;
	border: 2px solid black;
	margin: 0 auto;
	 border-collapse: collapse;
	 background: white;
	 padding: 0;

}


input[type=submit].time_table {
  background-color: #3285a8;
  border-radius: 5px;
  color: white;
  text-decoration: none;
  cursor: pointer;
  
  height: 40px;
  font-size:20px;
}
input[type=submit].month_form {
  background-color: #3285a8;
  border-radius: 5px;
  color: white;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid black;
  height: 40px;
  font-size:20px;
  
  }
  .lesson_info {
	
	box-sizing:border-box;
	 font-size: 90%;
	  margin-left: 5px;
	  padding-top: 10px;
	  padding-bottom: 10px;
	  margin: auto;
  }
a:link.zoom_link, a:visited.zoom_link {
	text-decoration: none;
	background-color: white;
	font-size: 20px;
	color: #0B5CFF;
	margin: 0px;
  border: 2px solid black;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-weight: bold;

}
	a:hover.zoom_link, a:active.zoom_link {
		background-color: #84ad82;
		color: #0B5CFF;
	
}


.lesson_schedule_div, .lesson_schedule_div_highlight  {
	max-width: 500px;
		width: 60%;
		min-width: 200px;
		border-radius: 15px;
		 border: 2px solid black; 
		padding: 20px;
		overflow: auto;
		box-sizing:border-box;
		margin: auto;
		
		}

	.lesson_schedule_div_highlight {
		
		background: #a3c5d4;
		
}

.fullscheduletable  {
	border-spacing: 0px;
	margin: 10px;
	margin-bottom: 20px;
	
}

.fullscheduletable td {
	
	width: 100px;

}

.login_border {
		border: 2px solid #e3e8e7;
		border-radius: 5px;
		padding: 20px;
		min-width: 350px;
		
}
.input-group {
		
	display: inline-block;
	
      }

		 .list_of_dates form {
           
            
        
        
        }
		 .time_selector input[type="submit"] {
			 
			 border: 0px;
			  background-color:  #84a8b8;
			  color: white;
			  border-radius: 2px;
              cursor: pointer;
			  
		 }.time_selector input[type="submit"]:hover {
            background-color: #0056b3;
			
			
        }

        .time_selector input[type="submit"]:active {
            background-color: #004494;
		 
		} 
		 

       .list_of_dates input[type="submit"], .weekend_color input[type="submit"], .normal input[type="submit"]  {
           max-width: 150px;
			width: 100%;
            background-color:  #84a8b8;
            color: white;
			margin: auto;
            
            cursor: pointer;
            margin-bottom: 1px;
			 border: 1px solid black;
			

	   }

       .list_of_dates input[type="submit"]:hover {
            background-color: #0056b3;
        }

        .list_of_dates input[type="submit"]:active {
            background-color: #004494;
        
  }
  
   .cancel_button input[type="submit"] {
	   background: white;
	
	   color: black;
	   border: 1px solid black;
 }
 
   .cancel_button input[type="submit"]:hover {
	   background: #97a9c7;
		cursor: pointer;
 }
 
 
  .weekend_color input[type="submit"] 
  {
			
            background-color: #657e8a;
  }
 .itstoday input[type="submit"] 
  {

            background-color:  red;
}
.lesson_number{
	  background-color:  black;
	  text-align: center;
		color: white;
		width: 20px;
	  height:20px;
	  float: left;
	  
	  
	
		
}
.notifications {
	width: 80%;
	color: red;

	
	
}
.notifications_container {
	width: 80%;
	margin: auto;

}
.classroom {
	width: 100%;
	height: 500px;
	
}


	.formopen {
		background-color:  #b6d6cb;
		
	}
	.formclosed {
		
		background-color:  #d6b6b6;
	}
	

	
	.lesson_completed_details {
		background: white;
		padding: 10px;
		margin: 10px;
	
		
	}

	
	
		  .lesson_ticket {
		 
		  border: 2px solid black;
		 
		 margin-bottom: 10px;
		 max-width: 450px;
		background: red;
	margin: auto;
		 background: white;
	  }
	  
	  
	  .lesson_ticket_top {
		 font-family: 'Courier New', monospace;
		  background: #bfb6b6;
		   padding: 5px;
		
		   }
	  	  .lesson_ticket_details {
		 font-family: 'Courier New', monospace;
		  background: white;
		 display: flex;
		  align-items: flex-end;
		 width: 100%;
		padding: 5px;
		font-size: 18px;
		border-radius: 0 0 17px 17px;
		
	  }
	  .ticket_left {
		 padding: 10px;
		  flex: 2;
	  }
	  .ticket_right {
		  
		   flex: 1;
		   align-items: flex-end;
	  }
	  .lesson_orders {
		  border: 2px solid black;
		  background: white;
		  margin: 10px;
		  border-radius: 20px;
		  padding: 20px;
	  }
	  
	  
	.lesson_ticket_cancel {
		
		  
			text-align: left;		
		padding: 10px;
		
	height: 100%;
	
		
	}
	
	.lesson_list, .lesson_list_future, .lesson_list_next_lessons {
		
		
	border-radius: 3px;
		
		margin-bottom: 10px;
	background: #a3c0f0;
		
	}
	.lesson_list_future {
		background:  white;
		
		
	}
	.lesson_list_next_lessons {
		background: white;
		
	}
}
.course_info{
	
	min-width: 350px;
	
	
}
.welcome {
	margin: auto;

	
       

}
.add_lesson_div {
	
	background: white;
	border-radius: 10px;
	border: 2px solid black;
	
}

.account_welcome {

	width: 30%;
	margin: 5px auto ;
	background: #f3f2f5;;
	
}


.welcome {

	width: 70%;
		min-width: 650px;

}

.schedule_container {

	margin: 10px 20%;
	background: white;
	border: 2px solid black;
}

.container_login {
	padding: 20px 100px;

}
.container_login_div {
	width: 50%;
	float: left;
	padding: 20px 100px;

	}
	
.container {
	padding: 40px 5%;
	
}
.container_2 {
	 /* border: 1px solid #4c4d4c; */
	padding: 20px 2%;
}

.course_info_div {
	width: 50%;
	float: left;
	padding: 0 5%;
}

	.heading  {
	
	background-color:  #4e524f;
	font-size:  20px;
	border: 1px solid #4c4d4c;
	border-radius: 5px 5px 0 0;
	padding: 10px;
	color: white;
	text-align: left;
	margin: auto;


}

.daycolumn {
	width: 100%;
	border: 1px solid #4c4d4c;
	background: grey;
	float: left;
	margin: auto;
	padding: 10px;
	margin: 0px 6px;

	
}
.account, .orders, .reservations {
	width: 90%;
	border: 3px solid black;
	border-radius: 15px;
	margin: auto;
	padding: 20px;
}
.not_logged_in {
	width: 90%;
	border: 2px solid red;
	
	margin: 0px auto 10px;
	padding: 20px;
	background: white;
	color:red;
}

.remaining_lessons {
	display: flex;
	margin: auto;
	width: 100px;
	height: 100px;
	border-radius: 15px;
	background: white;

	
	}
	.remaining_lessons {
		justify-content: center;
		align-items: center;
		font-size: 36px;
	}

.reservations {
	background: #c7a9a9;
	
}
.account {
	background: #7893c4;
	
	
	
	
}
#account_links a {
	color: black;
	text-decoration: none;
	font-size: 24px;
	
}


.account_links {
	width: 80%;
	border: 2px solid black;
	border-radius: 3px;
	margin: 0 auto;
	margin-bottom: 10px;
	padding: 20px;
	background: white;
	
}
.account_links a {
	color: black;
	text-decoration: none;
	font-size: 24px;


}
.account_links:hover {
	background: #97a9c7;


}


.account_links_selected {
	
	background: #99433d;
}


.orders {
	background: #7893c4;
	
}
.completed {
background: #abaddb;
}


.please_verify_container {
		width: 100%;
	background: white;
	
}
.please_verify {
	width: 50%;
	background: white;
	margin: 10px auto;
	padding: 20px;
	border: 3px solid red;
	text-align: center;
	font-size: 24px;
	
}
.next_lesson {
	width: 90%;
	background: #a5c9af;
	border-radius: 15px;
	margin: auto;
	padding: 20px;
	border: 3px solid black;
}
.heightlimit {
	
	max-height: 350px;
	overflow: auto;

}

.account_lessons {

	border-bottom: 4px solid black;
	text-align: center;
	font-size: 30px;
	margin-bottom: 10px;
	padding-bottom: 10px;
	color: black;
	
}


.orders {
	max-height: 350px;
	overflow: auto;
}

#orders, #lessons 		{
	
	display: none;
	
	
}

.account, .orders {
	max-width: 100%;
	
}




.core_select {
	
	background: white;
	border: 1px solid #4c4d4c;
	border-radius: 15px;
	margin: 50px;
	padding: 10px;
	
} .core_table td {
	
	border: solid 1px;
	
	
	
}
/* Dropdown Button */
.dropbtn {
	
background: none;
  color: white;
  display: none;
  font-size: 28px;
  border: none;
  cursor: pointer;
  margin: 1px;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
  background: none;
  
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  float: left;
   padding-top:10px;
   padding-left:10px;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #FFF;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}


	 .zoom_container {
		 
		 width: 50%;
		 margin: auto;
		 border: 2px solid black;
		 border-radius: 10px;
		 background: white;
		 padding: 30px;
		 
		 
	 }

 #zoom-link-container {
	  display: block;
		padding: 10px;
	 
 }


 #zoom-link-container a {
	 display: block;
	 
		  padding: 20px;
		  border:3px solid black;
		  border-radius: 3px;
		  color: black;
		  text-decoration: none;
		  color: white;
		   background: #2D8CFF;
		   margin: auto;
		   text-align: center;
		   font-size:25px;
	   }
	   #zoom-link-container a:hover {
		   text-decoration: underline;
		   
	   }
	   



	@media only screen and (max-width: 800px)
	
	
	
{
	 .zoom_container {
		 
		 width: 95%;
		 padding: 10px;
		 border-radius: 0;
		 
	 }
	
	
	
	
	
	#account_links {
		
		display: none;
		
	}
	.account, .reservations {
		width: 100%;
		margin: 0;
		border-radius: 0px;
		border: none;
		
		
	}
	
	
    .choose_date, .container, .container_login_div, .home_login, .container_login, .schedule_container, .form-container, .welcome, .account_welcome
    { 
        float: none; 
        width: 100%;
		margin: 5px auto;
		border: none;
		padding: 10px;
    }
	.list_of_dates{ 
		padding: 0 2px;
	
	}
	
	 .introlinks, .links, .my_page_links, .side_links, .side_links_right {
	  
	   display: none;
	   
	 }
 .mobilebut {
	 display: block;
	 
 }
 .dropbtn {
	 display: block;
	 
 }
 
	.welcome {
			margin-top: 3px;
			 border-radius: 2px; 
			padding: 10px;
			background: white;
			min-width: 50px;
			
		}
		.dropdown {
		display: inline-block;
 
	   }
	   .time_selector_container {
	   padding-top: 29px;
	   }
	   
	   .lesson_schedule_div, .lesson_schedule_div_highlight {
		width: 90%;

	   }
	   

	   
	   
	   
  #mobile-menu-btn {
    display: block;
  }
  nav a {
    display: none;
  }
 
  .mobile-menu {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }
  .account_flex_container {
    flex-direction: column; /* Stacks columns vertically on smaller screens */
	margin: 0;
	padding; 0;
  }
  .account_left_column_container,
  .account_right_column_container {
    width: 100%; /* Columns take full width when stacked */
	margin: 0;
	padding: 0px;
	border-radius: none;
	border: none;
  }
}