/* ============================================
   REMOJI PLUGIN - FRONTEND STYLES
   Clean, Modern & Responsive CSS
   ============================================ */

*[remoji-accesskey]:before {
	content: '['attr(remoji-accesskey) '] ';
}

/* Emoji reaction bar - main container */
.remoji_bar {
	margin-bottom: 12px;
	margin-right: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}

/* Error notification bar */
.remoji_error_bar {
	color: #fff;
	background: linear-gradient(135deg, #ff6b6b 0%, #ff5252 100%);
	font-size: 13px;
	display: none;
	margin-bottom: 12px;
	padding: 10px 14px;
	border-radius: 8px;
	width: 100%;
	font-weight: 500;
	box-shadow: 0 2px 8px rgba(255,107,107,0.3);
}

/* Individual reaction button/container */
.remoji_container {
	font-size: 15px;
	padding: 6px 11px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
	border: 1px solid #e0e0e0;
	border-radius: 20px;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
	box-shadow: 0 2px 4px rgba(0,0,0,0.08);
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	touch-action: manipulation;
}

.remoji_container:active {
	transform: scale(0.95);
}

.remoji_container:hover {
	background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
	border-color: #d0d0d0;
	box-shadow: 0 4px 12px rgba(0,0,0,0.12);
	transform: translateY(-2px);
}

.remoji_container img {
	width: 20px;
	height: 20px;
	object-fit: contain;
	display: block;
}

.remoji_count {
	color: #525252;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	min-width: 16px;
}

/* Add emoji reaction button */
.remoji_add_container {
	cursor: pointer;
	padding: 6px 8px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
	border: 1px solid #e0e0e0;
	border-radius: 20px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.08);
	transition: all 0.3s ease-out;
	height: 32px;
	width: 32px;
	touch-action: manipulation;
	-webkit-user-select: none;
	user-select: none;
}

.remoji_add_container:hover {
	background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
	border-color: #d0d0d0;
	box-shadow: 0 4px 12px rgba(0,0,0,0.12);
	transform: translateY(-2px);
}

.remoji_add_icon {
	width: 20px;
	height: 20px;
	display: flex;
	background: url('../img/add-reaction.svg') center center no-repeat;
	background-size: 18px 18px;
	transition: filter 0.2s ease-out;
}

.remoji_add_container:hover .remoji_add_icon {
	filter: brightness(1.2);
}

/* Emoji picker panel */
#remoji_panel {
	position: absolute;
	display: none;
	flex-direction: column;
	background-color: #ffffff;
	border-radius: 14px;
	box-shadow: 0 10px 40px rgba(0,0,0,0.16);
	border: 1px solid #e0e0e0;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	z-index: 1012;
	overflow: hidden;
	width: 340px;
	max-height: 320px;
	margin-top: 8px;
	font-size: 0.95rem;
	color: #333;
}

