.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

:root {
    --tw-colors-ant-primary: #1677ff;
    --tw-colors-ant-success: #52c41a;

    --tw-colors-ant-text-base: #000000d9;
    --tw-colors-ant-text-secondary: #00000073;

    --tw-colors-ant-border: #f0f0f0;

    --tw-colors-ant-bg-container: #ffffff;
    --tw-colors-ant-bg-layout: #f5f5f5;
}

body {
    min-height: max(884px, 100dvh);
    font-family: "Inter", sans-serif;
}

.font-body-md,
.font-body-lg,
.font-headline-md,
.font-headline-lg,
.font-display-level,
.font-label-caps {
    font-family: "Inter", sans-serif;
}

.font-display-level {
    font-weight: 500;
    letter-spacing: -0.025em;
}
 
.text-ant-primary {
    color: var(--tw-colors-ant-primary);
}

.text-ant-success {
    color: var(--tw-colors-ant-success);
}

.text-ant-text-base {
    color: var(--tw-colors-ant-text-base);
}

.text-ant-text-secondary {
    color: var(--tw-colors-ant-text-secondary);
}

.bg-ant-primary {
    background-color: var(--tw-colors-ant-primary);
}

.bg-ant-success {
    background-color: var(--tw-colors-ant-success);
}

.bg-ant-bg-container {
    background-color: var(--tw-colors-ant-bg-container);
}

.bg-ant-bg-layout {
    background-color: var(--tw-colors-ant-bg-layout);
}

.border-ant-border {
    border-color: var(--tw-colors-ant-border);
}

.ant-divider {
    margin: 24px 0;
    border-top: 1px solid var(--tw-colors-ant-border);
}


/* =========================================================
    Cards
    ========================================================= */

.shadow-ant {
    box-shadow:
        0 1px 2px 0 rgba(0, 0, 0, 0.03),
        0 1px 6px -1px rgba(0, 0, 0, 0.02),
        0 2px 4px 0 rgba(0, 0, 0, 0.02);
}

.shadow-ant-hover {
    box-shadow:
        0 2px 4px 0 rgba(0, 0, 0, 0.02),
        0 4px 16px -1px rgba(0, 0, 0, 0.04),
        0 8px 12px 0 rgba(0, 0, 0, 0.02);
}


/* =========================================================
    Mobile safe area
    ========================================================= */

.pb-safe {
    padding-bottom: env(safe-area-inset-bottom);
}

/* =========================================================
   SLIDE
   ========================================================= */

.slide-container {
    width: 100vw;
    height: 100vh;

    padding: 10px;

    overflow: hidden;
}


.slide-grid {
    width: 100%;
    height: 100%;

    display: grid;

    gap: 10px;

    min-width: 0;
    min-height: 0;
}


/* =========================================================
   2 × 2
   ========================================================= */

.slide-grid-2x2 {

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    grid-template-rows:
        repeat(2, minmax(0, 1fr));

}


/* =========================================================
   3 × 2
   ========================================================= */

.slide-grid-3x2 {

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    grid-template-rows:
        repeat(2, minmax(0, 1fr));

}


/* =========================================================
   3 × 3
   ========================================================= */

.slide-grid-3x3 {

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    grid-template-rows:
        repeat(3, minmax(0, 1fr));

}


/*
 * Cada Web Component ocupa
 * toda a célula disponível.
 */
.slide-grid>card-rio {

    display: block;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

}


/* =========================================================
   TOOLBAR
   ========================================================= */

.slide-toolbar {

    transform-origin: top center;

}


/* =========================================================
   RESPONSIVO
   ========================================================= */

@media (max-width: 900px) {

    .slide-grid-3x2,
    .slide-grid-3x3 {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }

}


@media (max-width: 600px) {

    .slide-container {

        padding: 5px;

    }


    .slide-grid,
    .slide-grid-2x2,
    .slide-grid-3x2,
    .slide-grid-3x3 {

        grid-template-columns: 1fr;

        grid-template-rows: none;

        overflow-y: auto;

    }

}