.hide-overflow {
  overflow: hidden !important;
}

.wp-core-ui .svg-icon-button {
  position: relative;
  padding-left: 28px;
}

.wp-core-ui .svg-icon-button-left {
  padding-left: 28px;
}

.wp-core-ui .svg-icon-button-right {
  padding-right: 28px;
}

.wp-core-ui .svg-icon-button svg {
  width: 14px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 8px;
  stroke: #0095ee;
}

.wp-core-ui .svg-icon-button-left svg {
  left: 8px;
}

.wp-core-ui .svg-icon-button-right svg {
  right: 8px;
}

.gutenberg-editor-page.content-mask-enabled-page .gutenberg:not(.content-mask-unchecked) .edit-post-visual-editor,
.gutenberg-editor-page.content-mask-enabled-page .gutenberg:not(.content-mask-unchecked) .edit-post-text-editor {
  display: none;
}

.gutenberg-editor-page.content-mask-enabled-page .gutenberg .edit-post-meta-boxes-area {
  margin-top: 55px;
}

#content-mask-settings {
  letter-spacing: 1.35px;
  background: #085078;
  background: linear-gradient(45deg, #95b8cc, #567e94);
  width: calc( 100% - 48px );
  margin: -6px -12px -12px;
  padding: 36px 36px 12px;
}

.content-mask-enable-container {
  width: 56px;
  margin-right: 24px;
  float: left;
}

.content-mask-method-container {
  width: 210px;
  position: absolute;
  right: 36px;
  box-shadow: 0 5px 15px -8px rgba(0, 0, 0, 0.5);
  z-index: 10;
}

.content-mask-expiration-div {
  text-align: right;
  position: relative;
  z-index: 9;
}

.content-mask-expiration-container {
  position: absolute;
  text-align: left;
  right: 0;
  z-index: 10;
  box-shadow: 0 5px 15px -8px rgba(0, 0, 0, 0.5);
  max-height: 265px;
  overflow-y: auto;
}

.content-mask-url-container {
  width: calc( 100% - 310px );
  float: left;
}

.content-mask-expiration-header {
  right: 215px;
}

.content-mask-box-header {
  color: #fff;
  display: inline-block;
  vertical-align: top;
  position: relative;
}

.content-mask-expiration-container {
  display: inline-block;
}

#content-mask-metabox {
  overflow-x: hidden;
}
#content-mask-metabox .content-mask-check {
  transform-origin: top left;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 48px;
  width: 48px;
  height: 24px;
  border-width: 3px;
}
#content-mask-metabox .content-mask-check svg.icon {
  width: 20px;
  height: 20px;
  border-radius: 48px;
  background: #fff;
  transform: translate(0, -50%);
  left: 0;
  opacity: 1;
  stroke: rgba(0, 0, 0, 0.2) !important;
  padding: 4px;
  box-sizing: border-box;
  margin: 0 2px;
  transition: 0.15s transform cubic-bezier(0.49, -0.17, 0.71, 1.3);
}
#content-mask-metabox .content-mask-check:after {
  content: "Disabled";
  font-size: 12px;
  letter-spacing: 0;
  font-weight: 600;
  color: #fff;
  transform: translateY(2.5em);
  display: block;
}
#content-mask-metabox input:checked + .content-mask-check {
  background-color: #0095ee;
}
#content-mask-metabox input:checked + .content-mask-check svg.icon {
  stroke-width: 3.3px;
  stroke: #0095ee !important;
  animation: none;
  transform: translate(calc(100% + 4px ), -50%);
}
#content-mask-metabox input:checked + .content-mask-check:after {
  content: "Enabled";
}
#content-mask-metabox #content-mask-settings {
  display: grid;
  grid-template-columns: 64px 1fr 210px;
  grid-gap: 16px;
  width: calc( 100% - 19px);
  margin: -6px -14px -14px;
  padding: 24px;
  position: relative;
}
#content-mask-metabox .content-mask-text > input {
  padding: 16px 20px 15px;
}
#content-mask-metabox .content-mask-enable-container {
  float: none;
  width: auto;
  margin: 0;
}
#content-mask-metabox .content-mask-method-container {
  /*position: relative;*/
  right: 24px;
  top: 24px;
}
#content-mask-metabox .content-mask-url-container {
  width: 100%;
}
#content-mask-metabox .content-mask-permissions,
#content-mask-metabox .content-mask-scripts-div,
#content-mask-metabox .content-mask-expiration-div {
  width: 100%;
  grid-column-start: 1;
  grid-column-end: -1;
}
#content-mask-metabox h2.content-mask-box-header {
  padding: 0 !important;
  margin-bottom: 0.35em;
  font-size: 18px;
  letter-spacing: 0.35px;
}
#content-mask-metabox h2.content-mask-box-header ~ div > label {
  display: inline-block;
  margin-right: 18px;
  letter-spacing: 0.1px;
}
#content-mask-metabox .content-mask-permissions {
  grid-gap: 24px;
}
#content-mask-metabox .content-mask-permissions-checkboxes {
  padding: 12px;
  background: rgba(0, 0, 0, 0.175);
}
#content-mask-metabox .content-mask-expiration-div {
  display: grid;
  grid-template-columns: 1fr 210px;
  grid-gap: 16px;
}
#content-mask-metabox .content-mask-expiration-div h2 {
  width: 100%;
  right: 0;
}

