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

/*

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

*/


@media (min-width: 576px) {
    .sm\:my-6 {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .sm\:my-auto {
        margin-top: auto;
        margin-bottom: auto;
    }

    .sm\:mr-16 {
        margin-right: 4rem;
    }

    .sm\:mt-0 {
        margin-top: 0px;
    }

    .sm\:mr-6 {
        margin-right: 1.5rem;
    }

    .sm\:mr-1 {
        margin-right: 0.25rem;
    }

    .sm\:-mr-6 {
        margin-right: -1.5rem;
    }

    .sm\:ml-2 {
        margin-left: 0.5rem;
    }

    .sm\:mr-0 {
        margin-right: 0px;
    }

    .sm\:mb-0 {
        margin-bottom: 0px;
    }

    .sm\:inline {
        display: inline;
    }

    .sm\:w-1\/2 {
        width: 50%;
    }

    .sm\:flex-none {
        flex: none;
    }

    .sm\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .sm\:pt-4 {
        padding-top: 1rem;
    }

    .before\:sm\:right-7\.5::before {
        content: var(--tw-content);
        right: 1.875rem;
    }

    .before\:sm\:right-7::before {
        content: var(--tw-content);
        right: 1.75rem;
    }

    .before\:sm\:left-3::before {
        content: var(--tw-content);
        left: 0.75rem;
    }
}

@media (min-width: 768px) {
    .md\:mr-0 {
        margin-right: 0px;
    }

    .md\:ml-auto {
        margin-left: auto;
    }

    .md\:mb-0 {
        margin-bottom: 0px;
    }

    .md\:mt-0 {
        margin-top: 0px;
    }

    .md\:-mt-56 {
        margin-top: -14rem;
    }

    .md\:block {
        display: block;
    }

    .md\:w-1\/2 {
        width: 50%;
    }

    .md\:w-8\/12 {
        width: 66.666667%;
    }

    .md\:w-7\/12 {
        width: 58.333333%;
    }

    .md\:w-5\/12 {
        width: 41.666667%;
    }

    .md\:w-4\/12 {
        width: 33.333333%;
    }

    .md\:w-6\/12 {
        width: 50%;
    }

    .md\:w-1\/12 {
        width: 8.333333%;
    }

    .md\:w-11\/12 {
        width: 91.666667%;
    }

    .md\:flex-none {
        flex: none;
    }

    .md\:flex-0 {
        flex: 0 0 auto;
    }

    .md\:scale-70 {
        --tw-scale-x: .7;
        --tw-scale-y: .7;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }

    .md\:pr-4 {
        padding-right: 1rem;
    }
}

@media (max-width: 768px) {
    .md-max\:w-full {
        width: 100%;
    }
}

@media (min-width: 992px) {
    .lg\:absolute {
        position: absolute;
    }

    .lg\:right-0 {
        right: 0px;
    }

    .lg\:left-auto {
        left: auto;
    }

    .lg\:float-right {
        float: right;
    }

    .lg\:mt-2 {
        margin-top: 0.5rem;
    }

    .lg\:mb-0 {
        margin-bottom: 0px;
    }

    .lg\:mt-0 {
        margin-top: 0px;
    }

    .lg\:ml-0 {
        margin-left: 0px;
    }

    .lg\:-mt-48 {
        margin-top: -12rem;
    }

    .lg\:ml-12 {
        margin-left: 3rem;
    }

    .lg\:-mt-6 {
        margin-top: -1.5rem;
    }

    .lg\:block {
        display: block;
    }

    .lg\:flex {
        display: flex;
    }

    .lg\:hidden {
        display: none;
    }

    .lg\:w-7\/12 {
        width: 58.333333%;
    }

    .lg\:w-1\/2 {
        width: 50%;
    }

    .lg\:w-5\/12 {
        width: 41.666667%;
    }

    .lg\:w-2\/3 {
        width: 66.666667%;
    }

    .lg\:w-1\/3 {
        width: 33.333333%;
    }

    .lg\:w-full {
        width: 100%;
    }

    .lg\:w-4\/12 {
        width: 33.333333%;
    }

    .lg\:w-8\/12 {
        width: 66.666667%;
    }

    .lg\:max-w-120 {
        max-width: 30rem;
    }

    .lg\:flex-none {
        flex: none;
    }

    .lg\:flex-0 {
        flex: 0 0 auto;
    }

    .lg\:basis-auto {
        flex-basis: auto;
    }

    .lg\:cursor-pointer {
        cursor: pointer;
    }

    .lg\:flex-row {
        flex-direction: row;
    }

    .lg\:flex-nowrap {
        flex-wrap: nowrap;
    }

    .lg\:justify-start {
        justify-content: flex-start;
    }

    .lg\:justify-end {
        justify-content: flex-end;
    }

    .lg\:justify-between {
        justify-content: space-between;
    }

    .lg\:px-2 {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .lg\:pt-0 {
        padding-top: 0px;
    }

    .lg\:text-left {
        text-align: left;
    }

    .lg\:text-right {
        text-align: right;
    }

    .lg\:shadow-soft-3xl {
        --tw-shadow: 0 8px 26px -4px hsla(0, 0%, 8%, .15), 0 8px 9px -5px hsla(0, 0%, 8%, .06);
        --tw-shadow-colored: 0 8px 26px -4px var(--tw-shadow-color), 0 8px 9px -5px var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    }

    .lg\:transition-colors {
        transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms;
    }

    .lg\:duration-300 {
        transition-duration: 300ms;
    }

    .lg\:ease-soft {
        transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    .before\:lg\:-ml-px::before {
        content: var(--tw-content);
        margin-left: -1px;
    }

    .before\:lg\:-mr-px::before {
        content: var(--tw-content);
        margin-right: -1px;
    }

    .lg\:hover\:text-white\/75:hover {
        color: rgb(255 255 255 / 0.75);
    }
}

@media (max-width: 992px) {
    .lg-max\:mt-6 {
        margin-top: 1.5rem;
    }

    .lg-max\:max-h-0 {
        max-height: 0px;
    }

    .lg-max\:max-h-54 {
        max-height: 13.5rem;
    }

    .lg-max\:overflow-hidden {
        overflow: hidden;
    }

    .lg-max\:bg-white {
        --tw-bg-opacity: 1;
        background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    }

    .lg-max\:text-slate-700 {
        --tw-text-opacity: 1;
        color: rgb(52 71 103 / var(--tw-text-opacity));
    }

    .lg-max\:opacity-0 {
        opacity: 0;
    }
}

@media (min-width: 1200px) {
    .xl\:left-0 {
        left: 0px;
    }

    .xl\:right-0 {
        right: 0px;
    }

    .xl\:left-\[18\%\] {
        left: 18%;
    }

    .xl\:ml-68\.5 {
        margin-left: 17.125rem;
    }

    .xl\:ml-68 {
        margin-left: 17rem;
    }

    .xl\:mb-0 {
        margin-bottom: 0px;
    }

    .xl\:mr-68\.5 {
        margin-right: 17.125rem;
    }

    .xl\:mr-68 {
        margin-right: 17rem;
    }

    .xl\:ml-auto {
        margin-left: auto;
    }

    .xl\:mr-12 {
        margin-right: 3rem;
    }

    .xl\:ml-4 {
        margin-left: 1rem;
    }

    .xl\:hidden {
        display: none;
    }

    .xl\:w-1\/4 {
        width: 25%;
    }

    .xl\:w-1\/2 {
        width: 50%;
    }

    .xl\:w-4\/12 {
        width: 33.333333%;
    }

    .xl\:w-3\/12 {
        width: 25%;
    }

    .xl\:flex-none {
        flex: none;
    }

    .xl\:translate-x-0 {
        --tw-translate-x: 0px;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }

    .xl\:scale-60 {
        --tw-scale-x: .6;
        --tw-scale-y: .6;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }

    @-webkit-keyframes fade-up {
        from {
            opacity: 0;
            transform: translateY(100%);
        }

        to {
            opacity: 1;
        }
    }

    @keyframes fade-up {
        from {
            opacity: 0;
            transform: translateY(100%);
        }

        to {
            opacity: 1;
        }
    }

    .xl\:animate-fade-up {
        -webkit-animation: fade-up 1.5s both;
        animation: fade-up 1.5s both;
    }

    .xl\:bg-transparent {
        background-color: transparent;
    }

    .xl\:bg-white {
        --tw-bg-opacity: 1;
        background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    }

    .xl\:p-2\.5 {
        padding: 0.625rem;
    }

    .xl\:p-2 {
        padding: 0.5rem;
    }

    .xl\:px-12 {
        padding-left: 3rem;
        padding-right: 3rem;
    }

    .xl\:text-8xl {
        font-size: 5rem;
        line-height: 1;
    }
}

@media (max-width: 1200px) {
    .xl-max\:pointer-events-none {
        pointer-events: none;
    }

    .xl-max\:cursor-not-allowed {
        cursor: not-allowed;
    }

    .xl-max\:border-0 {
        border-width: 0px;
    }

    .xl-max\:bg-gradient-to-tl {
        background-image: linear-gradient(to top left, var(--tw-gradient-stops));
    }

    .xl-max\:from-purple-700 {
        --tw-gradient-from: #7928ca;
        --tw-gradient-to: rgb(121 40 202 / 0);
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    }

    .xl-max\:to-pink-500 {
        --tw-gradient-to: #ff0080;
    }

    .xl-max\:text-white {
        --tw-text-opacity: 1;
        color: rgb(255 255 255 / var(--tw-text-opacity));
    }

    .xl-max\:opacity-65 {
        opacity: 0.65;
    }
}
/*
 * 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.
 *




 */

.best_in_place {
    /* hand cursor */
    cursor: pointer;
    /* dashed bottom line */
    /* border-bottom: 1px dashed #344767; */
}

body {
    background-color: #f8f9fe;
    -webkit-font-smoothing: antialiased;
}

a {
    letter-spacing: -0.025rem;
}

hr {
    margin: 1rem 0;
    opacity: 0.25;
}

svg {
    display: inline;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: .5rem;
    color: #344767;
}

h1,
h2,
h3,
h4 {
    letter-spacing: -0.05rem;
}

h1,
h2,
h3 {
    font-weight: 700;
}

h4,
h5,
h6 {
    font-weight: 600;
}

h1 {
    font-size: 3rem;
    line-height: 1.25;
}

h2 {
    font-size: 2.25rem;
    line-height: 1.3;
}

h3 {
    font-size: 1.875rem;
    line-height: 1.375;
}

h4 {
    font-size: 1.5rem;
    line-height: 1.375;
}

h5 {
    font-size: 1.25rem;
    line-height: 1.375;
}

h6 {
    font-size: 1rem;
    line-height: 1.625;
}

.w-5 {
    width: 1.25rem;
}