.input-container {
  height: 600px;
  padding: 50px 0 50px 0;
}
.input-container-bg {
    background-image: url(../../assets/images/banner.png);
    background-size: 100% 100%;
    -webkit-filter: contrast(100%) brightness(50%);
    filter: contrast(100%) brightness(50%);
    position: absolute;
    height: 600px;
    width: 100%;
    z-index : -1;
}
/*Images Source*/

.img-user {
	content: url(../../assets/images/w_user_128_128.png);
}
.user-adj {
    position: absolute;
    left: calc( 100% - 200px );
    padding: 0;
    margin: 0;
    -webkit-filter: contrast(100%) brightness(85%);
    filter: contrast(100%) brightness(85%);
    border-radius: 100%;
    cursor: pointer;
}

.img-logo {
	content: url(../../assets/images/logo.png);
}
.logo-adj {
	position: relative;
	left: calc( ( 100% / 2 ) - 100px );
  /*  left: calc( ( 100% / 2 ) - 150px );  */
	padding: 0;
	padding-bottom: 75px;
	padding-top: 75px;
	margin: 0;
}

.user-image-128{
    width: 128px;
    height: 128px;
}

.img-user-32 {
	content: url(../../assets/images/svg/user_32_32.svg);
}
.img-logo-32 {
	content: url(../../assets/images/svg/logo_32_32.svg);
}
.img-cart-32 {
	content: url(../../assets/images/svg/cart_32_32.svg);
}

/*Fixed Header*/
ecm-search{
    width: calc( 100% - 300px )
}

.square-button {
    height: 60px !important;
    width: 60px !important; 
/*     padding: 0 !important; */
    min-width: 60px !important;
    vertical-align: middle !important;
}

.invisible{
	display: none;
}
.fixed-header-section {
    background-color: mediumvioletred;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    z-index: 3;
    display: none;
}
.fixed-header-logo{
    float: left;
    cursor: pointer;
    margin-left: 10px;
}

.fixed-header-logo,
.fixed-header-user,
.fixed-header-cart {
    position: relative;
    height: 42px;
    width: 42px;
    padding: 0;
}

.fixed-header-user,
.fixed-header-no-user{
    border-radius: 100%;
    cursor: pointer;
    height: 32px;
    width: 32px;
}

.fixed-header-no-user{
    background: rgba(0,0,0,0.1);
    box-shadow: 0 0 0px 5px rgba(0,0,0,0.1);
    height: 28px;
    width: 28px;
}

.fixed-header-cart{
    cursor: pointer;
    height: 28px;
    width: 28px;
    position: relative;
}

.fixed-header-badge {
    position: absolute;
    top: 0;
    left: 32px;
    z-index: 1;
    margin: 0;
    padding: 0;
    margin-top: 10px;
    background: #fff;
    color: mediumvioletred;
    border: 3px solid mediumvioletred;
    font-weight: bolder;
    font-size: xx-small;
    border-radius: 100%;
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 16px;
    text-align: center;
}

.no-badge {
	 margin-right: 10px !important;
}

.user-span, 
.cart-span{
	float: right;
}
.user-span:after,
.cart-span:after {
    content: '';
    display: block;
    position: absolute;
    border-color: transparent transparent #fff transparent;
    border-style: solid;
    border-width: 10px;
    top: 40px;
    margin-left: 20px;
}

.siteHeading {
    /*position: absolute;
    width: 25%;
    display: inline-block;
    margin-left: 20px !important;
    margin: 16px;
    color: #fff;
    font-size: large;*/
    position: relative;
    display: inline-block;
    margin: 15px 30px 15px 15px;
    color: #fff;
    font-size: 14pt;
    font-weight: bold;
}

/*Fixed Header Menu*/

.fixed-header-nav{
	/* top: 13px; 
	left: 1.5rem;
    position: fixed;
    z-index: 4;
     */
   /* height: 45px; */
   /*  top: 0;
	left: 0;
    position: fixed;
    z-index: 4;
    height: 100%; */
    top: 13px; 
	left: 1.5rem;
    position: fixed;
    z-index: 4;
}


/*Right Slide Panel*/

