@tailwind base;
@tailwind components;
@tailwind utilities;

html, body {
   overflow-x: hidden;
 }
body {
   width:100%;
 }

@layer components {
  .btn-primary {
    @apply py-3 px-9 bg-red text-white font-semibold text-xl rounded-lg cursor-pointer;
  }

  .btn-pay {
    @apply bg-yellow text-black font-semibold py-5 px-12 text-2xl md:text-3xl cursor-pointer whitespace-nowrap;
    border-radius: 3rem;
  }

  .btn-social-share-lg {
    @apply w-36 h-12  bg-lightgray text-darkbrown text-lg rounded-2xl cursor-pointer font-bold flex;
  }

  .btn-social-share-lg .icon {
    @apply w-10;
  }

   .btn-social-share-lg .label {
    @apply m-2
  }

  .btn-social-share-sm {
    @apply w-28 h-10 py-1 px-4 bg-lightgray text-darkbrown text-sm rounded-2xl cursor-pointer font-bold flex;
  }

  .btn-social-share-sm .icon {
    @apply w-7;
  }

  .btn-social-share-sm .label {
    @apply m-1.5
  }

  input[type=text], input[type=email] {
    @apply block w-80 p-4 rounded-xl my-2 focus:ring-green focus:border-green text-xl;
  }

  input[type=checkbox] {
    @apply focus:ring-green focus:border-green
  }

  .mailer {
    @apply bg-beige p-10 max-w-4xl m-auto rounded-2xl mt-10;
  }

  .mailer p {
    @apply my-4;
  }

  .mailer a[href] {
    @apply text-green;
  }

  .help-open-extra-padding {
    @apply pb-72 xl:pb-0;
  }
}

.field_with_errors input[type=text], .field_with_errors input[type=email] {
   border: 1px solid #e2132c;
}

input[type="radio"], input[type="submit"], button {
  transition: background .2s,
  transform .2s;
}


input[type="radio"]:checked {
  transform: scale(1.2);
}

input[type="radio"]:hover {
  transform: scale(1.4);
}

input[type="submit"]:hover, button:hover  {
  transform: scale(1.1);
}


.dashed-divider  {
  width: 1px;
  @apply absolute left-1/2 top-0;
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='black' stroke-width='2' stroke-dasharray='6%2c12' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
}

/* share this style override */
.sharethis-container .st-btn {
  display: block !important;
  margin: 4px;
  width: 120px !important;
}

.sharethis-inline-share-buttons {
  bottom: 40px !important;
  left: -10px !important;
  position: absolute;
}

.st-label {
  display: inline-block !important;
}


.fade-in {
  display: block;
  animation: fade-in 0.5s;
}

.fade-out {
  animation: fade-out 0.5s;
}


@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.swiper-button-prev::after,  .swiper-button-next::after {
  @apply text-beige hidden md:block;
}

.swiper-pagination-bullet {
  background: white !important;
}

#paywall-cloud {
  @apply bg-beige;
}

@media (min-width: 1024px) {
  #paywall-cloud {
    background: linear-gradient(transparent 0%, rgb(247, 245, 233) 10%, rgb(247, 245, 233) 96%, transparent 100%);
  }
}

.dash-list {
  list-style-type: '– ';
}

.tick-list {
  list-style-type: '✔ ';
}
@media print {
  * {
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
   }

  body {
    zoom: 90%;
  }
  .print-pad {
    padding-left: 50px;
    padding-right: 50px;

  }

  .print-page-break {
    page-break-before: always;
  }

  .print-page-break-avoid {
    page-break-inside: avoid;
  }

  table.report-container {
    page-break-after:always;
    border:  0;
  }

  table.report-container td {
    padding: 0;
  }

  thead.report-header {
    display:table-header-group;
  }

  tfoot.report-footer {
    display:table-footer-group;
  }

  .header-info {
    height: 50px;
  }

  .footer-info {
    height: 50px;
  }

  .print-push-footer-to-bottom {
    height: 1000px;
  }
}



/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */