@import 'include/thirdparty/Bootstrap3/scss/bootstrap/_variables.scss';
@import 'include/thirdparty/Bootstrap3/scss/bootstrap/_mixins.scss';
@import 'include/thirdparty/Bootstrap3/scss/bootstrap/_utilities.scss';

@import 'mixins.scss';
@import 'variables.scss';


/**
 * Reset CSS
 * There are two admin content containers where we attempt to reset the css
 * so a user's theme does not interfere with the display of admin content
 *
 * #gp_admin_html
 *  contain areas that are not inline in the users theme like the sidepanel, inline editing dialogs, admin_box
 */
#gp_admin_html,
#gp_admin_fixed {
	position: absolute;
	top: 0;
	left: 0;
	height: auto;
	text-transform: none;
}
#gp_admin_fixed {
	position: fixed;
}

#gp_admin_html {
	color: #333;
	font-size: 13px;
	font-family: $font_family_sans;
	line-height: 130%;
	font-weight: normal;
}

#gp_admin_html * {
	text-shadow: none;
	@include box-sizing( content-box );
	// background: none; prevents other backgrounds from showing. "inherit" wouldn't make sense
	font-family: inherit;
	font-size: inherit;
	line-height: inherit; // conflicts with fontawesome
}

#gp_admin_html hr {
	border: 0 none;
	border-bottom: 1px solid #ddd;
}

#gp_admin_html label {
	font-weight: normal;
}

#gp_admin_html li {
	list-style: none;
	background-image: none; // ex: a bullet image for <li>, but it messes up ckeditor
}

#gp_admin_html table,
#gp_admin_html form {
	background: none;
	margin: 0;
	padding: 0;
}
#gp_admin_html input,
#gp_admin_html textarea {
	width: auto;
}

#gp_admin_html td,
#gp_admin_html th{
	vertical-align: top;
}
#gp_admin_html a {
	cursor: pointer;
}
#gp_admin_html a img {
	border: none;
}


#gp_admin_html a,
#gp_admin_html a:visited,
#gp_admin_html a:hover {
	color: $link-color;
	font-style: normal;
	text-decoration: none;
	text-transform: none;
}
#gp_admin_html a:hover {
	color: $link-hover-color;
}

#gp_admin_html a * {
	color: inherit;
	text-decoration: inherit;
}

#gp_admin_html h1,
#gp_admin_html .h1,
#gp_admin_html h2,
#gp_admin_html .h2,
#gp_admin_html h3,
#gp_admin_html .h3 {
	margin: .8em 0;
	line-height: 1.1;
}

#gp_admin_html h1 {
	font-size: $font-size-h1;
}

#gp_admin_html h2 {
	font-size: $font-size-h2;
}

#gp_admin_html h3 {
	font-size: $font-size-h3;
}

#gp_admin_html h4 {
	font-size: $font-size-h4;
}

#gp_admin_html h1,
#gp_admin_html h1 a,
#gp_admin_html h1 a:visited,
#gp_admin_html h2,
#gp_admin_html h2 a,
#gp_admin_html h2 a:visited,
#gp_admin_html h3,
#gp_admin_html h3 a,
#gp_admin_html h3 a:visited,
#gp_admin_html h4,
#gp_admin_html h4 a,
#gp_admin_html h4 a:visited {
	color: $gp_heading_color;
	text-align: left;
	text-shadow: none;
	font-weight: normal;
}

#gp_admin_html h1:first-child,
#gp_admin_html h2:first-child,
#gp_admin_html h2:first-of-type,
#gp_admin_html h2.first-child,
#gp_admin_html h3:first-child {
	margin-top: 0;
	padding-top: 0;
}


#gp_admin_html p {
	margin: 1em 0;
}

#gp_admin_html select {
	box-shadow: none;
}

#gp_admin_html .gpcheck,
#gp_admin_html checkbox {
	-webkit-appearance: checkbox;
	-moz-appearance: checkbox;
	appearance: checkbox;
	border: initial;
	&:before,
	&:after {
		content: none;
	}
}

#gp_admin_html .gpselect,
#gp_admin_html .gpcheckbox,
#gp_admin_html .gpcancel,
#gp_admin_html .gpsubmit,
#gp_admin_html .gpbutton,
#gp_admin_html .gpdisabled {
	display: inline-block;
	background-color: #f1f1f1;
	border-radius: 6px;
	border: 1px solid #ccc;
	text-decoration: none !important;

	color: #333 !important;
	text-shadow: 1px 1px 0 #fff;
	white-space: nowrap;

	padding: 4px 8px;
	height: auto;
	@include box-sizing( border-box );

	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: middle;
}

#gp_admin_html .gpbuttongroup,
#gp_admin_html .gpbuttongroup_vertical {
	position: relative;
	display: -webkit-inline-box;
	display: -webkit-inline-flex;
	display: -moz-inline-flex;
	display: -ms-inline-flexbox;
	display: inline-flex;
	vertical-align: middle;
}

#gp_admin_html .gpbuttongroup {
	.gpselect,
	.gpcheckbox,
	.gpcancel,
	.gpsubmit,
	.gpbutton,
	.gpdisabled {
		position: relative;
		border-radius: 0;
		border-right: none;
		-webkit-box-flex: 1;
		-webkit-flex: 1 1 auto;
		-moz-box-flex: 1;
		-moz-flex: 1 1 auto;
		-ms-flex: 1 1 auto;
		flex: 1 1 auto;

		&:first-child {
			border-radius: 6px 0 0 6px;
		}

		&:last-child {
			border-right: 1px solid #ccc;
			border-radius: 0 6px 6px 0;
		}
	}
}

#gp_admin_html .gpbuttongroup_vertical {
	-webkit-box-direction: normal;
	-webkit-box-orient: vertical;
	-webkit-flex-direction: column;
	-moz-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;

	-webkit-box-align: start;
	-ms-flex-align: start;
	-webkit-align-items: flex-start;
	-moz-align-items: flex-start;
	align-items: flex-start;

	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	-moz-justify-content: center;
	justify-content: center;

	.gpselect,
	.gpcheckbox,
	.gpcancel,
	.gpsubmit,
	.gpbutton,
	.gpdisabled {
		position: relative;
		width: 100%;
		text-align: center;
		border-radius: 0;
		border-bottom: none;
		-webkit-box-flex: 1;
		-webkit-flex: 1 1 auto;
		-moz-box-flex: 1;
		-moz-flex: 1 1 auto;
		-ms-flex: 1 1 auto;
		flex: 1 1 auto;

		&:first-child {
			border-radius: 6px 6px 0 0;
		}

		&:last-child {
			border-bottom: 1px solid #ccc;
			border-radius: 0 0 6px 6px;
		}
	}
}


#gp_admin_html .gptextarea,
#gp_admin_html .gp_scrolllist,
#gp_admin_html .gpinput {
	background: #fff;
	border-radius: 6px;
	border: 1px solid #ccc;
	color: #333;
	padding: 4px 6px;
	height: auto;
	@include box-shadow( inset 0 0 1px rgba(0, 0, 0, 0.2) );
	@include box-sizing( border-box );
}

