/* ==========================================================================
   editor.css loads on any screen where the WoowBox button is output

   Any styles that will be used by the WoowBox modal should be put here
   ========================================================================== */
/* ==========================================================================
   Imports
   ========================================================================== */
/* ==========================================================================
   Variables SCSS
   ========================================================================== */
/* ==========================================================================
   Mixins
   ========================================================================== */
/**
* Media Query
*/
/**
* Border-Radius
*/
/** Button Styles */
.button {
  /** Red Button */
  /** Red Button */ }
  .button.button-danger {
    background: #e02626;
    border-color: #cf1e1e;
    color: #ffffff;
    box-shadow: 0 1px 0 #b91a1a; }
    .button.button-danger:hover {
      background: #f85959;
      border-color: #f85959;
      color: #ffffff; }
    .button.button-danger:active, .button.button-danger:focus {
      background: #e65353;
      border-color: #e33c3c;
      color: #ffffff; }
  .button.button-success {
    background: #009628;
    border-color: #007d21;
    color: #ffffff;
    box-shadow: 0 1px 0 #00631a; }
    .button.button-success:hover {
      background: #009d29;
      border-color: #009d29;
      color: #ffffff; }
    .button.button-success:active, .button.button-success:focus {
      background: #00c936;
      border-color: #00b02f;
      color: #ffffff; }

/* Add this attribute to the element that needs a tooltip */
[data-woowbox-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer; }

/* Hide the tooltip content by default */
[data-woowbox-tooltip]:before,
[data-woowbox-tooltip]:after {
  visibility: hidden;
  opacity: 0;
  pointer-events: none; }

/* Position tooltip above the element */
[data-woowbox-tooltip]:before {
  position: absolute;
  bottom: 120%;
  left: 50%;
  margin-bottom: 5px;
  margin-left: -35px;
  padding: 7px;
  width: 60px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #000;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  content: attr(data-woowbox-tooltip);
  text-align: center;
  font-size: 12px;
  line-height: 1.2; }

/* Triangle hack to make tooltip look like a speech bubble */
[data-woowbox-tooltip]:after {
  position: absolute;
  bottom: 120%;
  left: 50%;
  width: 0;
  margin-left: -5px;
  border-top: 5px solid #000;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0; }

/* Show tooltip content on hover */
[data-woowbox-tooltip]:hover:before,
[data-woowbox-tooltip]:hover:after {
  visibility: visible;
  opacity: 1; }

/* Helper styles */
.woowbox-hidden {
  display: none !important; }

.clearfix:before,
.clearfix:after {
  display: table;
  content: " ";
  clear: both;
  height: 0;
  overflow: hidden; }

#woowbox-modal .media-modal-close {
  right: 0;
  top: 0;
  line-height: 40px;
  width: 40px;
  height: 40px;
  text-align: center;
  text-decoration: none; }
  #woowbox-modal .media-modal-close .media-modal-icon {
    margin-top: 0; }

#woowbox-modal .media-frame-content iframe {
  position: absolute;
  left: 0;
  top: 0;
  min-height: 100%;
  min-width: 100%;
  max-width: 100%;
  max-height: 100%;
  height: 100%;
  width: 100%; }

/* Elementor CSS fix */
button[data-event="woowbox:module:settings"] {
  padding-left: 7px;
  padding-right: 7px; }

.elementor-editor-active .compat-attachment-fields {
  margin: 15px 0; }
  .elementor-editor-active .compat-attachment-fields th.textleft {
    padding: 7px 0; }