/* General */
	.btn {
		padding: 6px 19px;
	}
	.btn.active {
		box-shadow: none;
	}
	.btn-primary,
	.btn-secondary,
	.btn-danger,
	.btn-success,
	.btn-gray,
	.mass-frequency-div	{
		font-weight: 600;
		border-radius: 4px;
		border: 0;
	}
	button:focus,
	.btn:focus,
	.btn:active:focus,
	.btn.active:focus,
	.btn.focus,
	.btn:active.focus,
	.btn.active.focus {
		outline: none;
	}
	.btn-primary:disabled,
	.btn-secondary:disabled,
	.btn-primary:disabled:hover,
	.btn-secondary:disabled:hover,
	.btn-secondary[disabled] {
		background-color: var(--background-gray);
		color: var(--gray);
		border: solid 1px var(--gray);
	}

/* Primary Buttons */
	.btn-primary,
	.btn-primary:visited,
	.btn-primary.active {
		color: #FFF;
		background-color: var(--dark-purple);
		border: 1px solid var(--dark-purple);
	}
	.btn-primary:hover,
	.btn-primary:active,
	.btn-primary:active:hover,
	.btn-primary:focus,
	.btn-primary.active:hover,
	.btn-primary.active:active,
	.btn-primary.active:focus,
	.open>.dropdown-toggle.btn-primary:hover,
	.open>.dropdown-toggle.btn-primary:active,
	.open>.dropdown-toggle.btn-primary:focus {
		color: #FFF;
		background-color: var(--purple);
		border: 1px solid var(--purple);
	}
	.btn-primary svg {
		height: 14px;
	}
	.btn-primary svg .a {
		fill: #FFF;
	}

/* Secondary Buttons */
	.btn-secondary,
	.btn-secondary:visited  {
		color: var(--text-gray);
		border: 1px solid var(--gray);
		background-color: #FFF;
	}
	.btn-secondary:hover,
	.btn-secondary:active,
	.btn-secondary:focus,
	.layout-control-left:hover,
	.layout-control-left:focus,
	.layout-control-right:hover,
	.layout-control-right:focus { 
		border: 1px solid var(--purple);
		background-color: var(--light-purple);
	}
	.btn-secondary svg,
	.btn-secondary img.svg-show,
	.btn-secondary img.svg-hide {
		height: 14px;
	}
	.btn-secondary svg .a {
		fill: var(--purple);
	}

/* Square Gray Buttons (NOT disabled) */
	.btn-gray {
		padding: 9px;
		background-color: #EFF0F3;
		border: 1px solid var(--gray);
		color: var(--purple);
		line-height: 1;
	}
	.btn-gray svg {
		height: 22px;
		width: 22px;
	}
	.btn-gray svg .a {
		fill: var(--purple);
	}
	.btn-gray svg .b {
		fill: #EFF0F3;
	}

/* Subnav Gray Buttons (not disabled) */
	.btn-subnav {
		outline: none;
		color: var(--text-gray);
		background-color: transparent;	
		font-weight: 400;
	}
	.btn-subnav.active,
	.btn-subnav:hover,
	.nav-tabs>li>a.btn-subnav:hover {
		border: 1px solid var(--gray);
		color: var(--text-gray);
		background-color: transparent;	
		font-weight: 600;	
	}

/* Purple icon buttons */
	.btn-icon {
		padding: 5px;
		border-radius: 4px;
		height: 30px;
		background-color: unset;
	}
	.btn-icon svg,
	.subnav-menu .btn-icon svg {
		height: 20px;
		width: 20px;
		margin-right: 5px;
	}
	.btn-icon:hover {
		background-color: var(--light-gray);
	}
	.btn-icon svg .a {
		fill: var(--purple);
	}
	.btn-icon svg .b {
		fill: var(--subhead-gray);
	}
	.btn-icon h2 {
		margin: 0;
		display: inline;
		vertical-align: super;
		color: var(--text-gray);
	}
	/* White ellipsis in purple circle. Used in subnavs + top of detail pages.*/
	.filled-ellipsis {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background-color: var(--purple);
		display: inline-block;
	}
	button:has(>.filled-ellipsis+*) .filled-ellipsis {
		margin-right: 5px;
	}
	.btn-icon .filled-ellipsis svg {
		width: 16px;
		margin-right: 0;	
	}
	.filled-ellipsis svg .a {
		fill: #FFF;
	}

