/*Fontes*/
    @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Zilla+Slab:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');

    /*Guia de nomenclatura das classes:
        - a letra p antes das classes se refere ao sistema pep;
        - As classes estão escritas em inglês para seguir o padrão;
        - no se refere a sem;
        - classes com d se refere a double ex: .p-btn-d-border-light (botão com borda dupla)
    */
    /*Guia para busca das classes:
        - Para procurar as classes que precisa pressione ctrl + f  
        - Comentários estão em português
        - Os nomes das classes estão todos em inglês
        - Os nomes das cores e dos botõesestão seguindo ao figma
    */
:root {
    /*fontes*/
    --font-primary: 'Open Sans', sans-serif;
    --font-secundary: 'Zilla Slab', serif;
    /*estilos de fontes*/
    /* Title/H1*/
    --font-weight-title-h1: 600;
    --font-size-title-h1: 56px;
    --font-line-height-title-h1: 62px;
    --font-line-height-title-h1-alt: 56px;
    /* Title/H2*/
    --font-weight-title-h2: 600;
    --font-size-title-h2: 32px;
    --font-line-height-title-h2: 38px;
    --font-line-height-title-h2-alt: 36px;
    --font-letter-title: 0;
    /* Title/H3*/
    --font-title-h3-weight: 600;
    --font-title-h3-size: 16px;
    --font-title-h3-line-height: 20px;
    --font-title-h3-letter-spacing: 0;
    /* Title/H3 alt*/
    --font-title-h3-alt-weight: 400;
    --font-title-h3-alt-size: 16px;
    --font-title-h3-alt-line-height: 18px;
    --font-title-h3-alt-letter-spacing: 0;
    /* Body/Subtitle */
    --font-body-subtitle-weight: 600;
    --font-body-subtitle-weight-2: 700;
    --font-body-subtitle-size: 24px;
    --font-body-subtitle-line-height: 30px;
    --font-body-subtitle-letter-spacing: 0;
    /* Body/Body 1 */
    --font-body1-weight: 400;
    --font-body1-weight-semibold: 600;
    --font-body1-weight-bold: 700;
    --font-body1-size: 16px;
    --font-body1-line-height: 22px;
    --font-body1-letter-spacing: 0;
    /* Body/Body 2 */
    --font-body2-weight: 400;
    --font-body2-weight-semibold: 600;
    --font-body2-weight-bold: 800;
    --font-body2-weight-bold2: 700;
    --font-body2-size: 14px;
    --font-body2-line-height: 18px;
    --font-body2-letter-spacing: 0;
    /* Body/demi */
    --font-bodydemi-weight-bold: 600;
    --font-bodydemi-size: 14px;
    --font-bodydemi-line-height: 16px;
    --font-bodydemi-letter-spacing: 0;
    /* Body/Label */
    --font-label-weight: 400;
    --font-label-weight-semibold: 600;
    --font-label-size: 12px;
    --font-label-line-height: 16px;
    --font-label-letter-spacing: 0;
    /* Buttons/Button 1 e alt*/
    --font-button1-weight: 600;
    --font-button1-size: 24px;
    --font-button1-line-height: 28px;
    --font-button1-letter-spacing: 0;
    /* Buttons/Button 2 */
    --font-button2-weight: 700;
    --font-button2-size: 16px;
    --font-button2-line-height: 20px;
    --font-button2-line-height2: 22px;
    --font-button2-letter-spacing: 0;
    /* Title card */
    --font-title-card-subtitle-weight: 600;
    --font-title-card-subtitle-weight-2: 800;
    --font-title-card-subtitle-size: 20px;
    --font-title-card-subtitle-size2: 16px;
    --font-title-card-subtitle-line-height: 25px;
    --font-title-card-subtitle-letter-spacing: 0;
    /* Subtitle card */
    --font-subtitle-card-weight: 500;
    --font-subtitle-card-size: 14px;
    --font-subtitle-card-line-height: 20px;
    --font-subtitle-card-line-height2: 22px;
    --font-subtitle-card-letter-spacing: 0;
    /*cores*/
    --system-blue-800: #120A8F;
    --system-purple-800: #22032d;
    --system-purple-700: #380a4a;
    --system-purple-600: #5f1a77;
    --system-purple-500: #62177c;
    --system-purple-400: #814b96;
    --system-purple-300: #a331bc;
    --system-purple-200: #f6dcff;
    --system-purple-100: #f1e6f4;
    --system-purple-gray: #A893B0;
    --system-common-beige: #fbf4ec;
    --system-common-white: #ffffff;
    --system-common-light-grey: #f1f2f6;
    --system-common-dark-grey: #8c8c8c;
    --system-common-dark-blue: #1e234b;
    --system-common-black: #000000;
    --system-features-tomato-500: #ff4f51;
    --system-features-orange-500: #ffb400;
    --system-features-aquamarine-500: #36dcb4;
    --system-status-sucess: #0fc70e;
    --system-status-error: #f20000;
    --system-status-soon: #CCC2B6;
    --system-status-done: #E5EBFF;
    --system-conhecimento-yellow-green-500: #8aaf00;
    --system-conhecimento-pink-500: #f82c71;
    --system-conhecimento-orange-500: #ff7a01;
    --system-conhecimento-blue-500: #53b5ff;
    --system-chat-bg-color: #F0F4FF;
    --texto-claro: #fff;
    --lvl-tag: #f82c71;
    --subtitulo-cor: #d10000;
    --bg-claro: #fff;
    --bg-claro-texto: #f8f5ff;
    --bg-inventario-conquista: #53b5ff;
    --bg-inventario-personagem: lightgreen;
    --bg-barra-progresso: #5dbd45;
    --bg-inventario-titulos: lightcoral;
    --texto-cinza: #a0a0a0;
    --texto-escuro: #151515;
    --bg-input: #efe7f4;
    --bg-botao-claro: #5f1a77;
    --bg-botao-escuro: #8f23b7;
    --bg-botao-escuro-hover: #62177c;
    --bg-card-lvl-media-botao: #ffcc00;
    --bg-card-lvl-media: #fff178;
    --bg-card-lvl-acima: #e5fbe5;
    --bg-card-lvl-acima-botao: #5cd3a5;
    --bg-card-lvl-abaixo: #ffebe5;
    --bg-card-lvl-abaixo-botao: #fb5259;
    --hue: 240;
    --bg-button-light-gray: #00000014;
    --bg-button-color-error: #A40000;
    --bg-button-color-success: #0A8709;
    --bg-button-color-light-success: #BCEFBC;
    --bg-button-color-light-error: #FBB8B8;
    --bg-button-option-default: #FDF5EC;
    --bg-button-option-hover: #FDF5EC;
    --bg-color-bg-objects: #CCC2B6;
    --bg-color-bg-status-completed: #E4C1EC;
    --bg-button-menu-color-hover: #A893B0;
    --pill-bg-color-default: #F0F0F0;
    --text-color-fill: #6C645A;
    /*Overlay de tons de preto e branco*/
    --overlay-black-32: rgba(0, 0, 0, 0.32);
    --overlay-white-24: rgba(255, 255, 255, 0.24);
    --overlay-white-16: rgba(255, 255, 255, 0.16);
    /*sombras*/
    --shadow-xxsm: 2px 2px 2px rgba(0, 0, 0, 0.1);
    --shadow-xsm: 5px 5px 2px rgba(0, 0, 0, 0.27);
    --shadow-sm: 0px 8px 16px rgba(0, 0, 0, 0.15);
    --shadow-md: 15px 15px 10px rgba(0, 0, 0, 0.35);
    --shadow-sm-btn-option-default: 0px 2px 0.1px rgba(239, 228, 216, 1);
    --shadow-sm-btn-option-hover: linear-gradient(0deg, #F1F2F6, #F1F2F6), linear-gradient(0deg, rgba(56, 10, 74, 0.32), rgba(56, 10, 74, 0.32));
}

    /* ------------------> Inicio das Cores <--------------------------*/
    /*cores do sistema*/
    .p-purple-100 {
        background-color: var(--system-purple-100);
    }

    .p-purple-200 {
        background-color: var(--system-purple-200);
    }

    .p-purple-300 {
        background-color: var(--system-purple-300);
    }

    .p-purple-400 {
        background-color: var(--system-purple-400);
    }

    .p-purple-500 {
        background-color: var(--system-purple-500);
    }

    .p-purple-600 {
        background-color: var(--system-purple-600);
    }

    .p-purple-700 {
        background-color: var(--system-purple-700);
    }

    .p-purple-800 {
        background-color: var(--system-purple-800);
    }

    .p-beige {
        background-color: var(--system-common-beige);
    }

    .p-common-white {
        background-color: var(--system-common-white);
    }

    .p-light-gray {
        background-color: var(--system-common-light-grey);
    }

    .p-dark-gray {
        background-color: var(--system-common-dark-grey);
    }

    .p-dark-blue {
        background-color: var(--system-common-dark-blue);
    }

    .p-tomato-500 {
        background-color: var(--system-features-tomato-500);
    }

    .p-orange-500 {
        background-color: var(--system-features-orange-500);
    }

    .p-aquamarine-500 {
        background-color: var(--system-features-aquamarine-500);
    }

    .p-success {
        background-color: var(--system-status-sucess);
    }

    .p-error {
        background-color: var(--system-status-error);
    }

    .p-soon {
        background-color: var(--system-status-soon);
    }

    .p-done {
        background-color: var(--system-status-done);
    }

    .p-black {
        background-color: var(--system-common-black);
    }

    .green-500 {
        background-color: var(--system-conhecimento-yellow-green-500);
    }

    .pink-500 {
        background-color: var(--system-conhecimento-pink-500);
    }

    .orange-500 {
        background-color: var(--system-conhecimento-orange-500);
    }

    .blue-500 {
        background-color: var(--system-conhecimento-blue-500);
    }
    .blue-800 {
        background-color: var(--system-blue-800);
    }

    .p-background-chat {
        background-color: var(--system-chat-bg-color);
    }

    .p-lvl-tag {
        background-color: var(--lvl-tag);
    }

    .p-subtitulo-cor {
        background-color: var(--subtitulo-cor);
    }

    .p-purple-gray {
        background-color: var(--system-purple-gray);
    }

    .p-bg-claro {
        background-color: var(--bg-claro);
    }

    .light-success {
        background: linear-gradient(0deg, var(--overlay-white-24), var(--overlay-white-24)), linear-gradient(0deg, var(--bg-button-color-light-success), var(--bg-button-color-light-success));
    }
    /*cor de fundo dos botões*/
    .p-btn-purple-100 {
        background-color: var(--system-purple-100);
    }

    .p-btn-purple-200 {
        background-color: var(--system-purple-200);
    }

    .p-btn-purple-300 {
        background-color: var(--system-purple-300);
    }

    .p-btn-purple-400 {
        background-color: var(--system-purple-400);
    }

    .p-btn-purple-500 {
        background-color: var(--system-purple-500);
    }

    .p-btn-purple-600 {
        background-color: var(--system-purple-600);
    }

    .p-btn-purple-700 {
        background-color: var(--system-purple-700);
    }

    .p-btn-purple-800 {
        background-color: var(--system-purple-800);
    }

    .p-btn-tomato-500 {
        background-color: var(--system-features-tomato-500);
    }

    .p-btn-orange-500 {
        background-color: var(--system-features-orange-500);
    }

    .p-btn-lightgreen {
        background-color: var(--system-features-aquamarine-500);
    }

    .p-btn-purple-700-light {
        background: linear-gradient(0deg, var(--overlay-white-24), var(--overlay-white-24)), linear-gradient(0deg, var(--system-purple-700), var(--system-purple-700));
    }

    .p-btn-purple-300-light {
        background: linear-gradient(0deg, var(--overlay-white-24), var(--overlay-white-24)), linear-gradient(0deg, var(--system-purple-300), var(--system-purple-300));
    }

    .p-btn-light-gray {
        background: var(--bg-button-light-gray);
    }

    .p-btn-error {
        background: var(--bg-button-color-error);
    }

    .p-btn-success {
        background: var(--bg-button-color-success);
    }

    .p-system-blue-800 {
        background: var(--system-blue-800);
    }

/*cor de fundo dos botões*/
/*cores dos botões de ações desabilitados*/
.p-btn-purple-disabled {
    background: linear-gradient(0deg, var(--overlay-black-32), var(--overlay-black-32)), linear-gradient(0deg, var(--system-purple-600), var(--system-purple-600));
}

    .p-btn-tomato-disabled {
        background: linear-gradient(0deg, var(--overlay-black-32), var(--overlay-black-32)), linear-gradient(0deg, var(--system-features-tomato-500), var(--system-features-tomato-500));
    }

    .p-btn-orange-disabled {
        background: linear-gradient(0deg, var(--overlay-black-32), var(--overlay-black-32)), linear-gradient(0deg, var(--system-features-orange-500), var(--system-features-orange-500));
    }

    .p-btn-lightgreen-disabled {
        background: linear-gradient(0deg, var(--overlay-black-32), var(--overlay-black-32)), linear-gradient(0deg, var(--system-features-aquamarine-500), var(--system-features-aquamarine-500));
    }

    .p-btn-blue-disabled {
        background: linear-gradient(0deg, var(--overlay-black-32), var(--overlay-black-32)), linear-gradient(0deg, var(--system-conhecimento-blue-500), var(--system-conhecimento-blue-500));
    }
    /*cor do botão em breve*/
    .p-btn-soon {
        background-color: var(--system-status-soon);
    }

    /*cor de texto dos botões padrões*/
    .p-text-light {
        color: var(--system-common-white)
    }

    .p-text-primary {
        color: var(--system-purple-300) !important;
    }

    .p-text-secondary {
        color: var(--system-purple-700)
    }

    .p-text-success {
        color: var(--bg-button-color-success)
    }

    .p-text-error {
        color: var(--bg-button-color-error)
    }

    .p-text-gray {
        color: var(--system-common-dark-grey)
    }

    .p-text-dark-blue {
        color: var(--system-common-dark-blue)
    }

    .p-text-hover-secondary:hover {
        color: var(--system-purple-700);
        transition: color 0.2s ease;
    }
    .p-text-color-fill {
        color: var(--text-color-fill);
    }
    /*cor de texto dos botões padrões*/


    /* ------------------> Fim das Cores  <--------------------------*/

    /*---------> Estilos de textos <---------*/

    /*Título h1 caixa baixa*/
    .p-h1 {
        font-family: var(--font-secundary);
        font-weight: var(--font-weight-title-h1);
        font-size: var(--font-size-title-h1);
        line-height: var(--font-line-height-title-h1);
        letter-spacing: var(--font-letter-title);
        color: var(--system-common-dark-blue);
    }
    /*Título h1 caixa alta*/
    .p-h1-alt {
        font-family: var(--font-secundary);
        font-weight: var(--font-weight-title-h1);
        font-size: var(--font-size-title-h1);
        line-height: var(--font-line-height-title-h1-alt);
        letter-spacing: var(--font-letter-title);
        color: var(--system-common-dark-blue);
    }
    /*Título h2 caixa baixa*/
    .p-h2 {
        font-family: var(--font-secundary);
        font-weight: var(--font-weight-title-h2);
        font-size: var(--font-size-title-h2);
        line-height: var(--font-line-height-title-h2);
        letter-spacing: var(--font-letter-title);
        color: var(--system-common-dark-blue);
    }
    /*Título h2 caixa alta*/
    .p-h2-alt {
        font-family: var(--font-secundary);
        font-weight: var(--font-weight-title-h2);
        font-size: var(--font-size-title-h2);
        line-height: var(--font-line-height-title-h2-alt);
        letter-spacing: var(--font-letter-title);
        color: var(--system-common-dark-blue);
    }
    /*Título h3 caixa baixa*/
    .p-h3 {
        font-family: var(--font-secondary);
        font-weight: var(--font-title-h3-weight);
        font-size: var(--font-title-h3-size);
        line-height: var(--font-title-h3-line-height);
        letter-spacing: var(--font-title-h3-letter-spacing);
        color: var(--system-common-dark-blue);
    }
    /*Título h3 caixa alta*/
    .p-h3-alt {
        font-family: var(--font-secondary);
        font-weight: var(--font-title-h3-alt-weight);
        font-size: var(--font-title-h3-alt-size);
        line-height: var(--font-title-h3-alt-line-height);
        letter-spacing: var(--font-title-h3-alt-letter-spacing);
        color: var(--system-common-dark-blue);
    }
    /*Texto para subtitulos */
    .p-body-subtitle {
        font-family: var(--font-primary);
        font-weight: var(--font-body-subtitle-weight);
        font-size: var(--font-body-subtitle-size);
        line-height: var(--font-body-subtitle-line-height);
        letter-spacing: var(--font-body-subtitle-letter-spacing);
        color: var(--system-common-dark-blue);
    }
    /*Texto de corpo tamanho 16 */
    .p-body1 {
        font-family: var(--font-primary);
        font-weight: var(--font-body1-weight);
        font-size: var(--font-body1-size);
        line-height: var(--font-body1-line-height);
        letter-spacing: var(--font-body1-letter-spacing);
        color: var(--system-common-dark-blue);
    }
    /*Texto de corpo tamanho 16 */
    .p-body1-bold {
        font-family: var(--font-primary);
        font-weight: var(--font-body1-weight-bold);
        font-size: var(--font-body1-size);
        line-height: var(--font-body1-line-height);
        letter-spacing: var(--font-body1-letter-spacing);
        color: var(--system-common-dark-blue);
    }
    /*Texto de corpo tamanho 14 */
    .p-body2 {
        font-family: var(--font-primary);
        font-weight: var(--font-body2-weight);
        font-size: var(--font-body2-size);
        line-height: var(--font-body2-line-height);
        letter-spacing: var(--font-body2-letter-spacing);
    }
    /*Texto de corpo tamanho 14 bold 700*/
    .p-body2-bold {
        font-family: var(--font-primary);
        font-weight: var(--font-body2-weight-bold2);
        font-size: var(--font-body2-size);
        line-height: var(--font-body2-line-height);
        letter-spacing: var(--font-body2-letter-spacing);
        color: var(--system-common-dark-blue);
    }
    /*body-demi*/
    .p-body-demi {
        font-family: var(--font-primary);
        font-weight: var(--font-bodydemi-weight-bold);
        font-size: var(--font-bodydemi-size);
        line-height: var(--font-bodydemi-line-height);
        letter-spacing: var(--font-bodydemi-letter-spacing);
        color: var(--system-common-dark-blue);
    }
    /*Texto de label tamanho 12 */
    .p-text-label {
        font-family: var(--font-primary);
        font-weight: var(--font-label-weight);
        font-size: var(--font-label-size);
        line-height: var(--font-label-line-height);
        letter-spacing: var(--font-label-letter-spacing);
    }
    /*Texto de label semibold tamanho 12 */
    .p-text-label-semibold {
        font-family: var(--font-primary);
        font-weight: var(--font-label-weight-semibold);
        font-size: var(--font-label-size);
        line-height: var(--font-label-line-height);
        letter-spacing: var(--font-label-letter-spacing);
        margin: 0;
    }
    /*Texto para botões caixa alta e baixa tamanho 24 */
    .p-text-btn1,
    .p-text-btn1-alt {
        font-family: var(--font-secondary);
        font-weight: var(--font-button1-weight);
        font-size: var(--font-button1-size);
        line-height: var(--font-button1-line-height);
        letter-spacing: var(--font-button1-letter-spacing);
        color: var(--system-common-dark-blue);
    }
    /*Texto para botões 16*/
    .p-text-btn2 {
        font-family: var(--font-primary);
        font-weight: var(--font-button2-weight);
        font-size: var(--font-button2-size);
        line-height: var(--font-button2-line-height);
        letter-spacing: var(--font-button2-letter-spacing);
        color: var(--system-common-dark-blue);
    }
    /*Texto para cards biblioteca*/
    .p-text-body-card-biblioteca {
        font-family: var(--font-primary);
        font-weight: var(--font-button2-weight);
        font-size: var(--font-button2-size);
        line-height: var(--font-button2-line-height2);
        letter-spacing: var(--font-button2-letter-spacing);
        color: var(--system-common-dark-blue);
    }
    /*Texto para cards biblioteca*/
    .p-title-card-biblioteca {
        font-family: var(--font-primary);
        font-weight: var(--font-title-card-subtitle-weight-2);
        font-size: var(--font-title-card-subtitle-size);
        line-height: var(--font-title-card-subtitle-line-height);
        letter-spacing: var(--font-title-card-subtitle-letter-spacing);
        color: var(--system-common-white);
    }
    .p-title-card-player-biblioteca {
        font-family: var(--font-primary);
        font-weight: var(--font-title-card-subtitle-weight-2);
        font-size: var(--font-title-card-subtitle-size2);
        line-height: var(--font-title-card-subtitle-line-height);
        letter-spacing: var(--font-title-card-subtitle-letter-spacing);
        color: var(--system-common-white);
    }
    /*Texto para cards biblioteca*/
    .p-subtitle-card-biblioteca {
        font-family: var(--font-primary);
        font-weight: var(--font-subtitle-card-weight);
        font-size: var(--font-subtitle-card-size);
        line-height: var(--font-subtitle-card-line-height);
        color: var(--system-common-white);
    }
    /*Título para Biblioteca Inteligente*/
    .p-title-biblioteca-inteligente {
        font-family: var(--font-primary);
        font-weight: var(--font-body-subtitle-weight-2);
        font-size: var(--font-body-subtitle-size);
        line-height: var(--font-body-subtitle-line-height);
        color: var(--system-blue-800);
    }

    /* --------> Sombras <---------*/
    /*Sombras*/
    .p-shadow-xxsm {
        box-shadow: var(--shadow-xxsm);
    }

    .p-shadow-xsm {
        box-shadow: var(--shadow-xsm);
    }

    .p-shadow-sm {
        box-shadow: var(--shadow-sm);
    }

    .p-shadow-md {
        box-shadow: var(--shadow-md);
    }
    /* --------> Classes customizadas de espaço <---------*/

    .p-row-gap-35 {
        row-gap: 35px;
    }

    /* ------------------------> Início dos botões pais <--------------------------*/

    /*botão quadrado comum (classe pai sem cor de fundo e sem cor de texto)*/
    .p-btn {
        padding: 12px 16px 12px 16px;
        border-radius: 8px;
        gap: 8px;
        font-family: var(--font-secondary);
        font-weight: var(--font-body2-weight-semibold);
        font-size: var(--font-body2-size);
        line-height: var(--font-body2-line-height);
        letter-spacing: var(--font-body2-letter-spacing);
        align-items: center;
        justify-content: center;
        display: inline-flex;
        cursor: pointer;
        transition: background-color 0.3s ease, transform 0.2s ease;
    }

    /*botão quadrado (classe pai sem cor de fundo e sem cor de texto) */
    .p-btn-square {
        padding: 8px 16px 8px 16px;
        border-radius: 8px;
        gap: 16px;
        font-family: var(--font-secondary);
        font-weight: var(--font-button1-weight);
        font-size: var(--font-button1-size);
        line-height: var(--font-button1-line-height);
        letter-spacing: var(--font-button1-letter-spacing);
    }
    /*botão arredondado*/
    /*botão pílula (classe pai sem cor de fundo e sem cor de texto) */
    .p-btn-pill {
        font-family: var(--font-secondary);
        font-weight: var(--font-button1-weight);
        font-size: var(--font-button1-size);
        line-height: var(--font-button1-line-height);
        letter-spacing: var(--font-button1-letter-spacing);
        padding: 8px;
        border-radius: 64px;
        gap: 0;
    }
    /*botão circulo*/
    /*botão circulo (classe pai sem cor de fundo e sem cor de texto) */
    .p-btn-circle {
        background-color: var(--system-purple-700);
        color: var(--system-common-white);
        border-radius: 64px;
        padding: 4px;
    }
    /*botão de agendar*/
    /*botão agendar (classe pai sem cor de fundo e sem cor de texto) */
    .p-btn-schedule {
        font-family: var(--font-primary);
        font-weight: var(--font-button2-weight);
        font-size: var(--font-button2-size);
        line-height: var(--font-button2-line-height);
        letter-spacing: var(--font-button2-letter-spacing);
        border: 1px;
        border-color: var(--system-purple-700);
        padding: 12px 8px 12px 8px;
        gap: 4px;
    }
    /*botão de opção quadrado médio*/
    .p-btn-option {
        font-family: var(--font-primary);
        font-weight: var(--font-body2-weight);
        font-size: var(--font-body2-size);
        line-height: var(--font-body2-line-height);
        letter-spacing: var(--font-body2-letter-spacing);
        color: var(--system-common-dark-blue);
        background-color: var(--bg-button-option-default);
        border-radius: 8px;
        padding: 12px;
        border: solid var(--system-chat-bg-color);
        text-align: start;
        border-top-width: 2px;
        border-right-width: 2px;
        border-bottom-width: 4px;
        border-left-width: 2px;
    }
    /*botão de icone médio*/
    .p-btn-icon {
        font-family: var(--font-primary);
        font-weight: var(--font-body1-weight-semibold);
        font-size: var(--font-body1-size);
        line-height: var(--font-body1-line-height);
        letter-spacing: var(--font-body1-letter-spacing);
        border-radius: 8px;
        padding-top: 12px;
        padding-right: 16px;
        padding-bottom: 12px;
        padding-left: 12px;
        gap: 4px;
        border-top-width: 2px;
        border-right-width: 2px;
        border-bottom-width: 4px;
        border-left-width: 2px;
        background-color: var(--system-chat-bg-color);
        border-color: var(--bg-color-bg-objects);
        color: var(--system-purple-700);
        border-style: solid;
    }
    /*botão de hora pequeno*/
    .p-btn-hour-sm {
        font-family: var(--font-primary);
        font-weight: var(--font-body2-weight-semibold);
        font-size: var(--font-body2-size);
        line-height: var(--font-body2-line-height);
        letter-spacing: var(--font-body2-letter-spacing);
        background-color: transparent;
        color: var(--system-purple-700);
        border: solid 1px var(--system-purple-100);
        padding: 12px 8px 12px 8px;
        border-radius: 8px;
        margin: 5px;
    }
    /*botão de opção de temas (ex: Linguagens e suas tecnologias, matemática, ciências humanas  )*/
    .p-btn-theme-option {
        background-color: var(--system-conhecimento-blue-500);
        border-radius: 16px;
        font-family: var(--font-primary);
        font-weight: var(--font-button2-weight);
        font-size: var(--font-button2-size);
        line-height: var(--font-button2-line-height);
        letter-spacing: var(--font-button2-line-height);
        text-align: center;
        padding: 16px;
    }

        .p-btn-theme-option image {
            align-content: center;
            width: 90px;
            height: 90px;
        }

    .p-btn-assets-avatar {
        border-radius: 8px;
        max-width: 132px;
        max-height: 132px;
        padding: 16px;
        gap: 10px;
        background-color: var(--system-chat-bg-color);
        border: solid var(--bg-color-bg-objects);
        border-width: 2px 2px 4px 2px;
        align-items: center;
        justify-content: center;
        display: flex;
        flex-direction: column;
    }

        .p-btn-assets-avatar img {
            width: 69px;
            height: 69px;
            top: 15px;
            left: 16px;
        }

    .p-slot-color {
        border-width: 2px 2px 4px 2px;
        border-style: solid;
        border-color: var(--bg-color-bg-objects);
        border-radius: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 6px 6px 6px 6px;
        gap: 10px;
        background-color: var(--system-chat-bg-color);
        max-height: 34px;
        max-width: 36px;
    }

        .p-slot-color span {
            border-radius: 4px;
            width: 22px;
            height: 22px;
            display: block;
        }

    /* ----------------------------> Final dos botões pais <-----------------------------*/
    /*botão quadrado primário com cor de texto e fundo*/
    .p-btn-square-primary {
        padding: 8px 16px 8px 16px;
        border-radius: 8px;
        gap: 16px;
        font-family: var(--font-secondary);
        font-weight: var(--font-button1-weight);
        font-size: var(--font-button1-size);
        line-height: var(--font-button1-line-height);
        letter-spacing: var(--font-button1-letter-spacing);
        color: var(--system-common-white);
        background-color: var(--system-purple-300);
    }
        /*botão quadrado secundário com cor de texto e fundo e hover*/
        .p-btn-square-primary:hover,
        .p-btn-square-selected {
            padding: 8px 16px 8px 16px;
            border-radius: 8px;
            gap: 16px;
            border: none;
            line-height: var(--font-button1-line-height);
            color: var(--system-common-white);
            background-color: var(--system-purple-700);
        }

    .p-btn-square-outline-primary {
        padding: 8px 16px 8px 16px;
        border-radius: 8px;
        gap: 16px;
        font-family: var(--font-secondary);
        font-weight: var(--font-button1-weight);
        font-size: var(--font-button1-size);
        line-height: var(--font-button1-line-height);
        letter-spacing: var(--font-button1-letter-spacing);
        color: var(--system-purple-300);
        border: 1px var(--system-purple-300);
    }

    .p-btn-square-light::selection,
    .p-btn-square-outline-secondary {
        padding: 8px 16px 8px 16px;
        border-radius: 8px;
        gap: 16px;
        font-family: var(--font-secondary);
        font-weight: var(--font-button1-weight);
        font-size: var(--font-button1-size);
        line-height: var(--font-button1-line-height);
        letter-spacing: var(--font-button1-letter-spacing);
        color: var(--system-purple-700);
        border: 1px var(--system-purple-700);
    }

    .p-btn-pill-primary {
        font-family: var(--font-secondary);
        font-weight: var(--font-button1-weight);
        font-size: var(--font-button1-size);
        line-height: var(--font-button1-line-height);
        letter-spacing: var(--font-button1-letter-spacing);
        padding: 8px;
        border-radius: 64px;
        gap: 0;
        color: var(--system-common-white);
        background-color: var(--system-purple-300);
    }

    .p-btn-pill-secundary {
        font-family: var(--font-secondary);
        font-weight: var(--font-button1-weight);
        font-size: var(--font-button1-size);
        line-height: var(--font-button1-line-height);
        letter-spacing: var(--font-button1-letter-spacing);
        padding: 8px;
        border-radius: 64px;
        gap: 0;
        color: var(--system-common-white);
        background-color: var(--system-purple-700);
    }

    .p-btn-schedule-primary {
        font-family: var(--font-primary);
        font-weight: var(--font-button2-weight);
        font-size: var(--font-button2-size);
        line-height: var(--font-button2-line-height);
        letter-spacing: var(--font-button2-letter-spacing);
        border: 1px var(--system-purple-700);
        border-radius: 8px;
        color: var(--system-purple-700);
        padding: 12px 8px 12px 8px;
        gap: 4px;
    }
    /*botão de aba*/
    /*botão aba (classe pai sem cor de fundo e sem cor de texto) */
    .p-btn-tab {
        font-family: var(--font-secundary);
        font-weight: var(--font-weight-title-h2);
        font-size: var(--font-size-title-h2);
        line-height: var(--font-line-height-title-h2-alt);
        letter-spacing: var(--font-letter-title);
        border: 1px var(--system-purple-700);
        padding: 16px 32px 16px 32px;
        border-radius: 16px 16px 0px 0px;
    }

    .p-btn-tab-outline-secondary {
        font-family: var(--font-secundary);
        font-weight: var(--font-weight-title-h2);
        font-size: var(--font-size-title-h2);
        line-height: var(--font-line-height-title-h2-alt);
        letter-spacing: var(--font-letter-title);
        border: 1px var(--system-purple-700);
        color: var(--system-purple-700);
        padding: 16px 32px 16px 32px;
        border-radius: 16px 16px 0px 0px;
    }

        .p-btn-tab-outline-secondary::selection,
        .p-btn-tab-secondary {
            font-family: var(--font-secundary);
            font-weight: var(--font-weight-title-h2);
            font-size: var(--font-size-title-h2);
            line-height: var(--font-line-height-title-h2-alt);
            letter-spacing: var(--font-letter-title);
            background-color: var(--system-purple-700);
            color: var(--system-common-white);
            padding: 16px 32px 16px 32px;
            border-radius: 16px 16px 0px 0px;
        }


    .p-tab-biblioteca {
        font-family: var(--font-primary);
        font-weight: var(--font-body2-weight);
        font-size: var(--font-body2-size);
        line-height: var(--font-body2-line-height);
        letter-spacing: var(--font-body2-letter-spacing);
        color: var(--system-common-dark-blue);
    }
        .p-tab-biblioteca.active {
            font-family: var(--font-primary);
            font-weight: var(--font-body2-weight-bold2);
            font-size: var(--font-body2-size);
            line-height: var(--font-body2-line-height);
            letter-spacing: var(--font-body2-letter-spacing);
            color: var(--system-common-dark-blue);
            border-bottom: 4px solid var(--system-purple-700);
        }
    /*botão de ação pai (botão de redirecionamento para as telas ex: LEIA, Meus agendamentos, PraticAí, etc)*/
    /*Classe pai sem cor de fundo e sem cor de texto */
    .p-btn-action {
        font-family: var(--font-primary);
        font-weight: var(--font-button2-weight);
        font-size: var(--font-button2-size);
        line-height: var(--font-button2-line-height);
        letter-spacing: var(--font-button2-letter-spacing);
        color: var(--system-common-white);
        padding: 24px 24px;
        border-radius: 16px;
        gap: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
    }
    /*icone dentro do botão de ação*/
    .p-btn-action-icon {
        max-width: 60%;
        margin-bottom: 10px;
    }
    /*icone dentro do botão quadrado*/
    .p-btn-square-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
    }


    /*botões com borda e sem cor de fundo*/
    .p-btn-outline-secondary {
        border: solid 1px var(--system-purple-gray);
        background-color: transparent;
        color: var(--system-purple-700);
    }

    .p-btn-outline-primary {
        border: solid 1px var(--system-purple-300);
        background-color: transparent;
        color: var(--system-purple-300);
    }

    .p-btn-outline-light-gray {
        border: solid 1px var(--system-common-dark-grey);
        background-color: transparent;
        color: var(--system-common-dark-grey);
    }

    .p-btn-outline-success {
        border: solid 1px var(--bg-button-color-success);
        background-color: transparent;
        color: var(--bg-button-color-success);
    }

    .p-btn-outline-erro {
        border: solid 1px var(--bg-button-color-error);
        background-color: transparent;
        color: var(--bg-button-color-error);
    }
    /*botões sem borda, com cor de fundo e texto*/
    .p-btn-body-700-white {
        border: none;
        background-color: var(--system-purple-700);
        color: var(--system-common-white);
    }

    .p-btn-body-300-white {
        border: none;
        background-color: var(--system-purple-300);
        color: var(--system-common-white);
    }

    .p-btn-body-700-white:hover,
    .p-btn-body-purple-gray-white {
        border: none;
        background: linear-gradient(0deg, var(--overlay-white-24), var(--overlay-white-24)), linear-gradient(0deg, var(--system-purple-700), var(--system-purple-700));
        color: var(--system-common-white);
    }
    .p-btn-no-outline-secondary:hover,
    .p-btn-body-100-700 {
        border: none;
        background-color: var(--system-purple-100);
        color: var(--system-purple-700);
    }

    .p-btn-body-100-300 {
        border: none;
        background-color: var(--system-purple-100);
        color: var(--system-purple-300);
    }

    .p-btn-body-light-gray {
        border: none;
        background-color: var(--bg-button-light-gray);
        color: var(--system-common-dark-grey);
    }
    .p-btn-body-300-white:hover,
    .p-btn-body-light-purple {
        border: none;
        background: linear-gradient(0deg, var(--overlay-white-24), var(--overlay-white-24)), linear-gradient(0deg, var(--system-purple-300), var(--system-purple-300));
        color: var(--system-common-white);
    }

    .p-btn-body-error {
        border: none;
        background-color: var(--bg-button-color-error);
        color: var(--system-common-white);
    }

    .p-btn-body-light-error {
        border: none;
        background: linear-gradient(0deg, var(--overlay-white-24), var(--overlay-white-24)), linear-gradient(0deg, var(--bg-button-color-error), var(--bg-button-color-error));
        color: var(--system-common-white);
    }

    .p-btn-body-light-error-100 {
        border: none;
        background: linear-gradient(0deg, var(--overlay-white-16), var(--overlay-white-16)), linear-gradient(0deg, var(--bg-button-color-light-error), var(--bg-button-color-light-error));
        color: var(--bg-button-color-error);
    }

    .p-btn-body-success {
        border: none;
        background-color: var(--bg-button-color-success);
        color: var(--system-common-white);
    }

    .p-btn-body-light-success {
        border: none;
        background: linear-gradient(0deg, var(--overlay-white-24), var(--overlay-white-24)), linear-gradient(0deg, var(--bg-button-color-success), var(--bg-button-color-success));
        color: var(--system-common-white);
    }

    .p-btn-body-light-success-100 {
        border: none;
        background: linear-gradient(0deg, var(--overlay-white-24), var(--overlay-white-24)), linear-gradient(0deg, var(--bg-button-color-light-success), var(--bg-button-color-light-success));
        color: var(--bg-button-color-success);
    }

    .p-btn-tertiary-default {
        border: none;
        background-color: var(--pill-bg-color-default);
        color: var(--system-common-dark-blue);
    }
        .p-btn-tertiary-default:hover,
        .p-btn-tertiary-hover {
            border: none;
            background: linear-gradient(0deg, var(--pill-bg-color-default), var(--pill-bg-color-default)), linear-gradient(0deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08));
            color: var(--system-common-dark-blue);
        }


    /*botões sem borda e sem cor de fundo, somente texto*/
    .p-btn-no-outline-secondary {
        border: none;
        background-color: transparent;
        color: var(--system-purple-700);
    }

    .p-btn-no-outline-primary {
        border: none;
        background-color: transparent;
        color: var(--system-purple-300);
    }

    .p-btn-no-outline-light-gray {
        border: none;
        background-color: transparent;
        color: var(--system-common-dark-grey);
    }

    .p-btn-no-outline-error {
        border: none;
        background-color: transparent;
        color: var(--system-status-error);
    }

    .p-btn-no-outline-success {
        border: none;
        background-color: transparent;
        color: var(--bg-button-color-success);
    }


    /*botões com borda simples, cor de fundo e texto*/
    /*O primeiro número se refere a cor de fundo e o segundo número a cor da borda*/
    .p-btn-outline-secondary:hover,
    .p-btn-outline-purple-100-700 {
        border: solid 1px var(--system-purple-700);
        background-color: var(--system-purple-100);
        color: var(--system-purple-700);
    }

    .p-btn-outline-primary:hover,
    .p-btn-outline-purple-100-300 {
        border: solid 1px var(--system-purple-300);
        background-color: var(--system-purple-100);
        color: var(--system-purple-300);
    }

    .p-btn-outline-lg-green {
        border: solid 1px var(--bg-button-color-success);
        background: linear-gradient(0deg, var(--overlay-white-16), var(--overlay-white-16)), linear-gradient(0deg, var(--bg-button-color-light-success), var(--bg-button-color-light-success));
        color: var(--bg-button-color-success);
    }

    .p-btn-outline-lg-error {
        border: solid 1px var(--system-status-error);
        background: linear-gradient(0deg, var(--overlay-white-16), var(--overlay-white-16)), linear-gradient(0deg, var(--bg-button-color-light-error), var(--bg-button-color-light-error));
        color: var(--system-status-error);
    }

    /*botões com borda dupla, cor de fundo e texto*/
    /*1º número é a cor de fundo, 2º da borda interna, 3º da borda externa*/
    .p-btn-d-border-700-700-700 {
        background-color: var(--system-purple-700);
        color: var(--system-common-white);
        border: 2px solid transparent;
        background-clip: padding-box;
        outline: 1px solid var(--system-purple-700);
    }
    .p-btn-body-700-white:active,
    .p-btn-body-700-white::selection
    {
        background-color: var(--system-purple-700) !important;
        color: var(--system-common-white);
        border: 2px solid transparent;
        background-clip: padding-box;
        outline: 1px solid var(--system-purple-700) !important;
    }

    .p-btn-outline-secondary:active {
        position: relative;
        background-color: var(--system-purple-100);
        color: var(--system-purple-700);
        border: 1px solid var(--system-purple-700);
        background-clip: padding-box;
    }
        .p-btn-outline-secondary:active::before {
            content: "";
            position: absolute;
            top: -3px;
            left: -3px;
            right: -3px;
            bottom: -3px;
            border: 1px solid var(--system-purple-700);
            border-radius: 8px;
            pointer-events: none;
            z-index: -1;
        }
    .p-btn-d-border-100-700-700 {
        position: relative;
        padding: 12px 20px;
        background-color: var(--system-purple-100);
        color: var(--system-purple-700);
        border: 1px solid var(--system-purple-700);
        background-clip: padding-box;
    }
        .p-btn-d-border-100-700-700::before {
            content: "";
            position: absolute;
            top: -3px;
            left: -3px;
            right: -3px;
            bottom: -3px;
            border: 1px solid var(--system-purple-700);
            border-radius: 8px;
            pointer-events: none;
            z-index: -1;
        }

    .p-btn-no-outline-secondary:active,
    .p-btn-d-border-100-100-700-secondary {
        position: relative;
        background-color: var(--system-purple-100);
        color: var(--system-purple-700);
        border: 2px solid transparent;
        background-clip: padding-box;
        outline: 1px solid var(--system-purple-700);
    }

    .p-btn-d-border-100-300-700 {
        position: relative;
        padding: 12px 20px;
        background-color: var(--system-purple-100);
        color: var(--system-purple-300);
        border: 1px solid var(--system-purple-300);
        background-clip: padding-box;
    }
    .p-btn-outline-primary:active {
        position: relative;
        padding: 12px 20px !important;
        background-color: var(--system-purple-100) !important;
        color: var(--system-purple-300) !important;
        border: 1px solid var(--system-purple-300) !important;
        background-clip: padding-box;
    }

    .p-btn-d-border-100-100-700-primary {
        background-color: var(--system-purple-100);
        color: var(--system-purple-300);
        border: 2px solid transparent;
        background-clip: padding-box;
        outline: 1px solid var(--system-purple-700);
    }

        .p-btn-d-border-100-100-700-primary::before {
            position: relative;
            padding: 10px 20px;
            background-color: var(--system-purple-100);
            color: var(--system-purple-300);
            border: 1px solid var(--system-purple-300);
            background-clip: padding-box;
        }

        .p-btn-d-border-100-100-700-primary:hover::before {
            position: absolute;
            top: -3px;
            left: -3px;
            right: -3px;
            bottom: -3px;
            border: 1px solid var(--system-purple-700);
            border-radius: 8px;
            pointer-events: none;
            z-index: -1;
        }

    .p-btn-d-border-100-300-700::before {
        content: "";
        position: absolute;
        top: -3px;
        left: -3px;
        right: -3px;
        bottom: -3px;
        border: 1px solid var(--system-purple-700);
        border-radius: 8px;
        pointer-events: none;
        z-index: -1;
    }

    .p-btn-body-300-white:active,
    .p-btn-d-border-300-300-700 {
        background-color: var(--system-purple-300) !important;
        color: var(--system-common-white);
        border: 2px solid transparent;
        background-clip: padding-box;
        outline: 1px solid var(--system-purple-700);
    }

    .p-btn-d-border-success-success-700 {
        background-color: var(--bg-button-color-success);
        color: var(--system-common-white);
        border: 2px solid transparent;
        background-clip: padding-box;
        outline: 1px solid var(--system-purple-700);
    }

    .p-btn-d-border-lg-success-lg-success-700 {
        background-color: var(--bg-button-color-light-success);
        color: var(--bg-button-color-success);
        border: 2px solid transparent;
        background-clip: padding-box;
        outline: 1px solid var(--system-purple-700);
    }

    .p-btn-d-border-lg-success-success-700 {
        position: relative;
        padding: 12px 20px;
        background-color: var(--bg-button-color-light-success);
        color: var(--bg-button-color-success);
        border: 1px solid var(--bg-button-color-success);
        background-clip: padding-box;
    }

        .p-btn-d-border-lg-success-success-700 ::before {
            content: "";
            position: absolute;
            top: -3px;
            left: -3px;
            right: -3px;
            bottom: -3px;
            border: 1px solid var(--system-purple-700);
            border-radius: 8px;
            pointer-events: none;
            z-index: -1;
        }

    .p-btn-d-border-danger-danger-700 {
        background-color: var(--bg-button-color-error);
        color: var(--system-common-white);
        border: 2px solid transparent;
        background-clip: padding-box;
        outline: 1px solid var(--system-purple-700);
    }

    .p-btn-d-border-lg-danger-lg-danger-700 {
        background-color: var(--bg-button-color-light-error);
        color: var(--bg-button-color-error);
        border: 2px solid transparent;
        background-clip: padding-box;
        outline: 1px solid var(--system-purple-700);
    }

    .p-btn-d-border-lg-danger-danger-700 {
        position: relative;
        padding: 12px 20px;
        background-color: var(--bg-button-color-light-error);
        color: var(--bg-button-color-error);
        border: 1px solid var(--bg-button-color-error);
        background-clip: padding-box;
    }

        .p-btn-d-border-lg-danger-danger-700 ::before {
            content: "";
            position: absolute;
            top: -3px;
            left: -3px;
            right: -3px;
            bottom: -3px;
            border: 1px solid var(--system-purple-700);
            border-radius: 8px;
            pointer-events: none;
            z-index: -1;
        }

    p-btn-tertiary-default
    .p-btn-tertiary-active {
        border: none;
        background-color: var(--pill-bg-color-default);
        color: var(--system-common-dark-blue);
    }

    .p-btn-tertiary-default:active,
    .p-btn-tertiary-active {
        position: relative;
        background-color: var(--bg-color-bg-objects);
        color: var(--system-purple-700);
        border: 2px solid transparent;
        background-clip: padding-box;
        outline: 1px solid var(--system-purple-700);
    }

    /*botão de opção quadrado médio*/
    .p-btn-option-hover { /*arrumar*/
        background-color: var(--system-purple-100);
        border-image-source: linear-gradient(0deg, #F1F2F6, #F1F2F6), linear-gradient(0deg, rgba(56, 10, 74, 0.32), rgba(56, 10, 74, 0.32));
    }

    .p-btn-option-selected {
        background-color: var(--system-purple-100);
        border: solid 2px var(--system-purple-700);
    }

    /*botão de icone médio*/

    .p-btn-icon-normal {
        border: solid 1px var(--bg-color-bg-objects);
    }

    .p-btn-icon:hover,
    .p-btn-icon-hover {
        background-color: var(--bg-button-option-hover);
    }

    .p-btn-icon:active,
    .p-btn-icon-selected {
        background-color: var(--system-purple-100);
        border: solid 2px var(--system-purple-700);
    }

    .p-btn-icon.active {
        background-color: var(--system-purple-100);
        border: solid 2px var(--system-purple-700);
    }

    .p-btn-icon-normal-hover {
        border: solid 1px var(--bg-color-bg-objects);
        background-color: transparent;
    }

    .p-btn-icon-normal-selected,
    .p-btn-icon-normal:active {
        border-width: 1px;
        border-color: transparent !important;
        background-color: var(--system-purple-300) !important;
        color: var(--system-common-white) !important;
    }

    /*botões de hora*/
    .p-btn-hour-sm:hover,
    .p-btn-hour-sm-hover {
        background-color: var(--system-purple-100);
        color: var(--system-purple-700);
        padding: 12px 8px 12px 8px;
        border-radius: 8px;
    }

    .p-btn-hour-sm-selected {
        background-color: var(--system-purple-300);
        color: var(--system-common-white);
        padding: 12px 8px 12px 8px;
        border-radius: 8px;
    }

    /*botão de fechar*/
    .p-btn-close {
        border-radius: 64px;
        padding: 4px 6px;
        gap: 10px;
        background-color: var(--system-purple-700);
        background-image: url('../Images/iconsMenu/close_small.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 40%;
    }
    /*botão de editar*/
    .p-btn-edit {
        border-radius: 64px;
        padding: 4px 6px;
        gap: 10px;
        background-color: var(--system-purple-700);
        background-image: url('../Images/iconsMenu/button-edit.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 50%;
    }
    /*botão de check não selecionado/off*/
    .p-btn-check-off {
        border-radius: 64px;
        padding: 4px 6px;
        gap: 10px;
        background-color: var(--system-common-light-grey);
        background-image: url('../Images/iconsMenu/check-off.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 60%;
    }
    /*botão de check selecionado selecionado/on*/
    .p-btn-check-on {
        border-radius: 64px;
        padding: 4px 6px;
        gap: 10px;
        background-color: var(--bg-button-color-success);
        background-image: url('../Images/iconsMenu/check-on.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 60%;
    }
    /*botão de navegação esquerda*/
    .p-btn-navigation-left {
        border-radius: 8px;
        padding: 4px;
        gap: 10px;
        background-color: var(--system-purple-700);
        background-image: url('../Images/iconsMenu/arrow_back_ios.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 45%;
    }
    /*botão de navegação direita*/
    .p-btn-navigation-right {
        border-radius: 8px;
        padding: 4px 5px;
        gap: 10px;
        background-color: var(--system-purple-700);
        background-image: url('../Images/iconsMenu/arrow_forward_ios.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 45%;
    }

    /*botão de responder chamada / answer*/
    .p-btn-answer {
        border-radius: 64px;
        padding: 4px 6px;
        gap: 10px;
        background-color: var(--system-status-sucess);
        background-image: url('../Images/iconsMenu/call-24dp.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 70%;
    }
    /*botão de responder chamada / answer*/
    .p-btn-call-end {
        border-radius: 64px;
        padding: 4px 6px;
        gap: 10px;
        background-color: var(--system-status-error);
        background-image: url('../Images/iconsMenu/call_end-24dp.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 70%;
    }
    /*botões de temas(Linguagens, matemática, ciências)*/
    .p-btn-theme-option-language {
        background-color: var(--system-conhecimento-blue-500);
    }

    .p-btn-theme-option-language-hover {
        background: linear-gradient(0deg, var(--overlay-black-32), var(--overlay-black-32)), linear-gradient(0deg, var(--system-conhecimento-blue-500), var(--system-conhecimento-blue-500));
    }

    .p-btn-theme-option-language-selected {
        background-color: var(--system-conhecimento-blue-500);
        border-top-width: 2px;
        border-right-width: 2px;
        border-bottom-width: 4px;
        border-left-width: 2px;
    }

    .p-btn-theme-option-math {
        background-color: var(--system-conhecimento-orange-500);
    }

    .p-btn-theme-option-math-hover {
        background: linear-gradient(0deg, var(--overlay-black-32), var(--overlay-black-32)), linear-gradient(0deg, var(--system-conhecimento-orange-500), var(--system-conhecimento-orange-500));
    }

    .p-btn-theme-option-math-selected {
        background-color: var(--system-conhecimento-orange-500 );
        border-top-width: 2px;
        border-right-width: 2px;
        border-bottom-width: 4px;
        border-left-width: 2px;
    }

    .p-btn-theme-option-science {
        background-color: var(--system-conhecimento-pink-500);
    }

    .p-btn-theme-option-science-hover {
        background: linear-gradient(0deg, var(--overlay-black-32), var(--overlay-black-32)), linear-gradient(0deg, var(--system-conhecimento-pink-500), var(--system-conhecimento-pink-500));
    }

    .p-btn-theme-option-science-selected {
        background-color: var(--system-conhecimento-pink-500);
        border-top-width: 2px;
        border-right-width: 2px;
        border-bottom-width: 4px;
        border-left-width: 2px;
    }

    .p-btn-theme-option-nature {
        background-color: var(--system-conhecimento-yellow-green-500);
    }

    .p-btn-theme-option-nature-hover {
        background: linear-gradient(0deg, var(--overlay-black-32), var(--overlay-black-32)), linear-gradient(0deg, var(--system-conhecimento-yellow-green-500), var(--system-conhecimento-yellow-green-500));
    }

    .p-btn-theme-option-nature-selected {
        background-color: var(--system-conhecimento-yellow-green-500);
        border-top-width: 2px;
        border-right-width: 2px;
        border-bottom-width: 4px;
        border-left-width: 2px;
    }
    /*botões de avatares*/
    .p-btn-assets-avatar:hover,
    .p-btn-assets-avatar-hover {
        background-color: var(--bg-button-option-default);
    }

    .p-btn-assets-avatar:active,
    .p-btn-assets-avatar.active,
    .p-btn-assets-avatar-selected {
        background-color: var(--system-purple-100);
        border: solid 2px var(--system-purple-700);
    }

    .p-slot-color:hover,
    .p-slot-color-hover {
        border-color: var(--bg-color-bg-objects);
        background-color: var(--bg-button-option-default);
    }

    .p-slot-color:active,
    .p-slot-color.active,
    .p-slot-color-selected {
        border: solid 2px var(--system-purple-700);
        background-color: var(--system-purple-100)
    }


    /* ------------> menu <-------------*/
    /*menu dropdown*/
    .p-menu-dropdown {
        font-family: var(--font-primary);
        font-weight: var(--font-body1-weight);
        font-size: var(--font-body1-size);
        line-height: var(--font-body1-line-height);
        letter-spacing: var(--font-body1-letter-spacing);
        border: 1px var(--system-purple-700);
        color: var(--system-purple-700);
        padding: 4px 0px 4px 16px;
        border-radius: 8px;
        display: inline-block;
    }

        .p-menu-dropdown select {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            background: transparent;
            border: 1px var(--system-purple-700);
            font-family: var(--font-primary);
            font-size: var(--font-body1-size);
            font-weight: var(--font-body1-weight);
            color: var(--system-purple-700);
            padding-right: 40px;
            cursor: pointer;
        }

            .p-menu-dropdown select::-ms-expand {
                display: none;
            }

        .p-menu-dropdown::after {
            content: "▼";
            font-size: 16px;
            color: var(--system-purple-700);
            position: absolute;
            right: 16px;
            top: 50%;
            transform: translateY(-50%);
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
        }

    /*menu dúvidas FAQ*/
    .p-menu-faq {
        font-family: var(--font-primary);
        font-weight: var(--font-button2-weight);
        font-size: var(--font-button2-size);
        line-height: var(--font-button2-line-height);
        letter-spacing: var(--font-button2-letter-spacing);
        padding: 16px;
        border-radius: 8px;
        /*    width: 100%;
        max-width: 600px; 
        margin: 16px auto; */
    }

    .p-menu-faq-primary {
        font-family: var(--font-primary);
        font-weight: var(--font-button2-weight);
        font-size: var(--font-button2-size);
        line-height: var(--font-button2-line-height);
        letter-spacing: var(--font-button2-letter-spacing);
        padding: 16px;
        border-radius: 8px;
        background-color: var(--system-purple-300);
        color: var(--system-common-white);
    }

    .p-menu-faq-outline-primary {
        font-family: var(--font-primary);
        font-weight: var(--font-body1-weight);
        font-size: var(--font-body1-size);
        line-height: var(--font-body1-line-height);
        letter-spacing: var(--font-body1-letter-spacing);
        padding: 16px;
        border-radius: 8px;
        color: var(--system-common-dark-blue);
        border: 1px var(--system-purple-300);
    }
    /*botão de checkbox*/
    .p-btn-checkbox {
        display: flex;
        align-items: center;
        gap: 8px;
        font-family: var(--font-primary);
        font-weight: var(--font-body1-weight);
        font-size: var(--font-body1-size);
        line-height: var(--font-body1-line-height);
        letter-spacing: var(--font-body1-letter-spacing);
        border: var(--system-purple-700);
        color: var(--system-common-dark-blue);
        border-radius: 8px;
        cursor: pointer;
    }

        .p-btn-checkbox input {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            width: 17px;
            height: 17px;
            border: 1px solid var(--system-purple-700);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

            .p-btn-checkbox input:checked {
                background-color: var(--system-purple-700);
                position: relative;
            }

                .p-btn-checkbox input:checked::after {
                    content: "✔";
                    color: var(--system-common-white);
                    font-size: 12px;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                }

    .p-question-collapse {
        border-radius: 8px 8px 8px 8px;
        border: solid var(--bg-color-bg-objects);
        color: var(--system-common-dark-blue);
        display: flex;
        align-items: center;
        padding: 10px 16px 10px 16px;
        border-top-width: 1px;
        border-right-width: 1px;
        border-bottom-width: 1px;
        border-left-width: 1px;
        display: flex;
        justify-content: space-between;
        cursor: pointer;
    }
        .p-question-collapse .p-question-collapse-icon {
            background-image: url('../Images/IconsComponentes/add-24dp.svg');
            background-repeat: no-repeat;
            width: 24px;
            height: 24px;
        }

        .p-question-collapse.collapsible.toggle.active {
            border-radius: 8px 8px 0px 0px;
            border: solid var(--bg-color-bg-objects);
            color: var(--system-common-dark-blue);
            display: flex;
            align-items: center;
            padding: 10px 16px 10px 16px;
            border-top-width: 1px;
            border-right-width: 1px;
            border-bottom-width: 0px;
            border-left-width: 1px;
        }

            .p-question-collapse.collapsible.toggle.active .p-question-collapse-icon {
                background-image: url('../Images/IconsComponentes/remove-24dp.svg');
                background-repeat: no-repeat;
                width: 24px;
                height: 24px;
            }


    .p-question-header {
        background-color: var(--system-chat-bg-color);
        font-family: var(--font-primary);
        font-weight: var(--font-bod2-weight-bold2);
        font-size: var(--font-body2-size);
        line-height: var(--font-body2-line-height);
        letter-spacing: var(--font-body2-letter-spacing);
        justify-content: space-between;
    }

    .p-question-content {
        background-color: var(--system-purple-100);
        font-family: var(--font-primary);
        font-weight: var(--font-body2-weight);
        font-size: var(--font-body2-size);
        line-height: var(--font-body2-line-height);
        letter-spacing: var(--font-body2-letter-spacing);
        padding: 16px;
        justify-content: center;
        text-align: justify;
        border-radius: 0px 0px 8px 8px;
        border: solid var(--bg-color-bg-objects);
        border-top-width: 0px;
        border-right-width: 1px;
        border-bottom-width: 1px;
        border-left-width: 1px;
    }

    .p-btn-menu-header {
        font-family: var(--font-primary);
        font-weight: var(--font-body2-weight);
        font-size: var(--font-body2-size);
        line-height: var(--font-body2-line-height);
        letter-spacing: var(--font-body2-letter-spacing);
        text-align: center;
        color: var(--system-common-white);
    }

    .p-btn-menu-header-hover {
        font-family: var(--font-primary);
        font-weight: var(--font-body2-weight);
        font-size: var(--font-body2-size);
        line-height: var(--font-body2-line-height);
        letter-spacing: var(--font-body2-letter-spacing);
        text-align: center;
        color: var(--system-purple-gray);
    }

    .p-btn-menu-header--selected {
        font-family: var(--font-primary);
        font-weight: var(--font-body2-weight-bold2);
        font-size: var(--font-body2-size);
        line-height: var(--font-body2-line-height);
        letter-spacing: var(--font-body2-letter-spacing);
        text-align: center;
        color: var(--system-common-white);
    }

    .p-btn-menu-accessibility {
        top: 20px;
        left: 20px;
        border-radius: 32px;
        border-width: 1px;
        padding-top: 4px;
        padding-right: 8px;
        padding-bottom: 4px;
        padding-left: 12px;
        gap: 4px;
        background-color: transparent;
        border: solid 1px var(--system-common-white);
    }

        .p-btn-menu-accessibility i {
            background-image: url("../Images/iconsMenu/accessibility_new.svg");
            align-self: end;
            background-size: 60%;
        }

    .p-btn-menu-accessibility-hover {
        top: 20px;
        left: 20px;
        border-radius: 32px;
        border-width: 1px;
        padding-top: 4px;
        padding-right: 8px;
        padding-bottom: 4px;
        padding-left: 12px;
        gap: 4px;
        background-color: var(--system-purple-gray);
        border: solid 1px var(--system-common-white);
    }
input.form-control.p-input {
    padding: 8px 8px 8px 40px !important;
    border-radius: 32px !important;
    border: 0;
}
    .p-input-label {
        font-family: var(--font-primary);
        font-weight: var(--font-label-weight-semibold);
        font-size: var(--font-label-size);
        line-height: var(--font-label-line-height);
        letter-spacing: var(--font-label-letter-spacing);
        text-align: start;
        color: var(--system-purple-700);
    }

input[type="text"], input[type="email"], input[type="password"] {
    border-radius: 8px;
    font-family: var(--font-primary);
    font-weight: var(--font-body2-weight);
    font-size: var(--font-body2-size);
    line-height: var(--font-body2-line-height);
    letter-spacing: var(--font-body2-letter-spacing);
    text-align: start;
    justify-self: center;
    color: var(--system-purple-700);
}

        input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus,
        input[type="text"]:active, input[type="email"]:active, input[type="password"]:active {
            border-radius: 8px;
            font-family: var(--font-primary);
            font-weight: var(--font-body2-weight);
            font-size: var(--font-body2-size);
            line-height: var(--font-body2-line-height);
            letter-spacing: var(--font-body2-letter-spacing);
            text-align: start;
            justify-self: center;
            border: solid 1px var(--system-purple-700);
            color: var(--system-purple-700);
            box-shadow: none;
        }

    input::placeholder {
        color: var(--system-purple-gray);
        font-family: var(--font-primary);
        font-weight: var(--font-body2-weight);
        font-size: var(--font-body2-size);
        line-height: var(--font-body2-line-height);
        letter-spacing: var(--font-body2-letter-spacing);
    }

    .p-tooltip {
        position: relative;
        display: inline-block;
    }

        .p-tooltip .p-tooltip-text-top {
            background-color: var(--system-purple-700);
            padding: 12px;
            gap: 10px;
            border-radius: 6px;
            font-family: var(--font-primary);
            font-weight: var(--font-body2-weight);
            font-size: var(--font-body2-size);
            line-height: var(--font-body2-line-height);
            letter-spacing: var(--font-body2-letter-spacing);
            color: var(--system-common-white);
            text-align: center;
            visibility: hidden;
            position: absolute;
            z-index: 1;
            bottom: 150%;
            left: 50%;
            margin-left: -60px;
        }

            .p-tooltip .p-tooltip-text-top::after {
                content: "";
                position: absolute;
                top: 100%;
                left: 50%;
                margin-left: -5px;
                border-width: 5px;
                border-style: solid;
                border-color: var(--system-purple-700) transparent transparent transparent;
            }

        .p-tooltip:hover .p-tooltip-text-top {
            visibility: visible;
        }

        .p-tooltip .p-tooltip-text-left {
            background-color: var(--system-purple-700);
            padding: 12px;
            gap: 10px;
            border-radius: 6px;
            font-family: var(--font-primary);
            font-weight: var(--font-body2-weight);
            font-size: var(--font-body2-size);
            line-height: var(--font-body2-line-height);
            letter-spacing: var(--font-body2-letter-spacing);
            color: var(--system-common-white);
            text-align: center;
            visibility: hidden;
            position: absolute;
            z-index: 1;
            top: -5px;
            left: 110%;
        }

            .p-tooltip .p-tooltip-text-left::after {
                content: "";
                position: absolute;
                top: 50%;
                right: 100%;
                margin-top: -5px;
                border-width: 5px;
                border-style: solid;
                border-color: transparent var(--system-purple-700) transparent transparent;
            }

        .p-tooltip:hover .p-tooltip-text-left {
            visibility: visible;
        }

        .p-tooltip .p-tooltip-text-bottom {
            background-color: var(--system-purple-700);
            padding: 12px;
            gap: 10px;
            border-radius: 6px;
            font-family: var(--font-primary);
            font-weight: var(--font-body2-weight);
            font-size: var(--font-body2-size);
            line-height: var(--font-body2-line-height);
            letter-spacing: var(--font-body2-letter-spacing);
            color: var(--system-common-white);
            text-align: center;
            visibility: hidden;
            position: absolute;
            z-index: 1;
            top: 150%;
            left: 50%;
            margin-left: -60px;
        }

            .p-tooltip .p-tooltip-text-bottom::after {
                content: "";
                position: absolute;
                bottom: 100%;
                left: 50%;
                margin-left: -5px;
                border-width: 5px;
                border-style: solid;
                border-color: transparent transparent var(--system-purple-700) transparent;
            }

        .p-tooltip:hover .p-tooltip-text-bottom {
            visibility: visible;
        }

        .p-tooltip .p-tooltip-text-right {
            background-color: var(--system-purple-700);
            padding: 12px;
            gap: 10px;
            border-radius: 6px;
            font-family: var(--font-primary);
            font-weight: var(--font-body2-weight);
            font-size: var(--font-body2-size);
            line-height: var(--font-body2-line-height);
            letter-spacing: var(--font-body2-letter-spacing);
            color: var(--system-common-white);
            text-align: center;
            visibility: hidden;
            position: absolute;
            z-index: 1;
            top: -5px;
            right: 110%;
        }

            .p-tooltip .p-tooltip-text-right::after {
                content: "";
                position: absolute;
                left: 100%;
                top: 50%;
                margin-top: -5px;
                border-width: 5px;
                border-style: solid;
                border-color: transparent transparent transparent var(--system-purple-700);
            }

        .p-tooltip:hover .p-tooltip-text-right {
            visibility: visible;
        }

    .p-menu-changes {
        border-radius: 6px;
        background-color: var(--system-status-sucess);
        padding: 16px;
        gap: 10px;
        font-family: var(--font-primary);
        font-weight: var(--font-body2-weight);
        font-size: var(--font-body2-size);
        line-height: var(--font-body2-line-height);
        letter-spacing: var(--font-body2-letter-spacing);
        color: var(--system-common-white);
    }

        .p-menu-changes:first-child {
            align-self: start;
        }

    /*classe pai modal*/

    .p-modal {
        display: none;
        border-radius: 8px;
        padding: 24px;
        gap: 16px;
        background-color: var(--system-common-white);
        overflow-y: scroll;
        position: fixed;
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
        max-height: 60vh;
    }

        .p-modal .p-header {
            text-align: start;
            justify-content: space-between;
            border-bottom: solid 1px var(--system-common-light-grey);
        }

        .p-modal p-title {
            font-family: var(--font-secundary);
            font-weight: var(--font-button1-weight);
            font-size: var(--font-button1-size);
            line-height: var(--font-button1-line-height);
            letter-spacing: var(--font-button1-letter-spacing);
            color: var(--system-common-dark-blue);
        }

        .p-modal header-text {
            font-family: var(--font-primary);
            font-weight: var(--font-body2-weight);
            font-size: var(--font-body2-size);
            line-height: var(--font-body2-line-height);
            letter-spacing: var(--font-body2-letter-spacing);
            color: var(--system-common-black);
        }

        .p-modal p-body {
        }

    .mostrar-modal {
        display: block;
    }

    .p-footer {
        display: flex;
        justify-content: end;
        gap: 8px;
        padding-top: 10px;
        margin-top: 10px;
        border-top: solid 1px var(--system-common-light-grey);
    }

    .fechar-modal {
        position: absolute;
        top: 25px;
        right: 8px;
        padding-right: 22px;
    }

    /*classe pai modal*/
    .p-modal-padrao {
        gap: 16px;
        background-color: var(--system-common-white);
        max-height: 60vh;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

        .p-modal-padrao .p-header {
            justify-content: stretch;
            display: flex;
            align-items: center;
        }

        .p-modal-padrao .p-header-body {
            align-items: flex-start;
            display: flex;
            flex-direction: column;
            margin-left: 16px;
            text-align: justify;
        }

        .p-modal-padrao .p-title {
            font-family: var(--font-primary);
            font-weight: var(--font-body1-weight-semibold);
            font-size: var(--font-body1-size);
            line-height: var(--font-body1-line-height);
            letter-spacing: var(--font-body1-letter-spacing);
        }

        .p-modal-padrao .p-footer {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            border: none;
            width: 100%;
        }

        .p-modal-padrao .p-btn {
            width: 100%;
        }

        .p-modal-padrao .p-btn-hidden {
            display: none;
        }




    .fechar-modal {
        position: absolute;
        top: 25px;
        right: 8px;
    }

    .p-modal-quit {
        font-family: var(--font-primary);
        font-size: var(--font-body1-weight);
        line-height: var(--font-body1-line-height);
        letter-spacing: var(--font-body1-letter-spacing);
        text-align: center;
        padding: 24px 16px 24px 16px;
        gap: 24px;
        max-width: 328px;
    }

    .p-modal-quit-title {
        font-weight: var(--font-body1-weight-semibold);
        font-size: var(--font-body1-size);
        line-height: var(--font-body1-line-height);
        letter-spacing: var(--font-body1-letter-spacing);
        color: var(--system-common-dark-blue);
        text-align: center;
        padding-bottom: 8px;
    }

    .p-modal-quit-footer {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .p-modal-quit-p {
        font-weight: var(--font-body2-weight);
        font-size: var(--font-body2-size);
        line-height: var(--font-body2-line-height);
        letter-spacing: var(--font-body2-letter-spacing);
        color: var(--system-common-dark-blue);
        text-align: center;
        padding-bottom: 8px;
    }

    .p-modal-schedule {
        top: 20px;
        left: 20px;
        border-radius: 8px;
        padding: 24px;
        gap: 16px;
        background-color: var(--system-common-white);
    }

    .p-modal-schedule-success {
        top: 20px;
        left: 20px;
        border-radius: 8px;
        padding: 24px;
        gap: 16px;
        background-color: var(--system-common-white);
    }

        .p-modal-schedule-success title {
            color: var(--bg-button-color-success);
            font-family: var(--font-primary);
            font-weight: var(--font-body1-weight-semibold);
            font-size: var(--font-body1-size);
            line-height: var(--font-body1-line-height);
            letter-spacing: var(--font-body1-letter-spacing);
        }

        .p-modal-schedule-success body {
            color: var(--bg-button-color-success);
            font-family: var(--font-primary);
            font-weight: var(--font-body1-weight-semibold);
            font-size: var(--font-body1-size);
            line-height: var(--font-body1-line-height);
            letter-spacing: var(--font-body1-letter-spacing);
        }

    .p-card-schedule {
        background-color: var(--system-common-white);
        align-content: start;
        font-family: var(--font-primary);
        border-radius: 8px;
        padding: 16px;
        text-align: start;
        position: relative;
        min-height: 352px;
    }

    .p-card-header {
        margin-bottom: 16px;
    }

    .p-card-label {
        display: flex;
        flex-direction: column;
    }

    .p-label-componente {
        background-color: var(--system-conhecimento-orange-500);
        padding: 4px 8px 4px 8px;
        gap: 10px;
        font-size: var(--font-label-size);
        font-weight: var(--font-label-weight-semibold);
        line-height: var(--font-label-line-height);
        letter-spacing: var(--font-label-letter-spacing);
        border-radius: 4px;
        color: var(--system-common-white);
        display: inline-flex;
        text-align: center;
        width: fit-content;
    }

        .p-label-componente.Português {
            background-color: var(--system-conhecimento-blue-500);
        }

    .p-label-card-status {
        background-color: var(--bg-button-color-light-success);
        color: var(--bg-button-color-success);
        padding: 4px 8px 4px 4px;
        gap: 4px;
        border-radius: 4px;
        text-align: center;
        display: inline-flex;
        width: fit-content;
    }
        .p-label-card-status img {
            justify-self: center;
            margin: 0px 1px 0px 1px;
        }

        .p-label-card-status p {
            margin: 0;
        }

        .p-label-card-status.status-falta {
            background-color: var(--bg-button-color-light-error);
            color: var(--bg-button-color-error);
        }

        .p-label-card-status.status-cancelado {
            background-color: var(--bg-button-light-gray);
            color: var(--system-purple-gray);
        }

        .p-label-card-status.status-finalizado {
            background-color: var(--system-status-done);
            color: var(--system-common-dark-blue);
        }


    .p-banner-card-portugues {
        background-color: var(--system-conhecimento-blue-500);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 15px;
        border-radius: 8px 8px 0px 0px;
    }

    .p-banner-card-matematica {
        background-color: var(--system-conhecimento-orange-500);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 15px;
        border-radius: 8px 8px 0px 0px;
    }

    .p-card-info {
        margin: 16px 0px 0px 0px;
        border-bottom: solid 1px var(--system-common-light-grey);
        padding: 0px 0px 16px 0px;
    }

    .p-card-body {
        padding: 10px 0px;
    }

    .p-body-main-header {
        padding: 0 15px 0 15px;
    }
    /* ------------------------------------------------------------ */
    .p-card-personal-info-div {
        display: grid;
        grid-template-columns: repeat(3, 6fr);
        grid-template-rows: repeat(1, 1fr);
    }
    .p-card-personal-info {
        background-color: var(--system-common-white);
        box-shadow: var(--shadow-sm);
        display: flex;
        padding: 16px 24px 16px 24px;
        border-radius: 8px;
        flex-direction: column;
    }

        .p-card-personal-info .p-title {
            align-self: center;
            font-family: var(--font-primary);
            font-weight: var(--font-body1-weight-semibold);
            font-size: var(--font-body1-size);
            line-height: var(--font-body1-line-height);
            letter-spacing: var(--font-body1-letter-spacing);
        }
        .p-card-personal-info .p-title span {
            display: none;
        }
        .p-card-personal-info .p-card-header {
            border: solid var(--system-common-light-grey);
            border-width: 0px 0px 1px 0px;
            display: flex;
            flex-direction: row;
            gap:10px;
            padding-bottom: 10px;
        }
        .p-card-personal-info .p-card-body {
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding-top: 0px;
        }
        .p-card-personal-info .p-card-body img {
            display: none;
        }
 
    /* ------------------------------------------------------------ */
    .p-toast-container {
        background-color: transparent;
    }

    .p-toast-popup {
        background-color: transparent;
    }

    .p-alert-quiz {
        border-radius: 8px;
        padding: 16px;
        gap: 16px;
        box-shadow: var(--shadow-sm);
        display: grid;
        grid-template-columns: 4fr 4fr;
        flex-direction: row;
    }

    .p-alert {
        border-radius: 8px;
        padding: 16px;
        gap: 16px;
        box-shadow: var(--shadow-sm);
        display: flex;
        flex-direction: row;
    }

    .p-alert-header {
        display: flex;
        align-content: flex-start;
        flex-direction: column;
    }

    .p-alert-title {
        font-family: var(--font-primary);
        font-weight: var(--font-button2-weight);
        font-size: var(--font-button2-size);
        line-height: var(--font-button2-line-height);
        letter-spacing: var(--font-button2-letter-spacing);
    }

    .p-alert-text {
        font-family: var(--font-primary);
        font-weight: var(--font-body1-weight);
        font-size: var(--font-button2-size);
        line-height: var(--font-button2-line-height);
        letter-spacing: var(--font-button2-letter-spacing);
    }

    .p-alert-button {
        display: none;
    }

    .p-alert-footer {
        display: flex;
        gap: 8px;
        justify-self: flex-end;
    }

    .p-alert-width-md {
        width: 30vw
    }

    .p-alert-width-lg {
        width: 50vw
    }

    .p-alert-header-title {
        display: flex;
    }

    .p-alert-header-title-icon {
        width: 24px;
        height: 24px;
    }
    /* ------------------------------------------------------------ */
    /* Calendário: cada dia é um quadradinho */
    #calendarContainer {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        flex-direction: column;
        justify-content: center;
        margin: 1rem 0;
    }

    /* ------------------------------------------------------------ */
    /* Calendário: cada dia é um quadradinho */
    #calendarContainer {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        flex-direction: column;
        justify-content: center;
        margin: 1rem 0;
    }


    .p-calendar-header {
        border-radius: 4px;
        background-color: var(--system-purple-100);
        display: flex;
        justify-content: center;
        width: 100%;
        padding: 4px 0px 4px 0px;
    }

    .calendar-month-label {
        font-family: var(--font-primary);
        font-weight: var(--font-body2-weight-semibold);
        font-size: var(--font-body2-size);
        letter-spacing: var(--font-body2-letter-spacing);
        color: var(7--system-purple-700);
    }

    .p-calendar-days-header {
        display: grid;
        grid-template-columns: 32px 32px 32px 32px 32px 32px 32px;
        justify-content: space-between;
    }

    .calendar-nav-btn {
        background: transparent;
        border: none;
    }

    .p-calendar-day-header {
        display: flex;
        width: 32px;
        height: 32px;
        line-height: var(--font-body2-line-height);
        text-align: center;
        align-content: center;
        font-family: var(--font-primary);
        font-weight: var(--font-body2-weight);
        font-size: var(--font-body2-size);
        letter-spacing: var(--font-body2-letter-spacing);
        color: var(--bg-button-menu-color-hover);
        justify-content: center;
    }

    .p-time-slots-container {
        padding-top: 10px;
    }

    .p-calendar-days-grid {
        display: grid;
        grid-template-columns: 32px 32px 32px 32px 32px 32px 32px;
        justify-content: space-between;
    }

    .p-calendar-day {
        width: 32px;
        height: 32px;
        line-height: var(--font-body2-line-height);
        text-align: center;
        align-content: center;
        cursor: pointer;
        font-family: var(--font-primary);
        font-weight: var(--font-body2-weight);
        font-size: var(--font-body2-size);
        letter-spacing: var(--font-body2-letter-spacing);
        color: var(--system-common-dark-blue);
        border-radius: 8px;
    }

        .p-calendar-day:hover {
            color: var(--system-common-dark-blue);
            background-color: var(--system-purple-100);
        }

        .p-calendar-day.selected {
            background-color: var(--system-purple-300);
            color: var(--system-common-white);
        }

        .p-calendar-day.active {
            background-color: var(--system-purple-300);
            color: var(--system-common-white);
        }

        .p-calendar-day.disabled {
            color: var(--bg-button-menu-color-hover);
            cursor: not-allowed;
            background-color: transparent;
        }

    .p-btn-hour-sm.selected.active {
        background-color: var(--system-purple-300);
        color: var(--system-common-white);
    }

    .p-calendar-day.empty {
        background-color: transparent !important;
    }

    .p-btn-back{
        display: none !important;
    }
    .hidden {
        display: none !important;
    }
    /* Container centralizado */
    .p-calendar-loader {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 10;
    }

    .p-loader-avatar {
        width: 100px;
        height: auto;
        margin-bottom: 16px;
        animation: floatingAvatar 2s ease-in-out infinite;
    }
    #calendarioModal.loading {
        background: transparent; 
    }
    #calendarioModal.loading .p-header,
    #calendarioModal.loading .p-footer,
    #calendarioModal.loading .p-body > *:not(#calendarLoader) {
        display: none !important;          
    }

    #calendarioModal.loading #calendarLoader {
        display: flex !important;         
        justify-content: center;
        align-items: center;
    }
    div#calendarioModal {
        min-height: 200px;
        min-width: 20vw;
        overflow: auto;
        scrollbar-width: none; 
        -ms-overflow-style: none;
    }
    #calendarioModal::-webkit-scrollbar {
        display: none;
    }

    @keyframes floatingAvatar {
        0% {
            transform: translateY(0px);
        }

        50% {
            transform: translateY(-10px);
        }

        100% {
            transform: translateY(0px);
        }
    }

    @media(min-width: 992px) {
        .p-modal {
            width: 536px;
            max-height: 536px;
        }
    }

    @media(max-width: 460px) {
        .p-card-personal-info {
             background-color: transparent;
             box-shadow: none;
             padding: 0px;
        }
        .p-breadcrumb {
            display: none !important;
        }
        .p-card-personal-info .p-card-header {
            border: none;
            display: contents;
        }
            .p-card-personal-info .p-card-header img {
                display: none;
            }

            .p-card-personal-info .p-title span {
                display: block;
            }

        .p-card-personal-info .p-card-body img {
            display: block;
            margin-left: 8px; 
            cursor: pointer;
        }
        .email-abreviado img {
            flex: 0 0 auto;
        }
        .p-card-personal-info .p-body2-bold {
            display: flex;
            flex-direction: column;
         }
        .p-email-abbreviated {
            max-width: 180px;
            display: flex;
            align-items: center;
        }
        .p-email-abbreviated-text {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex: 1 1 auto;
            min-width: 0;
        }
        .p-icon-copied {
            width: 79px; 
            height: 24px;
        }
        .p-btn-back {
            display: block !important;
        } 

    }

    /* ===== Splash Screen ===== */
    .splash-screen {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #380A4A;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        align-items: center;
        z-index: 100;
        color: white;
        padding-top: 5%;
    }

    .splash-leia {
        display: flex;
        flex-direction: column;
        height: 45%;
    }

    .splash-logo {
        height: 30%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .splash-footer {
        display: flex;
        flex-direction: column;
        justify-content: end;
        align-content: center;
        align-items: center;
        height: 15%;
    }

    /* ===== TRANSIÇÕES E ANIMAÇÕES ===== */
    @keyframes pep-animacao-zoom-in {
        from {
            opacity: 0;
            transform: scale(0);
        }

        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    @keyframes pep-animacao-slide-top {
        from {
            top: 0;
        }

        to {
            top: -200%;
        }
    }

    @keyframes pep-animacao-balance {
        0% {
            transform: rotate(0deg);
        }

        25% {
            transform: rotate(15deg);
        }

        50% {
            transform: rotate(0deg);
        }

        75% {
            transform: rotate(-15deg);
        }

        100% {
            transform: rotate(0deg);
        }
    }

    *[p-animacao="balanco"] {
        transform: scale(0);
        animation-name: pep-animacao-balance;
        animation-fill-mode: both;
    }

    *[p-animacao="zoom-in"] {
        opacity: 0;
        transform: scale(0);
        animation-name: pep-animacao-zoom-in;
        animation-fill-mode: both;
        animation-timing-function: ease-out;
    }

    *[p-animacao="slide-top"] {
        animation-name: pep-animacao-slide-top;
        animation-fill-mode: both;
        animation-timing-function: ease-out;
    }

    *[p-animacao-atraso="1"] {
        animation-delay: 1s;
    }

    *[p-animacao-atraso="2"] {
        animation-delay: 2s;
    }

    *[p-animacao-atraso="3"] {
        animation-delay: 3s;
    }

    *[p-animacao-atraso="4"] {
        animation-delay: 4s;
    }

    *[p-animacao-atraso="5"] {
        animation-delay: 5s;
    }

    *[p-animacao-atraso="6"] {
        animation-delay: 6s;
    }

    *[p-animacao-duracao="1"] {
        animation-duration: 1s;
    }

    *[p-animacao-duracao="2"] {
        animation-duration: 2s;
    }

    *[p-animacao-duracao="3"] {
        animation-duration: 3s;
    }

    *[p-animacao-duracao="4"] {
        animation-duration: 4s;
    }

    *[p-animacao-duracao="5"] {
        animation-duration: 5s;
    }

    *[p-animacao-duracao="6"] {
        animation-duration: 6s;
    }

    /* ===== Barra de progresso ===== */
    .p-progress-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        width: 100%;
        max-width: 90%;
        margin: 20px;
    }

    .p-step-container {
        display: flex;
        flex-direction: row; /* Texto ao lado direito do círculo */
        align-items: center;
        position: relative;
    }

        .p-step-container[p-atual="true"] .p-step-indicator {
            color: var(--system-common-white);
            background-color: var(--system-purple-300);
            border-color: var(--system-purple-300);
        }

            .p-step-container[p-atual="true"] .p-step-indicator i {
                color: var(--system-common-white);
            }

        .p-step-container[p-completo="true"] .p-step-indicator {
            color: var(--system-purple-700);
            background-color: var(--bg-color-bg-status-completed);
            border-color: var(--bg-color-bg-status-completed);
        }

            .p-step-container[p-completo="true"] .p-step-indicator i {
                color: var(--system-purple-700);
            }

        .p-step-container[p-atual="false"][p-completo="false"] .p-step-indicator {
            color: var(--bg-button-menu-color-hover);
            background-color: none;
            border-color: var(--bg-button-menu-color-hover);
        }

            .p-step-container[p-atual="false"][p-completo="false"] .p-step-indicator i {
                color: var(--bg-button-menu-color-hover);
            }

    .p-step-indicator {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border-style: solid;
        border-width: 1px;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 2;
        font-size: 16px;
    }

        .p-step-indicator i {
            font-size: 16px;
        }

    .p-step-label {
        margin-left: 8px; /* Espaço entre o círculo e o texto */
        font-size: 16px;
        color: var(--system-purple-700);
    }

    .p-progress-bar {
        position: relative;
        flex-grow: 1;
        height: 1px;
        background-color: var(--bg-color-bg-objects);
        z-index: 1;
        margin-left: 16px;
        margin-right: 16px;
    }

        .p-progress-bar div {
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
            width: 100%;
            max-width: 100%;
            margin: 10px auto !important;
            padding: 0 16px;
        }

        .p-progress-bar:has(+.p-step-container[p-atual="true"]) {
            background-color: var(--system-purple-300);
        }

        .p-progress-bar:has(+.p-step-container[p-completo="true"]) {
            background-color: var(--system-purple-300);
        }

    #pep-header {
        position: relative;
    }

    .p-nav-label {
        background-color: #120a8f;
        padding: 10px;
        display: flex;
        color: var(--system-common-white);
        gap: 10px;
        border-radius: 4px;
        max-width: 340px;
        min-height: 44px;
        position: absolute;
        top: 50%;
        left: 25%;
        transform: translate(-50%, -50%);
        z-index: 0;
        font-family: var(--font-primary);
        font-weight: 700;
        font-size: 16px;
        line-height: 22px;
        letter-spacing: 0;
    }
        .p-nav-label p {
            padding: 0;
            margin: 0;
            align-self: center;
        }

    .p-demo-label-text::before {
        content: attr(data-text-desktop);
    }

    .p-fundo-demonstrativo {    
        background-color: #FFFFFF;
    }
.p-fundo-demonstrativo-perfil {
    background-color: #FFFFFF;
}

.p-badge-custom-biblioteca {
    display: inline-block;
    padding: 4px 8px;
    border: 1px solid #1B7BDC;
    border-radius: 20px;
    color: #1B7BDC;
    font-size: 12px;
    font-weight: 600;
    background-color: transparent;
}


    @media (max-width: 768px) {
        .p-step-label {
            display: none;
        }
    }
    @media (max-width: 1200px) and (min-width: 992px) {
        .p-nav-label {
            font-size: 10px;
            left: 20%;
        }
        .p-demo-label-text::before {
            content: attr(data-text-mobile);
        }
    }
    @media (max-width: 550px) {

        .p-demo-label-text::before {
            content: attr(data-text-mobile);
        }

        .p-nav-label {
            font-size: 10px;
            word-wrap: break-word;
            max-width: 150px;
            padding: 5px;
            position: absolute;
            transform: none;
            top: 10px;
            left: 53%;
        }
    }
    @media (max-width: 991px) and (min-width: 550px) {

        .p-nav-label {
            font-size: 10px;
            padding: 5px;
            top: 32px;
            left: 55%;
        }
    }


    /* === E-LEARNING === */
    .hud-container {
        height: max-content;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #814B96;
        border-radius: 16px;
        cursor: default;
    }

    .hud-container select {
        cursor: pointer;
    }