@import url("/css/dynamic_groupattachments.css");

.img_notice_etequianos {
    background-image: url(/img/icons/etequianos_logo_error.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 430px;
}

.notice {
    border-radius: 25px;
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 2em 1.2em 0em 1.2em;
    transition: all ease 0.2s;
    border-image: var(--border-image-baixo-cima);
    display: block;
}

.notice_details_start {
    margin: 1.5em 1em 2em 1.5em;
}

.notice_details_box {
    display: grid;
    grid-template-columns: 1fr 2fr;
    /* Define duas colunas para distribuir os elementos */
    grid-gap: 1em;
    border-radius: 27px;
    width: 100%;
    height: auto;
    /* Mantém a proporção do retângulo */
    box-sizing: border-box;
}

.title_notice {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 1em 0;
    border-radius: 25px;
    width: 100%;
    background-color: #FF985D46;
    border: 2px dashed #FF7629;
    box-sizing: border-box;
}

.input_creditos_box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 1em 0;
    border-radius: 25px;
    width: 100%;
    background-color: #FF985D46;
    border: 2px dashed #FF7629;
    box-sizing: border-box;
}

.title__notice {
    position: relative;
    text-shadow: var(--text-shadow);
    bottom: 0;
    font-size: 30px;
    font-weight: 700;
    z-index: 0;
    border: 0px solid #00000000;
    background: none;
}

.title__notice:focus {
    outline: none;
    border: none;
}

/* Estilo para o placeholder */
.title__notice:empty::after {
    content: "Título da notícia";
    color: #8f8f8f;
    /* Cor do placeholder */
}

/* Remove o placeholder quando o elemento estiver em foco */
.title__notice:focus::before {
    content: "";
}

.subtitle__notice {
    position: relative;
    text-shadow: var(--text-shadow);
    top: 5px;
    bottom: 0;
    font-size: 18px;
    font-weight: 350;
    z-index: 0;
    border: 0px solid #00000000;
    background: none;
}

.subtitle__notice:focus {
    outline: none;
    border: none;
}

/* Estilo para o placeholder */
.subtitle__notice:empty::after {
    content: "Subtítulo da notícia";
    color: #8f8f8f;
    /* Cor do placeholder */
}

/* Remove o placeholder quando o elemento estiver em foco */
.subtitle__notice:focus::before {
    content: "";
}

.text_notice {
    position: relative;
    margin-top: 1em;
}

.n_info {
    margin: 0em 1.2em 0.8em 1.2em;
    background: #0A36BB;
    color: #FFF;
    border-radius: 0 0 25px 25px;
    padding: 1em;
}

.notice_text {
    margin: 1em 1.2em 0em 1.2em;
    text-align: justify;
    font-size: 18px;
    line-height: 22px;
}

.link {
    color: #0A36BB !important;
    transition: all ease 0.2s;
}

.link:hover {
    color: #0f4bff !important;
    transition: all ease 0.2s;
}

.notice_text a {
    color: #0A36BB !important;
    transition: all ease 0.2s;
}

.notice_text a:hover {
    color: #0f4bff !important;
    transition: all ease 0.2s;
}

.notice_text b {
    font-weight: 700;
}

.notice_text i {
    font-style: italic;
}

.negrito {
    font-weight: 700;
}

/* Estilização da tabela */
.table-container {
    margin-bottom: 20px;
    /* Espaço entre tabelas */
}

table {
    width: 100%;
    /* Largura total */
    border-collapse: collapse;
    /* Remove espaçamento entre as bordas */
    border-radius: 10px;
    /* Bordas arredondadas */
    overflow: hidden;
    /* Oculta bordas arredondadas */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    /* Sombra sutil */
}

th,
td {
    padding: 12px 15px;
    /* Espaçamento interno */
    text-align: left;
    /* Alinhamento à esquerda */
    color: var(--textos);
    border-bottom: 1px solid var(--background-loading);
    /* Linha separadora entre as linhas */
    transition: background-color 0.3s, color 0.3s;
    /* Transição suave para o efeito hover */
}

