/*===================================================================
 *
 * ****************		Mobile device Settings		**************
 * 
 * 		/commons/css/media.devices.css
 * 
 * ==================================================================
*/

/*
@media screen and (min-width: 800px)
{
	
} 


@media screen and (max-width: 500px)
{
	
	.pgtitle
	{
		position: sticky;
		height: 40px;
		width: 100%;
		background: linear-gradient(to right, rgba(250,0,0, 0.4), rgba(77, 19, 209, 0.2));
	}
	
	.pgtitle > h1
	{
		color: rgba(255, 255, 255, 1);
		text-align: left;
		font-size: 1.5em;

	}
	
	select option{
		max-width: 100% !important;
		overflow-wrap: normal !important;
	}
} 
*/
@media (max-width: 650px)
{

	.downline-list th
	{
		display: none;
	}

	.affiliate-options tr
	{
		position: relative;
	}
	
	.affiliate-options table
	{
		line-height: clamp(2rem, 3vh + .38rem, 5rem);
	}

	.affiliate-options > * th,
	.affiliate-options > * td
	{
		width: clamp(13rem, 10vh + .38rem, 15rem);
		line-height: clamp(1.2rem, 3vh + .38rem, 1.5rem);
	}


	.affiliate-options > * td
	{
		width: clamp(30rem, 10vh + .38rem, 35rem);
		line-height: clamp(1.2rem, 3vh + .38rem, 1.5rem);
	}

	.affiliate-options > * td:nth-child(odd)
	{
		position: absolute;
		font-weight: bolder;
		top: 0;
	}

	.affiliate-options td:nth-child(even)
	{
		text-decoration: undeline;
	}

	.affiliate-options > * tr
	{
		margin-top: 5rem;
		padding-top: 5rem;
	}

	.downline-list td
	{
		display: flex;
		justify-content: space-between;
		padding: 0.5rem auto;
	}


	.downline-list td:hover
	{
		background: hsl(1 100% 50% / 1);
	}


	.downline-list td:before
	{
		content: attr(data-cell) ": ";
		font-weight: 800;
		text-transform: capitalize;
	}


	.order-details th
	{
		display: none;
	}

	.order-details td
	{
		display: flex;
		justify-content: space-between;
		padding: 0.5rem 1rem;
	}


	.order-details td:hover
	{
		background: hsl(1 100% 50% / 1);
	}


	.order-details td:before
	{
		content: attr(data-cell) ": ";
		font-weight: 800;
		text-transform: capitalize;
	}


	.pgtitle > h1
	{
		width: 200px;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		font-size: 1.5em;

	}
	
	.sectitle
	{
		height: 6.5rem;
		width: 100%;
		color: rgba(255, 255, 255, .5);
		text-align: center;
		font-size: 1.5rem;
		padding: 0;
		background: radial-gradient(rgba(  166, 171, 247, 1)20%, rgba( 255, 195, 0, 0.7) 40%, rgba(77, 19, 209, 0.5) 50%);
		position: relative;
	}

	.card{
		display: grid;
		margin: .5rem;
		padding: .5rem;
		min-width: 100vw;
		
	}
	

	.card-red{
		display: grid;
		min-width: 100%;
		
	}

	.conversation{
		margin: .1rem;
		padding: .1rem;
	}
	

	.login-container:hover{
		height: 100vh;
		width: 100vw;
		left: 1%;
		top: 1%;
		transition: var(--transitions);
	}

	div#login-register-container:hover
	{
		top: 1%;
		left: 1%;
		position: absolute;
		margin: 0;
		display: block;
		width: 100vh;
		height: 100vh;
		transition: var(--transitions);

	}

	.customer-form:hover
	{
			height: 100%;
			width: 100vw;
			transition: var(--transitions);
	}

	header img
	{
		display:block;
		width: 40px;
		height: auto;
		transition: var(--transitions);
	}
	
	.menu-container:hover
	{
		height: 100vh;
		width: 100vw;
		left: 1%;
		top: 1%;
		transition: var(--transitions);
	}
	
	option{
		max-width: 100% !important;
		overflow-wrap: normal !important;
	}
	
	input {
		min-width: 100%;
		padding-left: 0px;
		padding-right: 0px;
		box-sizing: border-box;
	}
	
	.sidebar {
		order: -1;
	}


	.cart-container
	{
		justify-content: center;
		width: 100%;
		height: auto;
		margin: auto;
	}

	.cart-summary-container{
		order: -1;
		margin: 9 auto;
	}

	.cart-autoship-month-op
	{
		flex-flow: column nowrap;
	}


}