/* Circle Icon Buttons */
/* Edit/Cancel icons that are purple, and have a circular gray background on hover */
	.btn-circle-icon {
		padding: 5px;
		border-radius: 50%;
		height: 25px;
		background-color: unset;
	}
	.btn-circle-icon svg,
	.btn-circle-icon .svg {
		height: 14px;
		width: 14px;
		vertical-align: top;
	}
	.btn-circle-icon svg.svg-edit {
		height: 15px;
		width: 15px;
		margin-top: -1px;
	}
	.btn-circle-icon:hover {
		background-color: var(--light-gray);
	}
	.btn-circle-icon svg .a,
	.btn-circle-icon:hover svg .a {
		fill: var(--purple);
	}

/* Secondary icon buttons */
/* So far, only being used for Add Interaction button on contact list */
	.btn-icon-secondary {
		padding: 5px;
		border-radius: 4px;
		height: 28px;
		background-color: unset;
		border: 1px solid var(--gray);
	}
	.btn-icon-secondary svg {
		height: 16px;
		width: 16px;
		fill: var(--purple);
	}
	.btn-icon-secondary:hover {
		background-color: var(--light-purple);
		border: 1px solid var(--purple);
	}

/* Danger Buttons */
	.btn-danger,
	.btn-danger:visited {
		color: #FFF;
	}

/* Tags */
	.btn-tag,
	.add-tag-link {
		background-color: #FFF;
		border: 1px solid var(--light-gray);
		padding: 0 8px;
		border-radius: 12px;
		line-height: 19px;
	}
	.add-tag-link {
		padding: 3px 12px;
	}
	.btn-tag:hover,
	.btn-tag:active,
	.btn-tag:focus {
		background-color: var(--light-purple);
		border: solid 1px var(--purple);
		box-shadow: none;
		outline: none;
	}
	.btn-tag:hover:disabled {
		border: 1px solid var(--gray);
	}
	.btn-tag.select {
		border: 1px solid var(--gray);
	}

/* Only Being Used in _filter_list.html */
	.btn-label-right {
		position: relative;
		left: 5px;
		display: inline-block;
		padding: 7px 6px 5px;
		background: rgba(0,0,0,0.15);
		border-radius: 3px 0 0 3px;
	}
	.btn-label-right:hover {
		background: rgba(0,0,0,0.30);
	}

/* Link-esque Buttons */
	.btn-link {
		padding: 6px 12px;		
		background-color: transparent;
		border: 0;
		outline: 0;		
		color: var(--dark-purple);
		font-weight: 400;
		text-decoration: none;
		line-height: 14px;
	}
	.btn-link svg {
		fill: var(--dark-purple);
		vertical-align: bottom;
		height: 14px;
	}
	.btn-link svg.svg-exclamation-circle {
		height: 20px;
		vertical-align: text-top;
		margin-right: 7px;
	}
	.btn-link:hover,
	.btn-link:focus,
	.btn-link.selected,
	.btn-link:active,
	.btn-link:active:focus {
		color: var(--dark-purple);
		outline: none;
	}
	.dropdown-menu>li>a.btn-link {
		background-color: unset;
	}

	/* Back Buttons */
	.btn-link.back-btn {
		padding: 0 0 20px 0;
	}
	.btn-link.back-btn .svg-caret-left {
		margin-right: 6px;
		vertical-align: text-bottom;	
		width: 14px;
		height: 18px;
	}

/* Tab Buttons - Used on detail pages, in conjunction with btn-link  */
	.active .btn-tab,
	.btn-tab:hover {
		border-bottom: 1px solid var(--light-gray);
	}
	.btn-tab {
		border-bottom: 1px solid transparent;
		padding: 10px 0 0;
	}
	
/* Transparent Buttons --- purple link text */
	.btn-transparent {
		color: var(--dark-purple);
		background-color: transparent;
		padding: 0;
		border: 0;
		outline: 0;
	}
	.btn-transparent:hover,
	.btn-transparent:active,
	.btn-transparent:focus {
		color: var(--dark-purple);
		text-decoration: underline;
	}

/* Carets (in dropdowns) */
	.btn>.svg-caret-down {
		margin-left: 6px;
		vertical-align: middle;
	}