h2 {
    font-weight:400;
}

.blazored-toast-container {
    z-index: 9999!important;
}

.btn-success {
    color: #fff !important;
    background-color: #5cb85c;
    border-color: #4cae4c;
    background-image: none !important;
    justify-content:left;
}

    .btn-success:hover {
        color: #fff;
        background-color: #449d44;
        border-color: #398439;
    }

.btn-info {
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8
}

    .btn-info:hover {
        color: #fff;
        background-color: #138496;
        border-color: #117a8b
    }
.btn-danger {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

div.smallerFont,
div.smallerFont .k-filtercell * {
    font-size: 0.9rem;
    line-height: 1.5;
    --font-family-sans-serif: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

    div.smallerFont .k-dropdown.k-header.k-dropdown-operator {
        width: calc(8px + 2em) !important;
    }

    div.smallerFont.k-grid td {
        padding-left: 6px;
        padding-right: 1px;
        padding-top: 1px;
        padding-bottom: 1px;
    }

    div.smallerFont .k-grid-edit-cell input {
        font-size: 1rem;
    }

/*.k-button {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
}
*/
.nav-item {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

.top-row[b-gfhp3fixna] {
    border-bottom: 0px solid #d6d5d5;
}
.k-scheduler-footer {
    height: 0;
    overflow: hidden;
}

::-webkit-scrollbar-thumb {
    background: #c4c4c4 !important;
    border-radius: 1px !important;
}

::-webkit-scrollbar-track {
    background: transparent !important;
}

::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
    z-index: 1 !important;
}
.k-input {
    font-size: 14px;
    height: 36px;
}
.myNumericTextbox.k-numerictextbox .k-input {
    text-align: right;
}

.myNumericTextbox.k-numerictextbox .k-input {
    text-align: right;
}

.k-numerictextbox .k-input-inner {
    text-align: right;
}

.k-cell-inner > .k-link {
    padding: 16px 6px;
}

.k-filter-row td, .k-filter-row th {
    border-width: 0 0 1px 1px;
    white-space: nowrap;
    padding: 10px 6px;
}

.k-grid-header th {
    padding-left: 0px !important;
}
.k-column-title {
    padding-left: 0px;
}

.k-input-inner {
    border: 1px solid #dadfe2;
    border-radius: 4px;
    box-shadow: inset 0 4px 3px 0 rgb(0 0 0 / 3%);
    background-color: #ffffff;
}

.k-input {
    height: calc(1.125em + 18px);
    border-bottom-style:none;
}

.filterTextbox
{
    border: 1px solid #dadfe2 !important;
    border-radius: 4px !important;
    box-shadow: inset 0 4px 3px 0 rgb(0 0 0 / 3%) !important;
    background-color: #ffffff !important;
}
.k-input-inner.k-disabled,
.k-disabled > .k-input-inner,
input.k-textbox[disabled] {
    pointer-events: initial;
}

.k-state-disabled, .k-disabled, .k-widget[disabled], .k-disabled {
    outline: none;
    cursor: default;
    opacity: 1 !important;
    pointer-events: none;
    box-shadow: none;
    color:#212529 !important;
}

.k-input-inner {
    z-index:auto;
}
.k-switch-on .k-switch-thumb {
    background-color:#26819D;
}
.k-switch-on .k-switch-track {
    background-color:#26819D;
    opacity:0.8;
}
.k-window-title {
    font-family:Montserrat, Helvetica, Arial, "sans-serif";
    font-size: 24px;
    color: #424242;
}

.k-window-title strong {
    font-weight:400 !important;
  }
  
  .mud-typography-body1 {
    font-size: inherit;
}
.k-grid-md .k-table-th > .k-cell-inner > .k-link {
    padding: 16px 6px;
}
.k-grid-md .k-filter-row td, .k-grid-md .k-filter-row .k-table-td, .k-grid-md .k-filter-row .k-table-th {
    padding: 2px 6px;
}

.blazored-toast-container {
    z-index: 9999 !important;
}
.k-grid-md .k-table-th {
    padding-block: 6px;
    padding-inline: 6px;
}
.mud-switch {
    margin-inline-end: 0px!important;
}
.k-switch-md {
    margin-inline-end: 5px!important;
}
.k-grid-md .k-edit-cell, .k-grid-md .k-command-cell, .k-grid-md .k-grid-edit-row td, .k-grid-md .k-grid-edit-row .k-table-td {
    padding-block: 0px;
    padding-inline: 0px;
}
.e-date-container
{
    height:36px;
}
.e-date-wrapper input 
{
    height:auto !important;
}

.e-date-wrapper
{
    box-shadow: none !important;
}

.valid.modified:not([type=checkbox]) {
    outline: 0px;
}

.e-input-group {
    border-color: #d1d5db !important;
}

.rz-datepicker-calendar th {
    width: 2ch; /* Define a largura do input */
    text-overflow: ellipsis; /* Adiciona reticências ao final do texto oculto */
    overflow: hidden; /* Oculta o texto que ultrapassa o limite máximo de largura */
    white-space: nowrap; /* Evita que o texto seja quebrado em várias linhas */
}
.k-input-md .k-input-inner, .k-picker-md .k-input-inner {
    padding: 8px 6px;
}
.e-input-group:not(.e-success):not(.e-warning):not(.e-error), .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error) {
    height: 36px;
}
.k-switch-on .k-switch-thumb {
    background-color: #B57F59;
}
.rz-spinner-button {
    background-color: #B57F59 !important;
    background: #B57F59 !important;
    border-color: #B57F59 !important;
}

.rz-spinner-button:hover {
    background-color: #9a6a4a !important;
    background: #9a6a4a !important;
    border-color: #9a6a4a !important;
}

/* Radzen Numeric com seletores alternativos */
.rz-numeric button,
.rz-spinner button,
.rz-inputtext + button,
button.rz-button.rz-button-icon-only {
    background-color: #B57F59 !important;
    background: #B57F59 !important;
    border-color: #B57F59 !important;
}

.rz-numeric button:hover,
.rz-spinner button:hover,
button.rz-button.rz-button-icon-only:hover {
    background-color: #9a6a4a !important;
    background: #9a6a4a !important;
    border-color: #9a6a4a !important;
}

/* Numeric Ano específico */
.numeric-ano button,
.numeric-ano .rz-spinner-button,
.numeric-ano .rz-button {
    background-color: #B57F59 !important;
    background: #B57F59 !important;
    border-color: #B57F59 !important;
}

.numeric-ano button:hover,
.numeric-ano .rz-spinner-button:hover {
    background-color: #9a6a4a !important;
    background: #9a6a4a !important;
    border-color: #9a6a4a !important;
}
/* Radzen Dropdown - chips/tags selecionados */
.rz-multiselect-chip,
.rz-chip {
    background-color: #B57F59 !important;
    border-color: #B57F59 !important;
}

.rz-multiselect-chip:hover,
.rz-chip:hover {
    background-color: #9a6a4a !important;
    border-color: #9a6a4a !important;
}

/* Radzen Dropdown - item selecionado na lista */
.rz-dropdown-item.rz-state-highlight,
.rz-listbox-item.rz-state-highlight,
.rz-multiselect-item.rz-state-highlight {
    background-color: #B57F59 !important;
}

.rz-radiobutton-box.rz-state-active {
    background-color: #B57F59;
}
.rz-radiobutton-box.rz-state-active:hover:not(.rz-state-disabled) {
    background-color: #a55217 !important;
}
.rz-tabview-top > .rz-tabview-nav .rz-tabview-selected {
    border-top-color: #B57F59;
}
.rz-tabview-nav li a {
    color: #B57F59;
}
.rz-tabview-nav:hover li a {
    color: #B57F59 !important; 
}
.rz-tabview-nav li a, .rz-tabview-nav li a:not([href]):not([class]) {
    color: #B57F59;
}
.rz-tabview-nav:hover li a, .rz-tabview-nav:hover li a:not([href]):not([class]) {
    color: #B57F59;
}
.rz-chkbox-box.rz-state-active {
    background-color: #B57F59;
}
.k-switch-on .k-switch-track {
    background-color: #B57F59;
}
.rz-tabview-nav li a, .rz-tabview-nav li:hover {
    color: #B57F59 !important;
}
.customized-grid .k-filtercell .k-numerictextbox .k-input-spinner.k-spin-button {
    display:none;
}
:root {
    --rz-tabs-tab-color: #B57F59 !important; /* Substitua pelo valor de cor desejado */
    --rz-tabs-tab-selected-top-border-color: #B57F59;
    --rz-tabs-tab-hover-color: #B57F59;
    --rz-tabs-tab-focus-color: #B57F59;
    /* Destaque dos campos com focus. Por defeito o Radzen deriva de --rz-secondary
       (#35a0d7, azul); esta variável só alimenta --rz-outline-focus e
       --rz-input-focus-border, por isso não afeta mais nada. */
    --rz-outline-color: #B57F59;
}

/* Spinner de loading das grids Telerik (o tema Material traz #1565c0) */
.k-loader-primary {
    color: #B57F59;
}

/* Destaque dos campos Syncfusion com focus (SfComboBox, SfAutoComplete, SfTextBox...).
   O tema em css/tailwind.min.css traz #0094d8. Só se mexe no estado de focus: o
   #0094d8 aparece noutros sítios do tema (seleção de texto, hovers) que ficam como estão.
   Precisa de !important porque o tailwind.min.css carrega depois do geral.css no <head>. */
.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error),
.e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
    border-color: #B57F59 !important;
    box-shadow: 0 0 0 1px #B57F59 !important;
}

