/*-----------------------------------------------------------------------------
		  MOBILE (iPhone and iPad SideNav) updated-2024
------------------------------------------------------------------------------*/	

:root { 
	--sidenav_menu_color:#121212; /*--font color--*/
	--sidenav_bgcolor: #fff;	/*--div background color--*/
  --sidenav_divider_color:#bdbdbd;  
}



/*--Links--*/

.MenuContent a:link {
  color: var(--sidenav_menu_color); 
  font-size: 16px;
}

.MenuContent a:visited {
  color: var(--sidenav_menu_color); 
  font-size: 16px;
}

.MenuRegular a:link {
  color: var(--sidenav_menu_color); 
  font-size: 16px;
}

.MenuRegular a:visited {
  color: var(--sidenav_menu_color); 
  font-size: 16px;
}



/*------- Slide in Side Menu -----*/
.SideNav { 
  width: 50%;
  height: 100%;
  position: fixed;
  top: 0;
  right: -100%;
  padding-top: 15px;
  overflow-x: hidden;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  background-color: var(--sidenav_bgcolor);
  box-sizing: border-box;
  z-index: 1200;
}


.SideNav .closeBtn {
  float: right;
  margin-right: 30px;
  font-size: 36px;
  font-weight: 100;
  color:var(--sidenav_menu_color); 
}


.SideNav-bg {
	display: none;
	width: 100%;
	height: 100%;
	position: fixed;
  top: 0;	
	margin: 0;
	padding: 0;
	background-color: rgba(79, 79, 79, 0.4);
	/* -webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px); */
	z-index: 1100;
}


/*------------Mobile Menu Collapsible div-----------*/

/*--- menu button ---*/
.MenuCollapsible {
  width: 100%;
  padding:16px 20px;
  text-align: left;
  border: none;
  outline: none;
  font-size: 16px;
  font-family:'Roboto','Noto Sans TC', sans-serif;
  color: var(--sidenav_menu_color);
  overflow: hidden; 
  background: none;
  box-sizing: border-box;
  cursor: pointer;
}

button.MenuCollapsible {
	letter-spacing: 0.02em;
}

/*---------- PLUS/MINUS SIGN ---------*/
.MenuCollapsible:after {
  content: '\002B';
  color:var(--sidenav_menu_color);
  float: right;
  font-size: 20px;
  font-weight: 100;
  margin-right: 15px;

}

.active:after {
  content: "\2212";
  font-size: 22px;
  font-weight: 100;
}


/*---------- Content Div ( when the plus sign expands )---------*/
.MenuContent {
  padding: 0;
  max-height: 0;
  overflow: hidden;
  color: var(--sidenav_menu_color);
  border-bottom: 1px solid var(--sidenav_divider_color);   
  -webkit-transition: max-height 0.3s ease-out;
  transition: max-height 0.3s ease-out; 
}

.MenuContent ul li {
	text-align: left;
	list-style: none;
  margin-bottom: 10px;
}

.MenuRegular {
  padding: 16px 20px;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  overflow: hidden;
  font-size: 16px;
  color: var(--sidenav_menu_color);
  font-family:'Roboto','Noto Sans TC', sans-serif;
  box-sizing: border-box;
}