:root {
	--uatl-font-family: 'Figtree', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	--uatl-border-radius: 10px;
	--uatl-box-padding: 20px;
	--uatl-line-height: 1.4;
	--uatl-font-color: #3c434a;
	--uatl-border-color-gray: #e4e4e4;
	--uatl-color-blue: #0790e8;
	--uatl-font-family--header: "Figtree", -apple-system, system-ui, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
	--uatl-font-color-secondary: #676b6f;
	--uatl-font-size--body-large: 18px;
	--uatl-line-height--body-large: 28px;
	--uatl-box-shadow-small: 0 2px 5px 0 rgba(0,0,0,.1);
	--uatl-transition: all 150ms ease-in-out;
	--uatl-field-border-color: #cdcdcd;
}


/**
 * Page Layout
 */
 #automator-template-library__content-wrapper {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin-top: 1em;
}

#automator-template-library__description {
	width:100%;
	text-align: center;
	display: block;
}

.automator-template-library__description-content {
	margin: 2em auto;
}

.automator-template-library__description-content,
.automator-template-library__description-content p {
	font-size: 21px;
	font-family: var(--uatl-font-family);
	line-height: 1.6;
}

.automator-template-library__sidebar,
.automator-template-library__content {
	width: 100%;
	box-sizing: border-box;
	padding: 0 1em 1em;
}

.automator-template-library__sidebar {
	margin-bottom: 1em;
}

.automator-template-library__footer{
	margin-top: auto;
	text-align: center;
}

ul.automator-template-library__category-menu,
ul.automator-template-library__integrations-menu{
	display:none;
}

.automator-template-library__menu-mobile{
	display:block;
}

.automator-template-library__menu-mobile-select{
	margin-top: 1em;
}

/**
 * Global font on sidebar and grid content
 */
.automator-template-library__sidebar *,
.automator-template-library__grid-content * {
	font-family: var(--uatl-font-family);
}

/**
 * Select2 styles
 */
#automator-template-library__menu-wrapper .select2-container--default .select2-selection--single{
	border: 1px solid var(--uatl-field-border-color);
	border-radius: var(--uatl-border-radius);
	box-shadow: var(--uatl-box-shadow-small);
}

#automator-template-library__menu-wrapper .select2-container--default {
	color: var(--uatl-font-color);
	font-size: 0.8rem!important;
}

#automator-template-library__menu-wrapper .select2-container--default.select2-container--open.select2-container--below .select2-selection--single{
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

/**
 * Integration Select2 Icon Option styles 
 */
.automator-template-library-select2-icon-option {
	display: flex;
	align-items: center;
}

.automator-template-library-select2-icon{
	background: #fff;
	padding: 2px;
	margin: 0 2px 0 0;
	border: 1px solid #e3e3e3;
	border-radius: 50%;
}

.automator-template-library-select2-icon img{
	width: 16px;
	height: auto;
	object-position: center;
	object-fit: contain;
	display: block;
}

.automator-template-library-select2-text{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/**
 * Mobile Inline Select Filters 
 */
@media (min-width: 601px) and (max-width: 960px) {
	.automator-template-library__category-menu-mobile a.automator-template-library__menu_link,
	.automator-template-library__menu-mobile,
	.automator-template-library__menu-mobile-select{
		display:inline-block;
	}

	.automator-template-library__menu-mobile-select{
		width:33vw;
		margin-left:1em;
	}
}

@media (min-width: 961px) {

	.automator-template-library__description-content {
		max-width: 75%;
	}
	
	#automator-template-library__content-wrapper {
		flex-direction: row;
		height: calc(100vh - 32px);
		top: 60px;
		overflow: hidden;
	}
	
	.automator-template-library__sidebar {
		flex: 0 0 250px;
		width: 250px;
		border-bottom: none;
		border-right: 1px solid var(--uatl-border-color-gray);
		margin-bottom: 0;
		overflow-y: auto;
		position:relative;
	}

	ul.automator-template-library__category-menu,
	ul.automator-template-library__integrations-menu{
		display:block;
	}

	.automator-template-library__menu-mobile{
		display:none;
	}

	.automator-template-library__sidebar .automator-template-library__search-wrapper {
		position:sticky;
		top:0;
		z-index: 10;
		background-color: #fff;
	}
	
	.automator-template-library__content {
		display: flex;
		flex-direction: column;
		flex: 1;
		width:auto;
		overflow-y: auto;
	}
}

/**
 * Grid layout for the template library
 *
 */
#automator-template-library__templates {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 1em;
}

.automator-template-library__template-grid-item{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
}

#automator-grid-results-title{
	grid-column: 1 / -1;
	padding:0;
	margin: 0;
	display: flex;
	align-items: center;
}

#automator-grid-results-title h2{
	margin: 0;
	font-size: 24px;
	font-family: var(--uatl-font-family);
	color: var(--uatl-font-color);
	font-weight: 500;
}

#automator-grid-results-title .automator-template-library__template__integration_icon {
	display:inline-block;
	margin-right: 4px;
}

#automator-grid-results-title img {
	width: auto !important;
	height: 24px !important;
	object-position: center;
	object-fit: contain;
	display: block;
}

/**
 * Grid Template Item
 */