/* Variante sem .e-input-group: aqui a borda fica no próprio <input> */
.e-float-input.e-input-focus:not(.e-input-group) input,
.e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group) input {
    border-color: #B57F59 !important;
    box-shadow: 0 0 0 1px #B57F59 !important;
}

/* Espaçamento entre icon e texto nos botões MudBlazor */
.mud-button-label .mud-button-icon-start {
    margin-left: -8px;
    margin-right: 4px;
    margin-inline-start: -8px;
    margin-inline-end: 4px;
}

/* TelerikTabStrip - Fundo cinzento para toda a barra */
.k-tabstrip-items-wrapper {
    background-color: #f0f0f0;
    border: 1px solid #dcdcdc;
    padding: 0px;
    line-height: 4px;
}
.k-tabstrip-content {
    padding: 0;
    overflow: hidden;
}
.k-tabstrip-items .k-link {
    padding: 14px 16px;
}
/* Fundo na cor da aplicação para a aba selecionada */
.k-tabstrip-top>.k-tabstrip-items-wrapper .k-item.k-active {
    background-color: var(--mud-palette-appbar-background);
    color: white;
    border: none;
    border-radius: 5px;
}
/* Desativa o texto em maiúsculas nas abas */
.k-tabstrip-items-wrapper .k-item {
    text-transform: none;
}
.k-tabstrip-items {
    text-transform: none;
    border-radius: 5px;
}
.k-tabstrip-items .k-active {
    background-color: var(--mud-palette-appbar-background);
    color: white;
    border-radius: 5px;
}
.k-tabstrip-item:hover {
    font-weight: 600;
}

