html,
body {
  min-height: 100%;
  padding: 0;
  margin: 0;
  scroll-padding-top: 2em;
}

[part~='drawer']::part(dialog) {
    color: var(--wa-color-danger-on-loud) !important;
    background-color: var(--wa-color-danger-fill-loud) !important;
}

.drawer.start.open{
    color: var(--wa-color-danger-on-loud) !important;
    background-color: var(--wa-color-danger-fill-loud) !important;
}

[slot='banner'] {
    --wa-color-text-normal: var(--wa-color-danger-on-loud);
    color: var(--wa-color-danger-on-loud);
    background-color: var(--wa-color-danger-fill-loud);

}

wa-popover {
    --arrow-size: 15px;
    --max-width: 100vw;
    
}

@media (min-width: 768px) {
    wa-popover {
        --arrow-size: 15px;
        --max-width: 40vw;
    };
    
}


wa-page[view='mobile']  {
    background-color: var(--wa-color-surface-raised);
    scroll-padding-top: 3.5em;
    
    [slot='navigation'] {
        width: 12rem;
        background-color: var(--wa-color-surface-default);
    }
    
    [slot='navigation-footer'] {
        background-color: var(--wa-color-surface-default);
    }
    main,
    [slot*='main'] {
        margin-inline: var(--wa-space-s);
        padding: var(--wa-space-3xs);
    }
}

wa-page{
    [slot='header'] {
        background-color: var(--wa-color-surface-lowered);
        border-inline: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
    }
    [slot='subheader'] {
        background-color: var(--wa-color-surface-lowered);
        border-inline: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
    }


}

.candidate-card::part(body){

    padding-bottom: 0px ;
    padding-top: 0px ;
    padding-left: 0px;

}


[slot='navigation'] {
    /*width: 13rem;*/
    background-color: var(--wa-color-surface-lowered);
    
    wa-button::part(base) {
        justify-content: flex-start;
    }
    
    wa-button[variant="brand"]::part(base):hover{
        background-color: var(--wa-color-brand-fill-normal);
        color: var(--wa-color-brand-on-normal);
    }
    
    wa-icon {
        align-items: center;
        aspect-ratio: 1;
        color: var(--wa-color-brand-fill-loud);
        display: flex;
        justify-content: start;
        padding-block: 0.5em;
    }

}

[slot='navigation-footer'] {
    background-color: var(--wa-color-surface-lowered);
    padding: 0px;
}

main,
[slot*='main'] {
    margin-inline: var(--wa-space-s);
    padding: var(--wa-space-m);
}


[slot='main-footer'] {
    border-inline: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
}

wa-page[slot='footer'] {
    border-inline: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
    background-color: var(--wa-color-surface-lowered);
}


[slot='main-footer'].wa-grid > * {
    max-inline-size: 30ch;
}

.invertedimg{
    filter: invert(40%);
    background-color: white;
}

.voteProgressOK{
    --track-width: 6px;
    --indicator-width: 12px;
    --indicator-color: var(--wa-color-brand-fill-loud);
}
.voteProgressNOK{
    --track-width: 6px;
    --indicator-width: 24px;
    --indicator-color: var(--wa-color-danger-fill-loud);

}

.minimumProgressOK{
    --track-width: 6px;
    --indicator-width: 12px;
    --indicator-color: var(--wa-color-success-fill-loud);
}

.minimumProgressNOK{
    --track-width: 6px;
    --indicator-width: 12px;
    --indicator-color: var(--wa-color-brand-fill-loud);
}

.voteCardNOK{
    background-color: var(--wa-color-warning-fill-normal);
    color: var(--wa-color-warning-on-normal);
    
}

.blockRadios{
    color: var(--wa-color-neutral-on-loud);
}

.tabulator {
    font-size: var(--wa-font-size-xl)!important;  
    
  }
  
  .tabulator-cell{
      user-select: none;
  }

  .tabulator-cell svg{
      width: 25px;
      height: 25px;
  }

  
  

.tabulator {
    border: 1px solid var(--wa-color-neutral-200) !important;
    border-radius: var(--wa-border-radius-medium) !important;
    font-family: var(--wa-font-sans) !important;
    font-size: var(--wa-font-size-small) !important;
    background-color: var(--wa-color-neutral-0) !important;
    overflow: hidden;  
}

.tabulator .tabulator-header {
    height:0px!important;
}

.tabulator .tabulator-header .tabulator-col {
    background-color: transparent !important;
    padding: var(--wa-spacing-small) var(--wa-spacing-medium) !important;
}

.tabulator .tabulator-row {
    border-bottom: 1px solid var(--wa-color-surface-raised) !important;
    background-color: var(--wa-color-surface-raised) !important;
    color: var(--wa-color-text-normal) !important;
    transition: background-color var(--wa-transition-fast);
}

.tabulator .tabulator-row.tabulator-row-even {
    background-color: var(--wa-color-surface-lowered) !important;
}

.tabulator .tabulator-row:hover {
    background-color: var(--wa-color-overlay-modal) !important;
    cursor: pointer;
}

.tabulator .tabulator-row.tabulator-selected {
    background-color: var(--wa-color-primary-100) !important;
    color: var(--wa-color-primary-900) !important;
}

.tabulator .tabulator-row .tabulator-cell {
    padding: var(--wa-space-m) !important;
    padding-top: var(--wa-space-m)!important;
    border-right: none !important;  
}

.tabulator .tabulator-footer {
    background-color: var(--wa-color-surface-default) !important;
    border-top: 1px solid var(--wa-color-neutral-200) !important;
    padding: var(--wa-spacing-small) !important;
}

.tabulator-tableholder::-webkit-scrollbar {
    width: 8px;
}
.tabulator-tableholder::-webkit-scrollbar-thumb {
    background: var(--wa-color-neutral-300);
    border-radius: var(--wa-border-radius-pill);
}

.tabulator-page {
    color: var(--wa-color-text-normal)!important;
    
  }
  
  .cell {
    color: var(--wa-color-text-normal)!important;
    
  }
  
  .tabulator .tabulator-tableholder {
    overflow-x: hidden !important;
}

.tabulator-row .tabulator-cell.tabulator-row-header {
    background: var(--wa-color-surface-default) !important;
}

.tabulator-row-handle{
    width: 60px!important;
    height: 60px!important;
}
.tabulator-row-handle-box{
    width:10px!important;
    height:20px!important;
}
.tabulator-row-handle-bar{
    width:10px!important;
    height:5px!important;
}
  
  .candidate-bio{
      --width: 50vw;
  }
  
  .section-top{
      margin-top: var(--wa-space-2xl);
  }
  
 @media (max-width: 768px) {
    .candidate-bio{
      --width: 100vw;
  }
    
}