.ecm-bgGlass {
	background-color: gray;
	opacity: 0.5;
	z-index: 4;
	position: fixed;
	left: 0px;
	top: 0px;
	display: none;
	width: 100%;
	height: 100%;
}
.overlayPanel {
/*     width: 400px; */
/*     height: 509px; */
    width : 375px;
    height : 500px;
    position: fixed;
    top: calc( 50% - 500px / 2 );
    left: calc( 50% - 375px / 2 );
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.2);
    z-index: 4;
    display: none;
    border-radius: 2px;
    background: #fff;
}

.rightSlidePanel {
    width: 400px;
    max-height: calc( 100% - 60px );
    position: fixed;
    right: 5px;
/*  top: 40px; */
    top: 60px;
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.2);
    z-index: 4;
    display: none;
    border-radius: 5px;
    background: #fff;
}

@media screen and (max-width:30em) 
{
	.overlayPanel 
	{
	    width: 100%;
	    height: 100%;
	    top: 0;
	    left: 0;
	}
	.overlayPanel-content{
        position: relative;
        display: block;
        height: 100%;
        overflow: hidden;
        overflow-y: auto;
    }
	.siteHeading{
		display : none;	
	}
}

.button {
    width: 90px;
    height: 35px;
    line-height: 15px;
    text-align: center;
    border: 1px solid mediumvioletred;
    background-color:transparent;
    border-radius: 2px;
    float: left;
    position: relative;
    top: 15px;
    color: #333;
    right: 10px;
    margin:2rem;
    font-size: .9rem;
}
	
.button:hover {    
    background-color: mediumvioletred;
    color: #fff;
}    
    
/* Toggle button */
.hide-button {
	top: 0;
	right: 0;
	position: absolute;
	display: inline-block;
	width: 24px;
	height: 24px;
	margin: 15px;
	background-color: transparent;
	border: none;
	cursor: pointer;
	border-radius: 100%;
	transition: 0.6s;
	-webkit-transition: 0.6s;
	z-index: 4;
}
.hide-button:hover {
	box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.1), inset 0 0 0 20px
		rgba(0, 0, 0, 0.1);
}
.hide-button:before, .hide-button:after {
	position: absolute;
	content: '';
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #EC7263;
	background-color: mediumvioletred;
	border-radius: 5px;
	transition: 0.5s;
}
.hide-button:before {
	transform: translateY(-50%) rotate(45deg) scale(1);
}
.hide-button:after {
	transform: translateY(-50%) rotate(-45deg) scale(1);
}

.medium-btn-checkout{
	width: 100%;
    height: 50px;
    line-height: 15px;
    text-align: center;
    border: 1px solid mediumvioletred;
    background-color: mediumvioletred;
    border-radius: 2px;
    float: left;
    position: relative;
    top: 15px;
    color: white;
    right: 10px;
    margin: 2rem; 
    font-size: .9rem;
    margin-left: 14px;
}

.width-300{
	width: 300px;
}

/*mobile view */
.toolbar-spacer{
	flex: 1 1 auto;
}

/*
.mat-dialog-container {
	max-width: 100%  !important;
	height: 60px !important;
	overflow: hidden !important;
	padding: 0px !important;
	border-radius: 0 !important;
}
*/
.mat-dialog-container {
	padding: 0px !important;
	max-width: 100%  !important;
}
        
.mobile-search{
	color: #fff;
}

.back-search{
	color: mediumvioletred;
}

.back-search: hover{
	color: #fff;
	background-color: mediumvioletred; 
}
.ecm-menu-icon {
    background-color: white;
    margin: 6px 0;
    display: block;
}

.nav-menu-box {
	height: 60px;
	width: 60px;	
}

.ecm-menu-icon1 {
    height: 2px;
    width: 25px;
}

.ecm-menu-icon2 {
    height: 2px;
    width: 22px;
}

.ecm-menu-icon3 {
    height: 2px;
    width: 25px;
}

.onSelect {
    background: rgba(68, 68, 68, 0.16);
}

@media screen and (max-width: 750px){
	.logo-adj{
		width: 128px;
	    left: calc( 50% - 64px );
	    margin-bottom: 60px;
	}
	.user-adj {
	    width: 75px;
	    left: calc( 100% - 90px );
	    top: 15px;
	}
}