@media (max-width: 960px) {
  #content-mask-metabox #content-mask-settings {
    grid-template-columns: 64px 1fr;
  }
  #content-mask-metabox .content-mask-method-container {
    width: 100%;
    grid-column-start: 1;
    grid-column-end: -1;
  }
  #content-mask-metabox .content-mask-method-container .content-mask-select {
    width: 100%;
  }
  #content-mask-metabox .content-mask-expiration-header {
    right: initial;
  }
  #content-mask-metabox h2.content-mask-box-header ~ div > label {
    margin: 2px 18px 10px 0 !important;
  }
  #content-mask-metabox .content-mask-permissions-checkboxes {
    padding-bottom: 0;
  }
  #content-mask-metabox .content-mask-method-container {
    right: 0;
    top: 97px;
  }
  #content-mask-metabox .content-mask-expiration-div {
    margin-top: 73px;
  }
}
@media (max-width: 580px) {
  #content-mask-metabox .content-mask-scripts-div {
    grid-template-columns: 1fr;
  }
  #content-mask-metabox .content-mask-expiration-div h2 {
    font-size: 12px;
  }
}
@media (max-width: 520px) {
  #content-mask-metabox .content-mask-method-container {
    position: absolute;
  }
}
.content-mask-checkbox > input {
  display: none !important;
}

.content-mask-check {
  transform: scale(1.2);
  display: inline-block;
  border-radius: 50%;
  background: #fff;
  vertical-align: middle;
  cursor: pointer;
  transition: border 0.3s ease;
  width: 52px;
  height: 52px;
  position: relative;
  border: 2px solid #fff;
}

.content-mask-panel .content-mask-check {
  margin-right: 12px;
  transform: scale(1);
  border: 2px solid #eee;
}

.content-mask-checkbox[data-attr=enabled] .content-mask-check {
  border-color: #fff;
}

.content-mask-option .content-mask-value {
  text-transform: capitalize;
}

.content-mask-option.inset {
  margin-left: 50px;
  display: none;
}

.content-mask-option.inset + br {
  display: none;
}

.content-mask-option.inset input[type="text"] {
  padding: 10px;
  border: 1px solid #e2e4e0 !important;
  max-width: 420px;
  width: 100%;
}

/* Show inset on checked */
#content-mask-options:has(#content_mask_include_return_link:checked) .content-mask-option.inset, 
#content-mask-options:has(#content_mask_include_return_link:checked) .content-mask-option.inset + br {
  display: block;
}

.content-mask-check svg {
  opacity: 0.2;
  stroke: #333;
  transition: opacity 0.3s 0.1s ease;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: 66.66%;
  height: 66.66%;
}

.content-mask-checkbox input:checked + .content-mask-check,
.content-mask-option .content-mask-checkbox[data-attr=enabled] input + .content-mask-check {
  background: #0095ee;
}

.reverse .content-mask-checkbox input:checked + .content-mask-check,
.content-mask-option.reverse .content-mask-checkbox[data-attr=enabled] input + .content-mask-check {
  background: #ff7471;
}

.content-mask-checkbox input:checked + .content-mask-check .icon,
.content-mask-option .content-mask-checkbox[data-attr=enabled] input + .content-mask-check .icon {
  opacity: 1;
  transform: translate3d(-50%, -50%, 0) scale(1);
  stroke: #fff;
  animation: content_mask_icon 0.3s cubic-bezier(1, 0.008, 0.565, 1.65) 0.1s 1 forwards;
}

.content-mask-text {
  position: relative;
  margin: auto;
  border: none;
  border-radius: 3px;
  box-shadow: 0px 1em 2em -1.5em rgba(0, 0, 0, 0.5);
}

.content-mask-text > input,
.content-mask-text > textarea {
  letter-spacing: 1.35px;
  border: none !important;
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  outline: none;
  border-radius: 3px;
  font-size: 13px;
  padding: 20px 24px;
}

.content-mask-select {
  position: relative;
  overflow: hidden;
  display: block;
  margin: auto;
  width: 210px;
  height: 100%;
  border-bottom: 0px;
  border-radius: 3px;
  box-shadow: 0px 1em 2em -1.5em rgba(0, 0, 0, 0.5);
}

.content-mask-select svg {
  width: 16px;
  stroke: #444;
  position: relative;
  top: 2px;
}

.content-mask-select .option svg {
  margin-right: 10px;
}

.content-mask-select > .toggle {
  pointer-events: none;
  position: absolute;
  z-index: 4;
  right: 1.5em;
  top: 1.8em;
  color: #ccc;
}

.content-mask-select .title,
.content-mask-select .placeholder {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 1.5em 2em;
  background: white;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  cursor: pointer;
}

.content-mask-select > input:checked ~ .toggle.svg-arrow-down {
  display: none;
}

.content-mask-select > input:checked ~ .toggle.svg-arrow-up {
  display: block;
}

.content-mask-select > input:checked div.options label.option .title {
  display: none !important;
}