th {
    background-color: #ff985d77;
    /* Cor do cabeçalho */
    color: var(--textos);
    /* Cor do texto do cabeçalho */
    font-weight: bold;
    /* Negrito no cabeçalho */
}

td {
    background-color: var(--backgroud-footer);
    /* Cor de fundo das células */
    color: var(--textos);
}

tr:hover td {
    background-color: var(--background-search-box);
    /* Cor ao passar o mouse sobre a linha */
    color: var(--textos);
}

/* Estilos para botões */
.delete-btn,
.btn_table {
    background-color: #007BFF;
    /* Cor do botão */
    color: var(--textos);
    /* Cor do texto do botão */
    border: none;
    /* Remove a borda padrão */
    border-radius: 5px;
    /* Bordas arredondadas nos botões */
    padding: 8px 12px;
    /* Espaçamento interno do botão */
    cursor: pointer;
    /* Cursor de mão ao passar sobre o botão */
    margin-right: 5px;
    /* Espaço entre os botões */
    transition: background-color 0.3s;
    /* Transição suave */
}

.delete-btn:hover,
.btn_table:hover {
    background-color: #0056b3;
    /* Cor ao passar o mouse sobre o botão */
}

/* Responsividade */
@media (max-width: 600px) {

    th,
    td {
        padding: 8px;
        /* Reduzir o padding em telas pequenas */
    }

    button {
        padding: 6px 10px;
        /* Reduzir o padding dos botões em telas pequenas */
    }
}

.notice_text ul {
    margin: 0.8em 0 0.8em 1em;
    color: var(--textos);
    list-style-type: disc;
    /* Define o tipo de marcador como um círculo */
    padding-left: 16px;
    /* Adiciona um recuo à esquerda para os marcadores */
}

.notice_text li {
    margin-bottom: 4px;
    /* Adiciona um espaço entre os itens da lista */
}


.inputs_cred_container {
    margin: 1.8em;
    box-sizing: border-box;
}

.inputBox {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.cred_img {
    margin: 0 0 0.8em 0;
}

.inputBox input {
    width: 100%;
    padding: 0.7em;
    border: 1px solid #00000060;
    background: transparent;
    border-radius: 5px;
    outline: none;
    color: black;
    font-size: 20px;
    box-sizing: border-box;
}

.inputBox textarea {
    width: 254px;
    padding: 0.6em 0.6em 0.8em 0.6em;
    border: 1px solid #00000060;
    background: transparent;
    border-radius: 5px;
    outline: none;
    color: black;
    font-family: var(--fonte-principal);
    font-size: 16px;
    resize: none;
}

.inputBox span {
    position: absolute;
    left: 0;
    top: 0;
    padding: 1em 0.6em;
    pointer-events: none;
    font-size: 16px;
    color: #000000a6;
    font-weight: 400;
    transition: 0.3s;
}

.inputBox input:valid~span,
.inputBox input:focus~span {
    color: black;
    transform: translateX(10px) translateY(-10px);
    font-size: 14px;
    padding: 0 8px;
    background: #ffffff;
    border-radius: 15px;
}

.inputBox textarea:valid~span,
.inputBox textarea:focus~span {
    color: black;
    transform: translateX(10px) translateY(-7px);
    font-size: 14px;
    padding: 0 10px;
    background: #ffffff;
    border-radius: 15px;
}

.input_desc {
    font-weight: 400;
    font-size: 14px;
    margin: 0.1em 0 0 0.5em;
}

@media screen and (max-width: 800px) {
    .input_creditos_box {
        position: relative;
        margin: 1em 0 0em 0;
        border-radius: 25px;
        width: 100%;
        background-color: #FF985D46;
        border: 2px dashed #FF7629;
        box-sizing: border-box;
    }

    .title_notice {
        position: relative;
        margin: 0em 0;
        border-radius: 25px;
        width: 100%;
        background-color: #FF985D46;
        border: 2px dashed #FF7629;
        box-sizing: border-box;
    }

    .notice_details_box {
        grid-template-columns: 1fr;
    }
}

.publish_or_review {
    position: relative;
    bottom: 0em;
    background: #eeeeee44;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    -moz-backdrop-filter: blur(10px);
    -o-backdrop-filter: blur(10px);
    padding: 1em 1em 1em 1em;
    margin: 0 0 3em 0;
}

.etapa_btn_area_warning {
    text-align: end;
    margin: 0 0 0.4em 0;
    font-size: 14px;
}

.btn_area {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: column;
    gap: 0.6em;
}

.btn_próximo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    margin: 0 0 0 0.5em;
    background: #5c5c5c9c;
    color: white;
    padding: 0.8em 1.5em;
    border-radius: 50px;
    cursor: not-allowed;
    pointer-events: none;
    text-wrap: nowrap;
    transition: all ease 0.4s;
}

