/*==============================================
@@ Custom Styles for Refroute
   Design for the win. --
===============================================*/



html, body {
	font: 14px/1.6 "Open Sans", sans-serif;
	font-family: var(--primary-font);
	color: #333;
	background-color: #fff;
}

body {
	min-height: 100vh;
}


/*-----------------------------------------------------------
* General Elements
*
------------------------------------------------------------*/

/* Anchor */
a {
	color: var(--primary-color);
	text-decoration: none;
}

a:hover {
	/*color: var(--secondary-color);*/
	text-decoration: none;
}

a.secondary-link {
	color: var(--secondary-color);
	text-decoration: none;
}

a.secondary-link:hover {
	color: var(--primary-color);
	text-decoration: none;
}

/* Page Background */
.page-background,
.page-background .bg {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top center;
}
.page-background-fixed {
	position: fixed;
}




/* List */
.no-ul,
.no-ol {
	padding: 0;
	list-style-type: none;
}

.no-ul > li,
.no-ol > li {
    display: block;
    padding: 4px 0;
}




/*
* Big text
*/
.big-text {
	font-size: 18px;
}

/*-----------------------------------------------------------
* Main Header
*
------------------------------------------------------------*/

.main-header {
	position: relative;
	background-color: var(--primary-color);
	color: var(--light);
	padding: var(--spacing-1x) 0;
	z-index: 99;
}


.main-header-transparent {
	background-color: transparent;
}
.main-header-transparent .main-title {
	display: none !important;
}




.main-header.app-main-header-fixed {
	position: fixed;
	left: 0;
	right: 0;
	top:0; 
	box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}


.main-header .main-title {
	font-size: 1.75em;
	font-weight: 600;
	padding: 0;
	margin: 0;
	margin-right: var(--spacing-1x);
}

.main-header .main-title a {
	color: #fff;
	text-decoration: none;
}


/*
* App main header
*/
.main-header.app-main-header {
	padding: var(--spacing-0-5x) 0;
}

/*
* Log-in Page / Landing page
*/

.header-login-form {
	display: flex;
	justify-content: flex-end;
}


.header-login-form > .input-block {
	margin-left: var(--spacing-1x);
}


.header-login-form > .input-block > input[type="password"],
.header-login-form > .input-block > input[type="email"] {
	max-width: 220px;
}

.header-login-form  .ui-btn[type="submit"] {
	padding: 5px 20px;
}


.header-login-form > .input-block .forgot-password-block {
    text-align: right;
}

.header-login-form > .input-block .forgot-password-block  a {
    color: #fff;
    text-decoration: none;
    font-size: 0.85em;
    display: inline-block;
    padding: 5px;
    padding-right: 5px;
    opacity: 0.8;
}

.header-login-form > .input-block .forgot-password-block a:hover {
    opacity: 1;
}







/*---------------------------------------------
* Search on main header
----------------------------------------------*/



.main-search-outer {
	position: relative;
    border-radius: 40px;
    overflow: hidden;
    width: 460px;
}

.main-search-outer {
	background-color: #fff;
}

.main-search-outer .search-input-inner {
	padding-left: 45px;
	
}

.main-search-outer input[type="search"] {
	background-color: #fff;
	border: none;
	width: 100%;
	height: 40px;
	outline: none;
	color: var(--primary-color);
	font-weight: 500;
}


.main-search-outer input[type="search"]::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: var(--primary-color);
  font-weight: 500;
}
.main-search-outer input[type="search"]::-moz-placeholder { /* Firefox 19+ */
  color: var(--primary-color);
  font-weight: 500;
}
.main-search-outer input[type="search"]:-ms-input-placeholder { /* IE 10+ */
  color: var(--primary-color);
  font-weight: 500;
}
.main-search-outer input[type="search"]:-moz-placeholder { /* Firefox 18- */
  color: var(--primary-color);
  font-weight: 500;
}



.main-search-outer button[type="submit"] {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	line-height: 1;
	height: 40px;
	width: 50px;
	text-align: center;
	background-color: transparent;
	border: none;
	apperance: none;
	outline: none;
}



