[class*="hint--"] {
  position: relative;
  display: inline-block;
}

[class*="hint--"]:before,
[class*="hint--"]:after {
  position: absolute;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  visibility: hidden;
  opacity: 0;
  z-index: 1000000;
  pointer-events: none;
  -webkit-transition: 0.3s ease;
  -moz-transition: 0.3s ease;
  transition: 0.3s ease;
  -webkit-transition-delay: 0ms;
  -moz-transition-delay: 0ms;
  transition-delay: 0ms;
}

[class*="hint--"]:hover:before,
[class*="hint--"]:hover:after {
  visibility: visible;
  opacity: 1;
}

[class*="hint--"]:hover:before,
[class*="hint--"]:hover:after {
  -webkit-transition-delay: 100ms;
  -moz-transition-delay: 100ms;
  transition-delay: 100ms;
}

[class*="hint--"]:before {
  content: '';
  position: absolute;
  background: transparent;
  border: 6px solid transparent;
  z-index: 1000001;
}

[class*="hint--"]:after {
  background: #383838;
  color: white;
  padding: 8px 10px;
  font-size: 12px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 12px;
  white-space: nowrap;
}

[class*="hint--"][aria-label]:after {
  content: attr(aria-label);
}

[class*="hint--"][data-hint]:after {
  content: attr(data-hint);
}

[aria-label='']:before,
[aria-label='']:after,
[data-hint='']:before,
[data-hint='']:after {
  display: none !important;
}

.hint--top-left:before {
  border-top-color: #383838;
}

.hint--top-right:before {
  border-top-color: #383838;
}

.hint--top:before {
  border-top-color: #383838;
}

.hint--bottom-left:before {
  border-bottom-color: #383838;
}

.hint--bottom-right:before {
  border-bottom-color: #383838;
}

.hint--bottom:before {
  border-bottom-color: #383838;
}

.hint--left:before {
  border-left-color: #383838;
}

.hint--right:before {
  border-right-color: #383838;
}

.hint--top:before {
  margin-bottom: -11px;
}

.hint--top:before,
.hint--top:after {
  bottom: 100%;
  left: 50%;
}

.hint--top:before {
  left: calc(50% - 6px);
}

.hint--top:after {
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  transform: translateX(-50%);
}

.hint--top:hover:before {
  -webkit-transform: translateY(-8px);
  -moz-transform: translateY(-8px);
  transform: translateY(-8px);
}

.hint--top:hover:after {
  -webkit-transform: translateX(-50%) translateY(-8px);
  -moz-transform: translateX(-50%) translateY(-8px);
  transform: translateX(-50%) translateY(-8px);
}

.hint--bottom:before {
  margin-top: -11px;
}

.hint--bottom:before,
.hint--bottom:after {
  top: 100%;
  left: 50%;
}

.hint--bottom:before {
  left: calc(50% - 6px);
}

.hint--bottom:after {
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  transform: translateX(-50%);
}

.hint--bottom:hover:before {
  -webkit-transform: translateY(8px);
  -moz-transform: translateY(8px);
  transform: translateY(8px);
}

.hint--bottom:hover:after {
  -webkit-transform: translateX(-50%) translateY(8px);
  -moz-transform: translateX(-50%) translateY(8px);
  transform: translateX(-50%) translateY(8px);
}

.hint--right:before {
  margin-left: -11px;
  margin-bottom: -6px;
}

.hint--right:after {
  margin-bottom: -14px;
}

.hint--right:before,
.hint--right:after {
  left: 100%;
  bottom: 50%;
}

.hint--right:hover:before {
  -webkit-transform: translateX(8px);
  -moz-transform: translateX(8px);
  transform: translateX(8px);
}

.hint--right:hover:after {
  -webkit-transform: translateX(8px);
  -moz-transform: translateX(8px);
  transform: translateX(8px);
}

.hint--left:before {
  margin-right: -11px;
  margin-bottom: -6px;
}

.hint--left:after {
  margin-bottom: -14px;
}