#remoji_panel[style*="display: block"] {
	display: flex !important;
	animation: slideUp 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes slideUp {
	from {
		opacity: 0;
		transform: translateY(4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Emoji picker list container */
.remoji_picker_list {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	background: #ffffff;
	padding: 8px;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	justify-content: center;
	gap: 4px;
}

/* Custom scrollbar styling */
.remoji_picker_list::-webkit-scrollbar {
	width: 6px;
}

.remoji_picker_list::-webkit-scrollbar-track {
	background: rgba(0,0,0,0.02);
}

.remoji_picker_list::-webkit-scrollbar-thumb {
	background: rgba(0,0,0,0.15);
	border-radius: 3px;
}

.remoji_picker_list::-webkit-scrollbar-thumb:hover {
	background: rgba(0,0,0,0.25);
}

.remoji_picker_list_scroller {
	outline: none;
	box-sizing: border-box;
	direction: ltr;
	position: relative;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	justify-content: center;
	gap: 4px;
}

.remoji_picker_row {
	height: auto;
	position: relative;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px;
}

/* Individual emoji in picker */
.remoji_picker_item {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: transparent;
	cursor: pointer;
	transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
	border: 1px solid transparent;
	font-weight: 400;
	text-decoration: none;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
}

.remoji_picker_item:active {
	transform: scale(0.92);
}

.remoji_picker_item:hover {
	transform: scale(1.15);
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(242,199,68,0.2);
}

.remoji_picker_item img {
	width: 28px;
	height: 28px;
	object-fit: contain;
	display: block;
	pointer-events: none;
}

/* Color variety for emoji hover effects */
[data-remoji-color="0"]:hover {
	background: rgba(155,223,88,0.2) !important;
}

[data-remoji-color="1"]:hover {
	background: rgba(149,211,254,0.2) !important;
}

[data-remoji-color="2"]:hover {
	background: rgba(247,233,34,0.15) !important;
}

[data-remoji-color="3"]:hover {
	background: rgba(238,166,252,0.2) !important;
}

[data-remoji-color="4"]:hover {
	background: rgba(255,213,143,0.2) !important;
}

[data-remoji-color="5"]:hover {
	background: rgba(211,209,255,0.2) !important;
}

/* Emoji picker footer */
.remoji_picker_footer {
	background: linear-gradient(to bottom, #ffffff 0%, #f8f9fa 100%);
	border-top: 1px solid #e8e8e8;
	padding: 8px 12px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	min-height: 44px;
	flex-shrink: 0;
}

/* Emoji preview (large display) */
#remoji_preview {
	font-size: 24px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	flex-shrink: 0;
	animation: emojiPulse 0.3s ease-out;
}

@keyframes emojiPulse {
	0% {
		transform: scale(0.7);
		opacity: 0;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

/* Emoji name preview */
#remoji_preview_text {
	font-size: 12px;
	padding: 4px 8px;
	background: rgba(242,199,68,0.1);
	color: #525252;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	font-weight: 600;
	letter-spacing: 0.3px;
	border-radius: 6px;
	flex: 1;
	min-width: 80px;
	max-width: 150px;
	display: flex;
	align-items: center;
}

.remoji_picker_handy {
	display: flex;
	gap: 2px;
	justify-content: flex-end;
	flex-shrink: 0;
}

.remoji_widget_img {
	height: 25px;
	display: inline-block;
	vertical-align: middle;
}

/* ============================================
   MOBILE RESPONSIVE DESIGN
   Optimized for phones & tablets
   ============================================ */

@media (max-width: 767px) {
	/* Hide emoji preview on mobile (not useful for touch) */
	#remoji_preview {
		display: none !important;
	}

	#remoji_preview_text {
		display: none !important;
	}

	/* Center the panel on mobile screen */
	#remoji_panel {
		position: fixed;
		bottom: auto;
		top: 50%;
		left: 50%;
		right: auto;
		width: 85vw;
		max-width: 320px;
		max-height: 60vh;
		margin: 0;
		transform: translate(-50%, -50%);
		border-radius: 16px;
	}

	/* Larger emoji items for touch targets */
	.remoji_picker_item {
		width: 48px;
		height: 48px;
		border-radius: 12px;
	}

	.remoji_picker_item img {
		width: 32px;
		height: 32px;
	}

	.remoji_picker_item:hover {
		transform: scale(1.1);
	}

	.remoji_picker_item:active {
		transform: scale(0.95);
	}

	/* Hide footer on mobile */
	.remoji_picker_footer {
		display: none;
	}

	/* Larger reaction containers for touch */
	.remoji_container {
		padding: 8px 12px;
		font-size: 16px;
	}

	.remoji_container img {
		width: 22px;
		height: 22px;
	}

	.remoji_add_container {
		padding: 8px;
		height: 36px;
		width: 36px;
	}

	.remoji_add_icon {
		width: 22px;
		height: 22px;
		background-size: 20px 20px;
	}
}

/* ============================================
   ADMIN STYLES (Backend only)
   ============================================ */

/* Color utilities */
.remoji-default {
	color: #a7a7a7 !important;
}

.remoji-primary {
	color: #3366CC !important;
}

.remoji-success {
	color: #73b38d !important;
}

.remoji-warning {
	color: #FF8C00 !important;
}

.remoji-danger {
	color: #dc3545 !important;
}

.remoji-bg-default {
	background-color: #a7a7a7 !important;
}

.remoji-bg-primary {
	background-color: #3366CC !important;
}

.remoji-bg-success {
	background-color: #73b38d !important;
}

.remoji-bg-warning {
	background-color: #FF8C00 !important;
}

.remoji-bg-danger {
	background-color: #dc3545 !important;
}

.remoji-bg-text-success {
	background-color: #34b15d;
}

.remoji-right {
	display: inline-block;
	float: right;
}

.remoji-hide {
	display: none;
}

.remoji-relative {
	position: relative;
}

.remoji-row-flex {
	display: inline-flex;
}

.remoji-wrap .field-col {
	display: inline-block;
	margin-right: 20px;
}

.remoji-wrap .field-col-desc {
	min-width: 540px;
	max-width: calc(100% - 640px);
	vertical-align: top;
}

.remoji-margin-bottom20 {
	margin-bottom: 20px;
}

.remoji-wrap {
	margin: 10px 20px 0 2px;
}

.remoji-wrap .nav-tab-active {
	background: #fff;
	border-bottom-color: #fff;
}

.remoji-wrap .nav-tab:focus:not(.nav-tab-active),
.remoji-wrap .nav-tab:hover:not(.nav-tab-active) {
	background-color: #f1f1f1;
	color: #444;
}

.remoji-body {
	background: #fff;
	border: 1px solid #e5e5e5;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .04);
	padding: 1px 20px 20px 20px;
}

.remoji-header+.remoji-body {
	border-top: none;
}

.remoji-body table {
	border-collapse: collapse;
	width: 100%;
}

.remoji-body .remoji-width-auto {
	width: auto;
}

.remoji-description {
	color: #666;
	font-size: 13px;
	margin: 1.5rem 0;
	max-width: 960px;
}

.remoji-desc {
	font-size: 12px;
	font-weight: normal;
	color: #7a919e;
	margin: 10px 0;
	line-height: 1.7;
	max-width: 840px;
}

.remoji-desc+.remoji-desc {
	margin-top: -5px;
}

td>.remoji-desc:first-child {
	margin-top: 0px;
	line-height: 2.24;
}

.remoji-h3 {
	line-height: 18px;
	color: #264d73;
	font-size: 18px;
	font-weight: 600;
	margin: 2px 0;
}

.remoji-div {
	display: inline-block;
	min-width: 100px;
}

.remoji-div .submit {
	margin: 5px;
	padding: 5px;
}

.remoji-h1 {
	display: inline-block;
}

h3 .remoji-learn-more {
	font-size: 12px;
	font-weight: normal;
	color: #7a919e;
	margin-left: 30px;
}

.remoji-wrap code {
	color: #666;
	background-color: #dde9f5;
	border-radius: 3px;
	font-size: 11px;
	font-style: normal;
}

.remoji-wrap ul {
	margin-left: 2em;
}

.remoji-wrap i {
	font-size: 13px;
	line-height: 16px;
}

.remoji-wrap .remoji-desc i {
	font-size: 12px;
}

.remoji-wrap p {
	margin: 1em 0;
}

.remoji-wrap p.submit {
	margin-bottom: 0;
}

.remoji-desc p {
	margin-left: 0;
}

.remoji-title,
.remoji-title-short {
	font-size: 18px;
	border-bottom: 1px solid #cccccc;
	margin: 2.5em 0px 1.5em 0;
	display: table;
	padding-right: 50px;
	padding-left: 3px;
	padding-bottom: 3px;
}

.remoji-title .button {
	margin-left: 1rem;
	margin-bottom: 5px;
	vertical-align: middle;
}

.remoji-title a,
.remoji-title-short a {
	text-decoration: none;
}

.remoji-title-short {
	padding-right: 20px;
}

.remoji-title-section {
	margin: 2em -20px 12px -20px;
	padding: 12px 20px 12px 20px;
	border-bottom: 1px solid #eee;
	font-size: 1.2em;
	display: block;
	border-top: 1px solid #f1f1f1;
}

.remoji-list li:before {
	content: '>';
	color: #cc3d6a;
}

.remoji-wrap a.disabled {
	cursor: not-allowed;
	opacity: 0.5;
	text-decoration: none;
	color: #72777c;
}

.remoji-table {
	font-size: 14px;
}

.remoji-body tbody>tr>th {
	padding-left: 20px;
}

.remoji-body tbody th {
	vertical-align: top;
	text-align: left;
	padding: 18px 10px 20px 0;
	width: 200px;
	font-weight: 600;
}

.remoji-body td {
	padding: 15px 10px;
	line-height: 1.3;
	vertical-align: middle;
}

.remoji-body .widefat td input+p {
	margin-top: .8em;
}

.remoji-body .striped>tbody>:nth-child(even) .notice {
	background-color: #f9f9f9;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .05);
	border: 1px solid #e5e5e5;
}

.remoji-body .striped>tbody>:nth-child(even) .notice:first-child {
	margin-top: 0;
}

.remoji-body .remoji-vary-table {
	margin-top: -5px;
	width: 250px;
	margin-bottom: 20px;
}

.remoji-body .remoji-vary-table td {
	width: 50%;
	padding: 5px 0px;
}

.remoji-table-compact td,
.remoji-table-compact th {
	padding: 0.5rem 0.75rem;
}

.remoji-tick-wrapper {
	margin-left: -5px;
}

.remoji-tick {
	display: inline-block;
	background: #f2f9ff;
	padding: 5px 0 5px 0px;
	border-radius: 3px;
	cursor: pointer;
	margin: 5px 5px 5px 0;
}

.remoji-tick-list .remoji-tick {
	display: block;
	margin-bottom: 3px;
	margin-top: 0;
	background: none;
}

.remoji-tick-list .remoji-tick input[type="checkbox"] {
	margin-left: 0;
}

.remoji-tick-list .remoji-tick label {
	color: inherit;
}

.remoji-tick input[type="checkbox"] {
	height: 18px;
	width: 18px;
	vertical-align: middle;
	margin: 0 10px;
	appearance: none;
	border-radius: 3px;
	cursor: pointer;
}

.remoji-tick input[type="checkbox"]:not(:disabled):hover {
	border-color: #8f53c6;
}

.remoji-tick input[type="checkbox"]:active:not(:disabled) {
	border-color: #8f53c6;
}

.remoji-tick input[type="checkbox"]:focus {
	outline: none;
}

.remoji-tick input[type="checkbox"]:checked {
	border-color: #8f53c6;
	background-color: #8f53c6;
	box-shadow: none;
}

.remoji-tick input[type="checkbox"]:checked:before {
	content: '';
	display: block;
	width: 5px;
	height: 11px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	margin-left: 5px;
	margin-top: -1px;
	cursor: pointer;
}

.remoji-tick label {
	padding: 2px 0px 2px 0;
	font-size: 14px;
	color: #264d73;
}

.remoji-tick label:hover {
	min-width: 115px;
	color: #6699cc;
}

.remoji-wrap .remoji-float-submit {
	position: absolute;
	right: 0;
	top: -5px;
	margin-top: 0;
}

.rtl .remoji-wrap .remoji-float-submit {
	left: 10px;
	right: unset;
}

.remoji-wrap .remoji-float-resetbtn {
	position: absolute;
	right: 0;
	bottom: 20px;
}

.rtl .remoji-wrap .remoji-float-resetbtn {
	left: 10px;
	right: unset;
}

.remoji .remoji-input-large {
	font-size: 20px;
}

.remoji-input-long {
	width: 87%;
}

.remoji-input-short2 {
	width: 150px;
}

.remoji-input-short {
	width: 45px;
}

.remoji-wrap .button-link {
	height: auto;
	line-height: inherit;
	font-size: inherit;
	box-shadow: none;
}

.remoji-wrap .button-link:hover,
.remoji-wrap .button-link:focus {
	box-shadow: none;
	background: none;
}

.remoji .remoji-btn-danger-bg,
.remoji-wrap .remoji-btn-danger-bg,
.remoji-btn-danger-bg {
	background: #dc3545;
	color: #fff;
	border: 1px solid #cc3d6a;
	box-shadow: 0 1px 0 rgba(177, 93, 93, 0.5);
}

.remoji .remoji-btn-danger,
.remoji-wrap .remoji-btn-danger,
.remoji-btn-danger {
	background: #fff;
	color: #cc3d6a;
	border: 1px solid #cc3d6a;
	box-shadow: 0 1px 0 rgba(177, 93, 93, 0.5);
}

.remoji .remoji-btn-danger:hover,
.remoji-wrap .remoji-btn-danger:hover,
.remoji-btn-danger:hover {
	border-color: #ab244e;
	background: #cc3d6a;
	color: #fff;
}

.remoji .remoji-btn-warning,
.remoji-wrap .remoji-btn-warning,
.remoji-btn-warning {
	background: #fff;
	color: #e59544;
	border: 1px solid #e59544;
	box-shadow: 0 1px 0 rgba(249, 166, 82, 0.55);
}

.remoji .remoji-btn-warning:hover,
.remoji-wrap .remoji-btn-warning:hover,
.remoji-btn-warning:hover {
	border-color: #e59544;
	background: #e59544;
	color: #fff;
}

.remoji .remoji-btn-success,
.remoji-wrap .remoji-btn-success,
.remoji-btn-success {
	background: #fff;
	color: #36b0b0;
	border: 1px solid #36b0b0;
	box-shadow: 0 1px 0 rgba(73, 160, 160, 0.55);
}

.remoji .remoji-btn-success:hover,
.remoji-wrap .remoji-btn-success:hover,
.remoji-btn-success:hover {
	border-color: #36b0b0;
	background: #36b0b0;
	color: #fff;
}

.remoji-wrap .button-primary {
	background: #528ac6;
	border-color: #538ac6 #2264ad #2264ad;
	color: #fff;
	box-shadow: 0 1px 0 #2264ad;
	text-shadow: 0 -1px 1px #2264ad, 1px 0 1px #2264ad, 0 1px 1px #2264ad, -1px 0 1px #2264ad;
}

.remoji-wrap .button-primary:focus,
.remoji-wrap .button-primary:hover {
	background: #5891ce;
	border-color: #2264ad;
	color: #fff;
}

.remoji-wrap .button-primary:hover {
	box-shadow: 0 1px 0 #2264ad;
}

.remoji-wrap .button-primary:focus {
	background: #5891ce;
	border-color: #2264ad;
	color: #fff;
	box-shadow: 0 1px 0 #0073aa, 0 0 2px 1px #33b3db;
}

.remoji .remoji-btn-primary,
.remoji-wrap .remoji-btn-primary,
.remoji-btn-primary {
	color: #538ac6;
	border: 1px solid #538ac6;
	box-shadow: 0 0 0 1px rgba(83, 138, 198, 0.25);
}

.remoji .remoji-btn-primary:hover,
.remoji-wrap .remoji-btn-primary:hover,
.remoji-btn-primary:hover {
	background: #538ac6;
	border-color: #538ac6;
	color: #fff;
}

.remoji-wrap .button:not(.remoji-btn-large) .dashicons {
	position: relative;
	top: 0.125em;
}

.remoji-wrap .button:not(:first-child) {
	margin-left: 5px;
}

.remoji-wrap .button+.button {
	margin-left: 10px;
}

.remoji-info-button {
	color: #c8c8c8;
	padding: 0;
	appearance: none;
	border: none;
	background: none;
	vertical-align: middle;
	line-height: inherit;
	text-decoration: none;
}

.remoji-info-button .dashicons {
	font-size: 16px;
	vertical-align: middle;
}

.remoji-btn-pie {
	appearance: none;
	background: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	margin: 0;
	top: -0.125em;
}

.remoji-wrap .remoji-btn-tiny {
	padding: 2px 8px;
	line-height: 1.5;
	height: auto;
}

.remoji-wrap .remoji-btn-mini {
	padding: 0 8px 1px;
	font-size: 12px;
	font-weight: 600;
	margin: 5px 0;
}

.remoji-wrap .remoji-btn-mini .dashicons.dashicons-image-rotate {
	padding-top: 3px;
	font-size: 18px;
}

.remoji-wrap .remoji-btn-mini .dashicons {
	padding-top: 2px;
}

.remoji-wrap .remoji-btn-large {
	font-size: 1.5em;
	padding: .75em 1.5em;
	margin: 0 .25em;
	height: auto;
}

.remoji-wrap .remoji-btn-large .dashicons {
	font-size: 1.25em;
	width: auto;
}

.remoji-switch {
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px rgba(0,0,0,.25);
	border-radius: 3px;
	font-size: 14px;
	font-weight: 600;
	display: inline-flex;
	position: relative;
}

.remoji-switch input {
	display: inline-block;
	position: absolute;
	z-index: -1;
}

.remoji-switch input:first-child+label {
	border-top-left-radius: 2px;
	border-bottom-left-radius: 2px;
}

.remoji-switch label:last-child {
	border-top-right-radius: 2px;
	border-bottom-right-radius: 2px;
}

.remoji-switch input:first-child:checked+label {
	background: #d7dbde;
	color: #212121;
	border: 1px solid rgba(0,0,0,.1);
}

.remoji-switch input:first-child:focus+label,
.remoji-switch input:first-child:hover+label {
	background-color: hsla(0,0%,87.8%,.7);
}

.remoji-switch input:checked:first-child:focus+label,
.remoji-switch input:checked:first-child:hover+label {
	background-color: hsla(0,0%,87.8%,.8);
}

.remoji-switch label {
	color: #444;
	font-size: 14px;
	display: inline-block;
	min-width: 75px;
	background-color: hsla(0,0%,100%,.2);
	font-weight: 600;
	text-align: center;
	padding: 5px 9px;
	cursor: pointer;
	border: 1px solid hsla(0,0%,100%,.5);
	border-radius: 1px;
	position: relative;
	margin-bottom: 0;
}

.remoji-switch input:not(:first-child):checked+label {
	background-color: #ad73ff;
	color: #fff;
	border: 1px solid #ad73ff;
}

.remoji-switch input:not(:first-child):focus+label,
.remoji-switch input:not(:first-child):hover+label {
	background-color: #b27dfd;
	color: #fff;
}

.remoji-switch input:first-child:checked+label.remoji-switch--danger {
	background-color: #dc3545;
	border: 1px solid #dc3545;
}

.remoji-switch input:not(:first-child):checked+label.remoji-switch--danger {
	background-color: #dc3545;
	border: 1px solid #dc3545;
}

.remoji-switch input:not(:first-child):focus+label.remoji-switch--danger,
.remoji-switch input:not(:first-child):hover+label.remoji-switch--danger {
	background-color: rgba(220,53,69,.7);
}

.remoji-switch input:first-child:focus+label.remoji-switch--danger,
.remoji-switch input:first-child:hover+label.remoji-switch--danger {
	background-color: rgba(220,53,69,.7);
}

.remoji-switch input:checked:not(:first-child):focus+label.remoji-switch--danger,
.remoji-switch input:checked:not(:first-child):hover+label.remoji-switch--danger {
	background-color: rgba(220,53,69,.8);
}

.remoji-switch input:checked:first-child:focus+label.remoji-switch--danger,
.remoji-switch input:checked:first-child:hover+label.remoji-switch--danger {
	background-color: rgba(220,53,69,.8);
}

.remoji-switch+.text-muted {
	margin-top: -.75rem;
}

.remoji-switch+.badge {
	margin-left: 1rem;
	font-size: 80%;
	padding: .4em .4em .25em;
}

.remoji-switch+.fe {
	margin-left: 1rem;
}

.with-switch {
	display: flex;
	align-items: center;
}

.with-switch .remoji-switch {
	margin-left: 1rem;
	margin-bottom: 0;
}

[class*="remoji-label-"] {
	display: inline;
	padding: .2em .6em .3em;
	font-size: 75%;
	font-weight: bold;
	line-height: 1;
	color: #fff;
	text-align: center;
	white-space: nowrap;
	vertical-align: baseline;
	border-radius: .25em;
}

[class*="remoji-label-"]:hover,
[class*="remoji-label-"]:focus {
	color: #fff;
	text-decoration: none;
	cursor: pointer;
}

[class*="remoji-label-"]:empty {
	display: none;
}

.remoji-label-regular {
	font-size: 1em;
}

.remoji-label-default {
	background-color: #777;
}

.remoji-label-default[href]:hover,
.remoji-label-default[href]:focus {
	background-color: #5e5e5e;
}

.remoji-label-primary {
	background-color: #337ab7;
}

.remoji-label-primary[href]:hover,
.remoji-label-primary[href]:focus {
	background-color: #286090;
}

.remoji-label-success {
	background-color: #5cb85c;
}

.remoji-label-success[href]:hover,
.remoji-label-success[href]:focus {
	background-color: #449d44;
}

.remoji-label-info {
	background-color: #5bc0de;
}

.remoji-label-info[href]:hover,
.remoji-label-info[href]:focus {
	background-color: #31b0d5;
}

.remoji-label-warning {
	background-color: #f0ad4e;
}

.remoji-label-warning[href]:hover,
.remoji-label-warning[href]:focus {
	background-color: #ec971f;
}

.remoji-label-danger {
	background-color: #d9534f;
}

.remoji-label-danger[href]:hover,
.remoji-label-danger[href]:focus {
	background-color: #c9302c;
}

.remoji-callout {
	margin: 1.5rem 0;
	border-right: 1px solid #e5e5e5;
	border-top: 1px solid #e5e5e5;
	border-bottom: 1px solid #e5e5e5;
	background: #f9f9f9;
}

.remoji-callout h4:not(:last-child) {
	margin-bottom: 0.5rem;
	margin-top: 1em;
}

.remoji-callout p {
	margin-left: 0;
}

.remoji-callout ol,
.remoji-callout ul {
	margin-left: 1em;
}

.remoji-callout.notice-warning h4 {
	color: #e59544;
}

.remoji-callout.notice-error h4 {
	color: #dc3232;
}

.remoji-callout-bg {
	margin: 1.5rem 0;
	background: #f9f9f9;
	border-top: none;
	border-bottom: none;
	border-right: none;
}

.remoji-form-label {
	font-size: 1em;
	margin: 0.65rem 0;
	display: block;
	font-weight: 600;
}

.remoji-form-label--toggle {
	margin: 0;
	display: inline-block;
	min-width: 110px;
}

input.remoji-input[type="file"] {
	padding: 9px;
	min-width: 500px;
	border: 1px solid #ddd;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, .07);
	background-color: #fff;
	color: #32373c;
	outline: 0;
	transition: 50ms border-color ease-in-out;
}

.remoji-body .remoji-textarea-success {
	border-color: #6699cc;
}

input.remoji-input-success {
	border-color: #28a745;
}

input.remoji-input-warning {
	border-color: #e59544;
}

.remoji-textarea {
	width: 60%;
}

.remoji-textarea-recommended {
	display: flex;
	margin-top: -5px;
}

.remoji-textarea-recommended .remoji-desc {
	margin: 0;
}

.remoji-textarea-recommended>div:first-child {
	margin-top: 1.7em;
	font-size: 12px;
	margin-right: 25px;
}

.remoji-wrap .remoji-collection-button {
	text-decoration: none;
	min-width: 30px;
	text-align: center;
}

.remoji-collection-button[data-action="add"] {
	margin-top: -5px;
	margin-left: -5px;
}

.remoji-collection-button .dashicons {
	vertical-align: baseline;
}

.remoji-wrap .button:not(.remoji-btn-large).remoji-form-action .dashicons {
	font-size: 1.2em;
	vertical-align: middle;
	top: 0;
}