/*---------------------------------
* Main Header Icons
---------------------------------*/
.header-main-functions {
    margin-left: 15px;
    display: flex;
}


/* header main icons */
.header-main-icons  {
    display: flex;
    align-items: center;
}
.header-main-icons .header-icon {
    color: #fff;
    display: block;
    margin-left: 20px;
    font-size: 32px;
}
.header-main-icons .header-icon i {
    display: block;
}


/* User control */

.header-main-function .user-control {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.header-main-functions .user-control {
	display: flex;
	align-items: center;
	padding-left: 15px;
}


.header-main-functions .user-control .user-details {
	display: flex;
	align-items: center;
}
.header-main-functions .user-control .user-details .avatar {
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
    margin-left: 15px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    background-color: #fff;
    /*background-color: var(--secondary-color);*/
    text-align: center;
}
.header-main-functions .user-control .user-details .avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-main-functions .user-control .user-details .avatar > span {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	right: 0;
	font-weight: 600;
}



/*
* User Menu
*/


.header-main-functions .user-menu {
	position: relative;
}

.header-main-functions .user-dropdown-btn {
	display: flex;
	color: #fff;
	padding-left: 5px;
}

.header-main-functions .user-dropdown-btn:hover {
	opacity: 0.8;
}

.header-main-functions .user-dropdown-btn span {
	vertical-align: middle;
	display: flex;
}


/* Dropdown */

.user-menu-dropdown {
	position: absolute;
	right: 0;
	top: 40px;
	z-index: 999;
	color: #000;
	min-width: 220px;
	display: none;
	transition: 0.15s all ease-in-out;
}

.user-menu-dropdown.active {
	display: block;
	min-width: 220px;
	max-height: 800px;
}

.user-menu-dropdown .inner-menu {
	background-color: #fff;
	box-shadow: 0 0 10px rgba(0,0,0,0.25);
	margin-top: 5px;
	border-radius: 5px;
	overflow: hidden;
	position: relative;
}

.user-menu-dropdown .inner-menu > ul {
	display: block;
	padding: 0;
	margin: 0;
	list-style-type: none;
}

.user-menu-dropdown .inner-menu > ul > li {
	display: block;
	padding: 8px 10px;
	font-weight: 400;
	display: flex;
	align-items: center;
}
.user-menu-dropdown .inner-menu > ul > li:hover,
.user-menu-dropdown .inner-menu > ul > li:focus-within {
	background-color: #f3f3f3;
}

.user-menu-dropdown .inner-menu > ul > li a {
	color: #333;
	display: block;
	width: 100%;
	outline: none;
}

.user-menu-dropdown .inner-menu > ul > li a:hover {
	color: var(--primary-color);
}

.user-menu-dropdown .inner-menu > ul > li .icon {
	display: inline-flex;
	vertical-align: middle;
	margin-right: 5px;
	color: #ccc;
	transition: 0.15s all ease-in-out;
}

.user-menu-dropdown .inner-menu > ul > li:hover .icon,
.user-menu-dropdown .inner-menu > ul > li:focus-within .icon  {
	color: var(--primary-color);
}

.user-menu-dropdown .inner-menu > ul > li .icon .material-icons {
	font-size: 17px;
}


/*-----------------------------------------------------------
* Main App Navigation
*
------------------------------------------------------------*/


.main-app-navigation {
	background-color: #fff;
	box-shadow: 0 2px 6px 0px rgba(0,0,0,.15);
}

.main-app-navigation .main-app-links {
	padding: 0;
	margin: 0;
	list-style-type: none;
	display: flex;
	align-items: center;
}

.main-app-navigation .main-app-links > li {
	vertical-align: center;
}

.main-app-navigation .main-app-links > li > a {
	padding: 15px 20px;
	margin-right: 20px;
	display: flex;
	align-items: center;
	line-height: 1;
	text-decoration: none;

	color: var(--primary-color);
}

.main-app-navigation .main-app-links > li > a:hover {
	opacity: 0.8;
}

.main-app-navigation .main-app-links > li:first-child > a {
	padding-left: 0;

}

.main-app-navigation .main-app-links > li > a .icon {
	vertical-align: middle;
	display: inline-block;
	margin-right: 5px;
}
.main-app-navigation .main-app-links > li > a .text {
	vertical-align: middle;
	display: inline-block;
}





/*
* Main app Navigation in Header
*/





.main-nav-links-header {
	/*margin-right: 80px;*/
	margin-right: -40px;
	display: none;
}

.app-main-header.app-main-header-fixed .main-nav-links-header {
	display: block;
}

.app-main-header.app-main-header-fixed.showing-search .main-nav-links-header {
	display: none;
}

/* Search */
.app-main-header.app-main-header-fixed .main-search-outer, 
.app-main-header .header-icon.search-icon-header{
	display: none;
}
.app-main-header.app-main-header-fixed.showing-search .main-search-outer,
.app-main-header.app-main-header-fixed .header-icon.search-icon-header {
	display: block;
}
.header-main-icons  .search-icon-header {
 	transition: 0.15s all ease-in-out;
 }

.showing-search .header-main-icons  .search-icon-header {
	background-color: #fff;
	border-radius: 50%;
	color: var(--primary-color);
	padding: 2px;
	margin-left: 30px;
}

.showing-search .header-main-icons  .search-icon-header {
}


.main-nav-links-header .main-app-links {
	padding: 0;
	margin: 0;
	list-style-type: none;
	display: flex;
	align-items: center;
}

.main-nav-links-header .main-app-links > li {
	vertical-align: center;
	position: relative;
}

.main-nav-links-header .main-app-links > li.active::after,
.main-nav-links-header .main-app-links > li:hover::after {
	position: absolute;
	content: "";
	display: block;
	left: 50%;
	transform: translateX(-50%);
	border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid white;
	bottom: -17px;
}


.main-nav-links-header .main-app-links > li > a {
	padding: 10px 20px;
	margin-right: 20px;
	display: flex;
	align-items: center;
	line-height: 1;
	text-decoration: none;

	color: #fff;
}

.main-nav-links-header .main-app-links > li > a:hover {
	opacity: 0.8;
}

.main-nav-links-header .main-app-links > li:first-child > a {
	padding-left: 0;

}

.main-nav-links-header .main-app-links > li > a .icon {
	vertical-align: middle;
	display: inline-block;
	margin-right: 10px;
	line-height: 1;
	
}

.main-nav-links-header .main-app-links > li > a .icon .material-icons {
	font-size: 20px;
}
.main-nav-links-header .main-app-links > li > a .text {
	vertical-align: middle;
	display: inline-block;
}





/*-----------------------------------------------------------
* Content header for pages.
*
------------------------------------------------------------*/



.content-header {
	padding: var(--spacing-2x) 0;
}



/*
* Page Breadcrumb 
*/
.content-header .page-breadcrumb {
	padding: 0;
	list-style-type: none;
	display: flex;
	align-items: center;
	margin: 0;
}
.content-header .page-breadcrumb > li {
	font-size: 0.95em;
}
.content-header .page-breadcrumb > li::after {
	content: ">";
	display: inline-block;
}

.content-header .page-breadcrumb > li:last-child::after {
	content: "";
}
.content-header .page-breadcrumb > li > a {
	display: inline-block;
	padding-right: 8px;
	color: var(--black);
}

.content-header .page-breadcrumb > li > a:hover {
	color: var(--secondary-color);
}

.content-header .page-breadcrumb > li:not(:first-child) > a {
	padding-left: 8px;
}


.content-header .profile-edit-actions {
	align-items: center;
}

.profile-edit-actions .profile-preview-action {
	display: flex;
	align-items: center;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--black);
	font-size: 0.85em;
	padding: 0 15px;
	margin-right: 15px;
	border-right: 1px solid ;
	height: 14px;
}

.profile-edit-actions .profile-preview-action .icon {
	color: var(--secondary-color);
	line-height: 1;
	display: inline-block;
	margin-right: 5px;
}

.profile-edit-actions .profile-preview-action .icon .material-icons {
	font-size: 18px;
}