/* Base mobile responsive styles */
img {
	max-width: 100%;
}

header {
	position: relative;
}

footer {
	border-top: 2px solid #A0FF12;
	margin-top: 2rem;
	padding-top: .5rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#bodyContainer {
	width: min(98%, 870px);
}


#hNavUserHome, #hNav {
	flex-wrap: wrap;
}

#hNavContainerUserHome, #hNavContainer {
	height: auto;
}

#footerLinks {
	display: flex;
	gap: .5rem;
}

#footerLinks a:not(:last-child) {
	padding-right: .5rem;
	border-right: 1px solid #666666;
}

.menu-toggle {
	background-color: #e6eff8;
	padding: .75rem .5rem;
	display: none;
	text-align: center;
}

@media screen and (max-width: 500px) {
	footer {
		flex-direction: column-reverse;
		gap: 1rem;
	}

	#footerLinks {
		flex-direction: column;
		align-items: center;
	}

	#footerLinks a:not(:last-child) {
		border-right: none;
	}

	.menu-toggle {
		display: block;
	}

	#hNavUserHome, #hNav {
		flex-direction: column;
	}

	.menu-container {
		position: absolute;
		opacity: 0;
		transform: scale(1, 0);
		transform-origin: top left;
		transition: opacity 500ms ease-in-out, transform 400ms ease-in-out;
		width: 100%;
	}

	.menu-container.active {
		opacity: 1;
		transform: scale(1, 1);
	}

	#hNavUserHome li:not(:last-child) {
		border-bottom: 1px solid #333366;
	}

	#hNavContainerUserHome {
		margin-bottom: 0;
	}
}

/* Signup Page - mobile */

#registration {
	display: flex;
	flex-direction: row;
}

#registration-info {
	width: 578px;
	padding-right: 10px;
}

#registration-info:not(.community) {
	border-right: 1px solid black;
}

#customUrlCommunityDescriptionDiv {
	margin-right: 2rem;
}

#registrationTable {
	padding-left: 10px;
	width: 280px !important;
}

#formFieldsTable .form-group {
	margin-bottom: .5rem;
}

#formFieldsTable .disclaimer {
	display: flex;
	gap: .25rem;
}

.vNavContainer ul {
	float: none;
}

.vNavContainer li {
	float: none;
}

#feedbackBox {
	text-align: left;
}

.edweb-content {
	display: flex;
	gap: 20px;
  position: relative;
}

@media screen and (max-width: 500px) {
	#registration .join-page-showcase {
		padding-right: 2rem;
	}

	.join-page-showcase li{
		flex-direction: column;
	}

	#registration {
		flex-direction: column;
	}

	#registration-info {
		border-right: none;
		width: 100% !important;
	}

	#registrationTable {
		padding-left: 0;
		width: 100%;
	}
	
	#registrationTable.community {
		margin-top: 2rem !important;
	}
}

.edweb-content-main {
  width: 100%;
  overflow: hidden;
}

.edweb-content-main.scroll {
  overflow-x: scroll;
}

@media screen and (max-width: 500px) {
  .opFormField input[type=text],
  .opFormField textarea,
  .opFormField select,
  #inviteFriendPermissionsSelect,
  #messagePermissionsSelect,
  .edweb-content-main input
  {
    max-width: 92%;
  }
}


.btn-icon-svg {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
}

.btn-icon-svg svg {
  width: 18px;
  height: 18px;
}

.btn-show-sidebar, .btn-hide-sidebar {
  display: none;
}

@media screen and (max-width: 770px) {
  .edweb-content-sidebar {
    width: 170px;
    height: 100%;
    position: absolute;
    top: 0;
    left: -250px; /* Start with sidebar collapsed */
    transition: all 0.3s ease;
  }
  
  .edweb-content-main {
    margin-top: 20px;
  }

  .edweb-content-sidebar.open {
    left: 0;
    position: relative;
  }

  .btn-show-sidebar {
    position: absolute;
    top: -5px;
  }
  .btn-show-sidebar, .btn-hide-sidebar {
    display: block;
  }
}