.btn-primary{
    display: inline-block;
    font-weight: 400;
    background: #03215d;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: none;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
   }
   .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:visited{
    background: #0f2a5f;
    color: #fff;
    border: none;
   }


   .btn-secondary{
    display: inline-block;
    font-weight: 400;
    background: #fec015;
    color: #03215d;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: none;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
   }
   .btn-secondary:hover{
    background: #e3ae1c;
    color: #03215d;
    border: none;
   }

   .layoutContainer{position: relative; display: flex;}
        .header {
            background-color: #fff;
            border-bottom: 1px solid #ddd;
            padding: 10px 20px;
            width: 100%;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 0;
        }

        ion-icon{font-size: 24px}
        h4{font-size: 18px; margin-bottom: 15px}

        .NavigationContainer-logo {
            height: var(--paneHeaderHeight);
            flex-shrink: 0;
            padding: 30px;
            padding-top: 10px;
            align-items: center;
            display: flex;
        }
        .NavigationContainer-links{padding: 0 30px}
        .UserProfile {
            flex-direction: column;
            align-items: center;
            display: flex;
            padding: 0 30px;
            text-align: center;
        }
        .UserProfile-avatar {
            color:#03215d;
            background-color: #fec015;
            -webkit-user-select: none;
            user-select: none;
            cursor: pointer;
            border-radius: 9999em;
            justify-content: center;
            align-items: center;
            width: 64px;
            height: 64px;
            font-size: 27.429px;
            font-weight: 600;
            transition: background-color .2s;
            display: flex;
        }
        .UserProfile-userInfo {
            margin-top: var(--spacing8);
            flex-direction: column;
            width: 100%;
            display: flex;
        }


        .PaneHeader {
            padding: var(--spacing24);
            height: var(--paneHeaderHeight);
            border-bottom: 1px solid #00000014;
            justify-content: space-between;
            align-items: center;
            display: flex;
        }
        .PaneHeader-paneOptionsLeft {
            flex: 1;
            justify-content: flex-start;
            display: flex;
        }
        .PaneHeader-titleContainer {
            flex: 1;
            justify-content: center;
            align-items: center;
            font-size: 18px; 
            font-weight: bold;
            padding: 20px;
            display: flex;
        }
        .PaneHeader-paneOptionsRight {
            flex: 1;
            justify-content: flex-end;
            display: flex;
        }
        body{overflow-y: hidden;}
        .PaneBody {
            padding: 0;
            padding-bottom: calc(48px + var(--paneHeaderHeight));
            height: 100%;
            flex-direction: column;
            width: 100%;
            padding-top: 0;
            display: flex;
            overflow: auto;
        }
        .PaneContent {
            flex: 1;
            width: 100%;
            max-width: 100%;
            margin: 0 auto;

             max-height: 99vh; /* ou qualquer altura desejada */
            overflow: auto;
            padding: 24px 24px 70px 30px;
        }

        .NavLink--active {
            border-color: #e0e6eb;
            background: #cddcfa;
            box-shadow: 0px 24px 80px 0px #00000005, 0px 8px 20px 0px #00000005, 0px 2px 4px 0px #00000008;
            font-weight: #400;
        }
        .NavLink {
            padding: 16px;
            color: var(--colorText);
            align-items: center;
            gap:12px;
            border: 1px solid #0000;
            border-radius: 16px;
            text-decoration: none;
            display: flex;
            position: relative;
        }

        .header img {
            height: 40px;
            width: auto;
        }
        .header .user-name {
            float: right;
            line-height: 40px;
            margin-left: 10px;
        }
        #sidebar-close {
            display: none;
            position: absolute;
            right: 2%;
            top: 0;
        }
        .sidebar {
            border-right: 1px solid #00000014;
            flex-direction: column;
            padding: 0;
            flex-shrink: 0;
            width: 344px;
            height: 100vh;
            display: flex;
            overflow-y: auto;
        }
        .RouteContent {
            flex-direction: column;
            width: 100%;
            display: flex;
        }

        .Pane {
            height: 100%;
            position: relative;
        }



        .sidebar ul {
            padding-left: 0;
            margin-top: 30px; /* Remover espaçamento superior da lista */
            list-style: none;
        }
        .sidebar li {
            margin-bottom: 0; /* Remover espaçamento entre os links */
        }
        .sidebar a {
            display: flex; /* Alinhar itens verticalmente */
            align-items: center; /* Alinhar itens verticalmente */
            padding: 10px;
            color: #03215d;
            text-decoration: none;
            transition: background-color 0.3s; /* Transição suave da cor de fundo */
        }
        .sidebar a:hover {
            background-color: #f1f1f1; /* Cor de fundo ao passar o mouse */
        }
        .sidebar .icon {
            margin-right: 10px; /* Espaçamento entre o ícone e o texto do link */
            font-size: 22px; /* Tamanho do ícone */
            background-color: #fff; /* Cor de fundo padrão para o ícone */
            border-radius: 50%; /* Borda arredondada para o ícone */
            padding: 6px; /* Espaçamento interno para o ícone */
        }
        .sidebar .active .icon {
            background-color: #f1f1f1; /* Cor de fundo para o link ativo */
        }
        .sidebar .active a span {
            font-weight: bold; /* Deixa o texto em negrito */
        }
        .content {
            margin-left: 250px; /* Largura do sidebar */
            padding-top: 90px; /* Altura do cabeçalho */
            padding-left: 20px;
        }

        .card-numero{font-size: 46px}
        .btn-menu{display: none;}

        .card-primary{background: #03215d; color: #fff; display: inline-block; border: 1px solid #03215d; border-radius: 12px;padding: 15px;margin-bottom: 30px}
        .card-secondary{background: #fec015; color: #03215d;display: inline-block; border: 1px solid #fec015; border-radius: 12px;padding: 15px;margin-bottom: 30px}
        .card-tertiary{background: #e0e6eb; color: #03215d;display: inline-block; border: 1px solid #e0e6eb; border-radius: 12px;padding: 15px;margin-bottom: 30px}
        .card-padrao{background: #fff; color: #000;display: inline-block; border: 1px solid #ddd; border-radius: 12px;padding: 15px;margin-bottom: 30px}

              @media(max-width:512px){
                   .NavigationContainer-links{padding: 0 }
                .PaneContent{padding: 10px;padding-bottom: 80px}
                .sidebar a{font-size: 18px}
            .btn-menu{display: block;}
            .content {
                margin: 15px; /* Largura do sidebar */

                padding: 15px; /* Altura do cabeçalho */
                padding-top: 80px;
            }
            .sidebar{display: none; width: 100%; padding: 15px;font-size: 22px}
        }