#gp_admin_html .gptextarea.attr_value {
	height: 2.1em;
	min-height: 2.1em;
	width: 100%;
	white-space: normal;
	resize:vertical;
}

#gp_admin_html .gpinput,
#gp_admin_html .gpselect,
#gp_admin_html .gpsubmit,
#gp_admin_html .gpcancel {
	margin: 0 7px 0 0;
}

#gp_admin_html .gpcheckbox.checked,
#gp_admin_html .gpselect,
#gp_admin_html .gpsubmit,
#gp_admin_html .gpbutton {
	cursor: pointer;
	@include gradient-vertical(#FBFBFB, #E9E9E9);
}

#gp_admin_html .gpselect {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-image: url('data:image/svg+xml;charset=US-ASCII,\
	%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20\
	width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20\
	fill%3D%22%23333333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%20\
	0-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%20\
	82.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%20\
	12.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%20\
	0-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
		linear-gradient(to bottom, #fbfbfb 0%,#e9e9e9 100%);
	background-repeat: no-repeat, repeat-x;
	background-position: right 10px top 50%, 0 0;
	background-size: 7px auto, 100%;
	padding-right: 17px;
}

#gp_admin_html .gpselect::-ms-expand {
	display: none;
}

#gp_admin_html .gpcheckbox,
#gp_admin_html .gpcancel {
	cursor: pointer;
	border-color: #ddd;
	@include gradient-vertical(#FFFFFF, #F7F7F7);
}

#gp_admin_html .gpdisabled {
	background-color: #f7f7f7;
	border: 1px solid #ddd;
	color: #999;
}

#gp_admin_html .gpselect option {
	text-shadow: none;
	padding: 0 5px;
}
#gp_admin_html .gpcheckbox input {
	margin: 0;
	padding: 0;
	vertical-align: middle;
}
#gp_admin_html .gpinput {
	white-space: nowrap;
}
#gp_admin_html .gpinput_warning {
	border-color: $gp_red;
}
#gp_admin_html .gpreadonly{
	background: #f5f5f5;
}

#gp_admin_html .sync_label {
	background: #f1f1f1;
}

#gp_admin_html .padded_table td {
	padding: 5px;
}

#gp_admin_html pre {
    background:  #F7F7F7;
    border-left: 1px solid #CCC;
    margin-left: 20px;
    padding: 10px;
    white-space: pre-wrap;
    word-wrap: break-word;
}

#gp_admin_html pre.inline {
    margin-right: 20px;
    display: inline-block;
}

#gp_admin_html .show_character_count {
	position: relative;
	display: inline-block;
	padding: 0;
}
#gp_admin_html .show_character_count textarea {
	padding-bottom: 27px;
	border: 0 none;
	border-radius: 4px;
}
#gp_admin_html .character_count {
	display: block;
	border-top: 1px solid #eee;
	height: 22px;
	line-height: 22px;
	font-size: 11px;
	padding: 0 6px;
	color: #888;
	text-align: right;
}


/**
 * Admin container
 */
#admincontainer {
	margin-left: $simplepanel_width;
	position: relative;
}

#admincontent_panel {
	display: block;
	padding: 0;
	font-weight: normal;
	background: $gp_panel_bg;
}

.gpbody #admincontent_panel {
	padding: 0 40px 0 (40px - $gp_nav_link_padding_x);
}

#admincontent_panel,
#admincontent_panel * {
	@include box-sizing( border-box );
	font-size: $gp_nav_font_size;
	line-height: $gp_nav_font_size;
}

#admincontent_panel .GPAREA {
	display: inline;
}
#admincontent_panel div.GPAREA:after {
	display: none;
}

#admincontent_panel ul {
	float: left;
}
#admincontent_panel ul,
#admincontent_panel li,
#admincontent_panel span,
#admincontent_panel a {
	display: inline-block;
	margin: 0;
	padding: 0;
	list-style: none;
	color: $gp_nav_link_color !important;
	position: relative;
	white-space: nowrap;
}

#admincontent_panel ul a {
	display: block;
}


/**
 * #admincontent_panel b
 */
#admincontent_panel span,
#admincontent_panel a {
	padding: $gp_nav_link_padding_y $gp_nav_link_padding_x;
}

#admincontent_panel a:hover {
	color: $gp_nav_link_color_hover !important;
	background: lighten($gp_panel_bg, 10%);
}

#admincontent_panel ul.admin_links > li:hover a + ul {
	display: block;
}

#admincontent_panel .admin-link-visibility-private,
html.isPrivate #admincontent_panel .admin-link-dropdown-options {
	background: $gp_panel_warning_color;
}

#admincontent_panel .admin-link-visibility-private:hover,
html.isPrivate #admincontent_panel .admin-link-dropdown-options:hover {
	background: lighten($gp_panel_warning_color, 10);
}

#admincontent_panel .fa {
	font-size: 14px;
}

#admincontent_panel span > .fa,
#admincontent_panel a > .fa {
	margin-right: 4px;
}

#admincontent_panel ul ul {
	display: none;
	position: absolute;
	top: 100%;
	background: $gp_panel_bg;
	min-width: 100%;
}
#admincontent_panel ul ul li {
	display: block;
}

#admincontent_panel .panel_tabs {
	float: right;
}

#admincontent_panel .panel_tabs a {
	border-right: 1px solid lighten($gp_panel_bg, 10%);
	border-left: 1px solid lighten($gp_panel_bg, 10%);
	font-weight: normal;
}

#admincontent_panel #admin_menu_wrap > ul > li:hover > ul {
	display: block;
	z-index: 100;
}


/**
 * Search
 */
#panel_search {
	float: right;
}

#panel_search span {
	position: relative;
	display: inline-block;
	height: $gp_nav_height;
	padding: 0;
}

#panel_search input {
	border: 0 none;
	border-radius: 3px;
	width: 160px;
	color: $gp_nav_link_color_hover;
	font-size: $gp_nav_font_size;
	height: $gp_nav_height - 8px;
	padding: ($gp_nav_link_padding_y - 4px) 4px ($gp_nav_link_padding_y - 4px) 25px;
	margin: 4px 0;
	background-color: lighten($gp_panel_bg, 10%);
	@include transition( all .2s ease-out);
}

#panel_search span > i {
	position: absolute;
	top: 0;
	left: 0px;
	width: 25px;
	text-align: center;
	color: lighten($gp_panel_bg, 30%);
	height: $gp_nav_height;
	line-height: $gp_nav_height;
}

#panel_search input:focus {
	background-color: #f1f1f1;
	color: #333;
}

#panel_search button {
	display: none;
}

#panel_search .tslogo {
	vertical-align: top;
}

/**
 * Admin Breadcrumbs
 */
