/* Icon and Font Imports */
@import url("https://use.typekit.net/twr3gmq.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");

/* Sets header font to Raleway */
.Header__titleSearchWrapper, .Header__menuWrapper {
  font-family: raleway, san-serif !important;
}

/* Search Bar Radius */
#autoSearchContainer, #searchContainer1, #searchContainer {
  border-radius: 50px;
}

/* Header background color */
.Header__menuWrapper {
	background-color: #323142;
}

/* Add Ticket Button Styles */
.Header__containerLi {
	background-color: #5051AE;
  	border-radius: 25px;
  	color: white; 
    padding: 5px 15px;
    font-weight: normal;
}

/* Button Icon */
.Header__tClr::before {
	font-family: "FontAwesome";
    font-size: 22px;
    content: '\f145';
    color: white;
}

/*Button Hover */
.Header__containerLi:hover {
  background-color: #667CBB;
}

/* Ensures the button text stays white on hover */
.Header__containerLink:hover {
  color: white !important;
}

/* Hides the default Zoho Icon on desktop */
.Header__dropicon {
	display: none;
}

/* Flexing to fill height of page */
[data-id="signin"] {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.portalContainer.signin {
  height: 100%;
}


/* Fixes some spacing/size for the sign in box */
#layoutContainer {
 min-height: auto !important; 
  height: 100%;
  display: flex;
  flex-direction: column;
}
.AccessibilityControl__common  {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.Signin__wrapper {
    margin: 2.5rem 0;
    width: 100%;
  	min-height: auto;
}

/* Sets the height of the sign in box */
.Signin__details {
    height: 400px;
  }

/* Sets a min height on each side of the sign in box */
.Signin__part, .Signin__signPart {
    min-height: 100%;
}

/* Mobile Styles */
@media (max-width: 48rem) {
    .Signin__part {
        height: 350px;
    }
  
  .Signin__details {
    height: 100%;
  }
  
  .Header__containerLi { 
    background-color: transparent;
    padding: 0;
  }
  
  .Header__containerLi:hover {
  	background-color: transparent;
  }
  
  .Header__dropicon {
	display: block;
	}
  
  .Header__tClr::before {
	display: none;
	}

}