.hint--left:before,
.hint--left:after {
  right: 100%;
  bottom: 50%;
}

.hint--left:hover:before {
  -webkit-transform: translateX(-8px);
  -moz-transform: translateX(-8px);
  transform: translateX(-8px);
}

.hint--left:hover:after {
  -webkit-transform: translateX(-8px);
  -moz-transform: translateX(-8px);
  transform: translateX(-8px);
}

.hint--top-left:before {
  margin-bottom: -11px;
}

.hint--top-left:before,
.hint--top-left:after {
  bottom: 100%;
  left: 50%;
}

.hint--top-left:before {
  left: calc(50% - 6px);
}

.hint--top-left:after {
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  transform: translateX(-100%);
}

.hint--top-left:after {
  margin-left: 12px;
}

.hint--top-left:hover:before {
  -webkit-transform: translateY(-8px);
  -moz-transform: translateY(-8px);
  transform: translateY(-8px);
}

.hint--top-left:hover:after {
  -webkit-transform: translateX(-100%) translateY(-8px);
  -moz-transform: translateX(-100%) translateY(-8px);
  transform: translateX(-100%) translateY(-8px);
}

.hint--top-right:before {
  margin-bottom: -11px;
}

.hint--top-right:before,
.hint--top-right:after {
  bottom: 100%;
  left: 50%;
}

.hint--top-right:before {
  left: calc(50% - 6px);
}

.hint--top-right:after {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  transform: translateX(0);
}

.hint--top-right:after {
  margin-left: -12px;
}

.hint--top-right:hover:before {
  -webkit-transform: translateY(-8px);
  -moz-transform: translateY(-8px);
  transform: translateY(-8px);
}

.hint--top-right:hover:after {
  -webkit-transform: translateY(-8px);
  -moz-transform: translateY(-8px);
  transform: translateY(-8px);
}

.hint--bottom-left:before {
  margin-top: -11px;
}

.hint--bottom-left:before,
.hint--bottom-left:after {
  top: 100%;
  left: 50%;
}

.hint--bottom-left:before {
  left: calc(50% - 6px);
}

.hint--bottom-left:after {
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  transform: translateX(-100%);
}

.hint--bottom-left:after {
  margin-left: 12px;
}

.hint--bottom-left:hover:before {
  -webkit-transform: translateY(8px);
  -moz-transform: translateY(8px);
  transform: translateY(8px);
}

.hint--bottom-left:hover:after {
  -webkit-transform: translateX(-100%) translateY(8px);
  -moz-transform: translateX(-100%) translateY(8px);
  transform: translateX(-100%) translateY(8px);
}

.hint--bottom-right:before {
  margin-top: -11px;
}

.hint--bottom-right:before,
.hint--bottom-right:after {
  top: 100%;
  left: 50%;
}

.hint--bottom-right:before {
  left: calc(50% - 6px);
}

.hint--bottom-right:after {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  transform: translateX(0);
}

.hint--bottom-right:after {
  margin-left: -12px;
}

.hint--bottom-right:hover:before {
  -webkit-transform: translateY(8px);
  -moz-transform: translateY(8px);
  transform: translateY(8px);
}

.hint--bottom-right:hover:after {
  -webkit-transform: translateY(8px);
  -moz-transform: translateY(8px);
  transform: translateY(8px);
}

.hint--small:after,
.hint--medium:after,
.hint--large:after {
  white-space: normal;
  line-height: 1.4em;
  word-wrap: break-word;
}

.hint--small:after {
  width: 80px;
}

.hint--medium:after {
  width: 150px;
}

.hint--large:after {
  width: 300px;
}

[class*="hint--"]:after {
  text-shadow: 0 -1px 0px black;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
}

.hint--error:after {
  background-color: #b34e4d;
  text-shadow: 0 -1px 0px #592726;
}

.hint--error.hint--top-left:before {
  border-top-color: #b34e4d;
}

.hint--error.hint--top-right:before {
  border-top-color: #b34e4d;
}

.hint--error.hint--top:before {
  border-top-color: #b34e4d;
}