#admin_breadcrumbs {
	background: $gp_bread_bg;
	padding: 0 (40px - $gp_bread_link_padding_x);
	font-size: $gp_bread_font_size;
}
#admin_breadcrumbs a {
	color: $gp_bread_link_color !important;
	padding: $gp_bread_link_padding_y $gp_bread_link_padding_x;
	display: inline-block;
}
#admin_breadcrumbs a:hover {
	color: $gp_bread_link_color_hover !important;
}



#admin_drag_box {
	position: fixed;
	border: 2px dashed #000;
	z-index: 90000;
	padding: 0;
	border-radius: 3px;

	background-color: #fff; /* important for ie to prevent text selection underneath drag box */
	@include opacity(.4);
}


/**
 * Admin Pages
 */
#admincontent {
	position: relative;
	color: #333;
	font-size: 13px;
	width: auto;
	height: 100%;
	padding-left: 0;
	padding-right: 0;
	padding-bottom: 0;
	@include box-sizing( border-box );
}


#admincontent_inner {
	padding: 30px 40px 10em 40px;
	overflow: hidden;
	background-color: #fff;

	//subset of bootstrap components
	//@import 'include/thirdparty/Bootstrap3/scss/_bootstrap.scss';
	@import 'include/thirdparty/Bootstrap3/scss/bootstrap/scaffolding.scss';
	@import 'include/thirdparty/Bootstrap3/scss/bootstrap/type.scss';
	@import 'include/thirdparty/Bootstrap3/scss/bootstrap/grid.scss';

	.bg-danger{
		padding:15px;
	}

}

#admincontent_inner #finder,
#admincontent_inner #finder * {
	@include box-sizing(content-box);
}

#admincontent .nowrap {
	white-space: nowrap;
}

#admincontent .formlabel {
	text-align: right;
	font-weight: bold;
}

#admincontent li a {
	text-decoration: none;
}

#gp_admin_html .admin_note,
#gp_admin_html .sm{
	font-size: $font-size-small;
}
#gp_admin_html .admin_note a {
	text-decoration: none;
}
#gp_admin_html .text-muted {
	color: #666;
}


/**
 * admin_box
 */
#gp_admin_box1 {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: #000;
}
#gp_admin_box {
	position: fixed;
	border-radius: 6px;
	background: #fff;
	padding: 20px;
	top: 40px;
	left: 50vw;
	padding-top: 20px; // spare space for close button when there is an y-scrollbar
	transform: translateX(-50%);
	@include box-shadow( 0 0 6px rgba(0, 0, 0, 0.4) );
	max-height: calc(100vh - 100px);
	overflow: auto;
}
#gp_admin_boxc {
	position: relative;
	max-height: calc(100vh - 120px);
	max-width: calc(100vw - 100px);
}
#gp_admin_boxc.iframe {
	width: 100%;
}

#gp_admin_boxc iframe {
	width: 100%;
	border: 0;
	height: calc(100vh - 130px);
}

@media (max-width:768px) {
	#gp_admin_box {
		top: 15px;
		max-height: calc(100vh - 70px);
	}
	#gp_admin_boxc {
		max-height: calc(100vh - 95px);
		max-width: calc(100vw - 105px);
	}
	#gp_admin_boxc iframe {
		height: calc(100vh - 110px);
	}
}


#gp_admin_box h2,
#gp_admin_box h3 {
	margin-top: 0;
	padding-top: 0;
	line-height: 100%;
}
a.gp_admin_box_close {
	position: sticky;
	top: 7px;
	margin-left: auto;
	z-index: 100;
	text-decoration: none;
	height: 16px;
	width: 16px;
	@include gpimg( 'cancel.png', 50%, 50% );
	display:block;
}
#gp_admin_box h2 a,
#gp_admin_box h3 a,
#gp_admin_box h4 a {
	text-decoration: none;
	color: #444;
}


input.admin_box_close {
	display: none;
}
#gp_admin_box input.admin_box_close {
	display: inline;
}

#gp_admin_box tr.notification-item-muted > td {
	background: #e6e6e6;
	opacity: 0.5;
}

#gp_admin_box .show-notifications-box td:first-child {
	white-space:nowrap;
}


.layout_color_id {
	display: inline-block;
	width: 14px;
	height: 14px;
	vertical-align: middle;
	padding: 0;
	margin: 0;
	cursor: pointer;
	border-radius: 7px;
}

.layout_default {
	@include opacity(0.6);
}


/**
 * For new content areas, empty areas and hidden areas
 */
body.edit_layout .GPAREA {
	min-height: 1em;
}

body.gpAdmin .GPAREA[data-gp_hidden="true"] {
	display: none!important;
}


/**
 * general
 */

.full_width,
#gp_admin_html .full_width {
	width: 100%;
}


#gp_admin_html .bordered,
.bordered {
	margin-top: 1em;
	border-spacing: 0;
	border-top: 1px solid #eee;

	> tbody > tr > th,
	> thead > tr > th,
	> tbody > tr > td,
	> tfoot > tr > td {
		padding: 7px;
		border-bottom: 1px solid #eee;
		text-align: left;
		color: #444 !important;
		background-color: #fff;
	}

	> tbody > tr > th,
	> thead > tr > th {
		background-color: #eee;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: #000;
		text-shadow: 0 1px 0 #fff !important;
		border-bottom: 1px solid #ddd;
		font-weight: bold;
	}

	> tbody > tr.even > td,
	&.striped tbody > tr:nth-child(2n) > td{
		background: #f5f5f5;
	}

	&.middle > tbody > tr > td {
		vertical-align: middle;
	}

	&.hover > tbody > tr:hover > td {
		background-color: #ddd;
	}

	> tbody > tr.active > td {
		background-color: $gp_teal !important;
		&,
		> a {
			color: #fff !important;
		}
	}

}




/**
 * collapsible
 */
