#feature-wrapper { background-image: url(/connect/apps/images/feature-graphic.jpg); text-align:center; min-height: 350px; }
@media only screen and (max-width: 735px) { #feature-wrapper {min-height: 300px;}}

/* Category List */
.cl-tag-selector div { margin-bottom: 10px; color: #b0b0b0; text-transform:uppercase; font-size: 12px;}
.cl-type, .cl-tag { margin-bottom: 8px; display: block; color: #858585; cursor:pointer; }
.cl-tag:hover { color: #333333; }
.cl-tag.selected { color: #208a3d; font-weight: 400;}
.cl-category-dropdown {
	border: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
	appearance: none;
	background: url(/site/images/forms/dropdown_arrow.png) right 12px top 12px no-repeat;
	background-size: 15px 9px;
	height:36px;
	width: 100%;
	padding: 4px 8px;
	border-bottom: 1px solid #cdcdcd;
	font-size: 16px;
	display: none;
	border-radius: 0px;
}

/* Connector Tiles */
@media only screen and (min-width:1500px){#connectors .section-width {width:1300px;}}
#connector-list-container {flex-wrap:wrap; justify-content: space-between;}
#connector-list-container::after {content: ""; width: calc(33% - 4px);}
.connector {width: calc(33% - 4px); margin-bottom: 8px; cursor: pointer; background-color: #ffffff; padding: 24px; position: relative;}
/*.connector::after {content: "\f30f"; color: #208a3d; position:absolute; font-family: "SF Pro Icons"; top:24px; right: 24px; font-size:20px; }*/
.connector .column-content {display:flex; flex-direction:column; height: 100%;}
.connector .connector-info {display: flex; flex: 1 1 auto; flex-direction: column; justify-content: space-between;}
.connector .connector-title {margin-bottom: 16px;}
.connector img {width:64px; height:64px; margin-bottom: 12px; border-radius:4px;}
.connector .connector-description { margin-bottom:20px;}
@media only screen and (max-width:1068px){.connector, #connector-list-container::after{width:calc(50% - 4px)}}
@media only screen and (max-width:735px){.connector{width:100%; margin: 0px 0px 16px 0px;} #connector-list-container::after {display: none;}}
[role="button"]:hover,[role="button"]:focus,[role="button"]:active{outline:1px solid #0D8F3C}
:focus{outline:1px solid #0D8F3C}

/* Overlay */
.connector-overlay { cursor: pointer; position: fixed; width: 100%; height: 100%; top: 0; left: 0; -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); background-color: rgba(50.2, 50.2, 50.2, 0.5); z-index: 10; overflow-y: auto;}
.connector-wrapper { padding: 40px; position: relative; width: 45%; height: auto; background-color: #fff; border: #ededed solid 2px; margin: 40px auto; cursor:default; }
.connector-overlay .cc-icon-info { display:flex; margin-bottom: 40px; }
.connector-overlay .cc-icon, .connector-overlay .cc-icon img { width:100px; height:100px; border-radius:4px; }
.connector-overlay .cc-name-description { display:inline-block; padding-left: 40px; }
.connector-overlay .cc-name { font-size: 20px; font-weight: 500; margin-bottom: 16px; }
.connector-overlay .connector-overlay-close::after { cursor: pointer; content: "\f30e"; position:absolute; font-family: "SF Pro Icons"; top:24px; right: 24px; font-size:20px; color: #858585;}
.connector-overlay .cc-action-triggers .column-2:first-child { padding-right: 16px; }
.connector-overlay .cc-action-triggers .column-2:last-child { padding-left: 16px; }
.connector-overlay .cc-trigger-name, .connector-overlay .cc-action-name { margin-bottom: 16px; }

.connector .connector-categories, .connector-overlay .cc-categories-combined { color: #b0b0b0; text-transform:uppercase; margin-top: auto; margin-bottom: 0px; }
.connector-actions-triggers, .connector-triggers-list, .connector .connector-category, .connector-overlay .cc-categories { display:none; }

ul.bulleted>li.na {margin-left: 0px; color: #999999; font-style:italic; }
ul.bulleted>li.na:before {margin-left:0px; width:0px; content:"";}


/* X-LARGE SCREENS (CASCADE TO LOWER SCREEN) */
@media only screen and (min-width: 1442px) {
	
}
 
/* LARGE SCREENS (SPECIFIC) */
@media only screen and (min-width: 1069px) and (max-width:1441px) {
	
}
 
/* MEDIUM SCREENS (CASCADE TO LOWER SCREENS) */
@media only screen and (max-width: 1068px) {
	.connector-wrapper { width: 75%; }
	
}
 
/* MEDIUM SCREENS (SPECIFIC) */
@media only screen and (min-width: 736px) and (max-width:1068px) {
 
}
 
/* SMALL SCREENS */
@media only screen and (max-width: 735px) {
	.fh2 h2 { font-size: 40px; line-height: 44px; }
	
	.connector-list-wrapper { margin-bottom: 24px; }
	.cl-tag-selector a { display:none; }
	
	.cl-category-dropdown { display: block; margin-bottom: 24px; }
	.connector .column-content {flex-direction: row;}
	.connector .connector-info { padding-left: 16px; }
	
	.connector-overlay .connector-wrapper { width: 90%;}
	.connector-overlay .cc-action-triggers .column-2:last-child { padding: 0px; }
	.connector-overlay .cc-icon-info { flex-direction: column; }
	.connector-overlay .cc-icon { margin-bottom: 16px; }
	.connector-overlay .cc-name-description {padding-left:0px;}
	.connector-overlay .cc-name { margin-bottom:12px; }
	.connector-overlay .cc-action-triggers .column-2:first-child { margin-bottom: 16px; }
}
 
/* EXTRA SMALL SCREENS < 400px */
@media only screen and (max-width: 400px) {
 
}

/* RETINA */
@media (-webkit-min-device-pixel-ratio: 2), not all, (min-resolution: 192dpi) {
	#feature-wrapper { background-image: url(/connect/apps/images/feature-graphic_2x.jpg);}
}