.content-mask-select > input:not(:checked) {
  z-index: 4;
}

.content-mask-select > input:not(:checked) ~ label.option > span.title {
  display: none;
}

.content-mask-select > input:not(:checked) ~ .toggle.svg-arrow-up {
  display: none;
}

.content-mask-select > input:not(:checked) ~ .toggle.svg-arrow-down {
  display: block;
}

.content-mask-select > input:disabled {
  cursor: no-drop;
}

.content-mask-select > span.placeholder {
  position: relative;
  z-index: 0;
  display: inline-block;
  width: 100%;
  color: #999;
  border-top: 0px;
}

.content-mask-select label.option {
  display: block;
  overflow: hidden;
  z-index: 1;
  width: 100%;
  transition: all 1s ease-out;
}

.content-mask-select label.option span.title {
  position: relative;
  z-index: 2;
  transition: background 0.3s ease-out;
}

.content-mask-select label.option span.title i.icon {
  padding-right: 8px;
  color: #92a8d1;
  position: relative;
  top: 1px;
}

.content-mask-select label.option span.title:hover {
  color: #fff;
  background: #6b96ae;
  box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.1);
}

.content-mask-select input:checked ~ label.option span.title:hover svg {
  stroke: #fff;
}

.content-mask-select label.option input {
  display: none;
}

.content-mask-select label.option input:checked ~ span.title {
  position: absolute;
  display: block;
  z-index: 3;
  top: 0px;
  background: #fff;
  border-top: 0px;
  box-shadow: none;
  color: inherit;
  width: 100%;
}

.content-mask-select-toggle {
  position: absolute !important;
  width: 100% !important;
  height: 57px !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  opacity: 0;
}

body.toplevel_page_content-mask #wpcontent {
  padding: 0;
}

body.toplevel_page_content-mask .wrap {
  margin: 0;
}

#content-mask,
body.toplevel_page_content-mask {
  background: #f7f7fa;
}

