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

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
@layer components {
  .tab-buttons>li>button.active {
    @apply outline-none bg-white text-blue-700;
  }
}
/*
 * 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.
 *


 */

.tangerine {
    font-family: 'Tangerine', cursive;
}

label.required::before, legend.required::before {
    content: "*";
    padding-right: 3px;
}

.booklet-hover {
    filter: drop-shadow( 0px 3px 9px rgba(0, 0, 0, 0.3));
    transform-style: preserve-3d;
    box-sizing: border-box;
    margin: 30px 10px 10px;
    perspective: 1200px;
}

.booklet-hover svg {
    filter: drop-shadow( 0px 1px 2px rgba(0, 0, 0, 0.2));
}

.booklet-hover:hover {
    filter: drop-shadow( 0px 3px 17px rgba(0, 0, 0, 0.5));
}

.booklet-hover:hover svg {
    transform: rotateY(-20deg) rotateZ(0deg);
    filter: drop-shadow( 3px 0 12px rgba(0, 0, 0, 0.6));
}

.field_with_errors input {
    border: 1px solid red;
    box-shadow: 0 0 2px 0 red;
}

.carousel input[type='radio'] {
    display: none;
}

.carousel-open:checked+.carousel-item {
    position: static;
    opacity: 100;
    min-height: 60vh;
    visibility: visible;
}

.carousel-item {
    transition: opacity 0.6s ease-out;
}

/*
#carousel-1:checked~.control-1,
#carousel-2:checked~.control-2,
#carousel-3:checked~.control-3 {
display: block;
}
*/
.carousel-indicators {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: -2em;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 10;
}

.carousel-indicators li {
    text-shadow: 0 3px 9px rgb(255, 255, 0);
}

#carousel-1:checked~.carousel-indicators li:nth-child(1) .carousel-bullet,
#carousel-2:checked~.carousel-indicators li:nth-child(2) .carousel-bullet,
#carousel-3:checked~.carousel-indicators li:nth-child(3) .carousel-bullet {
    color: #2b6cb0;
    text-shadow: 0 3px 9px rgb(0, 170, 255);
    /*Set to match the Tailwind colour you want the active one to be */
}