/* ========================================================================== */ /* Flexbox Maps */ /* ========================================================================== */ @import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap"); /* ========================================================================== */ /* Reset + Base */ /* ========================================================================== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } body { font-family: "Nunito", sans-serif; font-size: 1.1rem; line-height: 1.3; color: #212529; background: #ffffff; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img, svg, video, canvas { display: block; max-width: 100%; height: auto; } /* ========================================================================== */ /* Typography Utilities */ /* ========================================================================== */ .text-xs { font-size: 0.75rem; } .text-sm { font-size: 0.875rem; } .text-base { font-size: 1.1rem; } .text-lg { font-size: 1.35rem; } .text-xl { font-size: 1.8rem; } .text-xxl { font-size: 2.2rem; } .fw-light { font-weight: 300; } .fw-normal { font-weight: 400; } .fw-medium { font-weight: 500; } .fw-semibold { font-weight: 600; } .fw-bold { font-weight: 700; } .lh-tight { line-height: 1; } .lh-normal { line-height: 1.3; } .lh-heading { line-height: 1.5; } .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .text-uppercase { text-transform: uppercase; } .text-lowercase { text-transform: lowercase; } .text-capitalize { text-transform: capitalize; } .text-underline { text-decoration: underline; } .text-line-through { text-decoration: line-through; } .text-no-decoration { text-decoration: none; } /* ========================================================================== */ /* Color Utilities */ /* ========================================================================== */ .text-primary { color: #aa0b3d !important; } .bg-primary { background-color: #aa0b3d !important; } .border-primary { border-color: #aa0b3d !important; } .text-primary-alt { color: rgba(170, 11, 61, 0.6588235294) !important; } .bg-primary-alt { background-color: rgba(170, 11, 61, 0.6588235294) !important; } .border-primary-alt { border-color: rgba(170, 11, 61, 0.6588235294) !important; } .text-alt { color: rgba(181, 69, 24, 0.5882352941) !important; } .bg-alt { background-color: rgba(181, 69, 24, 0.5882352941) !important; } .border-alt { border-color: rgba(181, 69, 24, 0.5882352941) !important; } .text-secondary { color: #333333 !important; } .bg-secondary { background-color: #333333 !important; } .border-secondary { border-color: #333333 !important; } .text-success { color: #34b97b !important; } .bg-success { background-color: #34b97b !important; } .border-success { border-color: #34b97b !important; } .text-warning { color: #ffc107 !important; } .bg-warning { background-color: #ffc107 !important; } .border-warning { border-color: #ffc107 !important; } .text-danger { color: #dc3545 !important; } .bg-danger { background-color: #dc3545 !important; } .border-danger { border-color: #dc3545 !important; } .text-info { color: #0dcaf0 !important; } .bg-info { background-color: #0dcaf0 !important; } .border-info { border-color: #0dcaf0 !important; } .text-light { color: #e5e5e5 !important; } .bg-light { background-color: #e5e5e5 !important; } .border-light { border-color: #e5e5e5 !important; } .text-dark { color: #212529 !important; } .bg-dark { background-color: #212529 !important; } .border-dark { border-color: #212529 !important; } .text-white { color: #ffffff !important; } .bg-white { background-color: #ffffff !important; } .border-white { border-color: #ffffff !important; } .text-black { color: #000000 !important; } .bg-black { background-color: #000000 !important; } .border-black { border-color: #000000 !important; } .text-muted { color: #c7c7c7 !important; } .bg-muted { background-color: #c7c7c7 !important; } .border-muted { border-color: #c7c7c7 !important; } .text-gray { color: #6c757d !important; } .bg-gray { background-color: #6c757d !important; } .border-gray { border-color: #6c757d !important; } .text-accent-white { color: #f7f7f7 !important; } .bg-accent-white { background-color: #f7f7f7 !important; } .border-accent-white { border-color: #f7f7f7 !important; } .text-accent { color: #08bbbb !important; } .bg-accent { background-color: #08bbbb !important; } .border-accent { border-color: #08bbbb !important; } .text-transparent { color: transparent !important; } .bg-transparent { background-color: transparent !important; } .border-transparent { border-color: transparent !important; } /* ========================================================================== */ /* Spacing Utilities (Margin / Padding) */ /* ========================================================================== */ .m-0 { margin: 0 !important; } .mt-0 { margin-top: 0 !important; } .mr-0 { margin-right: 0 !important; } .mb-0 { margin-bottom: 0 !important; } .ml-0 { margin-left: 0 !important; } .mx-0 { margin-left: 0 !important; margin-right: 0 !important; } .my-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .p-0 { padding: 0 !important; } .pt-0 { padding-top: 0 !important; } .pr-0 { padding-right: 0 !important; } .pb-0 { padding-bottom: 0 !important; } .pl-0 { padding-left: 0 !important; } .px-0 { padding-left: 0 !important; padding-right: 0 !important; } .py-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .m-1 { margin: 0.25rem !important; } .mt-1 { margin-top: 0.25rem !important; } .mr-1 { margin-right: 0.25rem !important; } .mb-1 { margin-bottom: 0.25rem !important; } .ml-1 { margin-left: 0.25rem !important; } .mx-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; } .my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; } .p-1 { padding: 0.25rem !important; } .pt-1 { padding-top: 0.25rem !important; } .pr-1 { padding-right: 0.25rem !important; } .pb-1 { padding-bottom: 0.25rem !important; } .pl-1 { padding-left: 0.25rem !important; } .px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; } .py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; } .m-2 { margin: 0.5rem !important; } .mt-2 { margin-top: 0.5rem !important; } .mr-2 { margin-right: 0.5rem !important; } .mb-2 { margin-bottom: 0.5rem !important; } .ml-2 { margin-left: 0.5rem !important; } .mx-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; } .my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } .p-2 { padding: 0.5rem !important; } .pt-2 { padding-top: 0.5rem !important; } .pr-2 { padding-right: 0.5rem !important; } .pb-2 { padding-bottom: 0.5rem !important; } .pl-2 { padding-left: 0.5rem !important; } .px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; } .py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .m-3 { margin: 1rem !important; } .mt-3 { margin-top: 1rem !important; } .mr-3 { margin-right: 1rem !important; } .mb-3 { margin-bottom: 1rem !important; } .ml-3 { margin-left: 1rem !important; } .mx-3 { margin-left: 1rem !important; margin-right: 1rem !important; } .my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .p-3 { padding: 1rem !important; } .pt-3 { padding-top: 1rem !important; } .pr-3 { padding-right: 1rem !important; } .pb-3 { padding-bottom: 1rem !important; } .pl-3 { padding-left: 1rem !important; } .px-3 { padding-left: 1rem !important; padding-right: 1rem !important; } .py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .m-4 { margin: 1.5rem !important; } .mt-4 { margin-top: 1.5rem !important; } .mr-4 { margin-right: 1.5rem !important; } .mb-4 { margin-bottom: 1.5rem !important; } .ml-4 { margin-left: 1.5rem !important; } .mx-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; } .my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .p-4 { padding: 1.5rem !important; } .pt-4 { padding-top: 1.5rem !important; } .pr-4 { padding-right: 1.5rem !important; } .pb-4 { padding-bottom: 1.5rem !important; } .pl-4 { padding-left: 1.5rem !important; } .px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } .py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .m-5 { margin: 3rem !important; } .mt-5 { margin-top: 3rem !important; } .mr-5 { margin-right: 3rem !important; } .mb-5 { margin-bottom: 3rem !important; } .ml-5 { margin-left: 3rem !important; } .mx-5 { margin-left: 3rem !important; margin-right: 3rem !important; } .my-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; } .p-5 { padding: 3rem !important; } .pt-5 { padding-top: 3rem !important; } .pr-5 { padding-right: 3rem !important; } .pb-5 { padding-bottom: 3rem !important; } .pl-5 { padding-left: 3rem !important; } .px-5 { padding-left: 3rem !important; padding-right: 3rem !important; } .py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; } /* Responsive spacing */ @media (min-width: 576px) { .sm-m-0 { margin: 0 !important; } .sm-mt-0 { margin-top: 0 !important; } .sm-mr-0 { margin-right: 0 !important; } .sm-mb-0 { margin-bottom: 0 !important; } .sm-ml-0 { margin-left: 0 !important; } .sm-mx-0 { margin-left: 0 !important; margin-right: 0 !important; } .sm-my-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .sm-p-0 { padding: 0 !important; } .sm-pt-0 { padding-top: 0 !important; } .sm-pr-0 { padding-right: 0 !important; } .sm-pb-0 { padding-bottom: 0 !important; } .sm-pl-0 { padding-left: 0 !important; } .sm-px-0 { padding-left: 0 !important; padding-right: 0 !important; } .sm-py-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .sm-m-1 { margin: 0.25rem !important; } .sm-mt-1 { margin-top: 0.25rem !important; } .sm-mr-1 { margin-right: 0.25rem !important; } .sm-mb-1 { margin-bottom: 0.25rem !important; } .sm-ml-1 { margin-left: 0.25rem !important; } .sm-mx-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; } .sm-my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; } .sm-p-1 { padding: 0.25rem !important; } .sm-pt-1 { padding-top: 0.25rem !important; } .sm-pr-1 { padding-right: 0.25rem !important; } .sm-pb-1 { padding-bottom: 0.25rem !important; } .sm-pl-1 { padding-left: 0.25rem !important; } .sm-px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; } .sm-py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; } .sm-m-2 { margin: 0.5rem !important; } .sm-mt-2 { margin-top: 0.5rem !important; } .sm-mr-2 { margin-right: 0.5rem !important; } .sm-mb-2 { margin-bottom: 0.5rem !important; } .sm-ml-2 { margin-left: 0.5rem !important; } .sm-mx-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; } .sm-my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } .sm-p-2 { padding: 0.5rem !important; } .sm-pt-2 { padding-top: 0.5rem !important; } .sm-pr-2 { padding-right: 0.5rem !important; } .sm-pb-2 { padding-bottom: 0.5rem !important; } .sm-pl-2 { padding-left: 0.5rem !important; } .sm-px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; } .sm-py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .sm-m-3 { margin: 1rem !important; } .sm-mt-3 { margin-top: 1rem !important; } .sm-mr-3 { margin-right: 1rem !important; } .sm-mb-3 { margin-bottom: 1rem !important; } .sm-ml-3 { margin-left: 1rem !important; } .sm-mx-3 { margin-left: 1rem !important; margin-right: 1rem !important; } .sm-my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .sm-p-3 { padding: 1rem !important; } .sm-pt-3 { padding-top: 1rem !important; } .sm-pr-3 { padding-right: 1rem !important; } .sm-pb-3 { padding-bottom: 1rem !important; } .sm-pl-3 { padding-left: 1rem !important; } .sm-px-3 { padding-left: 1rem !important; padding-right: 1rem !important; } .sm-py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .sm-m-4 { margin: 1.5rem !important; } .sm-mt-4 { margin-top: 1.5rem !important; } .sm-mr-4 { margin-right: 1.5rem !important; } .sm-mb-4 { margin-bottom: 1.5rem !important; } .sm-ml-4 { margin-left: 1.5rem !important; } .sm-mx-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; } .sm-my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .sm-p-4 { padding: 1.5rem !important; } .sm-pt-4 { padding-top: 1.5rem !important; } .sm-pr-4 { padding-right: 1.5rem !important; } .sm-pb-4 { padding-bottom: 1.5rem !important; } .sm-pl-4 { padding-left: 1.5rem !important; } .sm-px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } .sm-py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .sm-m-5 { margin: 3rem !important; } .sm-mt-5 { margin-top: 3rem !important; } .sm-mr-5 { margin-right: 3rem !important; } .sm-mb-5 { margin-bottom: 3rem !important; } .sm-ml-5 { margin-left: 3rem !important; } .sm-mx-5 { margin-left: 3rem !important; margin-right: 3rem !important; } .sm-my-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; } .sm-p-5 { padding: 3rem !important; } .sm-pt-5 { padding-top: 3rem !important; } .sm-pr-5 { padding-right: 3rem !important; } .sm-pb-5 { padding-bottom: 3rem !important; } .sm-pl-5 { padding-left: 3rem !important; } .sm-px-5 { padding-left: 3rem !important; padding-right: 3rem !important; } .sm-py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; } } @media (min-width: 768px) { .md-m-0 { margin: 0 !important; } .md-mt-0 { margin-top: 0 !important; } .md-mr-0 { margin-right: 0 !important; } .md-mb-0 { margin-bottom: 0 !important; } .md-ml-0 { margin-left: 0 !important; } .md-mx-0 { margin-left: 0 !important; margin-right: 0 !important; } .md-my-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .md-p-0 { padding: 0 !important; } .md-pt-0 { padding-top: 0 !important; } .md-pr-0 { padding-right: 0 !important; } .md-pb-0 { padding-bottom: 0 !important; } .md-pl-0 { padding-left: 0 !important; } .md-px-0 { padding-left: 0 !important; padding-right: 0 !important; } .md-py-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .md-m-1 { margin: 0.25rem !important; } .md-mt-1 { margin-top: 0.25rem !important; } .md-mr-1 { margin-right: 0.25rem !important; } .md-mb-1 { margin-bottom: 0.25rem !important; } .md-ml-1 { margin-left: 0.25rem !important; } .md-mx-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; } .md-my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; } .md-p-1 { padding: 0.25rem !important; } .md-pt-1 { padding-top: 0.25rem !important; } .md-pr-1 { padding-right: 0.25rem !important; } .md-pb-1 { padding-bottom: 0.25rem !important; } .md-pl-1 { padding-left: 0.25rem !important; } .md-px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; } .md-py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; } .md-m-2 { margin: 0.5rem !important; } .md-mt-2 { margin-top: 0.5rem !important; } .md-mr-2 { margin-right: 0.5rem !important; } .md-mb-2 { margin-bottom: 0.5rem !important; } .md-ml-2 { margin-left: 0.5rem !important; } .md-mx-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; } .md-my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } .md-p-2 { padding: 0.5rem !important; } .md-pt-2 { padding-top: 0.5rem !important; } .md-pr-2 { padding-right: 0.5rem !important; } .md-pb-2 { padding-bottom: 0.5rem !important; } .md-pl-2 { padding-left: 0.5rem !important; } .md-px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; } .md-py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .md-m-3 { margin: 1rem !important; } .md-mt-3 { margin-top: 1rem !important; } .md-mr-3 { margin-right: 1rem !important; } .md-mb-3 { margin-bottom: 1rem !important; } .md-ml-3 { margin-left: 1rem !important; } .md-mx-3 { margin-left: 1rem !important; margin-right: 1rem !important; } .md-my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .md-p-3 { padding: 1rem !important; } .md-pt-3 { padding-top: 1rem !important; } .md-pr-3 { padding-right: 1rem !important; } .md-pb-3 { padding-bottom: 1rem !important; } .md-pl-3 { padding-left: 1rem !important; } .md-px-3 { padding-left: 1rem !important; padding-right: 1rem !important; } .md-py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .md-m-4 { margin: 1.5rem !important; } .md-mt-4 { margin-top: 1.5rem !important; } .md-mr-4 { margin-right: 1.5rem !important; } .md-mb-4 { margin-bottom: 1.5rem !important; } .md-ml-4 { margin-left: 1.5rem !important; } .md-mx-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; } .md-my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .md-p-4 { padding: 1.5rem !important; } .md-pt-4 { padding-top: 1.5rem !important; } .md-pr-4 { padding-right: 1.5rem !important; } .md-pb-4 { padding-bottom: 1.5rem !important; } .md-pl-4 { padding-left: 1.5rem !important; } .md-px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } .md-py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .md-m-5 { margin: 3rem !important; } .md-mt-5 { margin-top: 3rem !important; } .md-mr-5 { margin-right: 3rem !important; } .md-mb-5 { margin-bottom: 3rem !important; } .md-ml-5 { margin-left: 3rem !important; } .md-mx-5 { margin-left: 3rem !important; margin-right: 3rem !important; } .md-my-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; } .md-p-5 { padding: 3rem !important; } .md-pt-5 { padding-top: 3rem !important; } .md-pr-5 { padding-right: 3rem !important; } .md-pb-5 { padding-bottom: 3rem !important; } .md-pl-5 { padding-left: 3rem !important; } .md-px-5 { padding-left: 3rem !important; padding-right: 3rem !important; } .md-py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; } } @media (min-width: 992px) { .lg-m-0 { margin: 0 !important; } .lg-mt-0 { margin-top: 0 !important; } .lg-mr-0 { margin-right: 0 !important; } .lg-mb-0 { margin-bottom: 0 !important; } .lg-ml-0 { margin-left: 0 !important; } .lg-mx-0 { margin-left: 0 !important; margin-right: 0 !important; } .lg-my-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .lg-p-0 { padding: 0 !important; } .lg-pt-0 { padding-top: 0 !important; } .lg-pr-0 { padding-right: 0 !important; } .lg-pb-0 { padding-bottom: 0 !important; } .lg-pl-0 { padding-left: 0 !important; } .lg-px-0 { padding-left: 0 !important; padding-right: 0 !important; } .lg-py-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .lg-m-1 { margin: 0.25rem !important; } .lg-mt-1 { margin-top: 0.25rem !important; } .lg-mr-1 { margin-right: 0.25rem !important; } .lg-mb-1 { margin-bottom: 0.25rem !important; } .lg-ml-1 { margin-left: 0.25rem !important; } .lg-mx-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; } .lg-my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; } .lg-p-1 { padding: 0.25rem !important; } .lg-pt-1 { padding-top: 0.25rem !important; } .lg-pr-1 { padding-right: 0.25rem !important; } .lg-pb-1 { padding-bottom: 0.25rem !important; } .lg-pl-1 { padding-left: 0.25rem !important; } .lg-px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; } .lg-py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; } .lg-m-2 { margin: 0.5rem !important; } .lg-mt-2 { margin-top: 0.5rem !important; } .lg-mr-2 { margin-right: 0.5rem !important; } .lg-mb-2 { margin-bottom: 0.5rem !important; } .lg-ml-2 { margin-left: 0.5rem !important; } .lg-mx-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; } .lg-my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } .lg-p-2 { padding: 0.5rem !important; } .lg-pt-2 { padding-top: 0.5rem !important; } .lg-pr-2 { padding-right: 0.5rem !important; } .lg-pb-2 { padding-bottom: 0.5rem !important; } .lg-pl-2 { padding-left: 0.5rem !important; } .lg-px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; } .lg-py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .lg-m-3 { margin: 1rem !important; } .lg-mt-3 { margin-top: 1rem !important; } .lg-mr-3 { margin-right: 1rem !important; } .lg-mb-3 { margin-bottom: 1rem !important; } .lg-ml-3 { margin-left: 1rem !important; } .lg-mx-3 { margin-left: 1rem !important; margin-right: 1rem !important; } .lg-my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .lg-p-3 { padding: 1rem !important; } .lg-pt-3 { padding-top: 1rem !important; } .lg-pr-3 { padding-right: 1rem !important; } .lg-pb-3 { padding-bottom: 1rem !important; } .lg-pl-3 { padding-left: 1rem !important; } .lg-px-3 { padding-left: 1rem !important; padding-right: 1rem !important; } .lg-py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .lg-m-4 { margin: 1.5rem !important; } .lg-mt-4 { margin-top: 1.5rem !important; } .lg-mr-4 { margin-right: 1.5rem !important; } .lg-mb-4 { margin-bottom: 1.5rem !important; } .lg-ml-4 { margin-left: 1.5rem !important; } .lg-mx-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; } .lg-my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .lg-p-4 { padding: 1.5rem !important; } .lg-pt-4 { padding-top: 1.5rem !important; } .lg-pr-4 { padding-right: 1.5rem !important; } .lg-pb-4 { padding-bottom: 1.5rem !important; } .lg-pl-4 { padding-left: 1.5rem !important; } .lg-px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } .lg-py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .lg-m-5 { margin: 3rem !important; } .lg-mt-5 { margin-top: 3rem !important; } .lg-mr-5 { margin-right: 3rem !important; } .lg-mb-5 { margin-bottom: 3rem !important; } .lg-ml-5 { margin-left: 3rem !important; } .lg-mx-5 { margin-left: 3rem !important; margin-right: 3rem !important; } .lg-my-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; } .lg-p-5 { padding: 3rem !important; } .lg-pt-5 { padding-top: 3rem !important; } .lg-pr-5 { padding-right: 3rem !important; } .lg-pb-5 { padding-bottom: 3rem !important; } .lg-pl-5 { padding-left: 3rem !important; } .lg-px-5 { padding-left: 3rem !important; padding-right: 3rem !important; } .lg-py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; } } @media (min-width: 1200px) { .xl-m-0 { margin: 0 !important; } .xl-mt-0 { margin-top: 0 !important; } .xl-mr-0 { margin-right: 0 !important; } .xl-mb-0 { margin-bottom: 0 !important; } .xl-ml-0 { margin-left: 0 !important; } .xl-mx-0 { margin-left: 0 !important; margin-right: 0 !important; } .xl-my-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .xl-p-0 { padding: 0 !important; } .xl-pt-0 { padding-top: 0 !important; } .xl-pr-0 { padding-right: 0 !important; } .xl-pb-0 { padding-bottom: 0 !important; } .xl-pl-0 { padding-left: 0 !important; } .xl-px-0 { padding-left: 0 !important; padding-right: 0 !important; } .xl-py-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .xl-m-1 { margin: 0.25rem !important; } .xl-mt-1 { margin-top: 0.25rem !important; } .xl-mr-1 { margin-right: 0.25rem !important; } .xl-mb-1 { margin-bottom: 0.25rem !important; } .xl-ml-1 { margin-left: 0.25rem !important; } .xl-mx-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; } .xl-my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; } .xl-p-1 { padding: 0.25rem !important; } .xl-pt-1 { padding-top: 0.25rem !important; } .xl-pr-1 { padding-right: 0.25rem !important; } .xl-pb-1 { padding-bottom: 0.25rem !important; } .xl-pl-1 { padding-left: 0.25rem !important; } .xl-px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; } .xl-py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; } .xl-m-2 { margin: 0.5rem !important; } .xl-mt-2 { margin-top: 0.5rem !important; } .xl-mr-2 { margin-right: 0.5rem !important; } .xl-mb-2 { margin-bottom: 0.5rem !important; } .xl-ml-2 { margin-left: 0.5rem !important; } .xl-mx-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; } .xl-my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } .xl-p-2 { padding: 0.5rem !important; } .xl-pt-2 { padding-top: 0.5rem !important; } .xl-pr-2 { padding-right: 0.5rem !important; } .xl-pb-2 { padding-bottom: 0.5rem !important; } .xl-pl-2 { padding-left: 0.5rem !important; } .xl-px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; } .xl-py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .xl-m-3 { margin: 1rem !important; } .xl-mt-3 { margin-top: 1rem !important; } .xl-mr-3 { margin-right: 1rem !important; } .xl-mb-3 { margin-bottom: 1rem !important; } .xl-ml-3 { margin-left: 1rem !important; } .xl-mx-3 { margin-left: 1rem !important; margin-right: 1rem !important; } .xl-my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .xl-p-3 { padding: 1rem !important; } .xl-pt-3 { padding-top: 1rem !important; } .xl-pr-3 { padding-right: 1rem !important; } .xl-pb-3 { padding-bottom: 1rem !important; } .xl-pl-3 { padding-left: 1rem !important; } .xl-px-3 { padding-left: 1rem !important; padding-right: 1rem !important; } .xl-py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .xl-m-4 { margin: 1.5rem !important; } .xl-mt-4 { margin-top: 1.5rem !important; } .xl-mr-4 { margin-right: 1.5rem !important; } .xl-mb-4 { margin-bottom: 1.5rem !important; } .xl-ml-4 { margin-left: 1.5rem !important; } .xl-mx-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; } .xl-my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .xl-p-4 { padding: 1.5rem !important; } .xl-pt-4 { padding-top: 1.5rem !important; } .xl-pr-4 { padding-right: 1.5rem !important; } .xl-pb-4 { padding-bottom: 1.5rem !important; } .xl-pl-4 { padding-left: 1.5rem !important; } .xl-px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } .xl-py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .xl-m-5 { margin: 3rem !important; } .xl-mt-5 { margin-top: 3rem !important; } .xl-mr-5 { margin-right: 3rem !important; } .xl-mb-5 { margin-bottom: 3rem !important; } .xl-ml-5 { margin-left: 3rem !important; } .xl-mx-5 { margin-left: 3rem !important; margin-right: 3rem !important; } .xl-my-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; } .xl-p-5 { padding: 3rem !important; } .xl-pt-5 { padding-top: 3rem !important; } .xl-pr-5 { padding-right: 3rem !important; } .xl-pb-5 { padding-bottom: 3rem !important; } .xl-pl-5 { padding-left: 3rem !important; } .xl-px-5 { padding-left: 3rem !important; padding-right: 3rem !important; } .xl-py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; } } @media (min-width: 1400px) { .xxl-m-0 { margin: 0 !important; } .xxl-mt-0 { margin-top: 0 !important; } .xxl-mr-0 { margin-right: 0 !important; } .xxl-mb-0 { margin-bottom: 0 !important; } .xxl-ml-0 { margin-left: 0 !important; } .xxl-mx-0 { margin-left: 0 !important; margin-right: 0 !important; } .xxl-my-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .xxl-p-0 { padding: 0 !important; } .xxl-pt-0 { padding-top: 0 !important; } .xxl-pr-0 { padding-right: 0 !important; } .xxl-pb-0 { padding-bottom: 0 !important; } .xxl-pl-0 { padding-left: 0 !important; } .xxl-px-0 { padding-left: 0 !important; padding-right: 0 !important; } .xxl-py-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .xxl-m-1 { margin: 0.25rem !important; } .xxl-mt-1 { margin-top: 0.25rem !important; } .xxl-mr-1 { margin-right: 0.25rem !important; } .xxl-mb-1 { margin-bottom: 0.25rem !important; } .xxl-ml-1 { margin-left: 0.25rem !important; } .xxl-mx-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; } .xxl-my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; } .xxl-p-1 { padding: 0.25rem !important; } .xxl-pt-1 { padding-top: 0.25rem !important; } .xxl-pr-1 { padding-right: 0.25rem !important; } .xxl-pb-1 { padding-bottom: 0.25rem !important; } .xxl-pl-1 { padding-left: 0.25rem !important; } .xxl-px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; } .xxl-py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; } .xxl-m-2 { margin: 0.5rem !important; } .xxl-mt-2 { margin-top: 0.5rem !important; } .xxl-mr-2 { margin-right: 0.5rem !important; } .xxl-mb-2 { margin-bottom: 0.5rem !important; } .xxl-ml-2 { margin-left: 0.5rem !important; } .xxl-mx-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; } .xxl-my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } .xxl-p-2 { padding: 0.5rem !important; } .xxl-pt-2 { padding-top: 0.5rem !important; } .xxl-pr-2 { padding-right: 0.5rem !important; } .xxl-pb-2 { padding-bottom: 0.5rem !important; } .xxl-pl-2 { padding-left: 0.5rem !important; } .xxl-px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; } .xxl-py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .xxl-m-3 { margin: 1rem !important; } .xxl-mt-3 { margin-top: 1rem !important; } .xxl-mr-3 { margin-right: 1rem !important; } .xxl-mb-3 { margin-bottom: 1rem !important; } .xxl-ml-3 { margin-left: 1rem !important; } .xxl-mx-3 { margin-left: 1rem !important; margin-right: 1rem !important; } .xxl-my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .xxl-p-3 { padding: 1rem !important; } .xxl-pt-3 { padding-top: 1rem !important; } .xxl-pr-3 { padding-right: 1rem !important; } .xxl-pb-3 { padding-bottom: 1rem !important; } .xxl-pl-3 { padding-left: 1rem !important; } .xxl-px-3 { padding-left: 1rem !important; padding-right: 1rem !important; } .xxl-py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .xxl-m-4 { margin: 1.5rem !important; } .xxl-mt-4 { margin-top: 1.5rem !important; } .xxl-mr-4 { margin-right: 1.5rem !important; } .xxl-mb-4 { margin-bottom: 1.5rem !important; } .xxl-ml-4 { margin-left: 1.5rem !important; } .xxl-mx-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; } .xxl-my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .xxl-p-4 { padding: 1.5rem !important; } .xxl-pt-4 { padding-top: 1.5rem !important; } .xxl-pr-4 { padding-right: 1.5rem !important; } .xxl-pb-4 { padding-bottom: 1.5rem !important; } .xxl-pl-4 { padding-left: 1.5rem !important; } .xxl-px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } .xxl-py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .xxl-m-5 { margin: 3rem !important; } .xxl-mt-5 { margin-top: 3rem !important; } .xxl-mr-5 { margin-right: 3rem !important; } .xxl-mb-5 { margin-bottom: 3rem !important; } .xxl-ml-5 { margin-left: 3rem !important; } .xxl-mx-5 { margin-left: 3rem !important; margin-right: 3rem !important; } .xxl-my-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; } .xxl-p-5 { padding: 3rem !important; } .xxl-pt-5 { padding-top: 3rem !important; } .xxl-pr-5 { padding-right: 3rem !important; } .xxl-pb-5 { padding-bottom: 3rem !important; } .xxl-pl-5 { padding-left: 3rem !important; } .xxl-px-5 { padding-left: 3rem !important; padding-right: 3rem !important; } .xxl-py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; } } @media (min-width: 1600px) { .xxxl-m-0 { margin: 0 !important; } .xxxl-mt-0 { margin-top: 0 !important; } .xxxl-mr-0 { margin-right: 0 !important; } .xxxl-mb-0 { margin-bottom: 0 !important; } .xxxl-ml-0 { margin-left: 0 !important; } .xxxl-mx-0 { margin-left: 0 !important; margin-right: 0 !important; } .xxxl-my-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .xxxl-p-0 { padding: 0 !important; } .xxxl-pt-0 { padding-top: 0 !important; } .xxxl-pr-0 { padding-right: 0 !important; } .xxxl-pb-0 { padding-bottom: 0 !important; } .xxxl-pl-0 { padding-left: 0 !important; } .xxxl-px-0 { padding-left: 0 !important; padding-right: 0 !important; } .xxxl-py-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .xxxl-m-1 { margin: 0.25rem !important; } .xxxl-mt-1 { margin-top: 0.25rem !important; } .xxxl-mr-1 { margin-right: 0.25rem !important; } .xxxl-mb-1 { margin-bottom: 0.25rem !important; } .xxxl-ml-1 { margin-left: 0.25rem !important; } .xxxl-mx-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; } .xxxl-my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; } .xxxl-p-1 { padding: 0.25rem !important; } .xxxl-pt-1 { padding-top: 0.25rem !important; } .xxxl-pr-1 { padding-right: 0.25rem !important; } .xxxl-pb-1 { padding-bottom: 0.25rem !important; } .xxxl-pl-1 { padding-left: 0.25rem !important; } .xxxl-px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; } .xxxl-py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; } .xxxl-m-2 { margin: 0.5rem !important; } .xxxl-mt-2 { margin-top: 0.5rem !important; } .xxxl-mr-2 { margin-right: 0.5rem !important; } .xxxl-mb-2 { margin-bottom: 0.5rem !important; } .xxxl-ml-2 { margin-left: 0.5rem !important; } .xxxl-mx-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; } .xxxl-my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } .xxxl-p-2 { padding: 0.5rem !important; } .xxxl-pt-2 { padding-top: 0.5rem !important; } .xxxl-pr-2 { padding-right: 0.5rem !important; } .xxxl-pb-2 { padding-bottom: 0.5rem !important; } .xxxl-pl-2 { padding-left: 0.5rem !important; } .xxxl-px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; } .xxxl-py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .xxxl-m-3 { margin: 1rem !important; } .xxxl-mt-3 { margin-top: 1rem !important; } .xxxl-mr-3 { margin-right: 1rem !important; } .xxxl-mb-3 { margin-bottom: 1rem !important; } .xxxl-ml-3 { margin-left: 1rem !important; } .xxxl-mx-3 { margin-left: 1rem !important; margin-right: 1rem !important; } .xxxl-my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .xxxl-p-3 { padding: 1rem !important; } .xxxl-pt-3 { padding-top: 1rem !important; } .xxxl-pr-3 { padding-right: 1rem !important; } .xxxl-pb-3 { padding-bottom: 1rem !important; } .xxxl-pl-3 { padding-left: 1rem !important; } .xxxl-px-3 { padding-left: 1rem !important; padding-right: 1rem !important; } .xxxl-py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .xxxl-m-4 { margin: 1.5rem !important; } .xxxl-mt-4 { margin-top: 1.5rem !important; } .xxxl-mr-4 { margin-right: 1.5rem !important; } .xxxl-mb-4 { margin-bottom: 1.5rem !important; } .xxxl-ml-4 { margin-left: 1.5rem !important; } .xxxl-mx-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; } .xxxl-my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .xxxl-p-4 { padding: 1.5rem !important; } .xxxl-pt-4 { padding-top: 1.5rem !important; } .xxxl-pr-4 { padding-right: 1.5rem !important; } .xxxl-pb-4 { padding-bottom: 1.5rem !important; } .xxxl-pl-4 { padding-left: 1.5rem !important; } .xxxl-px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } .xxxl-py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .xxxl-m-5 { margin: 3rem !important; } .xxxl-mt-5 { margin-top: 3rem !important; } .xxxl-mr-5 { margin-right: 3rem !important; } .xxxl-mb-5 { margin-bottom: 3rem !important; } .xxxl-ml-5 { margin-left: 3rem !important; } .xxxl-mx-5 { margin-left: 3rem !important; margin-right: 3rem !important; } .xxxl-my-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; } .xxxl-p-5 { padding: 3rem !important; } .xxxl-pt-5 { padding-top: 3rem !important; } .xxxl-pr-5 { padding-right: 3rem !important; } .xxxl-pb-5 { padding-bottom: 3rem !important; } .xxxl-pl-5 { padding-left: 3rem !important; } .xxxl-px-5 { padding-left: 3rem !important; padding-right: 3rem !important; } .xxxl-py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; } } /* ========================================================================== */ /* Sizing Utilities (Width / Height) */ /* ========================================================================== */ .w-0 { width: 0%; } .h-0 { height: 0%; } .w-25 { width: 25%; } .h-25 { height: 25%; } .w-33 { width: 33.3333%; } .h-33 { height: 33.3333%; } .w-50 { width: 50%; } .h-50 { height: 50%; } .w-66 { width: 66.6667%; } .h-66 { height: 66.6667%; } .w-75 { width: 75%; } .h-75 { height: 75%; } .w-100 { width: 100%; } .h-100 { height: 100%; } .wpx-0 { width: 0px; } .hpx-0 { height: 0px; } .wpx-1 { width: 1px; } .hpx-1 { height: 1px; } .wpx-2 { width: 2px; } .hpx-2 { height: 2px; } .wpx-4 { width: 4px; } .hpx-4 { height: 4px; } .wpx-8 { width: 8px; } .hpx-8 { height: 8px; } .wpx-12 { width: 12px; } .hpx-12 { height: 12px; } .wpx-16 { width: 16px; } .hpx-16 { height: 16px; } .wpx-20 { width: 20px; } .hpx-20 { height: 20px; } .wpx-24 { width: 24px; } .hpx-24 { height: 24px; } .wpx-32 { width: 32px; } .hpx-32 { height: 32px; } .wpx-40 { width: 40px; } .hpx-40 { height: 40px; } .wpx-48 { width: 48px; } .hpx-48 { height: 48px; } .wpx-56 { width: 56px; } .hpx-56 { height: 56px; } .wpx-64 { width: 64px; } .hpx-64 { height: 64px; } .wpx-80 { width: 80px; } .hpx-80 { height: 80px; } .wpx-96 { width: 96px; } .hpx-96 { height: 96px; } .wpx-112 { width: 112px; } .hpx-112 { height: 112px; } .wpx-128 { width: 128px; } .hpx-128 { height: 128px; } .wpx-160 { width: 160px; } .hpx-160 { height: 160px; } .wpx-192 { width: 192px; } .hpx-192 { height: 192px; } .wpx-224 { width: 224px; } .hpx-224 { height: 224px; } .wpx-256 { width: 256px; } .hpx-256 { height: 256px; } .wpx-320 { width: 320px; } .hpx-320 { height: 320px; } .wpx-384 { width: 384px; } .hpx-384 { height: 384px; } .wpx-448 { width: 448px; } .hpx-448 { height: 448px; } .wpx-512 { width: 512px; } .hpx-512 { height: 512px; } .wrem-0 { width: 0; } .hrem-0 { height: 0; } .wrem-1 { width: 0.25rem; } .hrem-1 { height: 0.25rem; } .wrem-2 { width: 0.5rem; } .hrem-2 { height: 0.5rem; } .wrem-3 { width: 1rem; } .hrem-3 { height: 1rem; } .wrem-4 { width: 1.5rem; } .hrem-4 { height: 1.5rem; } .wrem-5 { width: 2rem; } .hrem-5 { height: 2rem; } .wrem-6 { width: 3rem; } .hrem-6 { height: 3rem; } .wrem-7 { width: 4rem; } .hrem-7 { height: 4rem; } .wrem-8 { width: 6rem; } .hrem-8 { height: 6rem; } .wvw-10 { width: 10vw; } .wvw-20 { width: 20vw; } .wvw-25 { width: 25vw; } .wvw-33 { width: 33vw; } .wvw-40 { width: 40vw; } .wvw-50 { width: 50vw; } .wvw-60 { width: 60vw; } .wvw-66 { width: 66vw; } .wvw-75 { width: 75vw; } .wvw-80 { width: 80vw; } .wvw-90 { width: 90vw; } .wvw-100 { width: 100vw; } .hvh-10 { height: 10vh; } .hvh-20 { height: 20vh; } .hvh-25 { height: 25vh; } .hvh-33 { height: 33vh; } .hvh-40 { height: 40vh; } .hvh-50 { height: 50vh; } .hvh-60 { height: 60vh; } .hvh-66 { height: 66vh; } .hvh-75 { height: 75vh; } .hvh-80 { height: 80vh; } .hvh-90 { height: 90vh; } .hvh-100 { height: 100vh; } .hdvh-10 { height: 10dvh; } .hdvh-20 { height: 20dvh; } .hdvh-25 { height: 25dvh; } .hdvh-33 { height: 33dvh; } .hdvh-40 { height: 40dvh; } .hdvh-50 { height: 50dvh; } .hdvh-60 { height: 60dvh; } .hdvh-66 { height: 66dvh; } .hdvh-75 { height: 75dvh; } .hdvh-80 { height: 80dvh; } .hdvh-90 { height: 90dvh; } .hdvh-100 { height: 100dvh; } .hsvh-10 { height: 10svh; } .hsvh-20 { height: 20svh; } .hsvh-25 { height: 25svh; } .hsvh-33 { height: 33svh; } .hsvh-40 { height: 40svh; } .hsvh-50 { height: 50svh; } .hsvh-60 { height: 60svh; } .hsvh-66 { height: 66svh; } .hsvh-75 { height: 75svh; } .hsvh-80 { height: 80svh; } .hsvh-90 { height: 90svh; } .hsvh-100 { height: 100svh; } .hlvh-10 { height: 10lvh; } .hlvh-20 { height: 20lvh; } .hlvh-25 { height: 25lvh; } .hlvh-33 { height: 33lvh; } .hlvh-40 { height: 40lvh; } .hlvh-50 { height: 50lvh; } .hlvh-60 { height: 60lvh; } .hlvh-66 { height: 66lvh; } .hlvh-75 { height: 75lvh; } .hlvh-80 { height: 80lvh; } .hlvh-90 { height: 90lvh; } .hlvh-100 { height: 100lvh; } /* Responsive sizing */ @media (min-width: 576px) { .sm-w-0 { width: 0%; } .sm-h-0 { height: 0%; } .sm-w-25 { width: 25%; } .sm-h-25 { height: 25%; } .sm-w-33 { width: 33.3333%; } .sm-h-33 { height: 33.3333%; } .sm-w-50 { width: 50%; } .sm-h-50 { height: 50%; } .sm-w-66 { width: 66.6667%; } .sm-h-66 { height: 66.6667%; } .sm-w-75 { width: 75%; } .sm-h-75 { height: 75%; } .sm-w-100 { width: 100%; } .sm-h-100 { height: 100%; } } @media (min-width: 768px) { .md-w-0 { width: 0%; } .md-h-0 { height: 0%; } .md-w-25 { width: 25%; } .md-h-25 { height: 25%; } .md-w-33 { width: 33.3333%; } .md-h-33 { height: 33.3333%; } .md-w-50 { width: 50%; } .md-h-50 { height: 50%; } .md-w-66 { width: 66.6667%; } .md-h-66 { height: 66.6667%; } .md-w-75 { width: 75%; } .md-h-75 { height: 75%; } .md-w-100 { width: 100%; } .md-h-100 { height: 100%; } } @media (min-width: 992px) { .lg-w-0 { width: 0%; } .lg-h-0 { height: 0%; } .lg-w-25 { width: 25%; } .lg-h-25 { height: 25%; } .lg-w-33 { width: 33.3333%; } .lg-h-33 { height: 33.3333%; } .lg-w-50 { width: 50%; } .lg-h-50 { height: 50%; } .lg-w-66 { width: 66.6667%; } .lg-h-66 { height: 66.6667%; } .lg-w-75 { width: 75%; } .lg-h-75 { height: 75%; } .lg-w-100 { width: 100%; } .lg-h-100 { height: 100%; } } @media (min-width: 1200px) { .xl-w-0 { width: 0%; } .xl-h-0 { height: 0%; } .xl-w-25 { width: 25%; } .xl-h-25 { height: 25%; } .xl-w-33 { width: 33.3333%; } .xl-h-33 { height: 33.3333%; } .xl-w-50 { width: 50%; } .xl-h-50 { height: 50%; } .xl-w-66 { width: 66.6667%; } .xl-h-66 { height: 66.6667%; } .xl-w-75 { width: 75%; } .xl-h-75 { height: 75%; } .xl-w-100 { width: 100%; } .xl-h-100 { height: 100%; } } @media (min-width: 1400px) { .xxl-w-0 { width: 0%; } .xxl-h-0 { height: 0%; } .xxl-w-25 { width: 25%; } .xxl-h-25 { height: 25%; } .xxl-w-33 { width: 33.3333%; } .xxl-h-33 { height: 33.3333%; } .xxl-w-50 { width: 50%; } .xxl-h-50 { height: 50%; } .xxl-w-66 { width: 66.6667%; } .xxl-h-66 { height: 66.6667%; } .xxl-w-75 { width: 75%; } .xxl-h-75 { height: 75%; } .xxl-w-100 { width: 100%; } .xxl-h-100 { height: 100%; } } @media (min-width: 1600px) { .xxxl-w-0 { width: 0%; } .xxxl-h-0 { height: 0%; } .xxxl-w-25 { width: 25%; } .xxxl-h-25 { height: 25%; } .xxxl-w-33 { width: 33.3333%; } .xxxl-h-33 { height: 33.3333%; } .xxxl-w-50 { width: 50%; } .xxxl-h-50 { height: 50%; } .xxxl-w-66 { width: 66.6667%; } .xxxl-h-66 { height: 66.6667%; } .xxxl-w-75 { width: 75%; } .xxxl-h-75 { height: 75%; } .xxxl-w-100 { width: 100%; } .xxxl-h-100 { height: 100%; } } /* ========================================================================== */ /* Display + Layout */ /* ========================================================================== */ .d-block { display: block !important; } .d-flex { display: flex !important; } .d-inline { display: inline !important; } .d-inline-block { display: inline-block !important; } .d-inline-flex { display: inline-flex !important; } .d-grid { display: grid !important; } .d-none { display: none !important; } .container { width: 100%; margin-inline: auto; padding-inline: 1rem; } @media (min-width: 576px) { .container { max-width: 540px; } } @media (min-width: 768px) { .container { max-width: 720px; } } @media (min-width: 992px) { .container { max-width: 960px; } } @media (min-width: 1200px) { .container { max-width: 1140px; } } @media (min-width: 1400px) { .container { max-width: 1320px; } } @media (min-width: 1600px) { .container { max-width: 1520px; } } /* Container variants */ .container-fluid { width: 100%; margin-inline: auto; padding-inline: 1rem; max-width: none; } .container-bleed { width: 100vw; margin-left: 50%; transform: translateX(-50%); padding-inline: 0; } .container-narrow { width: 100%; margin-inline: auto; padding-inline: 1rem; max-width: clamp(36rem, 70vw, 56rem); } .container-wide { width: 100%; margin-inline: auto; padding-inline: 1rem; max-width: clamp(72rem, 92vw, 100rem); } .container-fluid { width: 100%; margin-inline: auto; padding-inline: 1rem; max-width: none; } .container-bleed { width: 100vw; margin-left: 50%; transform: translateX(-50%); padding-inline: 0; } .container-narrow { width: 100%; margin-inline: auto; padding-inline: 1rem; max-width: clamp(36rem, 70vw, 56rem); } .container-wide { width: 100%; margin-inline: auto; padding-inline: 1rem; max-width: clamp(72rem, 92vw, 100rem); } .container-fluid { width: 100%; margin-inline: auto; padding-inline: 1rem; max-width: none; } .container-bleed { width: 100vw; margin-left: 50%; transform: translateX(-50%); padding-inline: 0; } .container-narrow { width: 100%; margin-inline: auto; padding-inline: 1rem; max-width: clamp(36rem, 70vw, 56rem); } .container-wide { width: 100%; margin-inline: auto; padding-inline: 1rem; max-width: clamp(72rem, 92vw, 100rem); } /* Flex grid */ .row { display: flex; flex-wrap: wrap; margin-inline: 1rem; margin-block: 1rem; } .col { flex: 1 0 0%; padding-inline: 1rem; padding-block: 1rem; } .col-auto { flex: 0 0 auto; width: auto; padding-inline: 1rem; padding-block: 1rem; } .col-1 { flex: 0 0 8.3333333333%; max-width: 8.3333333333%; padding-inline: 1rem; padding-block: 1rem; } .col-2 { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; padding-inline: 1rem; padding-block: 1rem; } .col-3 { flex: 0 0 25%; max-width: 25%; padding-inline: 1rem; padding-block: 1rem; } .col-4 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; padding-inline: 1rem; padding-block: 1rem; } .col-5 { flex: 0 0 41.6666666667%; max-width: 41.6666666667%; padding-inline: 1rem; padding-block: 1rem; } .col-6 { flex: 0 0 50%; max-width: 50%; padding-inline: 1rem; padding-block: 1rem; } .col-7 { flex: 0 0 58.3333333333%; max-width: 58.3333333333%; padding-inline: 1rem; padding-block: 1rem; } .col-8 { flex: 0 0 66.6666666667%; max-width: 66.6666666667%; padding-inline: 1rem; padding-block: 1rem; } .col-9 { flex: 0 0 75%; max-width: 75%; padding-inline: 1rem; padding-block: 1rem; } .col-10 { flex: 0 0 83.3333333333%; max-width: 83.3333333333%; padding-inline: 1rem; padding-block: 1rem; } .col-11 { flex: 0 0 91.6666666667%; max-width: 91.6666666667%; padding-inline: 1rem; padding-block: 1rem; } .col-12 { flex: 0 0 100%; max-width: 100%; padding-inline: 1rem; padding-block: 1rem; } @media (min-width: 576px) { .col-sm { flex: 1 0 0%; padding-inline: 1rem; padding-block: 1rem; } .col-sm-auto { flex: 0 0 auto; width: auto; padding-inline: 1rem; padding-block: 1rem; } .col-sm-1 { flex: 0 0 8.3333333333%; max-width: 8.3333333333%; padding-inline: 1rem; padding-block: 1rem; } .col-sm-2 { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; padding-inline: 1rem; padding-block: 1rem; } .col-sm-3 { flex: 0 0 25%; max-width: 25%; padding-inline: 1rem; padding-block: 1rem; } .col-sm-4 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; padding-inline: 1rem; padding-block: 1rem; } .col-sm-5 { flex: 0 0 41.6666666667%; max-width: 41.6666666667%; padding-inline: 1rem; padding-block: 1rem; } .col-sm-6 { flex: 0 0 50%; max-width: 50%; padding-inline: 1rem; padding-block: 1rem; } .col-sm-7 { flex: 0 0 58.3333333333%; max-width: 58.3333333333%; padding-inline: 1rem; padding-block: 1rem; } .col-sm-8 { flex: 0 0 66.6666666667%; max-width: 66.6666666667%; padding-inline: 1rem; padding-block: 1rem; } .col-sm-9 { flex: 0 0 75%; max-width: 75%; padding-inline: 1rem; padding-block: 1rem; } .col-sm-10 { flex: 0 0 83.3333333333%; max-width: 83.3333333333%; padding-inline: 1rem; padding-block: 1rem; } .col-sm-11 { flex: 0 0 91.6666666667%; max-width: 91.6666666667%; padding-inline: 1rem; padding-block: 1rem; } .col-sm-12 { flex: 0 0 100%; max-width: 100%; padding-inline: 1rem; padding-block: 1rem; } } @media (min-width: 768px) { .col-md { flex: 1 0 0%; padding-inline: 1rem; padding-block: 1rem; } .col-md-auto { flex: 0 0 auto; width: auto; padding-inline: 1rem; padding-block: 1rem; } .col-md-1 { flex: 0 0 8.3333333333%; max-width: 8.3333333333%; padding-inline: 1rem; padding-block: 1rem; } .col-md-2 { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; padding-inline: 1rem; padding-block: 1rem; } .col-md-3 { flex: 0 0 25%; max-width: 25%; padding-inline: 1rem; padding-block: 1rem; } .col-md-4 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; padding-inline: 1rem; padding-block: 1rem; } .col-md-5 { flex: 0 0 41.6666666667%; max-width: 41.6666666667%; padding-inline: 1rem; padding-block: 1rem; } .col-md-6 { flex: 0 0 50%; max-width: 50%; padding-inline: 1rem; padding-block: 1rem; } .col-md-7 { flex: 0 0 58.3333333333%; max-width: 58.3333333333%; padding-inline: 1rem; padding-block: 1rem; } .col-md-8 { flex: 0 0 66.6666666667%; max-width: 66.6666666667%; padding-inline: 1rem; padding-block: 1rem; } .col-md-9 { flex: 0 0 75%; max-width: 75%; padding-inline: 1rem; padding-block: 1rem; } .col-md-10 { flex: 0 0 83.3333333333%; max-width: 83.3333333333%; padding-inline: 1rem; padding-block: 1rem; } .col-md-11 { flex: 0 0 91.6666666667%; max-width: 91.6666666667%; padding-inline: 1rem; padding-block: 1rem; } .col-md-12 { flex: 0 0 100%; max-width: 100%; padding-inline: 1rem; padding-block: 1rem; } } @media (min-width: 992px) { .col-lg { flex: 1 0 0%; padding-inline: 1rem; padding-block: 1rem; } .col-lg-auto { flex: 0 0 auto; width: auto; padding-inline: 1rem; padding-block: 1rem; } .col-lg-1 { flex: 0 0 8.3333333333%; max-width: 8.3333333333%; padding-inline: 1rem; padding-block: 1rem; } .col-lg-2 { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; padding-inline: 1rem; padding-block: 1rem; } .col-lg-3 { flex: 0 0 25%; max-width: 25%; padding-inline: 1rem; padding-block: 1rem; } .col-lg-4 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; padding-inline: 1rem; padding-block: 1rem; } .col-lg-5 { flex: 0 0 41.6666666667%; max-width: 41.6666666667%; padding-inline: 1rem; padding-block: 1rem; } .col-lg-6 { flex: 0 0 50%; max-width: 50%; padding-inline: 1rem; padding-block: 1rem; } .col-lg-7 { flex: 0 0 58.3333333333%; max-width: 58.3333333333%; padding-inline: 1rem; padding-block: 1rem; } .col-lg-8 { flex: 0 0 66.6666666667%; max-width: 66.6666666667%; padding-inline: 1rem; padding-block: 1rem; } .col-lg-9 { flex: 0 0 75%; max-width: 75%; padding-inline: 1rem; padding-block: 1rem; } .col-lg-10 { flex: 0 0 83.3333333333%; max-width: 83.3333333333%; padding-inline: 1rem; padding-block: 1rem; } .col-lg-11 { flex: 0 0 91.6666666667%; max-width: 91.6666666667%; padding-inline: 1rem; padding-block: 1rem; } .col-lg-12 { flex: 0 0 100%; max-width: 100%; padding-inline: 1rem; padding-block: 1rem; } } @media (min-width: 1200px) { .col-xl { flex: 1 0 0%; padding-inline: 1rem; padding-block: 1rem; } .col-xl-auto { flex: 0 0 auto; width: auto; padding-inline: 1rem; padding-block: 1rem; } .col-xl-1 { flex: 0 0 8.3333333333%; max-width: 8.3333333333%; padding-inline: 1rem; padding-block: 1rem; } .col-xl-2 { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; padding-inline: 1rem; padding-block: 1rem; } .col-xl-3 { flex: 0 0 25%; max-width: 25%; padding-inline: 1rem; padding-block: 1rem; } .col-xl-4 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; padding-inline: 1rem; padding-block: 1rem; } .col-xl-5 { flex: 0 0 41.6666666667%; max-width: 41.6666666667%; padding-inline: 1rem; padding-block: 1rem; } .col-xl-6 { flex: 0 0 50%; max-width: 50%; padding-inline: 1rem; padding-block: 1rem; } .col-xl-7 { flex: 0 0 58.3333333333%; max-width: 58.3333333333%; padding-inline: 1rem; padding-block: 1rem; } .col-xl-8 { flex: 0 0 66.6666666667%; max-width: 66.6666666667%; padding-inline: 1rem; padding-block: 1rem; } .col-xl-9 { flex: 0 0 75%; max-width: 75%; padding-inline: 1rem; padding-block: 1rem; } .col-xl-10 { flex: 0 0 83.3333333333%; max-width: 83.3333333333%; padding-inline: 1rem; padding-block: 1rem; } .col-xl-11 { flex: 0 0 91.6666666667%; max-width: 91.6666666667%; padding-inline: 1rem; padding-block: 1rem; } .col-xl-12 { flex: 0 0 100%; max-width: 100%; padding-inline: 1rem; padding-block: 1rem; } } @media (min-width: 1400px) { .col-xxl { flex: 1 0 0%; padding-inline: 1rem; padding-block: 1rem; } .col-xxl-auto { flex: 0 0 auto; width: auto; padding-inline: 1rem; padding-block: 1rem; } .col-xxl-1 { flex: 0 0 8.3333333333%; max-width: 8.3333333333%; padding-inline: 1rem; padding-block: 1rem; } .col-xxl-2 { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; padding-inline: 1rem; padding-block: 1rem; } .col-xxl-3 { flex: 0 0 25%; max-width: 25%; padding-inline: 1rem; padding-block: 1rem; } .col-xxl-4 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; padding-inline: 1rem; padding-block: 1rem; } .col-xxl-5 { flex: 0 0 41.6666666667%; max-width: 41.6666666667%; padding-inline: 1rem; padding-block: 1rem; } .col-xxl-6 { flex: 0 0 50%; max-width: 50%; padding-inline: 1rem; padding-block: 1rem; } .col-xxl-7 { flex: 0 0 58.3333333333%; max-width: 58.3333333333%; padding-inline: 1rem; padding-block: 1rem; } .col-xxl-8 { flex: 0 0 66.6666666667%; max-width: 66.6666666667%; padding-inline: 1rem; padding-block: 1rem; } .col-xxl-9 { flex: 0 0 75%; max-width: 75%; padding-inline: 1rem; padding-block: 1rem; } .col-xxl-10 { flex: 0 0 83.3333333333%; max-width: 83.3333333333%; padding-inline: 1rem; padding-block: 1rem; } .col-xxl-11 { flex: 0 0 91.6666666667%; max-width: 91.6666666667%; padding-inline: 1rem; padding-block: 1rem; } .col-xxl-12 { flex: 0 0 100%; max-width: 100%; padding-inline: 1rem; padding-block: 1rem; } } @media (min-width: 1600px) { .col-xxxl { flex: 1 0 0%; padding-inline: 1rem; padding-block: 1rem; } .col-xxxl-auto { flex: 0 0 auto; width: auto; padding-inline: 1rem; padding-block: 1rem; } .col-xxxl-1 { flex: 0 0 8.3333333333%; max-width: 8.3333333333%; padding-inline: 1rem; padding-block: 1rem; } .col-xxxl-2 { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; padding-inline: 1rem; padding-block: 1rem; } .col-xxxl-3 { flex: 0 0 25%; max-width: 25%; padding-inline: 1rem; padding-block: 1rem; } .col-xxxl-4 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; padding-inline: 1rem; padding-block: 1rem; } .col-xxxl-5 { flex: 0 0 41.6666666667%; max-width: 41.6666666667%; padding-inline: 1rem; padding-block: 1rem; } .col-xxxl-6 { flex: 0 0 50%; max-width: 50%; padding-inline: 1rem; padding-block: 1rem; } .col-xxxl-7 { flex: 0 0 58.3333333333%; max-width: 58.3333333333%; padding-inline: 1rem; padding-block: 1rem; } .col-xxxl-8 { flex: 0 0 66.6666666667%; max-width: 66.6666666667%; padding-inline: 1rem; padding-block: 1rem; } .col-xxxl-9 { flex: 0 0 75%; max-width: 75%; padding-inline: 1rem; padding-block: 1rem; } .col-xxxl-10 { flex: 0 0 83.3333333333%; max-width: 83.3333333333%; padding-inline: 1rem; padding-block: 1rem; } .col-xxxl-11 { flex: 0 0 91.6666666667%; max-width: 91.6666666667%; padding-inline: 1rem; padding-block: 1rem; } .col-xxxl-12 { flex: 0 0 100%; max-width: 100%; padding-inline: 1rem; padding-block: 1rem; } } /* Flex helpers */ .flex { display: flex; } .inline-flex { display: inline-flex; } .flex-row { display: flex; flex-direction: row; } .flex-row-reverse { display: flex; flex-direction: row-reverse; } .flex-column { display: flex; flex-direction: column; } .flex-column-reverse { display: flex; flex-direction: column-reverse; } .justify-start { display: flex; justify-content: flex-start; } .justify-end { display: flex; justify-content: flex-end; } .justify-center { display: flex; justify-content: center; } .justify-between { display: flex; justify-content: space-between; } .justify-around { display: flex; justify-content: space-around; } .justify-evenly { display: flex; justify-content: space-evenly; } .items-start { display: flex; align-items: flex-start; } .items-end { display: flex; align-items: flex-end; } .items-center { display: flex; align-items: center; } .items-baseline { display: flex; align-items: baseline; } .items-stretch { display: flex; align-items: stretch; } /* Borders + Radius + Shadows */ .border-0 { border-width: 0; border-style: solid; border-color: currentColor; } .border-1 { border-width: 1px; border-style: solid; border-color: currentColor; } .border-2 { border-width: 2px; border-style: solid; border-color: currentColor; } .border-3 { border-width: 3px; border-style: solid; border-color: currentColor; } .border { border: 1px solid currentColor; } .border-top { border-top: 1px solid currentColor; } .border-right { border-right: 1px solid currentColor; } .border-bottom { border-bottom: 1px solid currentColor; } .border-left { border-left: 1px solid currentColor; } .rounded-none { border-radius: 0; } .rounded-sm { border-radius: 0.125rem; } .rounded-md { border-radius: 0.25rem; } .rounded-lg { border-radius: 0.5rem; } .rounded-xl { border-radius: 1rem; } .rounded-full { border-radius: 9999px; } .rounded { border-radius: 0.25rem; } .rounded-top { border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; } .rounded-bottom { border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem; } .rounded-left { border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; } .rounded-right { border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; } .shadow-1 { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important; } .shadow-2 { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16) !important; } .shadow-3 { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18) !important; } .shadow-4 { box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2) !important; } .shadow-5 { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22) !important; } .drop-shadow-1 { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14) !important; } .drop-shadow-2 { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.18) !important; } .drop-shadow-3 { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2) !important; } .drop-shadow-4 { box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22) !important; } .drop-shadow-5 { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.24) !important; } /* Z-Index */ .z-base { z-index: 1; } .z-dropdown { z-index: 1000; } .z-overlay { z-index: 1100; } .z-modal { z-index: 1200; } .z-toast { z-index: 1300; } /* ========================================================================== */ /* Grid System (CSS Grid Utilities) */ /* ========================================================================== */ .grid { display: grid !important; } .inline-grid { display: inline-grid !important; } .grid-cols-1 { grid-template-columns: repeat(1, 1fr) !important; } .grid-cols-2 { grid-template-columns: repeat(2, 1fr) !important; } .grid-cols-3 { grid-template-columns: repeat(3, 1fr) !important; } .grid-cols-4 { grid-template-columns: repeat(4, 1fr) !important; } .grid-cols-5 { grid-template-columns: repeat(5, 1fr) !important; } .grid-cols-6 { grid-template-columns: repeat(6, 1fr) !important; } .grid-cols-7 { grid-template-columns: repeat(7, 1fr) !important; } .grid-cols-8 { grid-template-columns: repeat(8, 1fr) !important; } .grid-cols-9 { grid-template-columns: repeat(9, 1fr) !important; } .grid-cols-10 { grid-template-columns: repeat(10, 1fr) !important; } .grid-cols-11 { grid-template-columns: repeat(11, 1fr) !important; } .grid-cols-12 { grid-template-columns: repeat(12, 1fr) !important; } .grid-cols-none { grid-template-columns: none !important; } @media (min-width: 576px) { .sm-grid-cols-1 { grid-template-columns: repeat(1, 1fr) !important; } .sm-grid-cols-2 { grid-template-columns: repeat(2, 1fr) !important; } .sm-grid-cols-3 { grid-template-columns: repeat(3, 1fr) !important; } .sm-grid-cols-4 { grid-template-columns: repeat(4, 1fr) !important; } .sm-grid-cols-5 { grid-template-columns: repeat(5, 1fr) !important; } .sm-grid-cols-6 { grid-template-columns: repeat(6, 1fr) !important; } .sm-grid-cols-7 { grid-template-columns: repeat(7, 1fr) !important; } .sm-grid-cols-8 { grid-template-columns: repeat(8, 1fr) !important; } .sm-grid-cols-9 { grid-template-columns: repeat(9, 1fr) !important; } .sm-grid-cols-10 { grid-template-columns: repeat(10, 1fr) !important; } .sm-grid-cols-11 { grid-template-columns: repeat(11, 1fr) !important; } .sm-grid-cols-12 { grid-template-columns: repeat(12, 1fr) !important; } } @media (min-width: 768px) { .md-grid-cols-1 { grid-template-columns: repeat(1, 1fr) !important; } .md-grid-cols-2 { grid-template-columns: repeat(2, 1fr) !important; } .md-grid-cols-3 { grid-template-columns: repeat(3, 1fr) !important; } .md-grid-cols-4 { grid-template-columns: repeat(4, 1fr) !important; } .md-grid-cols-5 { grid-template-columns: repeat(5, 1fr) !important; } .md-grid-cols-6 { grid-template-columns: repeat(6, 1fr) !important; } .md-grid-cols-7 { grid-template-columns: repeat(7, 1fr) !important; } .md-grid-cols-8 { grid-template-columns: repeat(8, 1fr) !important; } .md-grid-cols-9 { grid-template-columns: repeat(9, 1fr) !important; } .md-grid-cols-10 { grid-template-columns: repeat(10, 1fr) !important; } .md-grid-cols-11 { grid-template-columns: repeat(11, 1fr) !important; } .md-grid-cols-12 { grid-template-columns: repeat(12, 1fr) !important; } } @media (min-width: 992px) { .lg-grid-cols-1 { grid-template-columns: repeat(1, 1fr) !important; } .lg-grid-cols-2 { grid-template-columns: repeat(2, 1fr) !important; } .lg-grid-cols-3 { grid-template-columns: repeat(3, 1fr) !important; } .lg-grid-cols-4 { grid-template-columns: repeat(4, 1fr) !important; } .lg-grid-cols-5 { grid-template-columns: repeat(5, 1fr) !important; } .lg-grid-cols-6 { grid-template-columns: repeat(6, 1fr) !important; } .lg-grid-cols-7 { grid-template-columns: repeat(7, 1fr) !important; } .lg-grid-cols-8 { grid-template-columns: repeat(8, 1fr) !important; } .lg-grid-cols-9 { grid-template-columns: repeat(9, 1fr) !important; } .lg-grid-cols-10 { grid-template-columns: repeat(10, 1fr) !important; } .lg-grid-cols-11 { grid-template-columns: repeat(11, 1fr) !important; } .lg-grid-cols-12 { grid-template-columns: repeat(12, 1fr) !important; } } @media (min-width: 1200px) { .xl-grid-cols-1 { grid-template-columns: repeat(1, 1fr) !important; } .xl-grid-cols-2 { grid-template-columns: repeat(2, 1fr) !important; } .xl-grid-cols-3 { grid-template-columns: repeat(3, 1fr) !important; } .xl-grid-cols-4 { grid-template-columns: repeat(4, 1fr) !important; } .xl-grid-cols-5 { grid-template-columns: repeat(5, 1fr) !important; } .xl-grid-cols-6 { grid-template-columns: repeat(6, 1fr) !important; } .xl-grid-cols-7 { grid-template-columns: repeat(7, 1fr) !important; } .xl-grid-cols-8 { grid-template-columns: repeat(8, 1fr) !important; } .xl-grid-cols-9 { grid-template-columns: repeat(9, 1fr) !important; } .xl-grid-cols-10 { grid-template-columns: repeat(10, 1fr) !important; } .xl-grid-cols-11 { grid-template-columns: repeat(11, 1fr) !important; } .xl-grid-cols-12 { grid-template-columns: repeat(12, 1fr) !important; } } @media (min-width: 1400px) { .xxl-grid-cols-1 { grid-template-columns: repeat(1, 1fr) !important; } .xxl-grid-cols-2 { grid-template-columns: repeat(2, 1fr) !important; } .xxl-grid-cols-3 { grid-template-columns: repeat(3, 1fr) !important; } .xxl-grid-cols-4 { grid-template-columns: repeat(4, 1fr) !important; } .xxl-grid-cols-5 { grid-template-columns: repeat(5, 1fr) !important; } .xxl-grid-cols-6 { grid-template-columns: repeat(6, 1fr) !important; } .xxl-grid-cols-7 { grid-template-columns: repeat(7, 1fr) !important; } .xxl-grid-cols-8 { grid-template-columns: repeat(8, 1fr) !important; } .xxl-grid-cols-9 { grid-template-columns: repeat(9, 1fr) !important; } .xxl-grid-cols-10 { grid-template-columns: repeat(10, 1fr) !important; } .xxl-grid-cols-11 { grid-template-columns: repeat(11, 1fr) !important; } .xxl-grid-cols-12 { grid-template-columns: repeat(12, 1fr) !important; } } @media (min-width: 1600px) { .xxxl-grid-cols-1 { grid-template-columns: repeat(1, 1fr) !important; } .xxxl-grid-cols-2 { grid-template-columns: repeat(2, 1fr) !important; } .xxxl-grid-cols-3 { grid-template-columns: repeat(3, 1fr) !important; } .xxxl-grid-cols-4 { grid-template-columns: repeat(4, 1fr) !important; } .xxxl-grid-cols-5 { grid-template-columns: repeat(5, 1fr) !important; } .xxxl-grid-cols-6 { grid-template-columns: repeat(6, 1fr) !important; } .xxxl-grid-cols-7 { grid-template-columns: repeat(7, 1fr) !important; } .xxxl-grid-cols-8 { grid-template-columns: repeat(8, 1fr) !important; } .xxxl-grid-cols-9 { grid-template-columns: repeat(9, 1fr) !important; } .xxxl-grid-cols-10 { grid-template-columns: repeat(10, 1fr) !important; } .xxxl-grid-cols-11 { grid-template-columns: repeat(11, 1fr) !important; } .xxxl-grid-cols-12 { grid-template-columns: repeat(12, 1fr) !important; } } .grid-rows-1 { grid-template-rows: repeat(1, 1fr) !important; } .grid-rows-2 { grid-template-rows: repeat(2, 1fr) !important; } .grid-rows-3 { grid-template-rows: repeat(3, 1fr) !important; } .grid-rows-4 { grid-template-rows: repeat(4, 1fr) !important; } .grid-rows-5 { grid-template-rows: repeat(5, 1fr) !important; } .grid-rows-6 { grid-template-rows: repeat(6, 1fr) !important; } .grid-rows-7 { grid-template-rows: repeat(7, 1fr) !important; } .grid-rows-8 { grid-template-rows: repeat(8, 1fr) !important; } .grid-rows-9 { grid-template-rows: repeat(9, 1fr) !important; } .grid-rows-10 { grid-template-rows: repeat(10, 1fr) !important; } .grid-rows-11 { grid-template-rows: repeat(11, 1fr) !important; } .grid-rows-12 { grid-template-rows: repeat(12, 1fr) !important; } .grid-rows-none { grid-template-rows: none !important; } .grid-auto-fit-sm { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)) !important; } .grid-auto-fit-md { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)) !important; } .grid-auto-fit-lg { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)) !important; } .grid-auto-fill-sm { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)) !important; } .grid-auto-fill-md { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)) !important; } .grid-auto-fill-lg { grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)) !important; } .grid-align-center { align-items: center !important; justify-items: center !important; } .grid-align-start { align-items: start !important; justify-items: start !important; } .grid-align-end { align-items: end !important; justify-items: end !important; } .grid-align-stretch { align-items: stretch !important; justify-items: stretch !important; } .place-self-center { place-self: center !important; } .place-self-start { place-self: start !important; } .place-self-end { place-self: end !important; } .place-self-stretch { place-self: stretch !important; } .grid-flow-row { grid-auto-flow: row !important; } .grid-flow-col { grid-auto-flow: column !important; } .grid-flow-row-dense { grid-auto-flow: row dense !important; } .grid-flow-col-dense { grid-auto-flow: column dense !important; } /* Auto rows/cols sizing */ .grid-auto-cols-min { grid-auto-columns: min-content !important; } .grid-auto-cols-max { grid-auto-columns: max-content !important; } .grid-auto-cols-fr { grid-auto-columns: 1fr !important; } .grid-auto-rows-min { grid-auto-rows: min-content !important; } .grid-auto-rows-max { grid-auto-rows: max-content !important; } .grid-auto-rows-fr { grid-auto-rows: 1fr !important; } /* ========================================================================== */ /* Control Blueprints (shared by inputs/buttons/etc.) */ /* ========================================================================== */ /* Inputs */ .input, select, textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-style: solid; border-width: 1px; border-color: #c7c7c7; background-color: #fdfdfd; color: #333333; outline: 0; transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s cubic-bezier(0, 0, 0.2, 1); width: 100%; } .input:focus, select:focus, textarea:focus { border-color: #aa0b3d; box-shadow: 0 0 0 3px rgba(170, 11, 61, 0.2); background-color: #ffffff; } .input:disabled, select:disabled, textarea:disabled { background-color: #e5e5e5; opacity: 0.6; cursor: not-allowed; } .input::-moz-placeholder, select::-moz-placeholder, textarea::-moz-placeholder { color: #6c757d; } .input::placeholder, select::placeholder, textarea::placeholder { color: #6c757d; } .input-sm { font-size: 0.875rem; line-height: 1.3; padding: 0.25rem 0.5rem; border-radius: 0.25rem; } .input-md { font-size: 1.1rem; line-height: 1.3; padding: 0.375rem 0.75rem; border-radius: 0.25rem; } .input-lg { font-size: 1.35rem; line-height: 1.3; padding: 0.5rem 1rem; border-radius: 0.5rem; } .input-xl { font-size: 1.8rem; line-height: 1.5; padding: 0.75rem 1.25rem; border-radius: 0.5rem; } /* Buttons */ .btn, .modal__close { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-style: solid; border-width: 1px; border-color: #c7c7c7; background-color: #fdfdfd; color: #333333; outline: 0; transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s cubic-bezier(0, 0, 0.2, 1); display: inline-flex; width: auto; align-items: center; justify-content: center; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); } .btn:focus-visible, .modal__close:focus-visible { border-color: #aa0b3d; box-shadow: 0 0 0 3px rgba(170, 11, 61, 0.2), 0 2px 6px rgba(0, 0, 0, 0.16); } .btn:active, .modal__close:active { transform: translateY(1px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18); } .btn:disabled, .modal__close:disabled { opacity: 0.6; cursor: not-allowed; pointer-events: none; } .btn-sm, .modal__close { font-size: 0.875rem; line-height: 1.3; padding: 0.25rem 0.5rem; border-radius: 0.25rem; } .btn-md { font-size: 1.1rem; line-height: 1.3; padding: 0.375rem 0.75rem; border-radius: 0.25rem; } .btn-lg { font-size: 1.35rem; line-height: 1.3; padding: 0.5rem 1rem; border-radius: 0.5rem; } .btn-xl { font-size: 1.8rem; line-height: 1.5; padding: 0.75rem 1.25rem; border-radius: 0.5rem; } .btn-primary { background-color: #aa0b3d; color: #ffffff; border-color: transparent; } .btn-primary:hover { background-color: rgb(131.679558011, 8.520441989, 47.2497237569); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16); } .btn-outline-primary { background-color: transparent; color: #aa0b3d; border-color: #aa0b3d; } .btn-outline-primary:hover { background-color: #aa0b3d; color: #ffffff; } .btn-ghost-primary { background-color: transparent; color: #aa0b3d; border-color: transparent; } .btn-ghost-primary:hover { background-color: rgba(170, 11, 61, 0.12); } .btn-primary-alt { background-color: rgba(170, 11, 61, 0.6588235294); color: #ffffff; border-color: transparent; } .btn-primary-alt:hover { background-color: rgba(131.679558011, 8.520441989, 47.2497237569, 0.6588235294); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16); } .btn-outline-primary-alt { background-color: transparent; color: rgba(170, 11, 61, 0.6588235294); border-color: rgba(170, 11, 61, 0.6588235294); } .btn-outline-primary-alt:hover { background-color: rgba(170, 11, 61, 0.6588235294); color: #ffffff; } .btn-ghost-primary-alt { background-color: transparent; color: rgba(170, 11, 61, 0.6588235294); border-color: transparent; } .btn-ghost-primary-alt:hover { background-color: rgba(170, 11, 61, 0.12); } .btn-alt { background-color: rgba(181, 69, 24, 0.5882352941); color: #ffffff; border-color: transparent; } .btn-alt:hover { background-color: rgba(144.9765853659, 55.2673170732, 19.2234146341, 0.5882352941); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16); } .btn-outline-alt { background-color: transparent; color: rgba(181, 69, 24, 0.5882352941); border-color: rgba(181, 69, 24, 0.5882352941); } .btn-outline-alt:hover { background-color: rgba(181, 69, 24, 0.5882352941); color: #ffffff; } .btn-ghost-alt { background-color: transparent; color: rgba(181, 69, 24, 0.5882352941); border-color: transparent; } .btn-ghost-alt:hover { background-color: rgba(181, 69, 24, 0.12); } .btn-secondary { background-color: #333333; color: #ffffff; border-color: transparent; } .btn-secondary:hover { background-color: rgb(30.6, 30.6, 30.6); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16); } .btn-outline-secondary { background-color: transparent; color: #333333; border-color: #333333; } .btn-outline-secondary:hover { background-color: #333333; color: #ffffff; } .btn-ghost-secondary { background-color: transparent; color: #333333; border-color: transparent; } .btn-ghost-secondary:hover { background-color: rgba(51, 51, 51, 0.12); } .btn-success { background-color: #34b97b; color: #ffffff; border-color: transparent; } .btn-success:hover { background-color: rgb(43.0481012658, 153.1518987342, 101.8253164557); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16); } .btn-outline-success { background-color: transparent; color: #34b97b; border-color: #34b97b; } .btn-outline-success:hover { background-color: #34b97b; color: #ffffff; } .btn-ghost-success { background-color: transparent; color: #34b97b; border-color: transparent; } .btn-ghost-success:hover { background-color: rgba(52, 185, 123, 0.12); } .btn-warning { background-color: #ffc107; color: #ffffff; border-color: transparent; } .btn-warning:hover { background-color: rgb(221.2, 165.9, 0); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16); } .btn-outline-warning { background-color: transparent; color: #ffc107; border-color: #ffc107; } .btn-outline-warning:hover { background-color: #ffc107; color: #ffffff; } .btn-ghost-warning { background-color: transparent; color: #ffc107; border-color: transparent; } .btn-ghost-warning:hover { background-color: rgba(255, 193, 7, 0.12); } .btn-danger { background-color: #dc3545; color: #ffffff; border-color: transparent; } .btn-danger:hover { background-color: rgb(197.9088607595, 34.2911392405, 49.9670886076); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16); } .btn-outline-danger { background-color: transparent; color: #dc3545; border-color: #dc3545; } .btn-outline-danger:hover { background-color: #dc3545; color: #ffffff; } .btn-ghost-danger { background-color: transparent; color: #dc3545; border-color: transparent; } .btn-ghost-danger:hover { background-color: rgba(220, 53, 69, 0.12); } .btn-info { background-color: #0dcaf0; color: #ffffff; border-color: transparent; } .btn-info:hover { background-color: rgb(10.9035573123, 169.4245059289, 201.2964426877); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16); } .btn-outline-info { background-color: transparent; color: #0dcaf0; border-color: #0dcaf0; } .btn-outline-info:hover { background-color: #0dcaf0; color: #ffffff; } .btn-ghost-info { background-color: transparent; color: #0dcaf0; border-color: transparent; } .btn-ghost-info:hover { background-color: rgba(13, 202, 240, 0.12); } .btn-light { background-color: #e5e5e5; color: #212529; border-color: transparent; } .btn-light:hover { background-color: rgb(208.6, 208.6, 208.6); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16); } .btn-outline-light { background-color: transparent; color: #e5e5e5; border-color: #e5e5e5; } .btn-outline-light:hover { background-color: #e5e5e5; color: #212529; } .btn-ghost-light { background-color: transparent; color: #e5e5e5; border-color: transparent; } .btn-ghost-light:hover { background-color: rgba(229, 229, 229, 0.12); } .btn-dark { background-color: #212529; color: #ffffff; border-color: transparent; } .btn-dark:hover { background-color: rgb(14.8054054054, 16.6, 18.3945945946); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16); } .btn-outline-dark { background-color: transparent; color: #212529; border-color: #212529; } .btn-outline-dark:hover { background-color: #212529; color: #ffffff; } .btn-ghost-dark { background-color: transparent; color: #212529; border-color: transparent; } .btn-ghost-dark:hover { background-color: rgba(33, 37, 41, 0.12); } .btn-white { background-color: #ffffff; color: #212529; border-color: transparent; } .btn-white:hover { background-color: rgb(234.6, 234.6, 234.6); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16); } .btn-outline-white { background-color: transparent; color: #ffffff; border-color: #ffffff; } .btn-outline-white:hover { background-color: #ffffff; color: #212529; } .btn-ghost-white { background-color: transparent; color: #ffffff; border-color: transparent; } .btn-ghost-white:hover { background-color: rgba(255, 255, 255, 0.12); } .btn-black { background-color: #000000; color: #ffffff; border-color: transparent; } .btn-black:hover { background-color: black; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16); } .btn-outline-black { background-color: transparent; color: #000000; border-color: #000000; } .btn-outline-black:hover { background-color: #000000; color: #ffffff; } .btn-ghost-black { background-color: transparent; color: #000000; border-color: transparent; } .btn-ghost-black:hover { background-color: rgba(0, 0, 0, 0.12); } .btn-muted { background-color: #c7c7c7; color: #212529; border-color: transparent; } .btn-muted:hover { background-color: rgb(178.6, 178.6, 178.6); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16); } .btn-outline-muted { background-color: transparent; color: #c7c7c7; border-color: #c7c7c7; } .btn-outline-muted:hover { background-color: #c7c7c7; color: #212529; } .btn-ghost-muted { background-color: transparent; color: #c7c7c7; border-color: transparent; } .btn-ghost-muted:hover { background-color: rgba(199, 199, 199, 0.12); } .btn-gray { background-color: #6c757d; color: #ffffff; border-color: transparent; } .btn-gray:hover { background-color: rgb(89.0884120172, 96.5124463519, 103.1115879828); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16); } .btn-outline-gray { background-color: transparent; color: #6c757d; border-color: #6c757d; } .btn-outline-gray:hover { background-color: #6c757d; color: #ffffff; } .btn-ghost-gray { background-color: transparent; color: #6c757d; border-color: transparent; } .btn-ghost-gray:hover { background-color: rgba(108, 117, 125, 0.12); } .btn-accent-white { background-color: #f7f7f7; color: #212529; border-color: transparent; } .btn-accent-white:hover { background-color: rgb(226.6, 226.6, 226.6); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16); } .btn-outline-accent-white { background-color: transparent; color: #f7f7f7; border-color: #f7f7f7; } .btn-outline-accent-white:hover { background-color: #f7f7f7; color: #212529; } .btn-ghost-accent-white { background-color: transparent; color: #f7f7f7; border-color: transparent; } .btn-ghost-accent-white:hover { background-color: rgba(247, 247, 247, 0.12); } .btn-accent { background-color: #08bbbb; color: #ffffff; border-color: transparent; } .btn-accent:hover { background-color: rgb(6.3261538462, 147.8738461538, 147.8738461538); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16); } .btn-outline-accent { background-color: transparent; color: #08bbbb; border-color: #08bbbb; } .btn-outline-accent:hover { background-color: #08bbbb; color: #ffffff; } .btn-ghost-accent { background-color: transparent; color: #08bbbb; border-color: transparent; } .btn-ghost-accent:hover { background-color: rgba(8, 187, 187, 0.12); } .btn-transparent { background-color: transparent; color: #ffffff; border-color: transparent; } .btn-transparent:hover { background-color: rgba(0, 0, 0, 0); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16); } .btn-outline-transparent { background-color: transparent; color: transparent; border-color: transparent; } .btn-outline-transparent:hover { background-color: transparent; color: #ffffff; } .btn-ghost-transparent { background-color: transparent; color: transparent; border-color: transparent; } .btn-ghost-transparent:hover { background-color: rgba(0, 0, 0, 0.12); } /* ========================================================================== */ /* Alerts */ /* ========================================================================== */ .alert { padding: 0.5rem 1rem; border-radius: 0.25rem; border: 1px solid #c7c7c7; background: #f7f7f7; } .alert-primary { background: rgb(244.8, 225.72, 231.72); border-color: #aa0b3d; color: #212529; } .alert-primary-alt { background: rgba(249.66367713, 239.6816143498, 242.8206278027, 0.9590588235); border-color: rgba(170, 11, 61, 0.6588235294); color: #212529; } .alert-alt { background: rgba(251.0215053763, 245, 242.5806451613, 0.9505882353); border-color: rgba(181, 69, 24, 0.5882352941); color: #212529; } .alert-secondary { background: rgb(230.52, 230.52, 230.52); border-color: #333333; color: #212529; } .alert-success { background: rgb(230.64, 246.6, 239.16); border-color: #34b97b; color: #212529; } .alert-warning { background: rgb(255, 247.56, 225.24); border-color: #ffc107; color: #212529; } .alert-danger { background: rgb(250.8, 230.76, 232.68); border-color: #dc3545; color: #212529; } .alert-info { background: rgb(225.96, 248.64, 253.2); border-color: #0dcaf0; color: #212529; } .alert-light { background: rgb(251.88, 251.88, 251.88); border-color: #e5e5e5; color: #212529; } .alert-dark { background: rgb(228.36, 228.84, 229.32); border-color: #212529; color: #212529; } .alert-white { background: white; border-color: #ffffff; color: #212529; } .alert-black { background: rgb(224.4, 224.4, 224.4); border-color: #000000; color: #212529; } .alert-muted { background: rgb(248.28, 248.28, 248.28); border-color: #c7c7c7; color: #212529; } .alert-gray { background: rgb(237.36, 238.44, 239.4); border-color: #6c757d; color: #212529; } .alert-accent-white { background: rgb(254.04, 254.04, 254.04); border-color: #f7f7f7; color: #212529; } .alert-accent { background: rgb(225.36, 246.84, 246.84); border-color: #08bbbb; color: #212529; } .alert-transparent { background: rgba(255, 255, 255, 0.88); border-color: transparent; color: #212529; } /* ========================================================================== */ /* Cards (with custom borders and shadows) */ /* ========================================================================== */ .card { background: #ffffff; border: 1px solid #c7c7c7; border-radius: 0.5rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); transition: box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .card-hover:hover { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18); } .card-shadow-1 { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); } .card-shadow-2 { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16); } .card-shadow-3 { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18); } .card-shadow-4 { box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); } .card-shadow-5 { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22); } .card-border-primary { border-color: #aa0b3d; } .card-bg-primary { background-color: #aa0b3d; } .card-border-primary-alt { border-color: rgba(170, 11, 61, 0.6588235294); } .card-bg-primary-alt { background-color: rgba(170, 11, 61, 0.6588235294); } .card-border-alt { border-color: rgba(181, 69, 24, 0.5882352941); } .card-bg-alt { background-color: rgba(181, 69, 24, 0.5882352941); } .card-border-secondary { border-color: #333333; } .card-bg-secondary { background-color: #333333; } .card-border-success { border-color: #34b97b; } .card-bg-success { background-color: #34b97b; } .card-border-warning { border-color: #ffc107; } .card-bg-warning { background-color: #ffc107; } .card-border-danger { border-color: #dc3545; } .card-bg-danger { background-color: #dc3545; } .card-border-info { border-color: #0dcaf0; } .card-bg-info { background-color: #0dcaf0; } .card-border-light { border-color: #e5e5e5; } .card-bg-light { background-color: #e5e5e5; } .card-border-dark { border-color: #212529; } .card-bg-dark { background-color: #212529; } .card-border-white { border-color: #ffffff; } .card-bg-white { background-color: #ffffff; } .card-border-black { border-color: #000000; } .card-bg-black { background-color: #000000; } .card-border-muted { border-color: #c7c7c7; } .card-bg-muted { background-color: #c7c7c7; } .card-border-gray { border-color: #6c757d; } .card-bg-gray { background-color: #6c757d; } .card-border-accent-white { border-color: #f7f7f7; } .card-bg-accent-white { background-color: #f7f7f7; } .card-border-accent { border-color: #08bbbb; } .card-bg-accent { background-color: #08bbbb; } .card-border-transparent { border-color: transparent; } .card-bg-transparent { background-color: transparent; } /* ========================================================================== */ /* Modals */ /* ========================================================================== */ .modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; padding: 1rem; z-index: 1200; } .modal.open { display: flex; } .modal__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); } .modal__dialog { position: relative; width: min(720px, 100%); background: #ffffff; border: 1px solid #c7c7c7; border-radius: 0.5rem; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22); padding: 1rem; } .modal__header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; } .modal__title { font-size: 1.35rem; font-weight: 600; } .modal__close { background: transparent; box-shadow: none; } /* ========================================================================== */ /* Pills */ /* ========================================================================== */ .pill, .badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.5rem; border-radius: 9999px; border: 1px solid #c7c7c7; background: #f7f7f7; font-size: 0.875rem; line-height: 1.3; } .pill-primary, .badge-primary { background: rgb(244.8, 225.72, 231.72); color: #ffffff; border-color: #aa0b3d; } .pill-primary-alt, .badge-primary-alt { background: rgba(249.66367713, 239.6816143498, 242.8206278027, 0.9590588235); color: #ffffff; border-color: rgba(170, 11, 61, 0.6588235294); } .pill-alt, .badge-alt { background: rgba(251.0215053763, 245, 242.5806451613, 0.9505882353); color: #ffffff; border-color: rgba(181, 69, 24, 0.5882352941); } .pill-secondary, .badge-secondary { background: rgb(230.52, 230.52, 230.52); color: #ffffff; border-color: #333333; } .pill-success, .badge-success { background: rgb(230.64, 246.6, 239.16); color: #ffffff; border-color: #34b97b; } .pill-warning, .badge-warning { background: rgb(255, 247.56, 225.24); color: #ffffff; border-color: #ffc107; } .pill-danger, .badge-danger { background: rgb(250.8, 230.76, 232.68); color: #ffffff; border-color: #dc3545; } .pill-info, .badge-info { background: rgb(225.96, 248.64, 253.2); color: #ffffff; border-color: #0dcaf0; } .pill-light, .badge-light { background: rgb(251.88, 251.88, 251.88); color: #212529; border-color: #e5e5e5; } .pill-dark, .badge-dark { background: rgb(228.36, 228.84, 229.32); color: #ffffff; border-color: #212529; } .pill-white, .badge-white { background: white; color: #212529; border-color: #ffffff; } .pill-black, .badge-black { background: rgb(224.4, 224.4, 224.4); color: #ffffff; border-color: #000000; } .pill-muted, .badge-muted { background: rgb(248.28, 248.28, 248.28); color: #212529; border-color: #c7c7c7; } .pill-gray, .badge-gray { background: rgb(237.36, 238.44, 239.4); color: #ffffff; border-color: #6c757d; } .pill-accent-white, .badge-accent-white { background: rgb(254.04, 254.04, 254.04); color: #212529; border-color: #f7f7f7; } .pill-accent, .badge-accent { background: rgb(225.36, 246.84, 246.84); color: #ffffff; border-color: #08bbbb; } .pill-transparent, .badge-transparent { background: rgba(255, 255, 255, 0.88); color: #ffffff; border-color: transparent; } /* ========================================================================== */ /* Accordions */ /* ========================================================================== */ .accordion { border: 1px solid #c7c7c7; border-radius: 0.5rem; overflow: hidden; } .accordion__item + .accordion__item { border-top: 1px solid #c7c7c7; } .accordion__header { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 1rem; cursor: pointer; background: #f7f7f7; border: none; } .accordion__title { font-weight: 500; } .accordion__icon { transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .accordion__content { overflow: hidden; padding: 0 1rem; } .accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; } .accordion__item.is-open .accordion__content { padding: 0.5rem 1rem 1rem; } .accordion__item.is-open .accordion__icon { transform: rotate(180deg); } /* ========================================================================== */ /* Stack Utilities */ /* ========================================================================== */ .stack > * + * { margin-top: 1rem; } .stack-0 > * + * { margin-top: 0; } .stack-1 > * + * { margin-top: 0.25rem; } .stack-2 > * + * { margin-top: 0.5rem; } .stack-3 > * + * { margin-top: 1rem; } .stack-4 > * + * { margin-top: 1.5rem; } .stack-5 > * + * { margin-top: 3rem; } /* ========================================================================== */ /* Transitions & Animations */ /* ========================================================================== */ .transition-all { transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .transition-fast { transition-duration: 0.15s; } .transition-slow { transition-duration: 0.4s; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes slide-up { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .animate-fade-in { animation: fade-in 0.3s cubic-bezier(0, 0, 0.2, 1) both; } .animate-slide-up { animation: slide-up 0.35s cubic-bezier(0, 0, 0.2, 1) both; } /* ========================================================================== */ /* Tooltips */ /* ========================================================================== */ .tooltip { position: relative; display: inline-block; cursor: help; } .tooltip::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: #212529; color: #ffffff; padding: 0.25rem 0.5rem; font-size: 0.875rem; border-radius: 0.125rem; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1000; } .tooltip:hover::after { opacity: 1; } /* ========================================================================== */ /* Tabs */ /* ========================================================================== */ .tabs { display: flex; gap: 0.5rem; border-bottom: 1px solid #c7c7c7; } .tab { padding: 0.5rem 1rem; cursor: pointer; border-bottom: 2px solid transparent; transition: border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .tab.active { border-color: #aa0b3d; color: #aa0b3d; } /* ========================================================================== */ /* Transform & Scale Utilities */ /* ========================================================================== */ .scale-90 { transform: scale(0.9); } .scale-95 { transform: scale(0.95); } .scale-100 { transform: scale(1); } .scale-105 { transform: scale(1.05); } .scale-110 { transform: scale(1.1); } .rotate-90 { transform: rotate(90deg); } .rotate-180 { transform: rotate(180deg); } .rotate-270 { transform: rotate(270deg); } .skew-x-6 { transform: skewX(6deg); } .skew-y-6 { transform: skewY(6deg); } /* ========================================================================== */ /* Shadow, Blur, and Glow Utilities */ /* ========================================================================== */ .shadow-none { box-shadow: none !important; } .blur-sm { filter: blur(2px); } .blur-md { filter: blur(4px); } .blur-lg { filter: blur(8px); } .glow { box-shadow: 0 0 12px rgba(8, 187, 187, 0.5); } /* ========================================================================== */ /* Dark Mode (opt-in via .theme-dark) */ /* ========================================================================== */ .theme-dark { background: #212529; color: #e5e5e5; } .theme-dark .card, .theme-dark .modal__dialog { background: #333333; border-color: #c7c7c7; color: #e5e5e5; } .theme-dark .input, .theme-dark select, .theme-dark textarea { background: #333333; color: #e5e5e5; border-color: #c7c7c7; } .theme-dark .tabs { border-bottom-color: #c7c7c7; } .theme-dark .tab.active { border-color: #aa0b3d; color: #aa0b3d; } /* ========================================================================== */ /* Scroll Utilities */ /* ========================================================================== */ .scroll-y { overflow-y: auto !important; } .scroll-x { overflow-x: auto !important; } .scroll-hidden { overflow: hidden !important; } /* ========================================================================== */ /* Spinner */ /* ========================================================================== */ @keyframes ui-spinner { to { transform: rotate(360deg); } } .spinner { display: inline-block; width: 1rem; height: 1rem; border-radius: 50%; border-style: solid; border-width: 2px; border-color: #212529; border-left-color: transparent !important; animation: ui-spinner 1s linear infinite; } .spinner-primary { border-color: #aa0b3d; border-left-color: transparent !important; } .spinner-primary-alt { border-color: rgba(170, 11, 61, 0.6588235294); border-left-color: transparent !important; } .spinner-alt { border-color: rgba(181, 69, 24, 0.5882352941); border-left-color: transparent !important; } .spinner-secondary { border-color: #333333; border-left-color: transparent !important; } .spinner-success { border-color: #34b97b; border-left-color: transparent !important; } .spinner-warning { border-color: #ffc107; border-left-color: transparent !important; } .spinner-danger { border-color: #dc3545; border-left-color: transparent !important; } .spinner-info { border-color: #0dcaf0; border-left-color: transparent !important; } .spinner-light { border-color: #e5e5e5; border-left-color: transparent !important; } .spinner-dark { border-color: #212529; border-left-color: transparent !important; } .spinner-white { border-color: #ffffff; border-left-color: transparent !important; } .spinner-black { border-color: #000000; border-left-color: transparent !important; } .spinner-muted { border-color: #c7c7c7; border-left-color: transparent !important; } .spinner-gray { border-color: #6c757d; border-left-color: transparent !important; } .spinner-accent-white { border-color: #f7f7f7; border-left-color: transparent !important; } .spinner-accent { border-color: #08bbbb; border-left-color: transparent !important; } .spinner-transparent { border-color: transparent; border-left-color: transparent !important; } .spinner-sm { width: 0.875rem; height: 0.875rem; border-width: 2px; } .spinner-md { width: 1.25rem; height: 1.25rem; border-width: 2px; } .spinner-lg { width: 1.75rem; height: 1.75rem; border-width: 3px; } .spinner-xl { width: 2.25rem; height: 2.25rem; border-width: 4px; } /* ========================================================================== */ /* Visibility + Accessibility */ /* ========================================================================== */ .visible { visibility: visible !important; } .invisible { visibility: hidden !important; } .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* ========================================================================== */ /* Overflow + Text Truncation */ /* ========================================================================== */ .overflow-hidden { overflow: hidden !important; } .overflow-auto { overflow: auto !important; } .overflow-scroll { overflow: scroll !important; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ========================================================================== */ /* Opacity */ /* ========================================================================== */ .opacity-0 { opacity: 0; } .opacity-25 { opacity: 0.25; } .opacity-50 { opacity: 0.5; } .opacity-75 { opacity: 0.75; } .opacity-100 { opacity: 1; } /* ========================================================================== */ /* Cursor + Pointer Events */ /* ========================================================================== */ .cursor-default { cursor: default !important; } .cursor-pointer { cursor: pointer !important; } .cursor-not-allowed { cursor: not-allowed !important; } .pointer-none { pointer-events: none !important; } .pointer-auto { pointer-events: auto !important; } /* ========================================================================== */ /* Position + Inset */ /* ========================================================================== */ .relative { position: relative !important; } .absolute { position: absolute !important; } .fixed { position: fixed !important; } .sticky { position: sticky !important; } .inset-0 { inset: 0 !important; } .top-0 { top: 0 !important; } .right-0 { right: 0 !important; } .bottom-0 { bottom: 0 !important; } .left-0 { left: 0 !important; } /* ========================================================================== */ /* Flex Wrapping + Gap */ /* ========================================================================== */ .wrap { flex-wrap: wrap !important; } .nowrap { flex-wrap: nowrap !important; } .wrap-reverse { flex-wrap: wrap-reverse !important; } .gap-0 { gap: 0 !important; } .row-gap-0 { row-gap: 0 !important; } .col-gap-0 { -moz-column-gap: 0 !important; column-gap: 0 !important; } .gap-1 { gap: 0.25rem !important; } .row-gap-1 { row-gap: 0.25rem !important; } .col-gap-1 { -moz-column-gap: 0.25rem !important; column-gap: 0.25rem !important; } .gap-2 { gap: 0.5rem !important; } .row-gap-2 { row-gap: 0.5rem !important; } .col-gap-2 { -moz-column-gap: 0.5rem !important; column-gap: 0.5rem !important; } .gap-3 { gap: 1rem !important; } .row-gap-3 { row-gap: 1rem !important; } .col-gap-3 { -moz-column-gap: 1rem !important; column-gap: 1rem !important; } .gap-4 { gap: 1.5rem !important; } .row-gap-4 { row-gap: 1.5rem !important; } .col-gap-4 { -moz-column-gap: 1.5rem !important; column-gap: 1.5rem !important; } .gap-5 { gap: 3rem !important; } .row-gap-5 { row-gap: 3rem !important; } .col-gap-5 { -moz-column-gap: 3rem !important; column-gap: 3rem !important; } /* ========================================================================== */ /* Responsive Reverse (small-down) */ /* ========================================================================== */ @media (max-width: 768px) { .sm-reverse { display: flex; flex-direction: column-reverse; } } /* ========================================================================== */ /* Aspect Ratios + Object Fit */ /* ========================================================================== */ .ratio { position: relative; width: 100%; height: 0; overflow: hidden; } .ratio > * { position: absolute; inset: 0; width: 100%; height: 100%; } .ratio-16x9 { padding-bottom: 56.25%; } .ratio-4x3 { padding-bottom: 75%; } .ratio-1x1 { padding-bottom: 100%; } .object-contain { -o-object-fit: contain !important; object-fit: contain !important; } .object-cover { -o-object-fit: cover !important; object-fit: cover !important; } .object-fill { -o-object-fit: fill !important; object-fit: fill !important; } .object-none { -o-object-fit: none !important; object-fit: none !important; } .object-scale-down { -o-object-fit: scale-down !important; object-fit: scale-down !important; } /* ========================================================================== */ /* Hover Motion Helpers */ /* ========================================================================== */ .hover-raise { transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .hover-raise:hover { transform: translateY(-2px); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16); } .hover-glow { transition: box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .hover-glow:hover { box-shadow: 0 0 0 3px rgba(170, 11, 61, 0.2), 0 2px 6px rgba(0, 0, 0, 0.16); } /* ========================================================================== */ /* Divider Utilities */ /* ========================================================================== */ .hr { width: 100%; height: 1px; background: #c7c7c7; border: 0; } .hr-dashed { height: 1px; border-top: 1px dashed #c7c7c7; background: transparent; } /* ========================================================================== */ /* Utility Badges (aliases of pills) */ /* ========================================================================== */ /* ========================================================================== */ /* Quick Utility Aliases */ /* ========================================================================== */ .rel { position: relative; } .no-click { pointer-events: none; } .center { display: grid; place-items: center; } .full-height { height: 100vh; } /* ========================================================================== */ /* Flex Grid Extensions */ /* ========================================================================== */ .row.no-gutter { margin-inline: 0; margin-block: 0; } .row.no-gutter > .col, .row.no-gutter > [class^=col-] { padding-inline: 0; padding-block: 0; } .row.gx-0 { margin-right: 0; margin-left: 0; } .row.gx-0 > .col, .row.gx-0 > [class^=col-] { padding-right: 0; padding-left: 0; } .row.gy-0 { margin-top: 0; margin-bottom: 0; } .row.gy-0 > .col, .row.gy-0 > [class^=col-] { padding-top: 0; padding-bottom: 0; } .row-bleed { margin-right: calc(1rem * -1); margin-left: calc(1rem * -1); } @media (min-width: 576px) { .sm-row-center { justify-content: center; } .sm-row-between { justify-content: space-between; } .sm-row-around { justify-content: space-around; } .sm-row-evenly { justify-content: space-evenly; } } @media (min-width: 768px) { .md-row-center { justify-content: center; } .md-row-between { justify-content: space-between; } .md-row-around { justify-content: space-around; } .md-row-evenly { justify-content: space-evenly; } } @media (min-width: 992px) { .lg-row-center { justify-content: center; } .lg-row-between { justify-content: space-between; } .lg-row-around { justify-content: space-around; } .lg-row-evenly { justify-content: space-evenly; } } @media (min-width: 1200px) { .xl-row-center { justify-content: center; } .xl-row-between { justify-content: space-between; } .xl-row-around { justify-content: space-around; } .xl-row-evenly { justify-content: space-evenly; } } @media (min-width: 1400px) { .xxl-row-center { justify-content: center; } .xxl-row-between { justify-content: space-between; } .xxl-row-around { justify-content: space-around; } .xxl-row-evenly { justify-content: space-evenly; } } @media (min-width: 1600px) { .xxxl-row-center { justify-content: center; } .xxxl-row-between { justify-content: space-between; } .xxxl-row-around { justify-content: space-around; } .xxxl-row-evenly { justify-content: space-evenly; } } /* ========================================================================== */ /* CSS Grid Enhancements */ /* ========================================================================== */ .grid-cols-1 { grid-template-columns: repeat(1, 1fr) !important; } .grid-cols-2 { grid-template-columns: repeat(2, 1fr) !important; } .grid-cols-3 { grid-template-columns: repeat(3, 1fr) !important; } .grid-cols-4 { grid-template-columns: repeat(4, 1fr) !important; } .grid-cols-5 { grid-template-columns: repeat(5, 1fr) !important; } .grid-cols-6 { grid-template-columns: repeat(6, 1fr) !important; } .grid-cols-7 { grid-template-columns: repeat(7, 1fr) !important; } .grid-cols-8 { grid-template-columns: repeat(8, 1fr) !important; } .grid-cols-9 { grid-template-columns: repeat(9, 1fr) !important; } .grid-cols-10 { grid-template-columns: repeat(10, 1fr) !important; } .grid-cols-11 { grid-template-columns: repeat(11, 1fr) !important; } .grid-cols-12 { grid-template-columns: repeat(12, 1fr) !important; } .grid-cols-none { grid-template-columns: none !important; } .grid-rows-1 { grid-template-rows: repeat(1, 1fr) !important; } .grid-rows-2 { grid-template-rows: repeat(2, 1fr) !important; } .grid-rows-3 { grid-template-rows: repeat(3, 1fr) !important; } .grid-rows-4 { grid-template-rows: repeat(4, 1fr) !important; } .grid-rows-5 { grid-template-rows: repeat(5, 1fr) !important; } .grid-rows-6 { grid-template-rows: repeat(6, 1fr) !important; } .grid-rows-7 { grid-template-rows: repeat(7, 1fr) !important; } .grid-rows-8 { grid-template-rows: repeat(8, 1fr) !important; } .grid-rows-9 { grid-template-rows: repeat(9, 1fr) !important; } .grid-rows-10 { grid-template-rows: repeat(10, 1fr) !important; } .grid-rows-11 { grid-template-rows: repeat(11, 1fr) !important; } .grid-rows-12 { grid-template-rows: repeat(12, 1fr) !important; } .grid-rows-none { grid-template-rows: none !important; } .grid-auto-fit-sm { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)) !important; } .grid-auto-fit-md { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)) !important; } .grid-auto-fit-lg { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)) !important; } .grid-auto-fill-sm { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)) !important; } .grid-auto-fill-md { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)) !important; } .grid-auto-fill-lg { grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)) !important; } .grid-align-center { align-items: center !important; justify-items: center !important; } .grid-align-start { align-items: start !important; justify-items: start !important; } .grid-align-end { align-items: end !important; justify-items: end !important; } .grid-align-stretch { align-items: stretch !important; justify-items: stretch !important; } .grid-flow-row { grid-auto-flow: row !important; } .grid-flow-col { grid-auto-flow: column !important; } .grid-flow-row-dense { grid-auto-flow: row dense !important; } .grid-flow-col-dense { grid-auto-flow: column dense !important; }/*# sourceMappingURL=main.css.map */