body.content-mask-admin ._content-mask-affect h1.headline {
  padding: 12px;
  background: #0095ee;
  color: #fff;
  text-transform: uppercase;
}
body.content-mask-admin ._content-mask-affect h1 svg {
  width: 24px;
  margin-bottom: -6px;
  fill: #fff;
}
body.content-mask-admin ._content-mask-affect h1 span {
  font-weight: 600;
}
body.content-mask-admin ._content-mask-affect h1 span.version-number {
  font-size: 12px;
  line-height: 0;
  text-transform: none;
  font-weight: 100;
  opacity: 0.65;
  font-family: monospace;
}
body.content-mask-admin ._content-mask-affect h1 strong {
  font-weight: 900;
}
body.content-mask-admin ._content-mask-affect h1 .button {
  background: transparent;
  border: none;
  box-shadow: none;
  color: #fff;
  border-radius: 0;
  margin-left: 5px;
  opacity: 0.8;
}
body.content-mask-admin ._content-mask-affect h1 [href*=paypal] {
  opacity: 1;
  background: #0075bb;
}
body.content-mask-admin ._content-mask-affect h1 .button:hover {
  filter: brightness(110%);
  opacity: 1;
  background: #0095ee;
  color: #fff;
}
body.content-mask-admin ._content-mask-affect #mobile-nav-toggle {
  display: none;
  line-height: 0;
  height: 24px;
  width: 25px;
  padding: 5px;
}
body.content-mask-admin ._content-mask-affect #mobile-nav-toggle:hover {
  cursor: pointer;
  background: #22b7ff;
}
body.content-mask-admin ._content-mask-affect .inner {
  padding: 35px 70px;
}
body.content-mask-admin ._content-mask-affect a:focus {
  outline: none;
  box-shadow: none;
}
body.content-mask-admin ._content-mask-affect nav {
  list-style-type: none;
  border-bottom: 1px solid #e8e9ed;
  margin-bottom: 35px;
}
body.content-mask-admin ._content-mask-affect nav li {
  display: inline;
}
body.content-mask-admin ._content-mask-affect nav li a {
  text-decoration: none;
  min-width: 85px;
  display: inline-block;
  font-weight: 500;
  color: #aaa;
  font-size: 14px;
  letter-spacing: 0.3px;
  padding: 10px 0;
  position: relative;
}
body.content-mask-admin ._content-mask-affect nav li a.active {
  color: #000;
  cursor: default;
  pointer-events: none;
}
body.content-mask-admin ._content-mask-affect nav li a:not(.active):hover {
  color: #0095ee;
}
body.content-mask-admin ._content-mask-affect nav li a.active span {
  display: inline-block;
  position: relative;
  padding-bottom: 12px;
  margin-bottom: -10px;
}
body.content-mask-admin ._content-mask-affect nav li a.active span:after {
  content: "";
  display: block;
  height: 3px;
  position: absolute;
  width: 100%;
  background: #0095ee;
  bottom: -2px;
}
body.content-mask-admin ._content-mask-affect .content-mask-panel {
  height: 0;
  opacity: 0;
  overflow: hidden;
}
body.content-mask-admin ._content-mask-affect .content-mask-panel.active {
  opacity: 1;
  height: auto;
  overflow: visible;
}
body.content-mask-admin ._content-mask-affect .content-mask-panel table {
  border-collapse: collapse;
  margin-bottom: 16px;
}
body.content-mask-admin ._content-mask-affect .content-mask-panel #load-more-masks {
  border: none;
  padding: 10px 20px;
  margin: 12px 8px 0;
  border-radius: 4px;
  background: #eee;
  font-size: 16px;
  font-weight: 500;
}
body.content-mask-admin ._content-mask-affect .content-mask-panel #load-more-masks:hover {
  background: #0095ee;
  box-shadow: 0 3px 9px -5px #000;
  cursor: pointer;
  color: #fff;
}
body.content-mask-admin ._content-mask-affect .content-mask-panel #load-more-masks:focus {
  box-shadow: none;
}
body.content-mask-admin ._content-mask-affect .content-mask-panel tr:hover {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 6px 50px -21px;
}
body.content-mask-admin ._content-mask-affect .content-mask-panel tr.new-mask {
  background: #0095ee;
  color: #fff;
}
body.content-mask-admin ._content-mask-affect .content-mask-panel tr.new-mask .method-like div {
  background: #fff;
  color: #0095ee;
}
body.content-mask-admin ._content-mask-affect .content-mask-panel tr.new-mask .method-like div:hover {
  cursor: pointer;
  transform: scale(1.1);
  box-shadow: 0 5px 25px -12px #000;
}
body.content-mask-admin ._content-mask-affect .content-mask-panel tr.new-mask [readonly] {
  color: #fff;
  display: block;
  min-height: 15px;
  background: transparent;
  border: 0px solid transparent;
}
body.content-mask-admin ._content-mask-affect .content-mask-panel tr.new-mask input[type=text] {
  background: rgba(0, 0, 0, 0.25);
  border: none;
  width: 100%;
  color: #fff;
  font-weight: 600;
  box-shadow: inset 2px 2px 10px -9px #000;
}
body.content-mask-admin ._content-mask-affect .content-mask-panel tr.new-mask input[type=text]::placeholder {
  color: rgba(200, 240, 255, 0.65);
}
body.content-mask-admin ._content-mask-affect .content-mask-panel tr.new-mask select {
  border: none;
  line-height: 2;
}
body.content-mask-admin ._content-mask-affect .content-mask-panel tr.deleting {
  opacity: 0.5;
  transition: 0.25s all ease-out;
  transform: scale(0.95);
}
body.content-mask-admin ._content-mask-affect .content-mask-panel td {
  padding: 15px;
}
body.content-mask-admin ._content-mask-affect .content-mask-panel td:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
body.content-mask-admin ._content-mask-affect .content-mask-panel td:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
body.content-mask-admin ._content-mask-affect .content-mask-panel .method div,
body.content-mask-admin ._content-mask-affect .content-mask-panel .method-like div {
  padding: 16px;
  border-radius: 50px;
  height: 24px;
  width: 24px;
}
body.content-mask-admin ._content-mask-affect .content-mask-panel .disabled .method div,
body.content-mask-admin ._content-mask-affect .content-mask-panel .disabled .method-like div {
  background: #eaeaea;
  color: #999;
}
body.content-mask-admin ._content-mask-affect .content-mask-panel .enabled .method div,
body.content-mask-admin ._content-mask-affect .content-mask-panel .enabled .method-like div {
  background: #0095ee;
  color: #fff;
}
body.content-mask-admin ._content-mask-affect .content-mask-panel .enabled .method div:hover,
body.content-mask-admin ._content-mask-affect .content-mask-panel .enabled .method-like div:hover {
  background: #eee;
  color: #999;
  cursor: pointer;
  box-shadow: 0 3px 15px -5px #000;
}
body.content-mask-admin ._content-mask-affect .content-mask-panel .disabled .method div:hover,
body.content-mask-admin ._content-mask-affect .content-mask-panel .disabled .method-like div:hover {
  background: #3cb6ff;
  opacity: 0.35;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 3px 15px -5px #000;
}
body.content-mask-admin ._content-mask-affect .content-mask-panel strong {
  font-size: 16px;
  margin-bottom: 3px;
  display: inline-block;
}
body.content-mask-admin ._content-mask-affect .content-mask-panel .info a {
  color: #000;
  text-decoration: none;
}
body.content-mask-admin ._content-mask-affect .content-mask-panel .info a:hover {
  color: #0095ee;
}
body.content-mask-admin ._content-mask-affect .content-mask-panel .status .label {
  padding: 1px 8px;
  display: inline-block;
  border: 1px solid #0095ee;
  color: #0095ee;
  border-radius: 20px;
  font-size: 11px;
}
body.content-mask-admin ._content-mask-affect .content-mask-panel .views,
body.content-mask-admin ._content-mask-affect .content-mask-panel .non-user,
body.content-mask-admin ._content-mask-affect .content-mask-panel .unique {
  display: none;
}
body.content-mask-admin ._content-mask-affect .content-mask-panel.visitor-tracking .views,
body.content-mask-admin ._content-mask-affect .content-mask-panel.visitor-tracking .non-user,
body.content-mask-admin ._content-mask-affect .content-mask-panel.visitor-tracking .unique {
  display: table-cell;
}
body.content-mask-admin ._content-mask-affect .content-mask-panel .more div {
  width: 100%;
  color: #888;
  text-align: center;
}
body.content-mask-admin ._content-mask-affect .content-mask-panel .more div svg {
  width: 18px;
}
body.content-mask-admin ._content-mask-affect .content-mask-panel .more div:hover {
  cursor: pointer;
}
body.content-mask-admin ._content-mask-affect .content-mask-panel .meta,
body.content-mask-admin ._content-mask-affect .content-mask-panel .meta a {
  font-size: 11px;
  color: #999;
}
body.content-mask-admin ._content-mask-affect .content-mask-panel .status .meta:before {
  content: "Expires in ";
}
body.content-mask-admin ._content-mask-affect .content-mask-panel .status .meta.expired:before {
  content: "";
}
body.content-mask-admin ._content-mask-affect .content-mask-reloading {
  animation: 1s content_mask_reload linear infinite;
  background-color: #0095ee !important;
}
body.content-mask-admin ._content-mask-affect .new-mask .content-mask-reloading {
  background-color: #fff !important;
}
body.content-mask-admin ._content-mask-affect .content-mask-reloading svg {
  display: none;
}
body.content-mask-admin ._content-mask-affect .content-mask-reloading:after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  position: absolute;
  top: 50%;
  left: 25%;
  transform: translate(-50%, -50%);
  background: #fff;
}
body.content-mask-admin ._content-mask-affect .new-mask .content-mask-reloading:after {
  background: #0095ee;
}
body.content-mask-admin ._content-mask-affect .more-container {
  position: relative;
}
body.content-mask-admin ._content-mask-affect .more-container:hover .more-nav {
  display: block;
}
body.content-mask-admin ._content-mask-affect .more-nav {
  display: none;
  position: absolute;
  width: 150px;
  background: #fff;
  padding: 6px;
  z-index: 100;
  box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.35);
  border-radius: 5px;
  margin: 0;
  top: 15px;
  right: 0;
}
body.content-mask-admin ._content-mask-affect .more-nav svg {
  width: 16px;
  margin-right: 6px;
}
body.content-mask-admin ._content-mask-affect .more-nav li:last-child {
  margin-bottom: 0;
}
body.content-mask-admin ._content-mask-affect .more-nav a {
  text-decoration: none;
  color: #666;
  padding: 6px 12px;
  display: flex;
  position: relative;
  line-height: 0;
  border-radius: 4px;
  flex-direction: row;
  align-items: center;
}
body.content-mask-admin ._content-mask-affect .more-nav a.remove-mask {
  color: #fb8a7b;
}
body.content-mask-admin ._content-mask-affect .more-nav a:hover {
  background: #f5f5fa;
}
body.content-mask-admin ._content-mask-affect .code-edit-wrapper {
  position: relative;
}
body.content-mask-admin ._content-mask-affect .code-edit-wrapper:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 100;
  font-size: 24px;
  transform: translate(-50%, -50%);
  color: #fff;
  opacity: 0;
  height: 0;
  width: 0;
  font-size: 0;
  box-shadow: 0 10px 25px -8px rgba(0, 0, 0, 0.5);
  transition: 1s opacity ease-out;
}
body.content-mask-admin ._content-mask-affect .code-edit-wrapper.error:before,
body.content-mask-admin ._content-mask-affect .code-edit-wrapper.info:before {
  width: auto;
  height: auto;
  opacity: 1;
  padding: 10px 20px 12px;
  font-size: 24px;
}
body.content-mask-admin ._content-mask-affect .code-edit-wrapper.error:before {
  content: "Error Saving.";
  background: #ee3d96;
}
body.content-mask-admin ._content-mask-affect .code-edit-wrapper.info:before {
  content: "Code Saved!";
  background: #0095ee;
}
body.content-mask-admin ._content-mask-affect .code-edit-wrapper:after {
  content: "";
  display: block;
  height: 6px;
  background: #0095ee;
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 10;
  transform: scaleX(0);
}
body.content-mask-admin ._content-mask-affect .code-edit-wrapper.loading:after {
  animation: content_mask_bar_reload 2.5s linear infinite;
}
body.content-mask-admin ._content-mask-affect .code-edit-wrapper button {
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 1000;
}
body.content-mask-admin ._content-mask-affect .CodeMirror-wrap {
  border: 1px solid #ddd;
  margin-bottom: 10px;
}
body.content-mask-admin ._content-mask-affect .content-mask-hover-help {
  padding: 0 5px;
  background: #fff;
  color: #0095ee;
  border: 1px dashed;
  border-radius: 10px;
  margin-left: 6px;
  opacity: 1;
  position: relative;
}
body.content-mask-admin ._content-mask-affect .content-mask-hover-help:before {
  transition: 0.2s opacity ease-out, 0.35s transform cubic-bezier(0.67, 0.62, 0.26, 1.54);
  transform: translate(-50%, -50%) scale(0.5);
  transform-origin: center center;
  content: attr(data-help);
  font-size: 0;
  opacity: 0;
  position: absolute;
  width: 200px;
  display: block;
  word-wrap: normal;
  white-space: normal;
  line-height: 1.62;
  color: #000;
  top: 50%;
  left: 50%;
  background: #fff;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 10px 25px -10px rgba(0, 0, 0, 0.75);
  z-index: 999999;
}
body.content-mask-admin ._content-mask-affect .content-mask-hover-help:hover:before {
  font-size: 12px;
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
body.content-mask-admin ._content-mask-affect #content-mask-options .content-mask-option.content-mask-reloading .content-mask-checkbox input + .content-mask-check {
  animation: 1s option_reload linear infinite;
  background-color: #0095ee !important;
}
body.content-mask-admin ._content-mask-affect #content-mask-options .content-mask-option.content-mask-reloading.reverse .content-mask-checkbox input + .content-mask-check {
  background-color: #ff7471 !important;
}
body.content-mask-admin ._content-mask-affect #content-mask-advanced .grid {
  margin-bottom: 30px;
}
body.content-mask-admin ._content-mask-affect div.content-mask-reloading svg {
  display: none;
}
body.content-mask-admin ._content-mask-affect div.content-mask-reloading:after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 10px;
  position: absolute;
  top: 50%;
  left: 25%;
  transform: translate(-50%, -50%);
  background: #fff;
}
body.content-mask-admin.edit-php .column-content-mask {
  position: relative;
}
body.content-mask-admin.edit-php .column-content-mask .content-mask-method div:not(:empty) {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
}
body.content-mask-admin.edit-php .column-content-mask .content-mask-method svg {
  display: inline-block;
  width: 20px;
  height: 20px;
  padding: 10px;
  stroke: #000;
}
body.content-mask-admin.edit-php .column-content-mask .content-mask-method svg.content-mask-reloading {
  stroke: #fff !important;
}
body.content-mask-admin.edit-php .column-content-mask .content-mask-method.enabled > div {
  background: #0095ee;
}
body.content-mask-admin.edit-php .column-content-mask .content-mask-method.enabled div:not(:empty) {
  box-shadow: 0 0 0 1px #0095ee;
}
body.content-mask-admin.edit-php .column-content-mask .content-mask-method.disabled div:not(:empty) {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.175);
}
body.content-mask-admin.edit-php .column-content-mask .content-mask-method.enabled svg {
  stroke: #fff;
}
body.content-mask-admin.edit-php .column-content-mask .content-mask-method div:hover {
  cursor: pointer;
  background: #55bfff !important;
  opacity: 1;
}
body.content-mask-admin.edit-php .column-content-mask .content-mask-method div:hover svg {
  stroke: #fff;
}
body.content-mask-admin.edit-php .column-content-mask .content-mask-method div.content-mask-reloading {
  animation: 1s content_mask_reload linear infinite;
  background-color: #0095ee !important;
}

