@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
  /* line 8, app/assets/stylesheets/application.tailwind.css */
  .btn-grey {
    @apply bg-gray-200 font-extrabold py-2 px-4 rounded-full cursor-pointer;
  }
  /* line 12, app/assets/stylesheets/application.tailwind.css */
  .btn-yellow {
    @apply font-extrabold py-4 px-6 bg-yellow-300 cursor-pointer shadow-lg hover:bg-yellow-400 rounded-2xl border-blue-900 border-2;
  }
  /* line 16, app/assets/stylesheets/application.tailwind.css */
  .btn-blue {
    @apply font-extrabold py-4 px-6 bg-blue-900 cursor-pointer shadow-lg hover:bg-blue-700 rounded-2xl text-white;
  }
  /* line 20, app/assets/stylesheets/application.tailwind.css */
  .form-input {
    @apply w-full block border-blue-900 rounded-2xl border-2 mb-5 text-2xl;
  }
  /* line 24, app/assets/stylesheets/application.tailwind.css */
  .form-label {
    @apply block text-base mb-1 font-bold;
  }
  /* line 28, app/assets/stylesheets/application.tailwind.css */
  .color-picker {
    @apply border-blue-900 border-4 mb-5;
  }
}

/* line 1, app/assets/stylesheets/custom.scss */
.splash-bg {
  background-image: url(/assets/01-75f3b7796f44e09bb098fabd64d036fd90df58d6e57685a7b888820efad3e896.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  height: 90vh;
}

/* For the modal */
/* line 10, app/assets/stylesheets/custom.scss */
.modal-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(37, 41, 55, 0.8);
}

/* line 19, app/assets/stylesheets/custom.scss */
.modal-close {
  position: fixed;
  top: 0;
  right: 0;
  padding: 20px 25px;
  font-weight: 700;
  cursor: pointer;
  font-size: 20px;
}

/* line 29, app/assets/stylesheets/custom.scss */
.modal-content {
  position: fixed;
  top: 25%;
  left: 50%;
  max-width: 1500px;
  width: 90%;
  transform: translate(-50%, -25%);
  background-color: #fff;
  padding: 5%;
  /* border-radius: 5px; */
  text-align: left;
}

/* line 42, app/assets/stylesheets/custom.scss */
.hidden {
  display: none;
}

/* line 46, app/assets/stylesheets/custom.scss */
.open-modal {
  display: block;
}

/* For the modal end */
/* for the slide side menu */
/* line 55, app/assets/stylesheets/custom.scss */
header #menu-toggle {
  z-index: 3;
  position: fixed;
  top: 20px;
  right: 20px;
}

/* line 62, app/assets/stylesheets/custom.scss */
#menu {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  transition: transform 0.5s ease;
  z-index: 2;
}

/* line 71, app/assets/stylesheets/custom.scss */
.closed {
  transform: translateX(100%);
}

/* line 75, app/assets/stylesheets/custom.scss */
.open {
  transform: none;
}

/* for the slide side menu end */
/* line 81, app/assets/stylesheets/custom.scss */
.post-line:first-child {
  display: none;
}

/* for the Trix editor */
/* line 86, app/assets/stylesheets/custom.scss */
.trix-button-group--file-tools {
  display: none !important;
}

/* custom css */
/* line 91, app/assets/stylesheets/custom.scss */
.shadow {
  box-shadow: none;
}

/* line 95, app/assets/stylesheets/custom.scss */
input[type="color"]::-moz-color-swatch {
  border: none;
}

/* line 99, app/assets/stylesheets/custom.scss */
input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

/* line 103, app/assets/stylesheets/custom.scss */
input[type="color"]::-webkit-color-swatch {
  border: none;
}

/* line 107, app/assets/stylesheets/custom.scss */
.background {
  background-color: #f3f4f6 !important;
}

@media (max-width: 640px) {
  /* line 113, app/assets/stylesheets/custom.scss */
  .hide {
    display: none;
  }
}