.hint--error.hint--bottom-left:before {
  border-bottom-color: #b34e4d;
}

.hint--error.hint--bottom-right:before {
  border-bottom-color: #b34e4d;
}

.hint--error.hint--bottom:before {
  border-bottom-color: #b34e4d;
}

.hint--error.hint--left:before {
  border-left-color: #b34e4d;
}

.hint--error.hint--right:before {
  border-right-color: #b34e4d;
}

.hint--warning:after {
  background-color: #c09854;
  text-shadow: 0 -1px 0px #6c5328;
}

.hint--warning.hint--top-left:before {
  border-top-color: #c09854;
}

.hint--warning.hint--top-right:before {
  border-top-color: #c09854;
}

.hint--warning.hint--top:before {
  border-top-color: #c09854;
}

.hint--warning.hint--bottom-left:before {
  border-bottom-color: #c09854;
}

.hint--warning.hint--bottom-right:before {
  border-bottom-color: #c09854;
}

.hint--warning.hint--bottom:before {
  border-bottom-color: #c09854;
}

.hint--warning.hint--left:before {
  border-left-color: #c09854;
}

.hint--warning.hint--right:before {
  border-right-color: #c09854;
}

.hint--info:after {
  background-color: #3986ac;
  text-shadow: 0 -1px 0px #1a3c4d;
}

.hint--info.hint--top-left:before {
  border-top-color: #3986ac;
}

.hint--info.hint--top-right:before {
  border-top-color: #3986ac;
}

.hint--info.hint--top:before {
  border-top-color: #3986ac;
}

.hint--info.hint--bottom-left:before {
  border-bottom-color: #3986ac;
}

.hint--info.hint--bottom-right:before {
  border-bottom-color: #3986ac;
}

.hint--info.hint--bottom:before {
  border-bottom-color: #3986ac;
}

.hint--info.hint--left:before {
  border-left-color: #3986ac;
}

.hint--info.hint--right:before {
  border-right-color: #3986ac;
}

.hint--success:after {
  background-color: #458746;
  text-shadow: 0 -1px 0px #1a321a;
}

.hint--success.hint--top-left:before {
  border-top-color: #458746;
}

.hint--success.hint--top-right:before {
  border-top-color: #458746;
}

.hint--success.hint--top:before {
  border-top-color: #458746;
}

.hint--success.hint--bottom-left:before {
  border-bottom-color: #458746;
}

.hint--success.hint--bottom-right:before {
  border-bottom-color: #458746;
}

.hint--success.hint--bottom:before {
  border-bottom-color: #458746;
}

.hint--success.hint--left:before {
  border-left-color: #458746;
}

.hint--success.hint--right:before {
  border-right-color: #458746;
}

.hint--always:after,
.hint--always:before {
  opacity: 1;
  visibility: visible;
}

.hint--always.hint--top:before {
  -webkit-transform: translateY(-8px);
  -moz-transform: translateY(-8px);
  transform: translateY(-8px);
}

.hint--always.hint--top:after {
  -webkit-transform: translateX(-50%) translateY(-8px);
  -moz-transform: translateX(-50%) translateY(-8px);
  transform: translateX(-50%) translateY(-8px);
}

.hint--always.hint--top-left:before {
  -webkit-transform: translateY(-8px);
  -moz-transform: translateY(-8px);
  transform: translateY(-8px);
}

.hint--always.hint--top-left:after {
  -webkit-transform: translateX(-100%) translateY(-8px);
  -moz-transform: translateX(-100%) translateY(-8px);
  transform: translateX(-100%) translateY(-8px);
}

.hint--always.hint--top-right:before {
  -webkit-transform: translateY(-8px);
  -moz-transform: translateY(-8px);
  transform: translateY(-8px);
}

.hint--always.hint--top-right:after {
  -webkit-transform: translateY(-8px);
  -moz-transform: translateY(-8px);
  transform: translateY(-8px);
}

.hint--always.hint--bottom:before {
  -webkit-transform: translateY(8px);
  -moz-transform: translateY(8px);
  transform: translateY(8px);
}

.hint--always.hint--bottom:after {
  -webkit-transform: translateX(-50%) translateY(8px);
  -moz-transform: translateX(-50%) translateY(8px);
  transform: translateX(-50%) translateY(8px);
}

.hint--always.hint--bottom-left:before {
  -webkit-transform: translateY(8px);
  -moz-transform: translateY(8px);
  transform: translateY(8px);
}

.hint--always.hint--bottom-left:after {
  -webkit-transform: translateX(-100%) translateY(8px);
  -moz-transform: translateX(-100%) translateY(8px);
  transform: translateX(-100%) translateY(8px);
}

.hint--always.hint--bottom-right:before {
  -webkit-transform: translateY(8px);
  -moz-transform: translateY(8px);
  transform: translateY(8px);
}

.hint--always.hint--bottom-right:after {
  -webkit-transform: translateY(8px);
  -moz-transform: translateY(8px);
  transform: translateY(8px);
}

.hint--always.hint--left:before {
  -webkit-transform: translateX(-8px);
  -moz-transform: translateX(-8px);
  transform: translateX(-8px);
}

.hint--always.hint--left:after {
  -webkit-transform: translateX(-8px);
  -moz-transform: translateX(-8px);
  transform: translateX(-8px);
}

.hint--always.hint--right:before {
  -webkit-transform: translateX(8px);
  -moz-transform: translateX(8px);
  transform: translateX(8px);
}

.hint--always.hint--right:after {
  -webkit-transform: translateX(8px);
  -moz-transform: translateX(8px);
  transform: translateX(8px);
}

.hint--rounded:after {
  border-radius: 4px;
}

.hint--no-animate:before,
.hint--no-animate:after {
  -webkit-transition-duration: 0ms;
  -moz-transition-duration: 0ms;
  transition-duration: 0ms;
}

.hint--bounce:before,
.hint--bounce:after {
  -webkit-transition: opacity 0.3s ease, visibility 0.3s ease, -webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
  -moz-transition: opacity 0.3s ease, visibility 0.3s ease, -moz-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
}

.hint--no-shadow:before,
.hint--no-shadow:after {
  text-shadow: initial;
  box-shadow: initial;
}

.hint--no-arrow:before {
  display: none;
}

.melapress_role_editor-toggle {
  cursor: pointer;
  display: inline-block;
  transform: scale(0.8);
}

.melapress_role_editor-toggle-switch {
  display: inline-block;
  background: #ccc;
  border-radius: 16px;
  width: 58px;
  height: 32px;
  position: relative;
  vertical-align: middle;
  transition: background 0.25s;
}

.melapress_role_editor-toggle-switch:hover, .mre-include-desc-wrapper label:hover {
  cursor: pointer;
}

.melapress_role_editor-toggle-switch:before,
.toggle-switch:after {
  content: "";
}

