/*

Sections:

- Reset
- General
- Buttons
- Comment Form

 */

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

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

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

.daexthefup-feedback {
    display: flex;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.daexthefup-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;
}

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

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

.daexthefup-comment-submit,
.daexthefup-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;
}