.blur #content-mask {
  filter: blur(1px) brightness(80%);
  box-shadow: 0 0 10px 10px #000;
}

#content-mask-modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.content-mask-modal {
  text-align: center;
  width: 360px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 10px 50px -17px;
}

.content-mask-modal svg {
  width: 60px;
}

.content-mask-modal.warning {
  border-top: 7px solid #0095ee;
}

.content-mask-modal svg {
  color: #0095ee;
}

.content-mask-modal.warning {
  border-top: 7px solid #ee3d69;
}

.content-mask-modal.warning svg {
  color: #ee3d69;
}

.content-mask-modal p {
  font-size: 14px;
  color: #999;
  letter-spacing: 0.3px;
}

.content-mask-modal button {
  border: none;
  padding: 10px 20px;
  margin: 12px 8px 0;
  border-radius: 4px;
  background: #eee;
  font-size: 16px;
  font-weight: 500;
}

.content-mask-modal button:hover {
  background: #0095ee;
  box-shadow: 0 3px 9px -5px #000;
  cursor: pointer;
  color: #fff;
}

#content-mask-message {
  position: fixed;
  bottom: 20px;
  right: 20px;
  max-width: 80%;
  z-index: 999999;
}

.content-mask-message-content {
  background: #0095ee;
  font-size: 16px;
  font-weight: 100;
  line-height: 1.625;
  padding: 10px 20px !important;
  color: #fff;
  border-radius: 4px;
  box-shadow: 0 6px 35px -8px #000;
}