.melapress_role_editor-toggle-switch:before {
  display: block;
  background: linear-gradient(to bottom, #fff 0%, #eee 100%);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
  width: 24px;
  height: 24px;
  position: absolute;
  top: 4px;
  left: 4px;
  transition: left 0.25s;
}

.melapress_role_editor-toggle:hover .melapress_role_editor-toggle-switch:before {
  background: linear-gradient(to bottom, #fff 0%, #fff 100%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}

.melapress_role_editor-toggle-checkbox:checked+.melapress_role_editor-toggle-switch {
  background: #495c88;
}

.melapress_role_editor-toggle-checkbox:checked+.melapress_role_editor-toggle-switch:before {
  left: 30px;
}

.melapress_role_editor-toggle-checkbox {
  position: absolute;
  visibility: hidden;
}

.melapress_role_editor-toggle-label {
  margin-left: 5px;
  position: relative;
  top: 2px;
}

.melapress_role_editor-cap-item>span {
  color: #575757;
  line-height: 1.6;
  width: calc(100% - 60px);
}

.melapress_role_editor-section-wrap {
  display: block;
  overflow: hidden;
}

.melapress_role_editor-section-wrap h3:not( :first-of-type) {
  display: inline-block;
  width: 100%;
  overflow: hidden;
  margin-top: 25px;
  overflow: hidden;
}

.melapress_role_editor-cap-item {
  display: flex;
  justify-content: space-between;
	align-items: center;
  min-height: 32px;
  margin-bottom: 24px;
}

.melapress_role_editor-cap-item .dashicons {
  position: relative;
  top: 6px;
  scale: 0.8;
}

.melapress_role_editor-col {
  float: left;
  position: relative;
  overflow: hidden;
  background: #fff;
  padding: 20px 20px 15px;
  width: calc(100% - 40px);
  margin: 0 0 15px 0;
}

.melapress_role_editor-role-edit-top-bar {
  display: flex;
}

.melapress_role_editor-role-edit-top-bar input {
  min-width: 320px;
  padding: 5px 10px;
  margin-top: 5px;
  margin-right: 15px;
}

.save-wrapper {
  margin-top: 25px;
}

.save-wrapper a {
  padding: 4px 13px !important;
  background: #495c88 !important;
  border-color: #495c88 !important;
}

#editing-view-radio label {
  position: relative;
  bottom: 2px;
  display: inline-block;
}

#editing-view-radio>span {
  margin-right: 15px;
  display: inline-block;
  margin-bottom: 10px;
}

/* #melapress_role_editor-view-settings-bar {
  display: flex;
  justify-content: space-between;
} */

#melapress_role_editor-caps-form .button#submit, a[href="#confirm-mre-screen-options"] {
  padding: 4px 13px !important;
  background: #495c88 !important;
  border-color: #495c88 !important;
}

a[href="#confirm-mre-screen-options"] {
  margin-left: 22px !important;
  margin-top: 10px !important;
}

#melapress_role_editor-view-settings-bar {
  margin-bottom: 20px;
}

#melapress_role_editor-new-role-wizard-bg,
#mre-role-desc-prompt,
.wizard-bg {
  display: none;
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
  top: 0;
  left: 0;
  z-index: 10000;
}

.wizard-bg.display {
  display: block;
}

#melapress_role_editor-new-role-wizard,
.wizard-content {
  transform: translate(-50%, -50%);
  background: #fff;
  min-height: 100px;
  margin: 0 auto;
  top: 50%;
  position: absolute;
  left: 50%;
	width: calc(100% - 40px);
  max-width: 724px;
  padding: 20px;
}

@media (max-width: 724px) {
	#melapress_role_editor-new-role-wizard,
	.wizard-content {
		height: calc(100svh - 100px);
		top: 46px;
		transform: translateX(-50%);
		overflow: scroll;
	}

	#melapress_role_editor-new-role-wizard img {
		max-width: 128px!important;
	}

	#melapress_role_editor-new-role-wizard .option-pill {
		width: 100%;
	}

	#melapress_role_editor-search-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
	}

	#melapress_role_editor-search-bar label {
		width: 100%;
	}

	#melapress_role_editor-new-role-wizard .mre-include-desc-wrapper {
		display: flex;
		align-items: center;
		left: 0;
		width: 100%;
	}

	#melapress_role_editor-new-role-wizard .mre-include-desc-wrapper label {
		left: 0;
		margin-left: 0!important;
		margin-right: 0;
		transform: none;
		width: auto;
	}

	#melapress_role_editor-new-role-wizard #mre-cap-selector,
	#melapress_role_editor-new-role-wizard .melapress_role_editor-col {
		height: 28vh;
		overflow: scroll;
	}

	[data-step="caps"] .wizard-row.halfs {
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	[data-step="caps"] .wizard-row.halfs > div {
		width: 100%;
	}
}

#melapress_role_editor-new-role-wizard .mre-cancel-btn {
	background-color: transparent;
	border: 1px solid transparent;
	color: #646970;
	cursor: pointer;
	
	position: absolute;
	top: 0;
	right: 0;
	z-index: 100;
	transition: color 0.15s ease;

	width: 50px;
	height: 50px;
}

