flex-dialog {
    display: none !important;

    --fd-primary-color: var(--primary-color, #444444);
    --fd-secondary-color: var(--secondary-color, #1d2939);
    --fd-background-color: var(--main-bg-color, #ffffff);
    --fd-backdrop-color: rgba(0, 0, 0, 0.7);
    --fd-radius: 20px;
    --fd-padding: 20px;
    --fd-margin: 40px;
    --fd-close-button-size: 28px;
}

body:has(flex-dialog[\:open]) {
    overflow: hidden;
    pointer-events: none;
}

flex-dialog::backdrop {
    overflow: hidden;
}

flex-dialog[\:open] {
    pointer-events: auto;
}

flex-dialog .button.primary {
    background-color: var(--fd-primary-color) !important;
    color: var(--fd-background-color) !important;
    border-color: var(--fd-primary-color) !important;
}

flex-dialog .button.secondary {
    background-color: var(--fd-background-color) !important;
    color: var(--fd-primary-color) !important;
    border-color: var(--fd-primary-color) !important;
}

flex-dialog:has(dialog[open]) {
    display: contents !important;
}

@media (width <= 800px) {
    flex-dialog {
        --fd-margin: 20px;
    }
}

flex-dialog > dialog {
    display: none !important;
    background-color: var(--fd-background-color) !important;
    border-radius: var(--fd-radius) !important;
    padding: 0 !important;
    border: none !important;
    overflow: visible !important;
    max-width: 800px !important;
    min-width: 300px !important;
}

@media (width <= 800px) {
    flex-dialog > dialog {
        min-width: calc(100% - (2 * var(--fd-padding))) !important;
    }
}

flex-dialog > dialog::backdrop {
    background-color: var(--fd-backdrop-color) !important;
}

flex-dialog > dialog[open] {
    display: block !important;
    animation: flex-dialog-fade-in 0.5s ease-out backwards !important;
}

flex-dialog > dialog[open]::backdrop {
    animation: flex-dialog-backdrop-fade-in 0.5s ease-out backwards !important;
}

flex-dialog > dialog[data-closing] {
    animation: flex-dialog-fade-out 0.5s ease-out forwards !important;
}

flex-dialog > dialog[data-closing]::backdrop {
    animation: flex-dialog-backdrop-fade-out 0.5s ease-out forwards !important;
}

flex-dialog .flex-dialog__header__title {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    word-break: break-all !important;
    word-wrap: break-word !important;
    position: absolute !important;
    margin: 0 !important;
    top: calc(-0.5 * var(--fd-close-button-size)) !important;
    left: var(--fd-padding) !important;
    background-color: var(--fd-secondary-color) !important;
    padding: 0px var(--fd-padding) !important;
    border-radius: var(--fd-radius) !important;
    min-height: 28px !important;
    max-width: calc(100% - var(--fd-close-button-size) - (3 * var(--fd-padding))) !important;
    color: var(--fd-background-color) !important;
    text-transform: uppercase !important;
}

flex-dialog .flex-dialog__header__title[hidden] {
    display: none !important;
}

flex-dialog .flex-dialog__header__title,
flex-dialog .flex-dialog__header__title * {
    color: var(--fd-background-color) !important;
    font-weight: bold !important;
    font-size: 12px !important;
}

flex-dialog .flex-dialog__header__close {
    display: grid !important;
    place-items: center !important;
    position: absolute !important;
    margin: 0 !important;
    padding: 0 !important;
    top: calc(-0.5 * var(--fd-close-button-size)) !important;
    right: var(--fd-padding) !important;
    background-color: var(--fd-background-color) !important;
    color: var(--fd-secondary-color) !important;
    border: 1px solid var(--fd-secondary-color) !important;
    border-radius: var(--fd-radius) !important;
    height: var(--fd-close-button-size) !important;
    width: var(--fd-close-button-size) !important;
    cursor: pointer !important;
}

flex-dialog .flex-dialog__header__close:focus {
    outline: 1px solid var(--fd-primary-color) !important;
}

flex-dialog[\:hidden-close-button] .flex-dialog__header__close {
    display: none !important;
}

flex-dialog[\:lock] .flex-dialog__header__close {
    pointer-events: none !important;
}

flex-dialog .flex-dialog__header__close svg path {
    fill: var(--fd-secondary-color) !important;
}

flex-dialog[\:theme="success"] .flex-dialog__header__title > span,
flex-dialog[\:theme="warning"] .flex-dialog__header__title > span,
flex-dialog[\:theme="error"] .flex-dialog__header__title > span,
flex-dialog[\:theme="danger"] .flex-dialog__header__title > span,
flex-dialog[\:theme="info"] .flex-dialog__header__title > span {
    display: none !important;
}

flex-dialog[\:theme="success"] .flex-dialog__header__title::before,
flex-dialog[\:theme="warning"] .flex-dialog__header__title::before,
flex-dialog[\:theme="error"] .flex-dialog__header__title::before,
flex-dialog[\:theme="danger"] .flex-dialog__header__title::before,
flex-dialog[\:theme="info"] .flex-dialog__header__title::before {
    text-transform: capitalize !important;
}

flex-dialog[\:theme="success"] {
    --fd-primary-color: green !important;
    --fd-secondary-color: green !important;
}

flex-dialog[\:theme="success"] * {
    color: green;
}

flex-dialog[\:theme="success"] .flex-dialog__header__title::before {
    content: "SUCESSO!" !important;
}

flex-dialog[\:theme="success"] .flex-dialog__header__title[hidden] {
    display: flex !important;
}

flex-dialog[\:theme="success"] .button.primary {
    background-color: green !important;
    color: white !important;
}

flex-dialog[\:theme="danger"] {
    --fd-primary-color: firebrick !important;
    --fd-secondary-color: firebrick !important;
}

flex-dialog[\:theme="danger"] * {
    color: firebrick;
}

flex-dialog[\:theme="danger"] .flex-dialog__header__title::before {
    content: "PERIGO!" !important;
}

flex-dialog[\:theme="danger"] .flex-dialog__header__title[hidden] {
    display: flex !important;
}

flex-dialog[\:theme="info"] {
    --fd-primary-color: dimgray !important;
    --fd-secondary-color: dimgray !important;
}

flex-dialog[\:theme="info"] * {
    color: dimgray;
}

flex-dialog[\:theme="info"] .flex-dialog__header__title::before {
    content: "INFORMAÇÃO!" !important;
}

flex-dialog[\:theme="info"] .flex-dialog__header__title[hidden] {
    display: flex !important;
}

flex-dialog[\:theme="warning"] {
    --fd-primary-color: orange !important;
    --fd-secondary-color: orange !important;
}

flex-dialog[\:theme="warning"] * {
    color: orange;
}

flex-dialog[\:theme="warning"] .flex-dialog__header__title::before {
    content: "AVISO!" !important;
}

flex-dialog[\:theme="warning"] .flex-dialog__header__title[hidden] {
    display: flex !important;
}

flex-dialog[\:theme="error"] {
    --fd-primary-color: red !important;
    --fd-secondary-color: red !important;
}

flex-dialog[\:theme="error"] * {
    color: red;
}

flex-dialog[\:theme="error"] .flex-dialog__header__title::before {
    content: "ERRO!" !important;
}

flex-dialog[\:theme="error"] .flex-dialog__header__title[hidden] {
    display: flex !important;
}

flex-dialog .flex-dialog__body {
    padding: var(--fd-padding) !important;
    padding-top: calc(1.5 * var(--fd-padding)) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    max-height: calc(100vh - (5 * var(--fd-padding))) !important;
    max-width: calc(100vw - (4 * var(--fd-padding))) !important;
    overflow-y: auto !important;
    text-align: center !important;
}

@media (width <= 800px) {
    flex-dialog .flex-dialog__body {
        max-width: calc(100vw - (2 * var(--fd-padding))) !important;
    }
}

flex-dialog[\:position="top"] > dialog {
    margin-top: var(--fd-margin) !important;
}

flex-dialog[\:position="top-left"] > dialog {
    margin-top: var(--fd-margin) !important;
    margin-left: var(--fd-margin) !important;
}

flex-dialog[\:position="top-right"] > dialog {
    margin-top: var(--fd-margin) !important;
    margin-right: var(--fd-margin) !important;
}

flex-dialog[\:position="center-left"] > dialog {
    margin-left: var(--fd-margin) !important;
}

flex-dialog[\:position="center-right"] > dialog {
    margin-right: var(--fd-margin) !important;
}

flex-dialog[\:position="bottom"] > dialog {
    margin-bottom: var(--fd-margin) !important;
}

flex-dialog[\:position="bottom-left"] > dialog {
    margin-bottom: var(--fd-margin) !important;
    margin-left: var(--fd-margin) !important;
}

flex-dialog[\:position="bottom-right"] > dialog {
    margin-bottom: var(--fd-margin) !important;
    margin-right: var(--fd-margin) !important;
}

flex-dialog[\:text-align="start"] .flex-dialog__body {
    text-align: start !important;
}

flex-dialog[\:text-align="end"] .flex-dialog__body {
    text-align: end !important;
}

flex-dialog[\:text-align="justify"] .flex-dialog__body {
    text-align: justify !important;
}

flex-dialog[\:fill] > dialog {
    max-width: calc(100vw - calc(2 * var(--fd-margin))) !important;
    max-height: calc(100vh - calc(2 * var(--fd-margin))) !important;
    height: 100% !important;
    width: 100% !important;
}

flex-dialog[\:fill] .flex-dialog__body {
    min-height: 100%;
    max-height: calc(100vh - calc(2 * var(--fd-margin)) - (2.5 * var(--fd-padding))) !important;
}

flex-dialog[\:fill] > dialog[open] {
    animation: flex-dialog-fade-in-on-fill 0.5s ease-out backwards !important;
}

flex-dialog[\:fill] > dialog[data-closing] {
    animation: flex-dialog-fade-out-on-fill 0.5s ease-out forwards !important;
}

flex-dialog .flex-dialog__body {
    scrollbar-width: 3px !important;
    scrollbar-color: rgba(0, 0, 0, 0.5) !important;
}

flex-dialog .flex-dialog__body::-webkit-scrollbar {
    width: 3px !important;
}

flex-dialog .flex-dialog__body::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.5) !important;
    border-radius: 3px !important;
}

flex-dialog .flex-dialog__body::-webkit-scrollbar-track {
    background: none !important;
}

@keyframes flex-dialog-fade-in {
    0% {
        transform: scale(0);
    }

    80% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes flex-dialog-fade-in-on-fill {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes flex-dialog-fade-out {
    0% {
        transform: scale(1);
    }

    20% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(0);
    }
}

@keyframes flex-dialog-fade-out-on-fill {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

@keyframes flex-dialog-backdrop-fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes flex-dialog-backdrop-fade-out {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}