.collapsible h4 {
	margin: 0;
	border: 0 none;
}
.collapsible h4 a {
	display: block;
	cursor:  pointer;
	padding: 5px 6px;
	margin-top: 5px;
	border-radius: 3px;
	color: #333 !important;
	background: #f1f1f1;
	border: 1px solid #ccc !important;
	border-color: #ddd #ddd #ccc #ddd !important;
	@include gradient-vertical(#f7f7f7, #ddd);
}

.collapsible h4 a:before {
	display: inline-block;
	font-family: FontAwesome;
	content: "\f0d7"; // fa caret-down
	color: #666;
	width: 1.2em;
	text-align: center;
}

.collapsible h4.gp_collapsed a {
	border-radius: 3px;
}

.collapsible h4.gp_collapsed a:before {
	content: "\f0da"; // fa caret-right
	color: #888 !important;
}

.collapsible h4 a:focus {
	outline: 0; /* prevent dotted outline from click */
}

.collapsible > div {
	border-radius: 0 0 3px 3px;
	background: #fff;
	padding: 5px;
}


/**
 * configuration table
 */
table.configuration {
	width: 100%;
}
table.configuration select {
	width: 15em;
}
table.configuration input,
table.configuration textarea {
	border: 1px solid #bbb;
	border-radius: 3px;
	padding: 3px;
}
table.configuration textarea {
	width: 100%;
}
table.configuration td:first-child {
	width: 20%;
}


/**
 * tablesorter
 */
table.tablesorter {
	th.gp_header {
		cursor: pointer;

		&:before {
			display: block;
			border-left: 1px solid rgba(0, 0, 0, 0.125);
			float: left;
			margin: -7px 0.5rem -7px 0;
			padding: 7px 0 7px 0.33rem;
			font-family: FontAwesome;
			font-size: 14px;
			content: '\f0dc'; // .fa-sort
			color: #aaa;
		}

		&:first-child:before {
			border-left: 0 none;
		}

		&_asc:before {
			content: '\f0d8'; // '\f0d8' = fa-caret-up, '\f0de' = .fa-sort-asc
			color: #333;
		}

		&_desc:before {
			content: '\f0d7'; // '\f0d7' = fa-caret-down, '\f0dd' = .fa-sort-desc
			color: #333;
		}

		.tablesorter-header-inner {
			padding-right: 1.5rem;
		}

	}
}


/**
 * New Expandable Menu Control
 */
.expand_child,
.expand_child_click {
	position: relative;
}

.expand_child ul,
.expand_child_click ul {
	position: absolute;
	display: none;
}
.expand ul {
	display: block;
}
.expand .expand_child ul,
.expand .expand_child_click ul {
	display: none;
}
.expand .expand ul {
	display: block;
}


.hidden_options {
	visibility: hidden;
}

.expand .hidden_options {
	visibility: visible;
}

/**
 * don't show any drop down menus when dragging
 */
.drag_active ul {
	display: none !important;
}
.drag_active .hidden_options {
	visibility: hidden !important;
}


/**
 * Drag 'n Drop
 */
.draggable_element {
	cursor: move;
}
.draggable_hidden {
	@include opacity(.3);
}
.target {
	left: -5px;
	top: -5px;
	visibility: visible !important;
	@include box-shadow( 5px 5px 5px #888 );
	@include opacity(1);
}


/**
 * Admin Panel
 * This is the panel of admin links that is displayed
 * across all pages when the user is logged in
 */


 /**
 * simple panel
 */
#simplepanel {
	position: fixed;
	z-index: 9002;
}
#simplepanel > div {
	padding: 0;
	margin: 0 0 5px 0;
	width: auto;
	min-width: 130px;

	display: block;
	border: 1px solid #000;
	border-radius: 5px;
	background: $gp_panel_bg;
	@include box-shadow( 0 0 3px rgba(0, 0, 0, 0.6) );
}

#gp_admin_html ul,
#simplepanel ul {
	overflow: visible;
}

#simplepanel a,
#simplepanel span,
#simplepanel div {
	line-height: 18px;
	text-decoration: none;
	color: $gp_panel_link_color !important;
}
#simplepanel img {
	border: 0;
	margin: 0;
	padding: 0;
}


/**
 * toolbar
 */
#simplepanel .toolbar {
	position: relative;
	//border-bottom: 1px solid #111;
	cursor: move;
	line-height: 0;
}

html.admin_body #simplepanel .toolbar {
	cursor: default;
}

#simplepanel .toolbar > a {
	display: inline-block;
	height: 32px;
	width: 20% !important;
	min-width: 32px;
	vertical-align: top;
	padding: 8px;
	@include box-sizing( border-box );
}
#simplepanel .toolbar > a i {
	margin: 0;
}

#simplepanel .toolbar .toggle_panel {
	@include gpimg( 'icons.png', 50%, -32px );
}
#simplepanel.compact > div {
	width: 32px;
	min-width: 0;
}
#simplepanel.compact .toolbar .toggle_panel {
	@include gpimg( 'icons.png', 50%, -64px );
}
#simplepanel.minb:hover > div {
	margin: 0 0 200px 0; /* prevent the menu from disappearing if changing the display makes the user mouseout */
}
#simplepanel.toggledmin > div {
	margin: 0 !important; /* don't add margin at bottom if the display was just changed */
}
#simplepanel.minb .toolbar .toggle_panel {
	@include gpimg( 'icons.png', 50%, 0 );
}

#simplepanel .toolbar .extra {
	float: right;
}
#simplepanel.compact .toolbar .extra,
#simplepanel.minb .toolbar .extra {
	display: none;
}
#simplepanel.minb:hover .toolbar .extra {
	display: inline-block;
}


/**
 * panelgroup
 */
#simplepanel .panelgroup {
	position: relative;
	display: block;
	&.admin-panel-notifications {
		span,
		a {
			padding-right: 1.75em; /* space for badge */
		}
	}
	.admin-panel-notification:after {
		display: none;
	}
	.admin-panel-badge {
		font-size: 0.825em;
		font-weight: bold;
		text-align: center;
		display: inline-block;
		position: absolute;
		right: 0.2em;
		top: 0.2em;
		z-index: 5;
		padding: 0 0.25em;
		line-height: 1.5em;
		min-width: 1em;
		border-radius: 0.825em;
		background-color: #666;
		color: #fff;
	}
}


/**
 * toplink
 */
#simplepanel .toplink {
	text-decoration: none;
	display: block;
	white-space: nowrap;
	margin: 0;
	height: 16px;
	padding: 8px;
}

#simplepanel .fa {
	height: 16px;
	width: 16px;
	line-height:16px;
	text-align: center;
	display: inline-block;
	vertical-align: top;
	margin-right: 8px;
	font-size: 14px;
}

#simplepanel .toolbar .fa {
	font-size: 16px;
}

#simplepanel .gpversion {
	color: #888 !important;
	font-size: 11px;
	padding: 10px;
}

#simplepanel .toplink span {
	display: inline-block;
	font-size: 13px;
	line-height: 16px;
	height: 16px;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 130px;
	color: #f5f5f5;
}

#simplepanel.compact .toplink span {
	display: none;
}


/**
 * panelgroup2
 */
#simplepanel.compact .panelgroup .panelgroup2 {
	position: absolute;
	top: 0;
	left: 100%;
	display: none !important;
	padding-left: 8px;
	padding-right: 5px;
	margin-left: -3px; /* for IE */
	background-image: url('../../include/imgs/blank.gif'); /* for IE */
}

#simplepanel.compact .panelgroup:hover .panelgroup2{
	display: block !important;
}


/**
 * submenu
 */
#simplepanel .submenu {
	position: relative;
	background-color: $gp_panel_bg_light;
	border-top: 1px solid #111;
	border-bottom: 1px solid #3f3f3f;
	margin: 0;
	padding: 0;
}
#simplepanel .submenu ul,
#simplepanel .submenu li {
	margin: 0;
	padding: 0;
	list-style: none;
}


#simplepanel .submenu ul {
	z-index: 9010;
	margin-left: -1px;
	margin-right: -1px;
}

