/*

Sections:

- Reset
- General
- Buttons
- Comment Form

 */

/* Reset ------------------------------------------------------------------------------------------------------------ */
.daexthefu-container,
.daexthefu-container * {
    box-sizing: border-box !important;
    text-transform: none !important;
    box-shadow: none !important;
}

/* General ---------------------------------------------------------------------------------------------------------- */
.daexthefu-comment {
    display: none;
}

.daexthefu-successful-submission-text {
    display: none;
    margin: 35px 0 33px !important;
}

.daexthefu-feedback {
    display: flex;
}

.daexthefu-layout-side-by-side .daexthefu-feedback {
    flex-direction: row !important;
    gap: 32px !important;
}

.daexthefu-layout-stacked .daexthefu-feedback {
    flex-direction: column !important;
}

.daexthefu-title {
    margin: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.daexthefu-description {
    padding: 0 !important;
    margin: 32px 0 0 0 !important;
}

.daexthefu-alignment-left .daexthefu-description {
    order: 2 !important;
}

.daexthefu-alignment-left .daexthefu-title,
.daexthefu-alignment-left .daexthefu-description {
    text-align: left !important;
}

.daexthefu-alignment-center .daexthefu-title,
.daexthefu-alignment-center .daexthefu-description {
    text-align: center !important;
}

.daexthefu-alignment-right .daexthefu-title,
.daexthefu-alignment-right .daexthefu-description {
    text-align: right !important;
}

/*
 * The title can be an h2, h3, h4, h5, h6 or p element (based on the "Title Tag" option). Remove the styles applied by
 * the user agent and by the theme to these elements so that the title has the same style with all the elements.
 *
 * Inherited properties inherit the value of the parent element and non-inherited properties are set to their initial
 * value. The font family, font size, font style, font weight, line height and color are defined in the
 * custom-[blog_id].css file, the text alignment is defined below.
 *
 * The title is a column flex container because the ::first-letter and ::first-line pseudo-elements (used by themes for
 * drop caps) only apply to block containers. With a single column the text is laid out like in a block container.
 */
#daexthefu-container .daexthefu-title {

    /* Box. */
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    justify-content: normal !important;
    align-items: normal !important;
    align-content: normal !important;
    gap: normal !important;
    flex: 0 1 auto !important;
    order: 0 !important;
    align-self: auto !important;
    justify-self: auto !important;
    box-sizing: border-box !important;
    position: static !important;
    inset: auto !important;
    float: none !important;
    clear: none !important;
    z-index: auto !important;
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 none !important;
    border-radius: 0 !important;
    outline: none !important;
    overflow: visible !important;
    vertical-align: baseline !important;
    columns: auto !important;
    contain: none !important;
    content-visibility: visible !important;

    /* Visual effects. */
    background: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
    filter: none !important;
    backdrop-filter: none !important;
    mix-blend-mode: normal !important;
    isolation: auto !important;
    transform: none !important;
    translate: none !important;
    rotate: none !important;
    scale: none !important;
    clip-path: none !important;
    -webkit-mask: none !important;
    mask: none !important;
    animation: none !important;
    transition: none !important;
    counter-reset: none !important;
    counter-increment: none !important;

    /* Text. */
    text-transform: none !important;
    text-decoration: none !important;
    text-overflow: clip !important;
    initial-letter: normal !important;
    letter-spacing: inherit !important;
    word-spacing: inherit !important;
    text-indent: inherit !important;
    text-shadow: inherit !important;
    text-align-last: inherit !important;
    text-justify: inherit !important;
    text-underline-position: inherit !important;
    text-underline-offset: inherit !important;
    text-decoration-skip-ink: inherit !important;
    text-emphasis: inherit !important;
    text-rendering: inherit !important;
    text-wrap: inherit !important;
    white-space: inherit !important;
    word-break: inherit !important;
    overflow-wrap: inherit !important;
    line-break: inherit !important;
    -webkit-hyphens: inherit !important;
    hyphens: inherit !important;
    hanging-punctuation: inherit !important;
    tab-size: inherit !important;
    paint-order: inherit !important;
    -webkit-text-stroke: inherit !important;
    -webkit-text-fill-color: inherit !important;
    -webkit-font-smoothing: inherit !important;
    -moz-osx-font-smoothing: inherit !important;

    /* Font properties not defined in the custom-[blog_id].css file. */
    font-variant: inherit !important;
    font-feature-settings: inherit !important;
    font-variation-settings: inherit !important;
    font-kerning: inherit !important;
    font-stretch: inherit !important;
    font-optical-sizing: inherit !important;
    font-size-adjust: inherit !important;
    font-synthesis: inherit !important;
    font-language-override: inherit !important;

    /* Interaction. */
    visibility: inherit !important;
    cursor: inherit !important;
    pointer-events: inherit !important;
}

/* Remove the pseudo-elements added by the theme to headings and paragraphs. */
#daexthefu-container .daexthefu-title::before,
#daexthefu-container .daexthefu-title::after {
    content: none !important;
    display: none !important;
}

#daexthefu-container.daexthefu-alignment-left .daexthefu-title {
    text-align: left !important;
}