.automator-template-library__template {
	overflow: hidden;
	position: relative;
	flex: 1;
	flex-grow: 1;

	background: #fff;
	padding: var(--uap-box-padding, 20px);
	box-shadow: var(--uap-box-shadow, 0 4px 16px 0 rgba(0, 0, 0, .1));
	border-radius: var(--uap-border-radius, 10px);
	display: flex;
	flex-direction: column;
	gap: 30px;
	height: 100%;
	cursor: pointer;
	transition: box-shadow 150ms ease-in-out;
}

.automator-template-library__template:hover {
	box-shadow: var(--uap-box-shadow-big, 0 4px 16px 0 rgba(0, 0, 0, .2));
}

.automator-template-library__view-details {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	cursor: pointer;
}

.automator-template-library__template__header {
	font-size: var(--uap-font-size--body-large, 18px);
	line-height: var(--uap-line-height--body-large, 28px);
	font-weight: 600;

	z-index: 1;
}

.automator-template-library__template__title {
	font-family: var(--uatl-font-family--header);
	font-size: var(--uatl-font-size--body-large);
	line-height: var(--uatl-line-height--body-large);
	font-weight: 600;
	color: var(--uatl-font-color);
	margin: 0;
}

.automator-template-library__template__integrations{
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.automator-template-library__template__integrations__requires{
	font-size: var(--uap-font-size--body-small, 15px);
	line-height: var(--uap-line-height--body-small, 24px);
	color: var(--uap-font-color-secondary, #676B76);
}

.automator-template-library__template__integrations-items {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.automator-template-library__template__integration{
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.automator-template-library__template__integration a{
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: var(--uap-font-size--body-small, 15px);
	line-height: var(--uap-line-height--body-small, 24px);
}

.automator-template-library__template__integration a img{
	width: 32px !important;
	height: 32px !important;
	padding: 5px;
	border: 1px solid #e3e3e3;
	border-radius: 50%;
	object-position: center;
	object-fit: contain;
	display: block;
}

.automator-template-library__template__integration a span{
	color: var(--uatl-font-color);
}

.automator-template-library__search-wrapper{
	position:relative;
}

 #automator-template-library__search{
	background-color: hsl(0, 0%, 100%);
	width:100%;
	padding: 4px 4px 4px 24px;
	margin-bottom: 10px;
	line-height: 2;
	outline: none !important;
	color: var(--uatl-font-color) !important;
	font-family: var(--uatl-font-family) !important;    
	border: 1px solid var(--uatl-field-border-color) !important;
	border-radius: var(--uatl-border-radius) !important;
	box-shadow: var(--uatl-box-shadow-small) !important;
	transition: var(--uatl-transition);
 }

 #automator-template-library__search::placeholder{
	color: var(--uatl-font-color-secondary) !important;
}

#automator-template-library__search::focus{
	border-color: var(--uatl-color-blue) !important;
	box-shadow: 0 0 0 2px rgba(7, 144, 232, 0.2) !important;
}

.automator-template-library__search-wrapper button {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background: none;
	border: none;
	cursor: pointer;
	position: absolute;
	padding: 0;
	outline: none !important;
	top: 10px;
	left: 6px;
	color: var(--uatl-font-color) !important;
}

.automator-template-library__search-wrapper button svg {
	width: 16px;
	height: 16px;
}

/**
 * Utilities - Screen reader only
 */
.automator-template-library__template .screen-reader-only {
	position: absolute;
	clip: rect(1px, 1px, 1px, 1px);
	padding: 0;
	border: 0;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

/**
 * Menu
 */
ul.automator-template-library__desktop-menu {
	list-style: none;
	padding: 0;
	margin: 0;
	position: relative;
	width: 100%;
	box-sizing: border-box;
	font-size: 0.9rem;
}

.automator-template-library__menu_heading{
	font-weight: bold;
	text-decoration: underline;
	font-size: medium;
	margin-top: 7px;
	margin-bottom: 7px;
}

ul.automator-template-library__desktop-menu li {
	position: relative;
	padding: 14px 0 0;
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 1px;
	display: block;
	align-items: center;
}

ul.automator-template-library__desktop-menu li a,
.automator-template-library__category-menu-mobile a.automator-template-library__menu_link {
	display: inline-block;
	padding: 0;
	color: var(--uatl-font-color);
	font-size:14px;
	text-decoration: none;
	outline: none;
	font-weight: 500;
	word-wrap: break-word;
}

.automator-template-library__category-menu-mobile a.automator-template-library__menu_link:hover,
.automator-template-library__category-menu-mobile a.automator-template-library__menu_link:focus,
.automator-template-library__category-menu-mobile a.automator-template-library__menu_link.automator-active,
ul.automator-template-library__desktop-menu li a:hover,
ul.automator-template-library__desktop-menu li a:focus,
ul.automator-template-library__desktop-menu li.automator-active > a {
	color: var(--uatl-color-blue);
	text-decoration: underline;
	outline: none;
	box-shadow: none;
}

.automator-template-library__template_count {
	position:absolute;
	top:15px;
	right:0;
	white-space:nowrap;
	color: var(--uatl-font-color-secondary);
}

.automator-template-library__menu_icon {
	width: 14px;
    height: 14px;
    display: inline-block;
}

.automator-template-library__menu_icon img{
	width: 100%;
	height: 100%;
	object-position: center;
    object-fit: contain;
}