#simplepanel .submenu li > a,
#simplepanel .submenu li > span {
	display: block;
	position: relative;
	padding: 3px 14px;
	white-space: nowrap;
	overflow: hidden;
}
#simplepanel .submenu a.submenu_top {
	display: none;
}
#simplepanel .submenu .expand_child > a:after {
	font-size: 10px;
	vertical-align: top;
	color: #aaa;
	content: "\25B6";
	padding-left: 9px;
	position: absolute;
	right: 0px;
	padding-right: 3px;
	background-color: inherit;
}

#simplepanel .submenu a:hover {
	background-color: #222;
}
#simplepanel .submenu li.selected a{
	background-color: #222;
	font-weight: bold;
}


#simplepanel.compact .submenu {
	border: 1px solid #000;
	border-radius: 5px;
}

#simplepanel.compact .submenu a.submenu_top {
	display: block;
	padding-top: 7px;
	padding-bottom: 7px;
	height: 16px;
	font-weight: bold;
	background-color: #222;
	border-bottom: 1px solid #000;
}

#simplepanel .submenu li.separator {
	border-bottom: 1px solid #3f3f3f;
}
#simplepanel .submenu li:last-child {
	border-bottom: 0 none;
}


/**
 * third level
 */
#simplepanel .expand ul {
	position: absolute;
	left: 100%;
	top: 0;
	background-color: $gp_panel_bg;
	border: 1px solid rgba(0, 0, 0, 0.4);
	border-radius: 5px;
}
#simplepanel .expand ul a:hover {
	background: $gp_panel_bg_light;
}


/**
 * Minimum display
 */
#simplepanel.minb > div {
	min-width: 0;
}
#simplepanel.minb .toolbar a:nth-child(n+2),
#simplepanel.minb .panelgroup{
	display: none;
}
#simplepanel.minb:hover .panelgroup {
	display: block;
}
#simplepanel.minb:hover .toolbar a:nth-child(n+2) {
	display: inline-block;
}
#simplepanel.toggledmin .panelgroup,
#simplepanel.toggledmin .toolbar a:nth-child(n+2) {
	display: none !important;
}


#gp_edit_overlay {
	position: absolute;
	height: 0;
	width: 0;
	overflow: visible;
	z-index: 8999;
}

#gp_edit_overlay div,
#gp_edit_box {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 8998;
	display: none;
	cursor: pointer;

	background-color: #eee;
	@include opacity(.5);

	border: 1px dashed $gp_panel_warning_color;
	border-radius: 3px;

	-moz-border-image: url('../../include/imgs/editing.gif') 1 repeat;
	-webkit-border-image: url('../../include/imgs/editing.gif') 1 repeat;
	border-image: url('../../include/imgs/editing.gif') 1 repeat;
}

#gp_edit_overlay > span {
	position: absolute;
	z-index: 8999;
	display: block;
	border-radius: 3px;
	overflow: hidden;

	margin: 2px;
	max-width: 200px;
	background: rgba(238, 238, 238, 0.95);
	padding: 2px;
	border: 1px solid rgba(200, 200, 200, 0.2);
	@include box-shadow( 0 0 3px rgba(0, 0, 0, 0.6) );
}

#gp_edit_overlay span > * {
	display: none !important;
}
#gp_edit_overlay span a {
	position: relative;
	color: #444 !important;
	padding: 4px 7px;
	border: 1px solid transparent;
	margin: 0 24px 0 0;
	font-size: 13px !important;
	cursor: pointer;
	white-space: nowrap;
	line-height: 100%;
	border-radius: 2px;
	text-overflow: ellipsis;
	overflow: hidden;
}

#gp_edit_overlay span a:hover {
	background: rgba(200, 200, 200, 0.5);
}

#gp_edit_overlay span.gp_hover * {
	display: block !important;
}
#gp_edit_overlay .gp_separator {
	margin: 2px 0;
	border: 0 none;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #f5f5f5;
}

#gp_edit_overlay span a.gp_overlay_expand {
	display: block !important;
	padding: 1px !important;
	height: 17px;
	width: 17px;
	line-height: 17px;
	text-align: right;
	margin: 0;
	font-size: 16px !important;
}

#gp_edit_overlay span.gp_hover a.gp_overlay_expand {
	float: right;
	z-index: 9001;
	text-align: center;
}
#gp_edit_overlay span.gp_hover a.gp_overlay_expand:before {
	content: '\f00d';
}

/**
 * adminlinks
 */
#adminlinks2 {
	position: relative;
	z-index: 10;
	margin-right: -30px;
}


#adminlinks2 .panelgroup {
	display: inline-block;
	vertical-align: top;
	padding: 10px 20px 10px 0;
	width: 270px;
	@include box-sizing( border-box );
}

.columns_3 #adminlinks2 .panelgroup {
	width: 33%;
}

.columns_2 #adminlinks2 .panelgroup {
	width: 49%;
}

.columns_1 #adminlinks2 .panelgroup {
	width: 99%;
}


#adminlinks2 .panelgroup2 {
	border: 1px solid #ddd;
	border-radius: 3px;
	overflow: hidden;
	margin: 3px 0;
}


#adminlinks2 > div > a,
#adminlinks2 > div > span {
	padding: 7px 3px;
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-shadow: 0 1px 0 #fff;
	font-size: 18px;
	color: #333 !important;
}

#adminlinks2 > div > span.layout_label > a {
	color: #333;
}

#adminlinks2 ul,
#adminlinks2 li {
	list-style: none;
	padding: 0;
	margin: 0;
	z-index: 10;
}

#adminlinks2 li {
	position: relative;
	margin-top: -1px;
	border-top: 1px solid transparent;
	border-bottom: 1px solid transparent;
}


#adminlinks2 li > a,
#adminlinks2 li > span {
	font-size: 13px;
	padding: 5px 12px;
	display: block;
	white-space: nowrap;
	min-width: 170px;
	outline: 0 none;
	color: #333 !important;
}

#adminlinks2 li a:hover {
	color: $gp_blue !important;
	text-decoration: none;
}

#adminlinks2 li.submenu_top {
	display: none;
}

#adminlinks2 li.separator {
	border-bottom: 1px dotted #ccc;
}

#adminlinks2 li.expand_child_click {
	border-top: 1px solid #f5f5f5;
	border-bottom: 1px solid #f5f5f5;
	background: #f9f9f9;
}

#adminlinks2 li.expand_child_click > a:before {
	font-size: 10px;
	vertical-align: top;
	color: #888;
	content: "\25B6";
	padding-right: 5px;
}
#adminlinks2 li.expand > a:before {
	content: "\25BC";
}

#adminlinks2 li.expand,
#adminlinks2 li:hover {
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	z-index: 11;
}

#adminlinks2 li.expand_child_click ul {
	position: relative;
	z-index: 11;
	background: #fff;
}