.content-mask-message-content.error,
.content-mask-message-content.warning {
  background: #ee3d69;
}

.content-mask-spinner {
  margin: 10px auto 0;
  width: 70px;
  text-align: center;
  height: 35px;
}

.content-mask-spinner > div {
  width: 18px;
  height: 18px;
  background-color: #333;
  border-radius: 100%;
  display: inline-block;
  animation: content_mask_loading 1.4s infinite ease-in-out both;
}

.content-mask-spinner .bounce1 {
  animation-delay: -0.32s;
}

.content-mask-spinner .bounce2 {
  animation-delay: -0.16s;
}

.grid {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}
.grid[columns] {
  grid-template-columns: repeat(12, 1fr);
}
.grid.gap, .grid[gap] {
  grid-gap: 10px;
}

.grid.columns-12,
.grid[columns="12"] {
  grid-template-columns: repeat(12, 1fr);
  /*& > * {
  	grid-column: auto / span $span;
  }*/
}
.grid.columns-12 > *,
.grid[columns="12"] > * {
  grid-column: auto/span 1;
  -ms-grid-column-span: 1;
}

.grid.columns-11,
.grid[columns="11"] {
  grid-template-columns: repeat(11, 1fr);
  /*& > * {
  	grid-column: auto / span $span;
  }*/
}
.grid.columns-11 > *,
.grid[columns="11"] > * {
  grid-column: auto/span 1;
  -ms-grid-column-span: 1;
}