.btn_próximo.active {
    background: #0a36bb;
    cursor: pointer;
    pointer-events: all;
}

.btn_próximo.active:hover {
    box-shadow: 0px 6px 10px #0a74bb70;
}

.btn_area .active {
    background: #0a36bb;
    cursor: pointer;
    pointer-events: all;
}

.btn_area .active:hover {
    box-shadow: 0px 6px 10px #0a74bb70;
}

.draw {
    background: #00b44b;
    cursor: pointer;
    pointer-events: all;
}

.btn_area .draw:hover {
    box-shadow: 0px 6px 10px #00b44b70;
}

.review_deny {
    display: none;
    background: #ff2e2e;
    cursor: pointer;
    pointer-events: all;
}

.btn_area .review_deny:hover {
    box-shadow: 0px 6px 10px #ff2e2e70;
}

.review_cancell {
    display: none;
    background: #ff582e;
    cursor: pointer;
    pointer-events: all;
}

.btn_area .review_cancell:hover {
    box-shadow: 0px 6px 10px #ff582e70;
}

.review_save {
    display: none;
    background: #2effff;
    color: black;
    cursor: pointer;
    pointer-events: all;
}

.btn_area .review_save:hover {
    box-shadow: 0px 6px 10px #2effff70;
}

.btn_próximo:hover {
    transition: all ease 0.4s;
}

.dyNoticeNew_box {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 0 0.5em;
    background: #ff985d39;
    color: rgb(0, 0, 0);
    padding: 0.6em;
    border-radius: 50px;
    transition: all ease 0.4s;
}

.dyNoticeNew_box .switch-parent {
    margin: 0 0.4em 0 0;
}