#adminlinks2 li.expand_child_click li {
	overflow: hidden;
	text-overflow: ellipsis;
	border: 0 none;
	border-radius: 0;
	margin: 0;
}

#adminlinks2 li.expand_child_click li > a,
#adminlinks2 li.expand_child_click li > span,
#adminlinks2 li.expand_child_click li > b,
#adminlinks2 li.expand_child_click li > form {
	font-size: 13px;
	display: block;
	padding: 3px 25px;
}
#adminlinks2 li.expand_child_click li:hover {
	background: #f7f7f7;
}

#adminlinks2 .gp_notice {
	margin: 5px;
}


/**
 * Overlay
 */
#loading1 {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: #fff;
	background: rgba(255, 255, 255, 0.3);
	text-align: center;
}

#loading1 i {
	position: absolute;
	top: 40%;
}


div.inline_box {
	padding: 2em;
}

div.inline_box h2 {
	margin-top: 0;
	color: #333;
}

div.inline_box td {
	padding: .5em;
}
div.inline_box .formlabel {
	text-align: right;
	font-size: 85%;
	white-space: nowrap;
}

div.inline_box input, div.inline_box select, div.inline_box textarea {
	padding: 3px 5px;
}
div.inline_box .cancel {
	display: inline !important;
}
div.inline_box li {
	list-style: none;
}
div.inline_box label {
	display: block;
}


/**
 * Addon
 */
#gp_admin_html .rating {
	display: inline-block;
	height: 16px;
	position: relative;
	vertical-align: top;
}

#gp_admin_html .rating a {
	position: relative;
	display: inline-block;
	height: 16px;
	width: 16px;
	padding: 0;
	@include gpimg( 'stars.png', 0, 0 );
}
#gp_admin_html .rating a.unset {
	background-position: 0 -16px;
}


.gp_notice,
.gp_warning {
	border: 1px solid #fcefa1;
	padding: 7px 9px;
	border-radius: 5px;
	background: #fffde6;
}

.gp_notice,
.gp_warning b {
	display: block;
}

.gp_warning {
	border-color: $gp_panel_warning_color;
	background: #fef1ec;
	color: darken($gp_panel_warning_color, 10%);
}

.gp_passed {
	border: 1px solid #6aa84f;
	padding: 5px 7px;
	background-color: #bdf5a4;
	border-radius: 5px;
}


body #addon_about {
	margin-top: 30px;
	border: 1px solid #ccc;
	padding: 14px;
	max-width: 600px;
	border-radius: 5px;
	line-height: 170%;
}
#addon_about h3 {
	margin-bottom: .5em;
}


/**
 *Admin_Users
 */
#gp_admin_html label.all_checkbox {
	position: relative;
	white-space: nowrap;
	margin-right: 7px;
	margin-bottom: 7px;
	overflow: hidden;
	display: inline-block;
	vertical-align: middle;
}

#gp_admin_html label.all_checkbox > span {
	width: 140px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: block;
	cursor: pointer;
	border: 1px solid #ddd;
	background-color: #f1f1f1;
	padding: 4px 7px;
	border-radius: 3px;
}

#gp_admin_html label.all_checkbox input:checked + span {
	color: $btn-success-color;
	background-color: $btn-success-bg;
	border-color: $btn-success-border;
}

#gp_admin_html label.all_checkbox input {
	position: absolute;
	left: -20px;
	z-index: -1;
}

#gp_admin_html label.select_all {
	padding: 5px 0;
	margin-bottom: 5px;
}


/**
 * tabs
 */
.gp_tabs {
	margin: 0 0 12px 0;
	/*
	text-align: justify;
	position: relative;
	width: 100%;
	&:after { // create a line break to justify line
		content: "";
		display: inline-block;
		width: 100%;
		height: 1px;
	}
 	*/
}

.gp_tabs a,
#gp_admin_html .gp_tabs a {
	display: inline-block;
	text-decoration: none;
	font-weight: bold;
	margin: 3px 0;
	padding: 3px 5px;
	border-radius: 3px !important;
	font-size: 13px;

	background-color: #f1f1f1;
	border: 1px solid #e1e1e1;
	color: #777;
	// max-width: 16%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gp_tabs a.selected,
#gp_admin_html .gp_tabs a.selected {
	border: 1px solid #444;
	background-color: #777;
	color: #fff;
}

#area_lists {
	position: relative;
}
#area_lists table {
	width: 100%;
}
#area_lists td.add {
	text-align: right;
}

/**
 * jquery ui autocomplete
 */
#gp_admin_html {

	.ui-autocomplete {
		z-index: 12000;
		/* for auto-complete scrolling */
		max-height: 250px;
		overflow-y: auto;
	}

	.ui-autocomplete .ui-menu-item {
		min-width: 200px !important;
		padding-right: 30px !important;
	}

	.ui-menu .ui-menu-item {
		font-size: 14px;
		line-height: 14px !important;
		padding: .3em .4em !important;
		margin: .1em 0 !important;
		border: 1px solid transparent;
		white-space: nowrap;
		overflow: hidden;
	}
	.ui-menu-item a {
		color: #333;
	}

	.ui-menu-item span {
		font-size: 11px;
		padding-top: 1px;
		line-height: 11px;
		display: block;
		color: #777;
	}
}


/**
 * Upload form
 * Needed for inline editing and upload manager
 */
.gp_upload_form {
	position: relative;
	display: block;
	font-size: 13px !important;
	cursor: pointer;
	overflow: hidden;
	height: 100%;
}
#ckeditor_area .gp_upload_form {
	padding: 0 0 5px 0 !important;
}

.gp_object_wrapper {
	position: relative;
	z-index: 10001;
	@include opacity(0);
	cursor: pointer;
}
.gp_upload_form * {
	cursor: pointer;
}


/**
 * floating areas
 */
.gp_floating_area {
	border: 1px solid #fff;
	border-radius: 6px;
	background: #ededed;
	background: #ededed -moz-linear-gradient(top, #fafafa 5px, #ededed 25px);
	background: #ededed -webkit-linear-gradient(top, #fafafa 5px,#ededed 25px);
	background: #ededed -o-linear-gradient(top, #fafafa 5px,#ededed 25px);
	background: #ededed -ms-linear-gradient(top, #fafafa 5px,#ededed 25px);
	background: #ededed linear-gradient(top, #fafafa 5px,#ededed 25px);
	@include box-shadow( 0 0 6px rgba(0, 0, 0, 0.4) );
}

#gp_admin_box > div,
.gp_floating_area > div {
	padding: 4px;
	border-radius: 6px;
}

.gp_floating_area .toolbar {
	text-align: left;
	margin-bottom: 2px;
	cursor: move;
	min-height: 18px;
	cursor: move;
	/* font-weight: bold; */
	font-size: 13px;
	position: relative;
	color: #777 !important;
}

.gp_floating_area .gp_right {
	float: right;
}

.gp_floating_area .gp_right a,
.gp_floating_area .gp_right span {
	display: inline-block;
	margin: 0 0 0 8px;
}