.grid.columns-10,
.grid[columns="10"] {
  grid-template-columns: repeat(10, 1fr);
  /*& > * {
  	grid-column: auto / span $span;
  }*/
}
.grid.columns-10 > *,
.grid[columns="10"] > * {
  grid-column: auto/span 1;
  -ms-grid-column-span: 1;
}

.grid.columns-9,
.grid[columns="9"] {
  grid-template-columns: repeat(9, 1fr);
  /*& > * {
  	grid-column: auto / span $span;
  }*/
}
.grid.columns-9 > *,
.grid[columns="9"] > * {
  grid-column: auto/span 1;
  -ms-grid-column-span: 1;
}

.grid.columns-8,
.grid[columns="8"] {
  grid-template-columns: repeat(8, 1fr);
  /*& > * {
  	grid-column: auto / span $span;
  }*/
}
.grid.columns-8 > *,
.grid[columns="8"] > * {
  grid-column: auto/span 1;
  -ms-grid-column-span: 1;
}

.grid.columns-7,
.grid[columns="7"] {
  grid-template-columns: repeat(7, 1fr);
  /*& > * {
  	grid-column: auto / span $span;
  }*/
}
.grid.columns-7 > *,
.grid[columns="7"] > * {
  grid-column: auto/span 1;
  -ms-grid-column-span: 1;
}

.grid.columns-6,
.grid[columns="6"] {
  grid-template-columns: repeat(6, 1fr);
  /*& > * {
  	grid-column: auto / span $span;
  }*/
}
.grid.columns-6 > *,
.grid[columns="6"] > * {
  grid-column: auto/span 1;
  -ms-grid-column-span: 1;
}

.grid.columns-5,
.grid[columns="5"] {
  grid-template-columns: repeat(5, 1fr);
  /*& > * {
  	grid-column: auto / span $span;
  }*/
}
.grid.columns-5 > *,
.grid[columns="5"] > * {
  grid-column: auto/span 1;
  -ms-grid-column-span: 1;
}

.grid.columns-4,
.grid[columns="4"] {
  grid-template-columns: repeat(4, 1fr);
  /*& > * {
  	grid-column: auto / span $span;
  }*/
}
.grid.columns-4 > *,
.grid[columns="4"] > * {
  grid-column: auto/span 1;
  -ms-grid-column-span: 1;
}

.grid.columns-3,
.grid[columns="3"] {
  grid-template-columns: repeat(3, 1fr);
  /*& > * {
  	grid-column: auto / span $span;
  }*/
}
.grid.columns-3 > *,
.grid[columns="3"] > * {
  grid-column: auto/span 1;
  -ms-grid-column-span: 1;
}

.grid.columns-2,
.grid[columns="2"] {
  grid-template-columns: repeat(2, 1fr);
  /*& > * {
  	grid-column: auto / span $span;
  }*/
}
.grid.columns-2 > *,
.grid[columns="2"] > * {
  grid-column: auto/span 1;
  -ms-grid-column-span: 1;
}

.grid.columns-1,
.grid[columns="1"] {
  grid-template-columns: repeat(1, 1fr);
  /*& > * {
  	grid-column: auto / span $span;
  }*/
}
.grid.columns-1 > *,
.grid[columns="1"] > * {
  grid-column: auto/span 1;
  -ms-grid-column-span: 1;
}

.grid > *.span-1 {
  grid-column: auto/span 1;
  -ms-grid-column-span: 1;
}

.grid > *.span-2 {
  grid-column: auto/span 2;
  -ms-grid-column-span: 2;
}

.grid > *.span-3 {
  grid-column: auto/span 3;
  -ms-grid-column-span: 3;
}

.grid > *.span-4 {
  grid-column: auto/span 4;
  -ms-grid-column-span: 4;
}

.grid > *.span-5 {
  grid-column: auto/span 5;
  -ms-grid-column-span: 5;
}

.grid > *.span-6 {
  grid-column: auto/span 6;
  -ms-grid-column-span: 6;
}

.grid > *.span-7 {
  grid-column: auto/span 7;
  -ms-grid-column-span: 7;
}

.grid > *.span-8 {
  grid-column: auto/span 8;
  -ms-grid-column-span: 8;
}

.grid > *.span-9 {
  grid-column: auto/span 9;
  -ms-grid-column-span: 9;
}

.grid > *.span-10 {
  grid-column: auto/span 10;
  -ms-grid-column-span: 10;
}

.grid > *.span-11 {
  grid-column: auto/span 11;
  -ms-grid-column-span: 11;
}