/* Alinhamento de colunas TelerikGrid */
th.align-right .k-cell-inner > .k-link {
    justify-content: right;
    margin-right: 27px;
}
th.align-center .k-cell-inner > .k-link {
    justify-content: center;
}

/* SfDatePicker - Estilização */
/* Dia selecionado */
.e-datepicker .e-selected {
    background-color: #B57F59 !important;
    color: white !important;
}

/* Dia atual ("Today") */
.e-datepicker .e-today {
    background-color: #9a6a4a !important;
    color: white !important;
}

/* Botão "Today" */
.e-datepicker .e-action::before {
    content: "Hoje";
    background-color: #B57F59 !important;
    color: white !important;
}

/* Dias ativos */
.e-datepicker .e-day {
    color: #333 !important;
}

/* Dias inativos */
.e-datepicker .e-disable {
    color: #ccc !important;
}

/* Calendário - dia selecionado e focado */
.e-calendar .e-content td.e-selected.e-focused-date span.e-day {
    background-color: #B57F59;
    color: #fff !important;
}

/* Calendário - dia atual */
.e-calendar .e-content .e-today {
    background-color: #9a6a4a;
    color: #fff !important;
}

/* Calendário - dia selecionado */
.e-calendar .e-content td.e-selected span.e-day {
    background-color: #B57F59;
    color: #fff !important;
}