#daexthefu-container.daexthefu-alignment-center .daexthefu-title {
    text-align: center !important;
}

#daexthefu-container.daexthefu-alignment-right .daexthefu-title {
    text-align: right !important;
}

.daexthefu-container {
    display: flex !important;
    flex-direction: column !important;
    border-style: solid !important;
}

.daexthefu-image {
    width: 100% !important;
}

.daexthefu-container .daexthefu-image.daexthefu-image-position-top {
    order: 1 !important;
}

.daexthefu-container .daexthefu-image.daexthefu-image-position-bottom {
    order: 4 !important;
}

.daexthefu-container .daexthefu-comment {
    order: 3 !important;
}

/* Buttons ---------------------------------------------------------------------------------------------------------- */
.daexthefu-button {
    padding: 8px !important;
    margin: 8px !important;
    cursor: pointer !important;
    display: flex !important;
    width: fit-content !important;
}

.daexthefu-buttons-container {
    display: flex !important;
}

.daexthefu-buttons {
    display: flex !important;
    gap: 16px !important;
}

/*
 * The positive and negative feedback buttons are <button> elements. Remove the styles applied by the user agent and
 * by the theme to the <button> element so that the buttons are only styled by the plugin.
 */
.daexthefu-button.daexthefu-yes,
.daexthefu-button.daexthefu-no {
    -webkit-appearance: none !important;
    appearance: none !important;
    border: none !important;
    background: none !important;
    color: inherit !important;
    font: inherit !important;
    letter-spacing: inherit !important;
    word-spacing: inherit !important;
    text-align: inherit !important;
    text-indent: inherit !important;
    text-decoration: none !important;
    text-shadow: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    align-items: flex-start !important;
    transform: none !important;
}

.daexthefu-button {
    height: fit-content !important;
    transition: opacity .4s !important;
}

.daexthefu-button:hover {
    opacity: 0.7 !important;
}

/*
 * Remove the outline applied by some themes (e.g. Twenty Twenty-Five) to the focused buttons when they are clicked with
 * the mouse. The outline displayed when the buttons are focused with the keyboard (:focus-visible) is kept for
 * accessibility reasons.
 */
.daexthefu-button:focus:not(:focus-visible) {
    outline: none !important;
}

.daexthefu-alignment-left .daexthefu-buttons-container {
    justify-content: flex-start !important;
}

.daexthefu-alignment-center .daexthefu-buttons-container {
    justify-content: center !important;
}

.daexthefu-alignment-center .daexthefu-feedback {
    justify-content: center !important;
}

.daexthefu-alignment-right .daexthefu-feedback {
    justify-content: right !important;
}

.daexthefu-alignment-right .daexthefu-buttons-container {
    justify-content: flex-end !important;
}

.daexthefu-button svg{
    width: 48px !important;
    height: 48px !important;
}

.daexthefu-button-text {
    height: 32px !important;
    overflow: hidden !important;
}

.daexthefu-button-type-icon {
    padding: 0 !important;
    margin: 0 !important;
    width: 48px !important;
    height: 48px !important;
    background: none !important;
}

.daexthefu-button-type-icon-and-text {
    margin: 0 !important;
    padding: 0 16px !important;
    height: 48px !important;
    display: flex !important;
    gap: 16px !important;
}

.daexthefu-button-type-icon-and-text
.daexthefu-button-icon {
    width: 48px !important;
    height: 48px !important;
}

.daexthefu-button-type-icon-and-text
.daexthefu-button-text {
    height: 48px !important;
}

.daexthefu-button-type-icon-and-text .daexthefu-icon-circle {
    display: none !important;
}

.daexthefu-button-type-text {
    margin: 0 !important;
    padding: 0 16px !important;
    height: 48px !important;
}

/* Comment Form ----------------------------------------------------------------------------------------------------- */
.daexthefu-comment {
    margin: 32px 0 0 !important;
}

.daexthefu-comment-label {
    margin: 3px 0 9px !important;
}

.daexthefu-comment-top-container {
    display: flex !important;
}

.daexthefu-comment-character-counter-container {
    margin-left: auto !important;
}

.daexthefu-comment-character-counter-number,
.daexthefu-comment-character-counter-text {
    display: inline-block;
    margin: 3px 0 9px !important;
}

.daexthefu-comment-textarea {
    border-width: 1px !important;
    border-style: solid !important;
    padding: 15px !important;
    margin: 0 0 32px !important;
    width: 100% !important;
    min-height: 104px !important;
    height: 104px !important;
    max-height: 104px !important;
    outline: none !important;
    transition: all 0.4s ease;
    resize: none !important;
}

.daexthefu-comment-textarea:focus {
    outline: none !important;
}

.daexthefu-comment-buttons-container {
    display: flex !important;
    gap: 16px !important;
}

.daexthefu-comment-submit,
.daexthefu-comment-cancel {
    margin: 0 !important;
    border: none !important;
    padding: 0 16px !important;
    overflow: hidden !important;
    height: 48px !important;
    border-width: 1px !important;
    border-style: solid !important;
}