.container {
    display: flex;
    flex-wrap: wrap;
    margin: 48px;
}

.btn-voltar {
    padding: 10px 0px;
    width: 100%;
  }
  
  .btn-back {
    padding: 7px 13px;
    background-color: #EA4B6F;
    color: #fff;
    border: none;
    font-weight: 700;
    border-radius: 3px;
    cursor: pointer;
    z-index: 150;
    transition: 0.3s;
  }

.pcd {
    font-weight: 700;
    font-size: 12px;
    background: white;
    color: #038fc6;
    border: 2px solid #038fc6;
    padding: 2px 6px;
    width: max-content;
    border-radius: 6px;
}

.perfil {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 24px 0;
    margin-bottom: 32px;
    background: white;
    border-radius: 24px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 8px;
}

.bi-telephone-fill,
.bi-envelope-fill {
    color: #038fc6;
    font-size: 20px;
    margin-right: 4px;
}

.photo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: 10px;
    width: 25%;
}

.photo-container i,
.photo-container span {
    color: #038fc6;
    font-weight: 700;
}

.photo-container img {
    width: 160px;
    height: 160px;
    object-fit: cover;
    border-radius: 100%;
}

.user-info {
    width: 80%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

 .user-name {
    margin-bottom: 20px;
    font-size: 1.5rem;
}

.user-contact-wrapper {
  display: flex;
  flex-direction: row;
  column-gap: 10px;
}

.user-info .user-contact {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    width: 49%;
}

.idcultural {
    background: #038fc6;
    border-radius: 4px;
    padding: 2px 6px;
    color: white;
    font-size: 16px;
    font-weight: 800;
}

.feiras-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    column-gap: 20px;
    width: 100%;
}

.feiras-info {
    width: 70%;
}

.feiras-info .card-section {
    background: white;
    padding: 12px;
    border-radius: 12px;
    margin-bottom: 24px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}

.feiras-info .card-section h2 {
    margin-bottom: 12px;
}

.feiras-info .card-section span {
    font-weight: 600;
    font-size: 14px;
}


.feira-online .whatsapp-btn {
    cursor:pointer;
    border: none;
    border-radius: 8px;
    padding: 6px 12px;
    background: #1ba14d;
    color: white;
    display: flex;
    font-size: 16px;
    align-items: center;
    margin-top: 4px;
}

.feiras-part {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    width: 30%;
}

.feiras-part .feira img {
    width: 100px;
    border-radius: 8px;
    height: 80px;
}

.fotos-container {
    display: flex;
    flex-direction: row;
    column-gap: 10px;
    row-gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.fotos-container .foto {
    width: calc(97% / 3 - 4px);
    height: max-content;
    cursor: pointer;
}

.fotos-container .foto img {
    width: 100%;
    height: 10vw;
    object-fit: cover;
    border-radius: 6px;
}

.files-container {
    display: flex;
    flex-direction: row;
    column-gap: 10px;
    margin-top: 10px;
}

.files-container .file {
    width: calc(99% / 5);
}

.files-container .file a {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.files-container .file img {
    width: 80px;
}

.files-container .file a p {
   font-size: 0.8rem;
   word-break: break-all;
}

.observacoes {
    display: flex;
    flex-direction: column;
}

.observacao {
    font-size: 13px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.4);;
    padding: 4px;
    margin-bottom: 8px;
}

.observacao label {
    font-weight: 700;
}

.part-table {
    background: white;
    width: 100%;
    margin-top: 10px;
    border-radius: 10px;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;
}

.part-table td {
    padding: 6px 12px;
    font-size: 16px;
    font-weight: 700;
    color: #038fc6;
}

/* Avaliação do feirante */

.btn-avaliar {
  background: #038fc6;
  border: none;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
  color: white;
  cursor: pointer;
}

#avaliar-presenca {
    background: white;
    border-radius: 8px;
    padding: 12px;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;
  }

.btn-close {
    background: rgba(247, 84, 84);
    border: none;
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 16px;
    color: white;
    cursor: pointer;
}

/* Avaliação do artista */
.btn-avaliar-artista {
    background: #038fc6;
    border: none;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
    color: white;
    cursor: pointer;
  }

  #avaliar-presenca-artista {
    background: white;
    border-radius: 8px;
    padding: 12px;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;
  }

  .btn-close-artista {
    background: rgb(247, 84, 84);
    border: none;
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 16px;
    color: white;
    cursor: pointer;
  }

.btn-enviar {
  background: #038fc6;
  border: none;
  padding: 4px 10px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 16px;
  color: white;
  cursor: pointer;
}

.input-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}
 
.input-group input, .input-group select, .input-group textarea {
  padding: 7px;
  font-size: 14px;
  border: 1px solid rgb(219, 219, 219);
  border-radius: 4px;
  background-color: #fff;
  color: #333;
  outline: none;
}

.input-group label {
  margin-bottom: 2px;
  font-weight: 700;
  font-size: 0.9rem;
}

@media (max-width: 1200px) {
    .user-info .user-contact {
        display: flex;
        flex-direction: column;
        row-gap: 10px;
        width: 49%;
        font-size: 0.8rem;
    }

    .user-info {
        width: 75%;
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

    .photo-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        row-gap: 10px;
        width: 30%;
    }

    .perfil {
        display: flex;
        flex-direction: row;
        width: 100%;
        padding: 24px 0;
        margin-bottom: 32px;
        background: white;
        border-radius: 24px;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
    }

    .photo-container i,
    .photo-container span {
        color: #038fc6;
        font-weight: 700;
        font-size: 12px;
    }
}

@media (max-width: 1000px) {
    .perfil {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 24px 0;
        text-align: start;
        margin-bottom: 32px;
        align-items: center;
    }

    .photo-container {
        width: 30%;
    }

    .user-info {
        padding: 10px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }


    .user-name {
        text-align: center;
    }

    .user-contact-wrapper {
        display: flex;
        padding: 0px;
        flex-direction: column;
        text-align: center;
        column-gap: 10px;
        row-gap: 20px;
        align-items: center;
    }

    .user-info .user-contact {
        display: flex;
        flex-direction: column;
        row-gap: 10px;
        width: 90%;
        font-size: 0.8rem;
        align-items: center;
    }
}

@media (max-width: 800px) {
    .container {
        display: flex;
        flex-wrap: wrap;
        margin: 48px;
        justify-content: center;
    }

    .perfil {
        flex-direction: column;
        width: 100%;
        margin-bottom: 40px;
        padding: 24px;
    }

    .user-contact-wrapper {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        row-gap: 20px;
    }

    .user-info .user-contact {
        flex-direction: column;
        row-gap: 10px;
        width: 100%;
        font-size: 0.8rem;
    }

    .user-contact div { 
        display: flex;
        flex-direction: row;
        column-gap: 10px;
        justify-content: center;
    }

    .user-name {
        font-size: 1.5rem;
    }

    .user-info {
        text-align: center;
        width: 100%;
    }

    .photo-container {
        row-gap: 10px;
        width: 100%;
    }

    .photo-container i,
    .photo-container span {
        color: #038fc6;
        font-weight: 700;
        font-size: 12px;
    }

    .feiras-container {
        flex-direction: column-reverse;
    }

    .feiras-info {
        width: 100%;
    }

    .feiras-part {
        width: 100%;
    }

    .fotos-container {

    }

    .fotos-container .foto {
        width: calc(96%/2);
        height: 140px;
    }

    .fotos-container .foto img {
        height: 140px;
    }

    #fechar-overlay {
        top: 40px; 
    }

}