@import "base/fonts.css";

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

@import "fontawesome/fontawesome.css";
@import "fontawesome/light.css";
@import "fontawesome/regular.css";
@import "fontawesome/solid.css";
@import "fontawesome/brands.css";

@import "layout/nav-menu.css";
@import "layout/panorama.css";

@import "elements/button.css";
@import "elements/form.css";
@import "elements/tabs.css";
@import "elements/timeline.css";
@import "elements/notification.css";

@import "libraries/modal.css";
@import "libraries/swiper.css";
@import "libraries/dropzone.css";
@import "libraries/sweetalert2.css";

/* Misc styling */

.font-handwritten {
    font-family: 'Sacramento';
}

.text-xxs {
    font-size: .6rem;
}

.box {
    @apply bg-white rounded shadow;
}

.gradient {
    background-image: linear-gradient(270deg, #FFB800 0%, #FF8600 100%);
}

.js-toggle-trigger .fa-chevron-right {
    @apply transform duration-200;
}

.js-toggle-trigger.is-active .fa-chevron-right {
    @apply rotate-90;
}

.play-icon {
    @apply absolute bg-primary rounded-full text-white block w-12 h-12 flex items-center justify-center shadow;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);

    &--large {
        @apply w-24 h-24;

        i {
            @apply text-3xl;
            margin-left: 4px;
        }

    }

}

.ribbon {
    @apply block absolute top-0 right-0 mr-4 z-10 bg-primary text-white px-2 py-3 text-center text-xs leading-none;

    &-icon {
        @apply block text-lg leading-none mb-1;
    }

    &-label {
        @apply text-xxs uppercase font-medium;
    }

    &:before,
    &:after {
        content: "";
        position: absolute;
        bottom: -20px;
        width: 0;
        height: 0;
    }

    &:before {
        left: 0;
        border-right: 30px solid transparent;
        border-top: 20px solid #FFB600;
    }

    &:after {
        right: 0;
        border-left: 30px solid transparent;
        border-top: 20px solid #FFB600;
    }

}

/* content styling */

.content {

    p {
        @apply mb-4;
    }

    ul {
        @apply mb-4;

        li {
            @apply ml-8 list-disc;
        }

    }

    ol {
        @apply mb-4;

        li {
            @apply ml-8 list-decimal;
        }

    }

    a:not(.button-primary) {
        @apply text-primary;

        &:hover {
            @apply text-secondary;
        }

    }

    h1, h2, h3, h4 {
        @apply font-display text-xl font-semibold mb-2;
    }

}

/* Certificate styling */

html {
    min-height: 100vh;
}

body.body-certificate {
    background: url('../images/bg-certificate.jpg') 120% 100% no-repeat;
    background-size: 640px 640px;
    min-height: 100vh;
}

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

      .bg-gray-700 .mr-6.text-gray-500{
          display: none;
      }
}