.grid > *.span-12 {
  grid-column: auto/span 12;
  -ms-grid-column-span: 12;
}

.grid > .span-all {
  grid-column-start: 1;
  grid-column-end: -1;
}

@media (max-width: 1024px) {
  body.content-mask-admin ._content-mask-affect #header-nav {
    display: none;
    position: absolute;
    top: 54px;
    right: 0px;
    background: #0095ee;
    width: auto;
    max-width: 200px;
    z-index: 99999;
  }

  body.content-mask-admin ._content-mask-affect #header-nav .button {
    display: block;
    width: 100%;
    padding: 10px 10px 10px 28px;
    height: auto;
  }

  body.content-mask-admin ._content-mask-affect #mobile-nav-toggle {
    /*display: inline-block;*/
    float: right;
  }

  .content-mask-panel tr {
    display: block;
    border-bottom: 1px solid #ccc;
    margin-bottom: 12px;
  }

  .content-mask-panel td {
    display: inline-block;
    box-sizing: border-box;
  }

  .content-mask-panel td.method {
    width: 86px;
    height: 86px;
    float: left;
  }

  .content-mask-panel td.status {
    width: auto;
    height: 86px;
    float: left;
  }

  .content-mask-panel td.info {
    width: 100%;
    display: block;
    clear: both;
  }

  .content-mask-panel td.type {
    width: auto;
    float: left;
  }

  .content-mask-panel td.more {
    display: block;
    width: 100%;
  }

  .content-mask-panel td.more:after {
    content: "";
    display: block;
    clear: both;
  }

  .content-mask-panel .more > div {
    float: right;
  }
}
@media (max-width: 600px) {
  body.content-mask-admin ._content-mask-affect #header-nav {
    top: 100px;
  }

  body.content-mask-admin ._content-mask-affect .inner {
    padding: 10px 20px;
  }
}
@media (max-width: 520px) {
  .content-mask-expiration-div {
    text-align: left;
  }

  .content-mask-method-container,
.content-mask-expiration-container {
    position: relative;
    left: 0;
    width: 100%;
  }

  .content-mask-select {
    width: 100%;
  }

  .content-mask-enable-container {
    float: none;
    margin-bottom: 24px;
    margin: 0 auto 24px;
  }
}
@media (max-width: 419px) {
  body.content-mask-admin ._content-mask-affect h1 span.version-number {
    display: none;
  }
}
@keyframes content_mask_reload {
  0% {
    -webkit-transform: scale(1) rotate(0deg);
    -ms-transform: scale(1) rotate(0deg);
    -moz-transform: scale(1) rotate(0deg);
    -o-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg);
  }
  100% {
    -webkit-transform: scale(1) rotate(360deg);
    -ms-transform: scale(1) rotate(360deg);
    -moz-transform: scale(1) rotate(360deg);
    -o-transform: scale(1) rotate(360deg);
    transform: scale(1) rotate(360deg);
  }
}
@keyframes content_mask_bar_reload {
  0% {
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
    transform-origin: left center;
  }
  49% {
    transform-origin: left center;
  }
  50% {
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -o-transform: scaleX(1);
    transform: scaleX(1);
    transform-origin: right center;
  }
  100% {
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
    transform-origin: right center;
  }
}
@keyframes option_reload {
  0% {
    -webkit-transform: scale(1) rotate(0deg);
    -ms-transform: scale(1) rotate(0deg);
    -moz-transform: scale(1) rotate(0deg);
    -o-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg);
  }
  100% {
    -webkit-transform: scale(1) rotate(360deg);
    -ms-transform: scale(1) rotate(360deg);
    -moz-transform: scale(1) rotate(360deg);
    -o-transform: scale(1) rotate(360deg);
    transform: scale(1) rotate(360deg);
  }
}
@keyframes content_mask_icon {
  0% {
    -webkit-opacity: 0;
    -ms-opacity: 0;
    -moz-opacity: 0;
    -o-opacity: 0;
    opacity: 0;
    -webkit-transform: translate3d(-50%, -50%, 0) scale(0.3);
    -ms-transform: translate3d(-50%, -50%, 0) scale(0.3);
    -moz-transform: translate3d(-50%, -50%, 0) scale(0.3);
    -o-transform: translate3d(-50%, -50%, 0) scale(0.3);
    transform: translate3d(-50%, -50%, 0) scale(0.3);
  }
  100% {
    -webkit-opacity: 1;
    -ms-opacity: 1;
    -moz-opacity: 1;
    -o-opacity: 1;
    opacity: 1;
    -webkit-transform: translate3d(-50%, -50%, 0) scale(1);
    -ms-transform: translate3d(-50%, -50%, 0) scale(1);
    -moz-transform: translate3d(-50%, -50%, 0) scale(1);
    -o-transform: translate3d(-50%, -50%, 0) scale(1);
    transform: translate3d(-50%, -50%, 0) scale(1);
  }
}
@keyframes content_mask_check {
  100% {
    width: 52px;
    height: 52px;
    border: 2px solid #FFF;
    background: #0095ee;
  }
}
@keyframes content_mask_loading {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}

/*# sourceMappingURL=admin.css.map */