#melapress_role_editor-new-role-wizard .mre-cancel-btn:hover {
	color: #2b2d31;
}

[data-show-if-selected] {
  display: none;
}

#melapress_role_editor-new-role-wizard .option-pill input {
  padding: 10px;
  margin-top: 10px;
	width: 100%;
}

 .mre-input {
  width: 98%;
  padding: 10px;
  margin-top: 10px;
}

.mre-disable-link {
	pointer-events: none;
	cursor: not-allowed !important;
	opacity: 0.5;
}

.option-pill.hidden {
  display: none !important;
}

.wizard-content .melapress_role_editor-section-wrap h3 {
  display: none;
}

#melapress_role_editor-new-role-wizard .notice {
  margin-left: 0 !important;
}

#melapress_role_editor-new-role-wizard #melapress_role_editor-sap-section-site-admin .melapress_role_editor-col+.melapress_role_editor-col {
  min-height: 345px;
}

#melapress_role_editor-new-role-wizard .melapress_role_editor-toggle {
  cursor: pointer;
  display: inline-block;
  transform: scale(0.6);
}

#melapress_role_editor-new-role-wizard .melapress_role_editor-cap-item+br {
  display: none;
}

#melapress_role_editor-new-role-wizard .melapress_role_editor-section-wrap h3 {
  display: none;
}

.close-wizard {
  position: absolute;
  right: 20px;
  color: #222;
  border: none;
  outline: none;
  text-shadow: none;
  text-decoration: none;
}

.close-wizard:focus {
  box-shadow: none;
  outline: none;
}

.option-pill input.error {
  border: 1px solid red;
}

.wizard-step .melapress_role_editor-col {
  float: left;
  position: relative;
  overflow: hidden;
  background: #fff;
  padding: 0;
  margin: 0 0 15px 0;
  width: calc(100% - 10px);
}

.wizard-step p, .wizard-step h3, .wizard-confirm-close p , .wizard-confirm-close h3, #welcome-wizard p, #welcome-wizard h3 {
  font-family: Quicksand, sans-serif;
  font-size: 14px;
}

.wizard-step .melapress_role_editor-col h4 {
  font-size: 14px;
}

.wizard-step .melapress_role_editor-col h4:first-of-type {
  margin: 0 0 10px 0px;
}

.wizard-step .melapress_role_editor-cap-item > span {
  width: calc(100% - 60px);
  opacity: 0.75;
  line-height: 25px;
}

.wizard-step .melapress_role_editor-col > h4 + span, .wizard-step .melapress_role_editor-col > h4 + span + span {
  top: 0;
}

.wizard-step .melapress_role_editor-col .melapress_role_editor-section-wrap h3 {
  display: none;
}

#mre-cap-count {
  margin-top: 32px;
}

.mre-wizard-nav-wrapper {
  margin-top: 16px;
}

.melapress_role_editor-col>h4 {
  width: calc(100% - 140px);
  display: inline-block;
}

.melapress_role_editor-col>h4+span,
.melapress_role_editor-col>h4+span+span {
  display: inline-block;
  width: 60px;
  text-align: center;
  padding-left: 4px;
  position: relative;
  top: -55px;
}

#search-results-wrapper .melapress_role_editor-col>h4+span,
#search-results-wrapper .melapress_role_editor-col>h4+span+span  {
  top: 0px;
}

#melapress_role_editor-caps-form, #melapress_role_editor-system-info-textarea {
  max-width: 1240px;
}

#melapress_role_editor-user-readout {
  display: none;
}

.melapress_role_editor-admin-tools select,
.melapress_role_editor-admin-tools input[type="text"] {
  min-width: 330px;
}

.manage-column.column-denied_privileges,
.manage-column.column-granted_privileges,
.manage-column.column-users_with_role {
  width: 120px;
}

.manage-column.column-type {
  width: 140px;
}

[data-tab-content]:not( :first-of-type) {
  display: none;
}

