/*

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;
    min-width: 183px !important;
    align-items: center;
    justify-content: space-between;
}

.daexthefup-button::after {
    display: block;
    content: "";
    width: 5px;
    height: 10px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAKCAYAAAB8OZQwAAAAS0lEQVQImV3KoRGAMBREwc1HREIJ9EIDaKgPTW+gIphBZSbJyX2XlnXLKJoFbuQR3zEEDjxtCHw42xD6pfqccGHGjhIj1GcHFTuAH2A+D4fVRj62AAAAAElFTkSuQmCC);
    opacity: .4;
}

.daexthefup-buttons .daexthefup-button,
.daexthefup-comment-buttons-container .daexthefup-button {
    border-radius: 32px !important;
}

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

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

@media (max-width: 414px) {
    .daexthefup-buttons {
        flex-direction: column;
        width: 100%;
    }
}

.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-icon {
    width: 32px !important;
    height: 32px !important;
}

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

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

@media (max-width: 414px) {
    .daexthefup-comment-buttons-container {
        flex-direction: column;
    }
}

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

.daexthefup-text .daexthefup-title {
    font-weight: 400 !important;
    font-family: Graphik-Light,Helvetica,Arial,sans-serif !important;
    color: #1c2544 !important;
}

.daexthefup-button .daexthefup-button-text {
    font-family: Graphik-Regular,Helvetica,Arial,sans-serif !important;
    font-weight: 300 !important;
}

.daexthefup-comment .daexthefup-comment-textarea {
    font-family: Graphik-Regular,Helvetica,Arial,sans-serif !important;
}

.daexthefup-comment .daexthefup-comment-textarea:focus {
    border-color: #000000 !important;
}

.daexthefup-comment .daexthefup-comment-label {
    font-family: Graphik-Regular,Helvetica,Arial,sans-serif !important;
}

.daexthefup-comment-buttons-container .daexthefup-button {
    font-family: Graphik-Regular,Helvetica,Arial,sans-serif !important;
    background: #E7E7E8 !important;
    color: #1c2544 !important;
}