.unavail {
	visibility: hidden;
}


/**
 * drop down menus
 */
.dd_menu {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	width: 150px;
}
.dd_menu ul,
.dd_menu li,
.dd_menu li a,
.dd_menu .dd_list {
	list-style: none;
	padding: 0;
	margin: 0;
	line-height: 130% !important;
	background: #fff;
	white-space: nowrap;
	max-width: 100%;
}
.dd_menu a {
	color: #333 !important;
	position: relative;
}
.dd_menu {
	position: relative;
	line-height: 100% !important;
	height: 26px;
}
.dd_menu > a {
	border: 1px solid #ccc;
	overflow: hidden;
	border-radius:  3px;
	background: #fff;
	display: block;
	padding: 0 20px 0 7px;
	line-height: 24px !important;
	height: 24px;
	white-space: nowrap;
}
.dd_menu > a input {
	border: 0 none;
	background: #fff;
	width: 100%;
}

.dd_menu > a:after {
	position: absolute;
	right: 0;
	padding: 0 8px 0 0;
	border-radius: 2px;
	font-size: 14px;
	color: #666;
	font-family: FontAwesome;
	content: "\f0d7";
	padding-left: 5px;
	background: #fff;
}

.dd_menu .dd_list {
	position: absolute;
	padding: 0;
	display: none;
	border-radius: 5px;
	border: 1px solid #ccc;
	top: 100%;
	left: 0;
	right: 0;
	margin-top: -1px;
	z-index: 11020; /* place over messages */
	overflow: hidden;
}

.dd_list > ul {
	max-height: 300px;
	overflow: auto;
	overflow-x: hidden !important;
	overflow-y: auto !important;
}

.dd_list .list_heading {
	font-weight: bold;
	padding: 0 10px;
	background: #f1f1f1 !important;
	border-bottom: 1px solid #ddd;
	border-top: 1px solid #ddd;
	margin-bottom: 3px;
	font-size: 15px;
}

.dd_list li:first-child .list_heading {
	border-top: 0 none;
}


.dd_list li > span,
.dd_list li > b,
.dd_list li > a {
	padding: 3px 17px !important;
	display: block;
	position: relative;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dd_list li.selected > * {
	font-weight: bold;
}
.dd_list li > *:hover {
	background: #f5f5f5;
}
.dd_list li.selected > *:before {
	content: "\25B6";
	font-size: 8px;
	color: #aaa;
	margin-left: -10px;
	position: absolute;
}


#admin_search .match_stats {
	color: #666;
	display: block;
}

#admin_search .result_list h4 {
	margin: 20px 0 0 0;
}

#admin_search .result_list h4 a {
	font-weight: normal;
	font-size: 17px;
	margin: 0;
	color: #226699 !important;
	border-bottom: 0 none;
}


.ui-selectable-helper {
	z-index: 10000 !important;
}



#gp_admin_html .hmargin_tabs,
#gp_admin_html .hmargin {
	margin-top: 0;
	margin-bottom: 1em;
	color: #333;
}

.hmargin a,
.hmargin span {
	display: inline-block;
	white-space: nowrap;
}
.hmargin_tabs a,
.hmargin_tabs span {
	border-right: 2px solid #eee;
	padding: 0 10px;
	margin: 0;
	display: inline-block;
	white-space: nowrap;
}

.hmargin_tabs a,
.hmargin a {
	color: #888 !important;
	border-bottom: 0 none !important;
}
.hmargin_tabs a:hover,
.hmargin a:hover {
	color: #333 !important;
}
.hmargin span {
	color: #bbb;
	margin: 0 5px;
}

.hmargin_tabs *:last-child {
	border: 0 none;
}

.well {
	border: 1px solid #ddd;
	padding: 20px;
	background: #f9f9f9;
	border-radius: 3px;
	margin-bottom: 20px;
}

#gp_admin_html .classes-load-presets {
	margin-top: 20px;

	ul {
		margin: 0.5em 0;
		padding-left: 1.25em;

		li {
			list-style: circle outside none;
		}
	}

	form {
		border-top: 1px solid #ddd;
		padding-top: 20px;
	}
}


/**
 * Full Size Admin Area
 */
.admin_body {
	margin: 0;
	padding: 0;
	height: 100%;
	box-sizing: border-box;

	body {
		margin: 0;
		padding: 0;
		height: 100%;
		box-sizing: border-box;
	}

	#gp_admin_html {
		position: relative;
		text-transform: none;
		box-sizing: border-box;
	}

	#simplepanel {
		position: absolute;
		width: $simplepanel_width;
		top: 0;
		left: 0;
		bottom: 0;

		> div {
			border-radius: 0;
			border: 0 none;
			height: 100%;
			width: $simplepanel_width;
			margin: 0;
			@include box-shadow( none );

			&:after {
				content: '';
				position: fixed;
				width: $simplepanel_width;
				top: 0;
				left: 0;
				bottom: 0;
				border: 1px solid #000;
				background: $gp_panel_bg;
				@include box-shadow( 0 0 3px rgba(0, 0, 0, 0.6) );
				z-index: -1;
			}
		}

		.toggle_panel {
			display: none;
		}
	}
}


/**
 * ckeditor & autocomplete conflict
 */
.cke_dialog_ui_input_text .ui-helper-hidden-accessible {
	display: none;
}
#admincontent_inner .cke_reset * {
	@include box-sizing( content-box );
}


/**
 * New section options
 */

#new_section_links .collapsible {
	background: #fff;
	h4 {
		font-size: inherit;
		a {
			background: #fff;
			border: none !important;
			border-radius: 0;
			&:before {
				color: inherit !important;
				width: 1em;
				margin-right: 0.25em;
			}
		}
	}
	.collapsearea {
		padding: 2px;
	}
}

#new_section_links .new_section_link {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	max-width: 100px;
	width: 50%;
	position: relative;
	overflow: hidden;
	display: inline-block;
	vertical-align: top;
	padding: 2px;
}

#new_section_links input {
	position: absolute;
	left: -30px;
	top: 0px;
}

#new_section_links .new_section_link label,
#new_section_links .new_section_link a {
	display: block;
	border: 1px solid #ddd;
	border-radius: 3px;
	padding: 0;
	background: #fff;
	margin: 0;
	color: #666 !important;
	box-sizing: border-box;
	text-align: center;
	height: 52px;
	overflow: hidden;
	outline: none;
	position: relative;
	cursor: pointer;
}

#new_section_links .new_section_link a:hover,
#new_section_links .new_section_link input:checked + label {
	border-color: #999;
}

#new_section_links .new_section_link a:hover:after,
#new_section_links .new_section_link input:checked + label:after {
	position: absolute;
	top: 1px;
	left: 1px;
	right: 1px;
	bottom: 1px;
	z-index: 1;
	background: rgba(0, 0, 0, 0.1);
	content: ' ';
}

