/* Responsive utility classes similar to TailwindCSS */

/* Hide element */
.hidden {
    display: none;
}

/* Make element invisible but still take up space */
.invisible {
    visibility: hidden;
}

/* Make element visible */
.visible {
    visibility: visible;
}

.flex {
    display: flex;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

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

.px-auto {
    padding-left: auto;
    padding-right: auto;
}

.py-auto {
    padding-top: auto;
    padding-bottom: auto;
}

.row {
    flex-direction: row;
}

.row-reverse {
    flex-direction: row-reverse;
}

.column {
    flex-direction: column;
}

.column-reverse {
    flex-direction: column-reverse;
}

/* Display block from small breakpoint (640px) and above */
@media only screen and (max-width: 767px) {
    .sm\:block {
        display: block !important;
    }

    .sm\:inline {
        display: inline !important;
    }

    .sm\:inline-block {
        display: inline-block !important;
    }

    .sm\:flex {
        display: flex !important;
    }

    .sm\:hidden {
        display: none !important;
    }

    .sm\:visible {
        visibility: visible !important;
    }

    .sm\:row {
        flex-direction: row !important;
    }

    .sm\:column {
        flex-direction: column !important;
    }

    .sm\:row-reverse {
        flex-direction: row-reverse !important;
    }

    .sm\:column-reverse {
        flex-direction: column-reverse !important;
    }

    .sm\:mx-auto {
        margin-left: auto !important;
        margin-right: auto !important;
    }

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

    .sm\:px-auto {
        padding-left: auto !important;
        padding-right: auto !important;
    }

    .sm\:py-auto {
        padding-top: auto !important;
        padding-bottom: auto !important;
    }
}

/* Display block from medium breakpoint (768px) and above */
@media only screen and (min-width: 768px) {
    .md\:block {
        display: block;
    }

    .md\:inline {
        display: inline;
    }

    .md\:inline-block {
        display: inline-block;
    }

    .md\:flex {
        display: flex;
    }

    .md\:hidden {
        display: none;
    }

    .md\:visible {
        visibility: visible;
    }

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

    .md\:column {
        flex-direction: column;
    }

    .md\:row-reverse {
        flex-direction: row-reverse;
    }

    .md\:column-reverse {
        flex-direction: column-reverse;
    }

    .md\:mx-auto {
        margin-left: auto;
        margin-right: auto;
    }

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

    .md\:px-auto {
        padding-left: auto;
        padding-right: auto;
    }

    .md\:py-auto {
        padding-top: auto;
        padding-bottom: auto;
    }
}

/* Display block from large breakpoint (1024px) and above */
@media only screen and (min-width: 1024px) {
    .lg\:block {
        display: block;
    }

    .lg\:inline {
        display: inline;
    }

    .lg\:inline-block {
        display: inline-block;
    }

    .lg\:flex {
        display: flex;
    }

    .lg\:hidden {
        display: none;
    }

    .lg\:visible {
        visibility: visible;
    }

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

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

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

    .lg\:column-reverse {
        flex-direction: column-reverse;
    }

    .lg\:mx-auto {
        margin-left: auto;
        margin-right: auto;
    }

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

    .lg\:px-auto {
        padding-left: auto;
        padding-right: auto;
    }

    .lg\:py-auto {
        padding-top: auto;
        padding-bottom: auto;
    }
}

/* Display block from extra large breakpoint (1280px) and above */
@media only screen and (min-width: 1280px) {
    .xl\:block {
        display: block;
    }

    .xl\:inline {
        display: inline;
    }

    .xl\:inline-block {
        display: inline-block;
    }

    .xl\:flex {
        display: flex;
    }

    .xl\:hidden {
        display: none;
    }

    .xl\:visible {
        visibility: visible;
    }

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

    .xl\:column {
        flex-direction: column;
    }

    .xl\:row-reverse {
        flex-direction: row-reverse;
    }

    .xl\:column-reverse {
        flex-direction: column-reverse;
    }

    .xl\:mx-auto {
        margin-left: auto;
        margin-right: auto;
    }

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

    .xl\:px-auto {
        padding-left: auto;
        padding-right: auto;
    }

    .xl\:py-auto {
        padding-top: auto;
        padding-bottom: auto;
    }
}