.barMenuOp__addlink {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 99999999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.op__link {
    position: absolute;
    width: 350px;
    border-radius: 15px;
    background-color: #e4e4e4;
    padding: 1em;
    box-shadow: 0px 6px 1px #d55f1a;
}

.barMenuOptions__title__2 {
    margin: 0 0 1em 0;
}

.barMenuOp__addtextnegrito {
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 99999999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.op__textnegrito {
    position: fixed;
    width: 350px;
    border-radius: 15px;
    background-color: #e4e4e4;
    padding: 1em;
    box-shadow: 0px 6px 1px #d55f1a;
}

#btn_area_op {
    margin: 0.8em 0 0 0;
}

@keyframes abrir_components {
    0% {
        transform: scale(0);
    }

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

@keyframes fechar_components {
    0% {
        transform: scale(1);
    }

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

.barMenuOptions__titletext {
    font-weight: 750;
    font-size: 18px;
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
}

.barMenuOptions__titletext img {
    margin: 0 0.4em 0 0;
}

.inputBox_barMenuOp {
    position: relative;
    width: 100%;
    margin: 0 0 1em 0;
    box-sizing: border-box;
}

.inputBox_barMenuOp input {
    width: 100%;
    height: 54px;
    padding: 0.6em;
    border: 1px solid #00000060;
    background: transparent;
    border-radius: 5px;
    outline: none;
    color: black;
    font-size: 20px;
    box-sizing: border-box;
}

.inputBox_barMenuOp textarea {
    width: 254px;
    padding: 0.6em;
    border: 1px solid #00000060;
    background: transparent;
    border-radius: 5px;
    outline: none;
    color: black;
    font-family: var(--fonte-principal);
    font-size: 16px;
    resize: none;
    /* Desabilita redimensionamento manual */
    padding: 10px;
    /* Ajuste de acordo com sua necessidade */
}

.inputBox_barMenuOp span {
    position: absolute;
    left: 0;
    top: 0;
    padding: 1em 0.6em;
    pointer-events: none;
    font-size: 16px;
    color: #000000a6;
    font-weight: 400;
    transition: 0.3s;
}

.inputBox_barMenuOp input:valid~span,
.inputBox_barMenuOp input:focus~span {
    color: black;
    transform: translateX(10px) translateY(-10px);
    font-size: 14px;
    padding: 0 8px;
    background: #e4e4e4;
    border-radius: 15px;
}

.inputBox_barMenuOp textarea:valid~span,
.inputBox_barMenuOp textarea:focus~span {
    color: black;
    transform: translateX(10px) translateY(-7px);
    font-size: 14px;
    padding: 0 10px;
    background: #e4e4e4;
    border-radius: 15px;
}

.btn_area .btn_cancelar_anterior_barMenuOp {
    background: transparent;
    padding: 0.7em 1.4em;
    border-radius: 50px;
    border: 1px solid #000;
    color: var(--textos) !important;
    transition: all ease 0.2s;
    cursor: pointer;
}

.btn_area .btn_cancelar_anterior_barMenuOp:hover {
    background: #000;
    padding: 0.7em 1.4em;
    border-radius: 50px;
    border: 1px solid #000;
    color: white !important;
    transition: all ease 0.2s;
}

.btn_area .btn_proximo_barMenuOp {
    margin: 0 0 0 0.5em;
    background: #0a36bb;
    color: white !important;
    padding: 0.8em 1.5em;
    border-radius: 50px;
    cursor: pointer;
    transition: all ease 0.4s;
}

.btn_area .btn_proximo_barMenuOp:hover {
    box-shadow: 0px 6px 10px #0a74bb70 !important;
    color: white !important;
    transition: all ease 0.4s;
}

.inputBox_barMenuOp .input_desc {
    font-weight: 400;
    font-size: 14px;
    margin: 0.1em 0 0 0.5em;
    line-height: normal;
}

.publishNotice__addOp {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 99999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.publishNotice__addOp_box {
    position: absolute;
    width: 350px;
    border-radius: 15px;
    background-color: #e4e4e4;
    padding: 1em;
    box-shadow: 0px 6px 1px #d55f1a;
}

.img_etapa2_noticeTitle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 200px;
    border: 1px solid #000;
    border-radius: 15px;
    box-shadow: 0px 0px 10px #ff762675;
    object-fit: cover;
    box-sizing: border-box;
}

.input_file {
    width: 100%;
    margin: 0.5em 0em 0 0em;
    background: #0a36bb;
    border-radius: 15px;
    border: none;
    color: white;
    box-sizing: border-box;
}

.warning_img_select {
    text-align: end;
    font-size: 14px;
    margin: 0 0 1em 0;
}

.tips_writeInHTML {
    background: #cccccc;
    padding: 0.6em;
    border-radius: 15px;
    box-shadow: 0px 6px 10px #00000070;
    margin: 0 0 2em 0;
}

.tips_writeInHTML__title {
    font-weight: 700;
    font-size: 20px;
    text-decoration: underline;
    margin: 0 0 0.6em 0;
}

#player {
    margin: 0 0 1em 0;
    border-radius: 15px;
}

#player_view_etapa04_list {
    border-radius: 15px;
}

.inputRadioBox {
    margin: 0.8em 0;
    padding: 0.6em;
    background: linear-gradient(135deg, #e0e0e0, #f5f5f5);
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background 0.4s ease, transform 0.3s ease;
}

.inputRadioBox:hover {
    background: linear-gradient(135deg, #ffffff, #f0f0f0);
    transform: scale(1.02);
}

.inputRadio {
    position: absolute;
    opacity: 0;
}

.inputRadio+label {
    position: relative;
    padding-left: 45px;
    font-size: 16px;
    line-height: 20px;
    cursor: pointer;
    transition: color 0.3s ease;
    color: #333;
}

.inputRadio+label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 25px;
    height: 25px;
    border: 2px solid #333;
    border-radius: 50%;
    background: transparent;
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.inputRadio:checked+label::before {
    background: #FF7629;
    border-color: #FF7629;
    box-shadow: 0 0 10px #FF762980;
}

.inputRadio+label::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 9px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: white;
    opacity: 0;
    transform: scale(0) translateY(-50%);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.inputRadio:checked+label::after {
    opacity: 1;
    transform: scale(1) translateY(-50%);
}

.inputRadioBox:hover label::before {
    border-color: #FF7629;
    box-shadow: 0 0 8px #FF762933;
}

.inputRadioBox:hover label {
    color: #FF7629;
}

.chips_informations {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.4em;
    margin: 1em 0 0.6em 0;
}

.chip {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    user-select: none;
    cursor: pointer;
    gap: 0.4em;
    background-color: var(--background-color);
    border-radius: 100px;
    padding: 0.4em 0.4em 0.4em 0.4em;
    height: 34px;
    font-weight: 600;
    box-shadow: 0 0 14px rgba(0, 0, 0, 0.137);
    transition: all ease 0.2s;
}

.chip:hover {
    transform: scale(1.04);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
    transition: all ease 0.2s;
}

#list_users_forCredImgTitle:has(input[type="radio"]:checked) ~ .inputs_cred_container {
    pointer-events: none;
    user-select: none;
    opacity: 0.5; /* Opcional: deixa o input visualmente desativado */
}

input[type="radio"]:checked+label .chip {
    background-color: #FFB68D;
}

input[type="checkbox"]:checked+label .chip {
    background-color: #FFB68D;
}

.chip p,
.chip h2,
.chip h3,
.chip span {
    color: var(--color-texts);
}

.chip h3,
.chip.category p {
    padding: 0 0.4em;
}

.chip.category,
.chip.category p {
    color: #4E9FFF;
    text-decoration: underline;
}

.ac_border_img_account {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3.2px solid var(--laranja);
    border-radius: 50%;
    padding: 0.18em;
    box-sizing: border-box;
}

.ac__img_account {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    flex-wrap: nowrap;
    flex-direction: row;
}

.ac__img_account img {
    width: 22px;
    height: 22px;
    box-sizing: border-box;
    background-color: #FF762980;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    object-fit: cover;
    /* Garante que a imagem seja cortada para se ajustar ao contêiner */
    object-position: center;
    /* Centraliza a imagem dentro do contêiner */
}

.select_category {
    margin: 2em 1.2em 2em 1.2em;
}

@media screen and (min-width: 1400px) {
    .img_notice_etequianos {
        background-image: url(/img/icons/etequianos_logo_error.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        height: 480px;
    }

    .select_category {
        margin: 2em 9em 2em 9em;
    }

    .notice {
        background-repeat: no-repeat;
        border-radius: 25px 25px 0 0;
        position: relative;
        background-position: center;
        background-size: cover;
        margin: 2em 9em 0em 9em;
        transition: all ease 0.2s;
    }

    .n_info {
        margin: 0em 9em 0em 9em;
        background: #0A36BB;
        color: #FFF;
        padding: 1em;
        border-radius: 0 0 25px 25px;
    }

    .notice_text {
        margin: 0em 9em 3em 9em;
        text-align: justify;
        font-size: 18px;
    }

    .notice_details_start {
        margin: 1.5em 1em 2em 1.5em;
    }

    .title__notice {
        position: relative;
        text-shadow: var(--text-shadow);
        bottom: 0;
        font-size: 45px;
        font-weight: 700;
        z-index: 0;
    }

    .subtitle__notice {
        position: relative;
        text-shadow: var(--text-shadow);
        top: 5px;
        bottom: 0;
        font-size: 20px;
        font-weight: 350;
        z-index: 0;
    }

    .publish_or_review {
        padding: 1em 10em 1em 10em;
    }

    .btn_area {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-direction: row;
        gap: 0em;
    }
}