#update-done-notice {
  margin-top: 15px;
}

.display_name>a {
  font-weight: 700;
}

.melapress_role_editor-col .uses-common-cap:not( :first-of-type) {
  display: none;
}

.uses-common-cap {
  margin-bottom: 20px;
}

.melapress_role_editor-col h4 {
  font-size: 15px;
}

.melapress_role_editor-col .melapress_role_editor-sub-header {
  margin: 5px 0px 7px;
}

.melapress_role_editor-hint-icon {
  display: inline;
}

.display_name .melapress_role_editor-hint-icon.hint--right:before,
.display_name .melapress_role_editor-hint-icon.hint--right:after {
  left: 16px;
}

.display_name .melapress_role_editor-hint-icon .dashicons-info:before {
  color: #495c88 !important;
  font-size: 18px;
  position: relative;
  bottom: 1px;
}

.allow-deny-topper .melapress_role_editor-hint-icon {
  position: absolute;
}

.allow-deny-topper .melapress_role_editor-hint-icon .dashicons-info:before {
  color: #495c88 !important;
  font-size: 18px;
  position: relative;
  bottom: 1px;
}

.data-tab-selector-wrapper a:focus {
  box-shadow: none;
}

@media all and (min-width: 1100px) {
  .melapress_role_editor-admin-wrap {
    max-width: 1000px;
  }
}

#melapress_role_editor-system-info-textarea {
  min-width: 100%;
  min-height: 600px;
  background-color: #fefefe;
  padding: 15px;
  font-size: 13px;
}

.melapress-role-editor-about-tab-content h2 {
	font-size: 24px;
}

.melapress-role-editor-about-hero {
  display: block;
  position: relative;
	max-width: 640px;
}

.melapress-role-editor-about-logo {
  max-width: 300px;
}

.melapress-role-editor-about-logo img {
	width: 100%;
}

.our-wordpress-plugins>div {
  background: #fff;
  box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.09) !important;
	margin: 0 0 24px 0;
}

@media all and (min-width: 480px) {
	.our-wordpress-plugins {
		display: flex;
		width: calc(100% + 30px);
		gap: 32px;
	}

	.our-wordpress-plugins>div {
		max-width: 220px;
  	margin: 0;
	}

	.our-wordpress-plugins .plugin-desc p {
  	min-height: 64px;
	}
}

.our-wordpress-plugins>div img {
  width: 100%;
}

.our-wordpress-plugins .plugin-desc {
  padding: 10px 15px 24px;
}

.our-wordpress-plugins .plugin-desc p {
  font-size: 12px;
}

.rating-link {
  text-decoration: none;
  position: relative;
  top: 4px;
  margin-right: 10px;
}

.melapress_role_editor-secondary-role-wrap {
  display: inline-block;
  min-width: 220px;
}

.mre-wizard-nav-wrapper a+a {
  margin-left: 15px;
}

[data-attr-role] {
  position: relative;
  margin-right: 15px !important;
}

.melapress_role_editor-remove-item {
  background: red;
  height: 14px;
  width: 14px;
  position: absolute;
  color: #fff;
  border-radius: 7px;
  line-height: 11px;
  text-align: center;
  font-size: 10px;
  display: block;
  right: -7px;
  top: -5px;
}

.melapress_role_editor-remove-item:hover {
  color: #fff;
}

.melapress_role_editor-remove-item .dashicons {
  width: 5px;
  height: 5px;
  font-size: 14px;
  position: relative;
  left: -4px;
}

[data-secondary-role-button-wrapper] {
  margin-top: 20px;
}

.melapress_role_editor-hidden {
  display: none !important;
}

#melapress_role_editor-danger-zone {
  border: 1px solid red;
  border-radius: 5px;
  padding: 5px 15px 9px;
  margin-top: 20px;
}

#melapress_role_editor-danger-zone .button-secondary {
  color: red;
  border-color: red;
}

.melapress_role_editor-admin-tools {
  max-width: 1240px;
}

#melapress_role_editor-danger-zone td {
  position: relative;
  left: -15px;
}