/* Hover nos dias */
.e-calendar .e-content td:hover span.e-day {
    background-color: #d4a88a !important;
    color: #fff !important;
}

/* Toast Info - cor da aplicação */
.blazored-toast-info .blazored-toast-icon {
    color: #B57F59 !important;
}
.blazored-toast-info {
    border-top: 6px solid #B57F59 !important;
}

/* Grid link cell - estilo para células clicáveis */
.grid-link-cell {
    cursor: pointer;
    color: #B57F59;
    text-decoration: underline;
}
.grid-link-cell:hover {
    color: #9a6a4a;
    text-decoration: underline;
}

/* Grid de detalhes - fonte mais pequena */
div.smallerFont2,
div.smallerFont2 .k-filtercell * {
    font-size: 0.8rem;
    line-height: 1.4;
}
div.smallerFont2.k-grid td {
    padding: 2px 4px;
}
div.smallerFont2 .k-grid-header th {
    padding: 4px 4px !important;
}
div.smallerFont2 .k-cell-inner > .k-link {
    padding: 8px 4px;
}

/* Radzen - override primary color variables */
:root {
    --rz-primary: #B57F59;
    --rz-primary-light: #B57F59;
    --rz-primary-lighter: rgba(181, 127, 89, 0.15);
    --rz-on-primary: #fff;
    --rz-on-primary-lighter: rgba(0, 0, 0, 0.87);
}


/* RadzenCheckBox hover styles */
.rz-chkbox-box:hover {
    border-color: #B57F59 !important;
}
.rz-chkbox-box.rz-state-active {
    background-color: #B57F59 !important;
    border-color: #B57F59 !important;
}
.rz-chkbox-box.rz-state-active:hover {
    background-color: #9a6a4a !important;
    border-color: #9a6a4a !important;
}
/* Botão de ver/esconder password ao lado de um RadzenTextBox.
   O .mud-icon-button traz padding:12px, o que dá 48px de altura (12+24+12) contra os
   36px do input Radzen (--rz-input-height: 2.25rem). Como o wrapper usa align-items:center,
   esses 12px a mais empurravam o input 6px para baixo, desalinhando-o do campo ao lado.
   Com padding:6px o botão fica com 36px e a altura passa a ser ditada pelo input. */
.btn-ver-password {
    padding: 6px;
}

.heightNumeric {
    height: 37px;
}
/* ============================================
   Mobile (portado do marvin_blazor, 2026-09)
   ============================================ */

@media (max-width: 1200px) {
    .mud-card-header {
        padding-bottom: 0px;
    }
    .mud-card-content {
        padding-top: 5px;
    }
}

