.allusfi_modal-content * {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

/* 
prefix for html elements : allusfi
The Modal (background) 
*/
.allusfi_modal {
  display: none;
  align-items: center;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

/* Modal Content/Box */
.allusfi_modal-content {
  background-color: #fefefe;
  margin-left: 14%;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  font-size: 15px;
}

/* The Close Button */
.allusfi_model_close {
  color: #aaa;
  text-align: right;
  font-size: 28px;
  font-weight: bold;
}

.allusfi_model_close:hover,
.allusfi_model_close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.allusfi-tabs {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

.allusfi-tabs button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

.allusfi-tabs .clear_filters {
  float: right;
  cursor: pointer !important;
  transition: 0.3s;
  margin-top: 1% !important;
  margin-right: 1% !important;
}

/* Change background color of buttons on hover */
.allusfi-tabs button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.allusfi-tabs button.set-active {
  background-color: #ccc;
}

/* Style the tab content */
.allusfi-tabcontent {
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
  min-height: 400px;
}

.allusfi_modal-content .stng-title {
  text-align: center;
}

.allusfi_modal-content .parent-col {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-top: 30px;
}

.allusfi_modal-content .allusfi-tabcontent.allusfi_us_general .child-col {
  width: calc((100% / 3) - 20px);
  min-height: 200px;
}

.allusfi-tabcontent .child-col {
  position: relative;
}

.allusfi_us_advance.allusfi-tabcontent .child-col:first-child {
  border-right: 1px solid #000;
}

.allusfi-tabcontent .child-col::after {
  content: '';
  position: absolute;
  top: 0;
  right: -16px;
  width: 1px;
  height: 100%;
  background: #000;
}

.allusfi-tabcontent .child-col:last-child:after {
  display: none;
}

.allusfi_us_advance.allusfi-tabcontent .child-col::after {
  display: none;
}

.allusfi_modal-content .allusfi-tabcontent.allusfi_us_advance {
  overflow-y: scroll;
  height: 300px;
}

.allusfi_modal-content .allusfi-tabcontent.allusfi_us_advance .date-div {
  width: 35%;
}

.allusfi_modal-content .allusfi-tabcontent.allusfi_us_advance .meta-div {
  width: 65%;
  padding: 0 30px;
}


.allusfi-tabcontent .exclude-roles {
  column-count: 2;
}

.allusfi-tabcontent.allusfi_us_dates {
  text-align: center;
}

.allusfi_modal-content .tooltip {
  position: relative;
  display: inline-block;
  border: 1px dotted black;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  cursor: help;
  text-align: center;
}

.close-popup-btn {
  text-align: right;
  margin-bottom: 5px;
}

.meta_filter_table {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

.meta_filter_table td,
.meta_filter_table th {
  border: 1px solid #ddd;
  padding: 8px;
}

.meta_filter_table tr:nth-child(even) {
  background-color: #f2f2f2;
}

.meta_filter_table tr:hover {
  background-color: #ddd;
}

.meta_filter_table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  color: rgb(0, 0, 0);
}

.allusfi_modal-content .tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  opacity: 0;
  transition: opacity 0.3s;
  transform: translateX(-50%);
}

.allusfi_modal-content .tooltip .tooltiptext::after {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.allusfi_modal-content .tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
  padding: 20px;
  min-width: 200px;
  font-size: 15px;
  line-height: 25px;
}

.allusfi-tabcontent.allusfi_us_advance .tooltip:hover .tooltiptext {
  width: 400px;
}

.allusfi_modal-content .dis-block {
  display: block;
}

.allusfi_modal-content .pad-top-40 {
  padding-top: 40px;
}

.allusfi_modal-content .pad-top-10 {
  padding-top: 10px;
}

.allusfi_modal-content .exclude-roles label {
  width: fit-content;
  display: block;
  padding-bottom: 10px;
}

.allusfi_modal-content .export-btn {
  margin-top: 13%;
}

.allusfi_modal-content .export-btn button {
  padding: 10px 20px;
}

.allusfi_modal-content .export-btn button span{
  margin-top: 5px;
}

.allusfi_modal-content #LETS-make-POST-Form {
  cursor: pointer;
  -webkit-user-select: none;
  /* Safari */
  -ms-user-select: none;
  /* IE 10 and IE 11 */
  user-select: none;
  /* Standard syntax */
}

/* The container */
.allusfi_modal-content .fancy-check {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 15px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.allusfi_modal-content .fancy-check input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.allusfi_modal-content .fancy-checkmark {
  position: absolute;
  top: 0;
  left: 0;
  min-height: 26px;
  width: 25px;
}

.allusfi_modal-content .fancy-check:hover input~.fancy-checkmark {
  background-color: #ccc;
}

.allusfi_modal-content .fancy-checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.allusfi_modal-content .fancy-check input:checked~.fancy-checkmark:after {
  display: block;
}

.allusfi_modal-content .fancy-check .fancy-checkmark:after {
  left: 8px;
  top: 4px;
  width: 5px;
  height: 10px;
  border: solid #000;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* ***********
*******************
** */
.allusfi_modal-content .fancy-radio {
  display: inline-block;
  position: relative;
  padding-left: 35px;
  cursor: pointer;
  font-size: 15px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.allusfi_modal-content .fancy-radio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.allusfi_modal-content .fancy-select {
  position: absolute;
  top: -4px;
  left: 0;
  height: 29px;
  width: 29px;
  border-radius: 50% !important;
}

/* On mouse-over, add a grey background color */
.allusfi_modal-content .fancy-radio:hover input~.fancy-select {
  background-color: #ccc;
}

.allusfi_modal-content .big_p_bold {
  font-size: 16px;
}


.allusfi_modal-content .big_p {
  font-size: 14px;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.allusfi_modal-content .fancy-select:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.allusfi_modal-content .fancy-radio input:checked~.fancy-select:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.allusfi_modal-content .fancy-radio .fancy-select:after {
  top: 9px;
  left: 9px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: white;
}

.allusfi_modal-content .txt-center {
  text-align: center;
}

.allusfi_modal-content .txt-right {
  text-align: right;
}

.allusfi_modal-content .form-order {
  display: inline-block;
  width: fit-content;
  padding-left: 20px;
}

.allusfi_meta_append_content input[type='text'] {
  width: 70%;
}

.allusfi_modal-content .add_multi_date,
.allusfi_modal-content .add_multi_meta_query {
  margin: 0px 10px 10px 27px !important;
}

.allusfi_modal-content .relation {
  margin-left: 20px;
}

.allusfi_modal-content .ordr-by-fields {
  display: flex;
  align-items: center;
}

.allusfi_modal-content .allusfi-sbmit-actions {
  display: block;
  float: right;
}

.allusfi_modal-content .pop-up-footer {
  margin-top: 20px;
}

.allusfi_modal-content .pop-up-footer p {
  font-size: 15px;
}

/**** pop up message ***/
.allusfi_modal-content #pop-pop {
  visibility: hidden;
  min-width: 250px;
  margin-left: -125px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 2px;
  padding: 16px;
  position: fixed;
  z-index: 1;
  left: 50%;
  bottom: 30px;
  font-size: 17px;
  -webkit-user-select: none;
  /* Safari */
  -ms-user-select: none;
  /* IE 10 and IE 11 */
  user-select: none;
  /* Standard syntax */
}

.allusfi_modal-content #pop-pop.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* 
  Heart shape
 */

.allusfi_modal-content .heart {
  background-color: #0487ff;
  display: inline-block;
  height: 9px;
  margin: 0 7px;
  position: relative;
  top: 0;
  transform: rotate(-45deg);
  width: 9px;
}

.allusfi_modal-content .heart:before,
.allusfi_modal-content .heart:after {
  content: "";
  background-color: #0487ff;
  border-radius: 50%;
  height: 9px;
  position: absolute;
  width: 9px;
}

.allusfi_modal-content .heart:before {
  top: -6px;
  left: 0;
}

.allusfi_modal-content .heart:after {
  left: 5px;
  top: 0;
}

@-webkit-keyframes fadein {
  from {
    bottom: 0;
    opacity: 0;
  }

  to {
    bottom: 30px;
    opacity: 1;
  }
}

@keyframes fadein {
  from {
    bottom: 0;
    opacity: 0;
  }

  to {
    bottom: 30px;
    opacity: 1;
  }
}

@-webkit-keyframes fadeout {
  from {
    bottom: 30px;
    opacity: 1;
  }

  to {
    bottom: 0;
    opacity: 0;
  }
}

@keyframes fadeout {
  from {
    bottom: 30px;
    opacity: 1;
  }

  to {
    bottom: 0;
    opacity: 0;
  }
}

/*  animation css */
.allusfi_animated-btn {
  position: relative;
  padding: 30px 60px;
  overflow: hidden;
}

.allusfi_animated-btn span:nth-child(1) {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 1px;
  animation: animate1 2s linear infinite;
}

.allusfi_animated-btn .abc_snake {
  min-height: 0px !important;
  min-width: 0px !important;
  padding: 0px !important;
}

@keyframes animate1 {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

.allusfi_animated-btn span:nth-child(2) {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 1px;
  animation: animate2 2s linear infinite;
  animation-delay: 1s;
}

@keyframes animate2 {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(100%);
  }
}

.allusfi_animated-btn span:nth-child(3) {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 1px;
  animation: animate3 2s linear infinite;
}

@keyframes animate3 {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
  }
}

.allusfi_animated-btn span:nth-child(4) {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 1px;
  animation: animate4 2s linear infinite;
  animation-delay: 1s;
}

@keyframes animate4 {
  0% {
    transform: translateY(100%);
  }

  100% {
    transform: translateY(-100%);
  }
}

@media only screen and (max-width: 991px) {

  /* For mobile phones, Tablets, iPads : */
  .allusfi-tabcontent {
    max-height: 500px;
    overflow-y: auto;
  }

  .allusfi_modal-content .allusfi-tabcontent.allusfi_us_general .child-col {
    width: 100%;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  }

  .allusfi_modal-content .allusfi-tabcontent.allusfi_us_advance .child-col {
    width: 100%;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  }

  .allusfi_modal-content .allusfi-tabcontent.allusfi_us_general .child-col:last-child {
    padding: 0px;
    border: none;
  }

  .allusfi-tabcontent .child-col::after {
    display: none;
  }

  .allusfi-tabcontent .between-two-dates input,
  span {
    display: block;
    width: 100%;
  }

  .allusfi-tabcontent .between-two-dates span {
    padding: 10px 0px;
  }

  .allusfi_modal-content .pad-top-40 span {
    display: block;
    text-align: center;
  }

  .allusfi_modal-content .form-field input[name='one-dt'] {
    width: auto;
    display: inline-block;
  }

  .allusfi_modal-content .rst_single_dt {
    width: 90px;
  }

  .allusfi_modal-content .fancy-radio {
    margin-top: 25px;
  }
}

/* Tablet (768px and below) */
@media screen and (max-width: 768px) {
  .allusfi_modal {
    width: 90%;
    padding: 16px;
  }
}

/* Mobile (480px and below) */
@media screen and (max-width: 480px) {
  .allusfi_modal {
    padding-top: 200px;
  }
  
  .allusfi_modal-content {
    width: 95%;
    padding: 12px;
    font-size: 14px;
  }
  .allusfi-tabs button.tablinks{
    width: 100%;
  }
}

/* ===========================
   WooCommerce Tab & Toggle
   =========================== */

/* Toggle switch container */
.allusfi_modal-content .allusfi-wc-toggle {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 26px;
  vertical-align: middle;
}

.allusfi_modal-content .allusfi-wc-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* Slider track */
.allusfi_modal-content .allusfi-wc-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.3s;
  border-radius: 26px;
}

/* Slider knob */
.allusfi_modal-content .allusfi-wc-slider::before {
  content: "";
  position: absolute;
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: #fff;
  transition: 0.3s;
  border-radius: 50%;
}

/* Checked state */
.allusfi_modal-content .allusfi-wc-toggle input:checked + .allusfi-wc-slider {
  background-color: #2271b1;
}

.allusfi_modal-content .allusfi-wc-toggle input:checked + .allusfi-wc-slider::before {
  transform: translateX(24px);
}

/* WooCommerce tab content */
.allusfi_modal-content .allusfi-tabcontent.allusfi_us_woocommerce {
  min-height: 400px;
}

.allusfi_modal-content .allusfi-tabcontent.allusfi_us_woocommerce .child-col::after {
  display: none;
}

.allusfi_modal-content .allusfi-wc-fields {
  transition: opacity 0.3s ease;
}

.allusfi_modal-content .allusfi-tabcontent.allusfi_us_woocommerce select {
  min-width: 200px;
}

.allusfi_modal-content .allusfi-tabcontent.allusfi_us_woocommerce input[type="number"] {
  width: 120px;
}