#new_section_links .new_section_link span {
	font-size: 12px;
	padding: 4px;
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	display: inline-block;
	text-shadow: 0 1px 1px #fff;
}

#new_section_links .new_section_link img {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}


/**
 * New Page / Copy Page
 */
#gp_admin_html .new_page_table .gp_scrolllist > div {
	height: 164px;
}

#gp_admin_html .new_page_table #new_section_links {
	max-height: 164px;
	overflow-y:	auto;
}

#gp_admin_html .new_page_table .selectable_row.selected_row {
	td {
		background-color: #f2f2f2;
	}
}



/**
 * Scroll list
 */
#gp_admin_html .gp_scrolllist {
	transform: translateZ(1px);
	padding-left: 0;
	padding-right: 0;
	width: auto;
	display: block;
	overflow: hidden;
}

#gp_admin_html .gp_scrolllist > div {
	height: 300px;
	overflow: auto;
	overflow-x: hidden;
	margin-top: 24px;
}

.gp_scrolllist > div > input.gpsearch {
	box-sizing: border-box !important;
	width: 100% !important;
	display: block;
	padding: 5px 10px;
	border: 0 none;
	border-bottom: 1px solid #ccc;
	margin-bottom: 3px;
	position: fixed;
	top: 0;
}

.gp_scrolllist label,
.gp_scrolllist span {
	display: block;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	margin: 0;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.gp_scrolllist label input {
	position: absolute;
	left: -20px;
	z-index: -1;
}

.gp_scrolllist label > span {
	border: 1px solid #fff;
	border-radius: 4px;
	padding: 3px 5px;
	color: #666;
	margin: 3px 6px;
}

.gp_scrolllist label.filtered > span {
	display: none;
}

.gp_scrolllist input:checked + span {
	display: block !important;
	border-color: #ddd;
	background-color: #eee;
}

.gp_scrolllist label span.slug {
	color: #aaa;
	font-size: 11px !important;
}

/**
 * Manage Classes
 */
 #gp_admin_html table.manage_classes_table {
	td.manage_class_name {
		width: 50%;
		input {
			width: calc(100% - 30px);
		}
	}
	td.manage_class_desc {
		input {
			width: calc(100% - 45px);
		}
	}
}


/**
 * Extra Visibility
 */
table.tp-tablesorter {
	.tablesorter-header-inner {
		width: 90%;
	}

	th.tablesorter-header:before {
		float: right;
		font-family: FontAwesome;
		color: #aaa;
		content: '\f0dc';
	}

	th.tablesorter-headerDesc:before {
		content: '\f0de';
		color: #333;
	}

	th.tablesorter-headerAsc:before {
		content: '\f0dd';
		color: #333;
	}
}

/**
 * Keyboard keys
 */
#gp_admin_html kbd.keyboard-key {
	display: inline-block;
	background: #f7f7f7;
	background-image: linear-gradient(rgba(255, 255, 255, 0.4), rgba(127, 127, 127, 0.2));
	border-style: solid;
	border-width: 1px 1px 2px 1px;
	border-color: #bbb;
	border-radius: 2px;
	font-family: inherit;
	padding: 3px 6px;
	text-shadow: 0 1px rgba(255, 255, 255, 0.5);
	white-space: nowrap;
}

/**
 * Fontawesome
 */
#gp_admin_html .fa {
	font-family: FontAwesome;
	font-size: 14px;
}

/**
 * Layout Editor/Codemirror
 */
.CodeMirror {
	font-family: $font_family_monospace !important;
}


/**
 * Hide Admin UI overrides
 * keep this part at the very end of the stylesheet
 * for precedence
 */
html.override_admin_style {
	// page offset when editor is open
	margin-left: 0 !important;
	margin-top: 0 !important;
	width: auto !important;

	// all Admin UI elements
	#gp_admin_html,
	.messages.gp-fixed-adjust {
		display: none;
	}

	// fixed navbars - top bar compensation
	.gp-fixed-adjust {
		margin-top: 0 !important;
	}

	body.gpAdmin .navbar-fixed-top {
	top: 0;
	}

	// Theme Cajon Navbar
	.navbar-theme-cajon.navbar-fixed-side-left {
		left: 0 !important;
	}
}

// The Hide UI icon
#admincontent_panel .admin-link-hide-ui {
	padding: 8px 10px;
	> .fa {
		margin: 0;
	}
	> img {
		display: inline-block;
		height: 14px;
		width: auto;
	}
}

// The Show UI icon
div.show-admin-ui {
	display: none;
}
html.override_admin_style div.show-admin-ui {
	display: block;
	z-index: 12000;
	cursor: pointer;
	position: fixed;
	left: 0;
	top: 0;
	padding: 8px;
	font-size: 13px;
	line-height: 13px;
	-webkit-animation: 2s ease 1 admin-ui-hide;
	animation: 2s ease 1 admin-ui-hide;

	&:hover {
		background: rgba(60, 60, 60, 0.5);
	}

	> i.fa {
		color: rgba(221, 221, 221, 0.8);
		-webkit-animation: 2s infinite indicator-pulse;
		animation: 2s infinite indicator-pulse;
	}

	> img {
		display: inline-block;
		height: 14px;
		width: auto;
	}
}

@media print {
	html.override_admin_style div.show-admin-ui {
		display: none;
	}
}

/**
 * Animations
 */

// continously pulsate the show admin ui icon
@-webkit-keyframes indicator-pulse {
	0%		{ color: rgba(221, 221, 221, 0.85); }
	50%		{ color: rgba(60,60,60,0.85); }
	100%	{ color: rgba(221,221,221,0.85); }
}
@keyframes indicator-pulse {
	0%		{ color: rgba(221, 221, 221, 0.85); }
	50%		{ color: rgba(60,60,60,0.85); }
	100%	{ color: rgba(221,221,221,0.85); }
}

// initial slide + scale animation for the show admin ui icon
@-webkit-keyframes admin-ui-hide {
	0%, 50% {
		left: 50vw;
		top: 50vh;
		background: rgba(60, 60, 60, 0.5);
		border-radius: 5px;
		-webkit-transform: translate(-50%, -50%) scale(4);
		transform: translate(-50%, -50%) scale(4);
	}
	100% {
		left: 0;
		top: 0;
		background: rgba(60, 60, 60, 0);
		border-radius: 0;
		-webkit-transform: translate(0, 0) scale(1);
		transform: translate(0, 0) scale(1);
	}
}
@keyframes admin-ui-hide {
	0%, 50% {
		left: 50vw;
		top: 50vh;
		background: rgba(60, 60, 60, 0.5);
		border-radius: 5px;
		-webkit-transform: translate(-50%, -50%) scale(4);
		transform: translate(-50%, -50%) scale(4);
	}
	100% {
		left: 0;
		top: 0;
		background: rgba(60, 60, 60, 0);
		border-radius: 0;
		-webkit-transform: translate(0, 0) scale(1);
		transform: translate(0, 0) scale(1);
	}
}