@import "../../../../css/partials/base";

.account-browser-container {
	float: left;
	background-color: #F3F3F3;
	border-right: solid 1px #909099;
	width: 240px;
	overflow: hidden;
	border-radius: inherit;
}

.account-browser-container .search-box {
	width: 220px;
	padding: 18px 10px;
	border-bottom: solid 1px #909099;
}

.account-browser-container .search-box .search-query {
	width: 178px;
}

.account-browser-container .account-list-container {
	width: 480px;
}
.account-browser-container.ab-dropdown .account-list-container {
	max-height: 300px;
}

.account-browser-container .account-list,
.account-browser-container .account-list-slider {
	margin: 0;
	list-style: none;
	float: left;
	overflow-y: auto;
	overflow-x: hidden;
	width: 240px;
	height: 100%;
	max-height: inherit;
}

.account-browser-container .account-list-add {
	line-height: 50px;
	max-height: 50px;
	font-weight: 600;
	background-color: #ddd;
	width: 240px;

	background-image: -webkit-linear-gradient(top, hsl(0, 0%, 90%) 0%, hsl(0, 0%, 80%) 100%);
	background-image:    -moz-linear-gradient(top, hsl(0, 0%, 90%) 0%, hsl(0, 0%, 80%) 100%);
	background-image:     -ms-linear-gradient(top, hsl(0, 0%, 90%) 0%, hsl(0, 0%, 80%) 100%);
	background-image:      -o-linear-gradient(top, hsl(0, 0%, 90%) 0%, hsl(0, 0%, 80%) 100%);
	background-image:         linear-gradient(top, hsl(0, 0%, 90%) 0%, hsl(0, 0%, 80%) 100%);
	color: #555;
}

.account-browser-container .account-list-add i {
	margin: 10px;
}

.account-browser-container .account-list-add:hover {
	background: #c0c0c9;
	cursor: pointer;
}

.account-browser-container .account-list-loader {
	padding: 10px;
	border-top: solid 1px #c0c0c9;
	border-bottom: solid 1px #c0c0c9;
}

.account-browser-container .account-list-element {
	line-height: 60px;
	max-height: 60px;
	overflow: hidden;
	border-bottom: solid 1px #c0c0c9;
}
.account-browser-container .account-list-element.current-account {
	border-color: #909099;
}

.account-browser-container.no-realm .account-list-element {
	line-height: 40px;
	max-height: 40px;
}
.account-browser-container .account-search-link {
	border-bottom: solid 1px #c0c0c9;
	text-align: center;
	font-size: 12px;
	line-height: 15px;
	padding: 5px;
	color: #555;
	background-color: #f6f6f6;
	background-image: -webkit-linear-gradient(top, hsl(0, 0%, 90%) 0%, hsl(0, 0%, 85%) 100%);
	background-image:    -moz-linear-gradient(top, hsl(0, 0%, 90%) 0%, hsl(0, 0%, 85%) 100%);
	background-image:     -ms-linear-gradient(top, hsl(0, 0%, 90%) 0%, hsl(0, 0%, 85%) 100%);
	background-image:      -o-linear-gradient(top, hsl(0, 0%, 90%) 0%, hsl(0, 0%, 85%) 100%);
	background-image:         linear-gradient(top, hsl(0, 0%, 90%) 0%, hsl(0, 0%, 85%) 100%);
}
.account-browser-container .account-search-link:hover {
	background: #e0e0e9;
	cursor: pointer;
}
.account-browser-container .account-search-link .account-search-value {
	font-weight: 600;
	text-shadow: 1px 1px 0px #c0c0c9;
}
.account-browser-container .account-search-link .search-reset {
	color: $primary-color;
	line-height: 30px;
	font-weight: 600;
}
.account-browser-container .account-search-link:not(.active) .search-reset {
	display: none;
}
.account-browser-container .account-search-link.active > *:not(.search-reset) {
	display: none;
}

.account-browser-container .account-list > li:first-child {
	border-top: none;
}
.account-browser-container .account-list > li:last-child {
	border-bottom: solid 1px #c0c0c9;
}
.account-browser-container.ab-dropdown .account-list-element {
	line-height: 40px;
	max-height: 40px;
}

.account-browser-container.ab-sidebar .account-list-element.active {
	border-top: solid 2px $primary-color;
}
.account-browser-container.ab-sidebar .account-list-element.active > div {
	background: #fff;
}

.account-browser-container .account-list-element.active > div {
	color: $primary-color;
}

.account-browser-container .account-list-element > div {
	background-color: #f6f6f6;
	background-image: -webkit-linear-gradient(top, hsl(0, 0%, 98%) 0%, hsl(0, 0%, 95%) 100%);
	background-image:    -moz-linear-gradient(top, hsl(0, 0%, 98%) 0%, hsl(0, 0%, 95%) 100%);
	background-image:     -ms-linear-gradient(top, hsl(0, 0%, 98%) 0%, hsl(0, 0%, 95%) 100%);
	background-image:      -o-linear-gradient(top, hsl(0, 0%, 98%) 0%, hsl(0, 0%, 95%) 100%);
	background-image:         linear-gradient(top, hsl(0, 0%, 98%) 0%, hsl(0, 0%, 95%) 100%);
	color: #555;
}

.account-browser-container .account-list-element > div:hover {
	background: #e0e0e9;
	cursor: pointer;
}

.account-browser-container .account-link {
	padding: 0 5px;
}

.account-browser-container .account-link .account-name {
	font-size: 16px;
	height: 40px;
	line-height: 40px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding-left: 5px;
}

.account-browser-container .account-link .account-realm {
	font-size: 10px;
	height: 20px;
	line-height: 12px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding-left: 5px;
}
.account-browser-container.ab-dropdown .account-link .account-realm {
	display: none;
}

.account-browser-container .account-children-link.local-back {
	border-right: solid 1px #c0c0c9;
	float: left;
}

.account-browser-container .account-children-link {
	border-left: solid 1px #c0c0c9;
	float: right;
	vertical-align: top;
}
.account-browser-container.ab-dropdown .account-children-link {
	height: 40px;
	width: 40px;
}
.account-browser-container.ab-sidebar .account-children-link {
	height: 60px;
	width: 40px;
}
.account-browser-container.no-realm .account-children-link {
	line-height: 40px;
	max-height: 40px;
}

.account-browser-container .account-children-link > i {
	vertical-align: middle;
	margin-left: 17px;
}

.account-browser-container .account-previous-link {
	height: 30px;
	line-height: 30px;
	padding: 0px 20px;
	border-bottom: solid 1px #c0c0c9;
	cursor: pointer;
}

.account-browser-container .account-previous-link > * {
	display: inline-block;
}

.account-browser-container .account-previous-link > i {
	vertical-align: middle;
	margin-right: 10px;
}

.account-browser-container .account-previous-link:hover > * {
	color: $primary-color;
}