#melapress_role_editor-search-bar {
  margin-bottom: 25px;
}

#search-results-wrapper {
  display: none;
}

.search-toggler {
  scale: 0.7;
  position: relative;
  left: 10px;
}

.mre-include-desc-wrapper {
  position: relative;
  left: -25px;
}

.role-hint .dashicons::before {
  font-size: 16px;
}

.custom-hint-wrap[class*="hint--"]::after, .display_name [class*="hint--"]::after {
  white-space: normal;
  min-width: 400px;
  line-height: 1.5;
}

.wizard-confirm-close {
  display: none;
}

.max-1240 {
  max-width: 1240px;
}

.mre-wizard-nav-wrapper a:focus {
  box-shadow: none !important;
}

.spin-me-right-round span {
  animation: rotating 2s linear infinite;
}

@-webkit-keyframes rotating {
  from{
      -webkit-transform: rotate(0deg);
  }
  to{
      -webkit-transform: rotate(360deg);
  }
}

#migration-underway {
  margin-top: 20px;
}

.mre-tag {
	background-color: #7f8dab;
  border-radius: 4px;
  color: #fff;
  display: none;
  padding: 5px 8px;
  line-height: 12px;
  font-size: 11px;
	margin-bottom: 4px;
}

.search-results-content .mre-tag {
  display: inline-block;
}

#mre-cap-selector {
  overflow-x: hidden;
  max-height: 40vh;
  scrollbar-color: #cacaca white;
  scrollbar-width: thin;
}

#mre-cap-selector details {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 15px;
  border-radius: 5px;
}

#mre-cap-selector summary {
	cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  padding: 5px 4px;
}

#mre-cap-selector details[open] summary {
  margin-bottom: 15px;
}

.new-role-wizard-content #search-results-wrapper {
  max-height: 50vh;
}

.wizard-id-list {
  position: relative;
  display: block;
  margin-top: 15px;
}

.wizard-id-list > span {
  margin-right: 10px !important;
  position: relative;
}

#wizard-progress {
  text-align: center;
  margin-bottom: 25px;
  font-size: 14px;
  font-weight: 300;
}

#wizard-progress span span {
  font-weight: 700;
  color: #495c88;
}

#melapress_role_editor-new-role-wizard small {
  right: 17px;
  position: absolute;
  bottom: 20px;
  opacity: 0.75;
 }

 [data-show-role-desc] {
  min-width: 240px;
 }

 #from_core_desc p,  #from_custom_desc p {
  margin-top: 15px;
  opacity: 0.9;
  font-style: italic;
 }

 #role_desc, #update_role_desc {
  width: 100%;
 }

 #char_readout, #update_char_readout {
  color: green;
 }
 #char_readout.error, #update_char_readout.error {
  color: red;
 }

 .mre-role-input {
  padding: 10px !important;
  min-width: 240px;
 }


 .wizard-row.halfs {
  display: flex;
 }

 .wizard-row.halfs > div  {
    width: 50%;
 }

  .wizard-row.halfs > div input {
    width: 95%;
 }

 .mre-edit-desc-link {
    position: relative;
    top: 2px;
    left: 1px;
    display: none;
 }

 .mre-edit-desc-link span {
font-size: 14px;
 }

 .column-desc:hover  .mre-edit-desc-link {
  display: inline-block
 }

.mre-per-post-perms-area {
	max-width: 672px;
}

.mre-per-post-perms-area > div:first-child {
	margin-bottom: 32px;
}

.mre-per-post-perms-area h4 {
	font-size: 1.25em;
	line-height: 1.2;
	margin-bottom: 0.5em;
}

.mre-per-post-perms-fields {
	display: grid;
	grid-template-columns:auto 1fr;
	grid-template-rows: repeat(2, 1fr);
	grid-row-gap: 16px;
	grid-column-gap: 8px;
	align-items:center;
	max-width: 400px;
	margin-top: 24px;
}

.mre-per-post-perms-fields label {
	font-weight: 700;
}