.newsletter-box {
    width: 100%;
    background-color: var(--primary-color);
    display: flex;
    align-items: center;
    padding: 40px 0;
}

.newsletter-box .btn {
    padding: 0 16px;
    margin-bottom: 0;
    min-height: 54px;
    align-items: center;
    display: flex;
    background-color: #DC6A16;
    width: 176px;
    padding: 12px 32px;
    border-radius: 6px 14px;
}

.newsletter-box .btn:hover {
    background-color: var(--secondary-color);
    border: 1px solid var(--secondary-color);
    color: var(---secondary-color);
}

.newsletter-box .btn:hover svg {
    fill: var(--secondary-color) !important;
    stroke: var(--secondary-color);
}

.newsletter-box .btn:hover path {
    fill: var(--primary-color);
    stroke: var(--primary-color);
}

#filename-wrapper {
    /* border: 1px solid #dcdde3; */
    box-sizing: border-box;
    border-radius: 4px 0 0 4px;
    width: 100%;
}

#form .form-main-input-item.form-main-input-item-file .form-main-input-row.flex-container {
    gap: 0;
    flex-wrap: nowrap;
}

.form-main-input-row {
    display: flex;
    gap: 0;
    align-items: center;
    height: 100%;
    width: 100% !important;
}

.form-main-input-item input,
.form-main-input-item select,
.form-main-input-item textarea {
    font-family: var(--title-font);
    font-weight: 100;
    color: #A1A2A5 !important;
    opacity: 1;
    font-size: 12px;
    width: 100%;
    border-radius: 4px;
}

.form-main-input-item {
    width: 100% !important;
}

.form-main-input-item-file input {
    padding: 16px;
    border: none;
    border: 1px solid var(--color-white);
    font-size: 16px;
    line-height: 19.2px;
    font-family: var(--text-font);
    width: 100% !important;
}

.form-main-input-item-file input:focus {
    border-color: #96b0ad;
}

@media (max-width: 1199px) {
    .newsletter-box .flex-row {
        flex-wrap: wrap;
        gap: 28px;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .newsletter-box .btn {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .newsletter-box .btn-default {
        padding: 16px;
    }
}

/* Animação label */

.newsletter-box {
    contain: layout;
    position: relative;
}

.newsletter__label {
	position: absolute;
	top: 50%;
	left: 16px;
	transform: translateY(-50%);
	transition: transform 0.3s ease-in-out;
	cursor: text;
	color: var(--color-cinza-escuro);
	font-size: 16px;
}

.newsletter__input {
    padding: 0 16px;
}

:is(.newsletter__input:focus, .newsletter__input:valid)+.newsletter__label {
    transform: translate(-16px, -250%);
    color: white;
}


/* Botão */

.btn--newsletter:hover>img {
    filter: brightness(0) saturate(100%) invert(10%) sepia(17%) saturate(5864%) hue-rotate(136deg) brightness(95%) contrast(98%);
}