/* Colunas com menos padding nos ramos mobile das páginas */
.col-mobile {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

/* Limita TelerikWindow (Class="demo-window") para não ultrapassar o ecrã */
.demo-window {
    max-width: 100vw !important;
    max-height: 100vh !important;
}
.demo-window .k-window-content {
    max-width: 100%;
    max-height: calc(100vh - 60px);
    overflow: auto;
}
.demo-window .k-window-content iframe {
    max-width: 100%;
    max-height: calc(100vh - 80px);
    width: 100%;
    height: 100%;
}
@media (max-width: 900px) {
    .demo-window {
        width: calc(100vw - 20px) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
}
@media (max-width: 700px) {
    .demo-window {
        width: calc(100vw - 20px) !important;
        height: calc(100vh - 20px) !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
    }
}

/* Separadores (RadzenTabs) em telemóvel: em vez de rebentarem para 2/3 linhas,
   ficam numa linha só com scroll horizontal e com menos padding/letra.
   A barra de scroll fica fina mas visível, para se perceber que há mais
   separadores à direita. */
@media (max-width: 800px) {
    .rz-tabview > .rz-tabview-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: rgba(181, 127, 89, 0.55) transparent;
    }

    .rz-tabview > .rz-tabview-nav > li {
        flex: 0 0 auto;
    }

    .rz-tabview > .rz-tabview-nav > li > a,
    .rz-tabview > .rz-tabview-nav > li > a:not([href]):not([class]),
    .rz-tabview > .rz-tabview-nav > li > button {
        white-space: nowrap;
        padding-block: 0.35rem;
        padding-inline: 0.6rem;
        font-size: 0.8rem;
    }

    .rz-tabview > .rz-tabview-nav::-webkit-scrollbar {
        height: 3px;
    }

    .rz-tabview > .rz-tabview-nav::-webkit-scrollbar-track {
        background: transparent;
    }

    .rz-tabview > .rz-tabview-nav::-webkit-scrollbar-thumb {
        background: rgba(181, 127, 89, 0.55);
        border-radius: 3px;
    }
}


/* ============================================
   Dashboard — distribuição dos painéis
   (portado do marvin_blazor, 2026-09-16)
   ============================================

   O MudGrid é flexbox: cada linha fica com a altura do painel mais alto dela, por
   isso um painel curto ao lado de um alto (Hora/Agenda ao lado de um gráfico)
   deixava um buraco do tamanho da diferença. Aqui o mesmo contentor passa a ser uma
   grelha CSS de 12 colunas com linhas de 8px: cada painel ocupa tantas linhas quantas
   as que a sua altura pedir (o cálculo está no js/dashboard-masonry.js) e o `dense`
   manda a grelha recuar para tapar os buracos que sobrem à direita.

   As larguras continuam a vir dos atributos xs/sm/md/lg do MudItem — traduzem-se
   aqui de `mud-grid-item-lg-4` para `grid-column: span 4`. Só os filhos diretos da
   grelha (`>`): os MudItem dentro dos cartões (seletores dos gráficos) não são tocados.

   Está no geral.css (e não no site.css) porque esta folha volta a ser carregada no
   MainLayout, depois do MudBlazor.min.css. */

.mud-grid.dashboard-paineis {
    --painel-linha: 8px;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    grid-auto-flow: row dense;
    gap: 24px;
    align-items: start;
    /* anular as margens negativas e a largura calculada do MudGrid */
    width: 100%;
    margin: 0;
}

/* As linhas finas só entram depois de o JS ter medido os painéis: antes disso (ou
   se o JS não correr) as linhas são automáticas. */
.mud-grid.dashboard-paineis.paineis-medidos {
    grid-auto-rows: var(--painel-linha);
}

.mud-grid.dashboard-paineis > .mud-grid-item {
    padding: 0;
    margin: 0;
    max-width: none;
    min-width: 0;
    flex-basis: auto;
    align-self: start;
    grid-column: 1 / -1;
}

/* Os cartões usavam height:100% para igualar a altura da linha flex; na grelha isso
   não se aplica (align-self:start) e a altura passa a ser a do conteúdo. */

@media (min-width: 600px) {
    .mud-grid.dashboard-paineis { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .mud-grid.dashboard-paineis > .mud-grid-item-sm-1 { grid-column: span 1; }
    .mud-grid.dashboard-paineis > .mud-grid-item-sm-2 { grid-column: span 2; }
    .mud-grid.dashboard-paineis > .mud-grid-item-sm-3 { grid-column: span 3; }
    .mud-grid.dashboard-paineis > .mud-grid-item-sm-4 { grid-column: span 4; }
    .mud-grid.dashboard-paineis > .mud-grid-item-sm-5 { grid-column: span 5; }
    .mud-grid.dashboard-paineis > .mud-grid-item-sm-6 { grid-column: span 6; }
    .mud-grid.dashboard-paineis > .mud-grid-item-sm-7 { grid-column: span 7; }
    .mud-grid.dashboard-paineis > .mud-grid-item-sm-8 { grid-column: span 8; }
    .mud-grid.dashboard-paineis > .mud-grid-item-sm-9 { grid-column: span 9; }
    .mud-grid.dashboard-paineis > .mud-grid-item-sm-10 { grid-column: span 10; }
    .mud-grid.dashboard-paineis > .mud-grid-item-sm-11 { grid-column: span 11; }
    .mud-grid.dashboard-paineis > .mud-grid-item-sm-12 { grid-column: span 12; }
}

@media (min-width: 960px) {
    .mud-grid.dashboard-paineis > .mud-grid-item-md-1 { grid-column: span 1; }
    .mud-grid.dashboard-paineis > .mud-grid-item-md-2 { grid-column: span 2; }
    .mud-grid.dashboard-paineis > .mud-grid-item-md-3 { grid-column: span 3; }
    .mud-grid.dashboard-paineis > .mud-grid-item-md-4 { grid-column: span 4; }
    .mud-grid.dashboard-paineis > .mud-grid-item-md-5 { grid-column: span 5; }
    .mud-grid.dashboard-paineis > .mud-grid-item-md-6 { grid-column: span 6; }
    .mud-grid.dashboard-paineis > .mud-grid-item-md-7 { grid-column: span 7; }
    .mud-grid.dashboard-paineis > .mud-grid-item-md-8 { grid-column: span 8; }
    .mud-grid.dashboard-paineis > .mud-grid-item-md-9 { grid-column: span 9; }
    .mud-grid.dashboard-paineis > .mud-grid-item-md-10 { grid-column: span 10; }
    .mud-grid.dashboard-paineis > .mud-grid-item-md-11 { grid-column: span 11; }
    .mud-grid.dashboard-paineis > .mud-grid-item-md-12 { grid-column: span 12; }
}

@media (min-width: 1280px) {
    .mud-grid.dashboard-paineis > .mud-grid-item-lg-1 { grid-column: span 1; }
    .mud-grid.dashboard-paineis > .mud-grid-item-lg-2 { grid-column: span 2; }
    .mud-grid.dashboard-paineis > .mud-grid-item-lg-3 { grid-column: span 3; }
    .mud-grid.dashboard-paineis > .mud-grid-item-lg-4 { grid-column: span 4; }
    .mud-grid.dashboard-paineis > .mud-grid-item-lg-5 { grid-column: span 5; }
    .mud-grid.dashboard-paineis > .mud-grid-item-lg-6 { grid-column: span 6; }
    .mud-grid.dashboard-paineis > .mud-grid-item-lg-7 { grid-column: span 7; }
    .mud-grid.dashboard-paineis > .mud-grid-item-lg-8 { grid-column: span 8; }
    .mud-grid.dashboard-paineis > .mud-grid-item-lg-9 { grid-column: span 9; }
    .mud-grid.dashboard-paineis > .mud-grid-item-lg-10 { grid-column: span 10; }
    .mud-grid.dashboard-paineis > .mud-grid-item-lg-11 { grid-column: span 11; }
    .mud-grid.dashboard-paineis > .mud-grid-item-lg-12 { grid-column: span 12; }
}

/* Grelhas das páginas de lista: a altura é o resto do ecrã a partir do topo da grelha, medido em
   js/altura-lista.js. Sobrepõe-se ao Height do C#; até à primeira medição vale o desconto fixo antigo. */
.k-grid.grelha-ecra { height: var(--grelha-ecra-altura, calc(100vh - 150px)) !important; }