/*------------------------------------------------------------------
[Child Stylesheet]

Project:        Fret - Portal
Version:        0.1
Last change:    2019-07-09
Customer:       BIJ12
Assigned to:    Pieter de Vries / NIO Communicatie
------------------------------------------------------------------*/

body.portal {
    background-color: #D5EBF1;
}

body.portal .multiple-input-list__btn.js-input-plus.btn.btn-default {
    background-color: #0064b4;
    color: #ffffff;
}

body.portal .form-detail.request-finalize {
    padding-top: 30px;
    padding-bottom: 30px;
    background: #EBEBEB url('../images/logo.svg') no-repeat right 20px top 20px;
    background-size: 200px;
}

body.portal .form-detail.custom-form {
    padding-top: 30px;
    padding-bottom: 30px;
    background: #fff;
}


body.portal .form-detail.request-finalize .request-detail,
body.portal .form-detail.custom-form .request-detail
{
    padding-top: 5px;
    padding-bottom: 5px;
}


body.portal .mobile-menu {
    display: none;
}

body.portal header {
    background-color: #ffffff;
    padding: 20px 0px;
}

body.portal .main-menu {
    padding-left: 0px;
    list-style: none;
    float: right;
    margin-bottom: 0px;
    margin-top: 30px;
}

body.portal .main-menu li {
    display: inline;
    margin-left: 8px;
}

body.portal .main-menu li::after{
    content: '|';
    font-size: 18px;
    color: #000000;
    font-weight: bold;
    position: relative;
    top: -1px;
}

body.portal .main-menu li a{
    margin-right: 10px;
    text-transform: uppercase;
    font-weight: bold;
}

body.portal .main-menu li.active a{
    color: #b44c3b!important;
}

body.portal .main-menu li:last-of-type a{
    margin-right: 0px;
}

body.portal .main-menu li:last-of-type::after{
    content: none;
}


body.portal .block-box {
    min-height: 277px;
}

body.portal .block-box:last-of-type {
    min-height: 320px;
}

body.portal .block-box .customer-information {
    padding: 5px 30px 10px 10px;
    -webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.5);
    float: left;
}

body.portal .block-box-portal {
    padding: 30px 15px;
}

/* Het blok met de perceelcontrole hoort in dezelfde rooilijn als de tekst en de knoppen.
   Dat kan niet in een <p>, want het widget zet divs neer en die haalt de browser daaruit. */
body.portal .block-box-portal h2,
body.portal .block-box-portal p,
body.portal .block-box-portal .perceelcontrole-blok {
    padding-left: 25px;
    padding-right: 25px;
}

/* Noodverband voor de plekken waar het widget nog wel in een <p> staat: de browser trekt het
   informatieblok daaruit en dan vervalt de inspringing. Alleen zichtbaar met YII_DEBUG. */
body.portal .block-box-portal > .perceelcontrole-info {
    margin-left: 25px;
    margin-right: 25px;
}

/* Mijn percelen: de regel hierboven geldt alleen voor h2 en p, dus koppen van het derde niveau,
   opsommingen, tabellen en de paginering begonnen 25px verder naar links dan de tekst ertussen.
   Hier krijgen die dezelfde inspringing, zodat alles op één lijn staat. */
.lot-index .block-box-portal h3,
.lot-index .block-box-portal .table-responsive,
.lot-index .block-box-portal .grid-view {
    padding-left: 25px;
    padding-right: 25px;
}

/* Een opsomming houdt zijn eigen inspringing voor de bolletjes, dus die schuift met een marge
   mee in plaats van met padding. */
.lot-index .block-box-portal .text-block > ul,
.lot-index .block-box-portal .text-block > ol {
    margin-left: 25px;
    margin-right: 25px;
}

/* Niet dubbel inspringen: wat al in een ingesprongen kader staat, telt niet nog een keer mee. */
.lot-index .block-box-portal .table-responsive h3,
.lot-index .block-box-portal .table-responsive .grid-view,
.lot-index .block-box-portal .grid-view ul,
.lot-index .block-box-portal .grid-view ol,
.lot-index .block-box-portal td ul,
.lot-index .block-box-portal td ol {
    padding-left: 0;
    padding-right: 0;
}

body.portal .table > th {
    padding: 0px;
    border-bottom: 0px;
}

body.portal .table > td{
    border-top: 0px;
}

body.portal .table-responsive {
    padding-left: 25px;
    padding-right: 25px;
}

/* In een tabblad komt die 25px bovenop de 15px van het paneel zelf, dus stond de lijst 40px
   van de rand, aan beide kanten bijna een centimeter op een breed scherm. Het paneel heeft
   er met zijn eigen rand en lucht al een kader omheen, dus binnen een tabblad kan het eraf. */
body.portal .tab-content .table-responsive {
    padding-left: 0;
    padding-right: 0;
}

body.portal .primary-table th {
    font-weight: normal;
}

body.portal .primary-table td:first-child img {
    position: relative;
    top: -1px;
}

body.portal .primary-table td:first-child img {
    position: relative;
    top: -1px;
}

body.portal .primary-table td .description {
    white-space: nowrap;
    width: 345px;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.portal .primary-table td .description-small {
    white-space: nowrap;
    width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.portal .primary-table tr th , body.portal .primary-table tr td {
    padding: 8px 14px 8px 0;
    font-size: 13px;
}



body.portal footer {
    background-color: #ffffff;
    padding: 15px 0;
}

/* De voettekst stond op elke portaalpagina net onder de vouw, ongeacht hoeveel er op de
   pagina stond. Oorzaak: .frame krijgt min-height 100%, dus een volle schermhoogte, maar
   #content zet er margin-top 8.5rem boven voor de vaste kopbalk. Die marge valt samen met
   body, zodat het hele raamwerk 85 pixels omlaag schuift terwijl het een volle schermhoogte
   blijft. De voettekst hangt absoluut onderin dat raamwerk en kwam dus altijd 85 pixels te
   laag uit. Gemeten op 01-11-2026: pagina 1035 hoog in een venster van 950, en op 1920 bij
   1080 precies hetzelfde verschil.

   De marge wordt hier padding op het raamwerk zelf. Padding valt niet samen met de ouder,
   dus body begint weer op nul, het raamwerk loopt tot onderaan het scherm en er blijft geen
   lege schuifruimte onder de voettekst over.

   Alleen voor het portaal, en veilig voor de kaarten: die draaien op de popup-layout en die
   kent geen .frame en geen #content, alleen de regel html, body { height: 100% } in app.css
   waar niet aan gezeten is. */
body.portal .frame {
    padding-top: 8.5rem;
}

body.portal #content {
    margin-top: 0;
}

body.portal .frame footer {
    height: 55px;
}

/* app.css houdt onderaan 85px vrij voor de voettekst, de maat uit de oorspronkelijke
   sjabloon. In het portaal is die voettekst 55px hoog, zie de regel hierboven, dus er stond
   30px te veel gereserveerd tussen de laatste kaart en de voettekst. */
body.portal .frame .portal-frame {
    padding-bottom: 55px;
}

body.portal footer .footer-links {
    margin-left: 40px;
    color: #000000;
}

body.portal footer .footer-links a {
    color: #000000;
}

body.portal .modal-dialog {
    /*max-width: 710px;*/
    /*width:100%;*/
}

body.portal .modal-blue {
    background-color: #d4ebf1;
}

body.portal .modal-content {
    padding:40px;
    background-color: #D5EBF1;
}


body.portal .request-content p , body.portal .request-content h2 {
    padding:0;
}

body.portal .request-content .information-row {
    background-color: #EBEBEB;
    border-radius: 10px;
    padding:20px;
    margin:0;
}

body.portal .modal-blue .modal-header, body.portal .modal-header {
    border-bottom: 0;
}

body.portal .modal-blue .modal-footer , body.portal .request-content .modal-footer {
    padding: 15px;
    text-align: left;
    border-top: 0;
}

body.portal .modal-blue .modal-body , body.portal .request-content .modal-body {
    position: relative;
    padding: 0 15px;
}

body.portal .modal-blue .close {
    opacity: 0.5;
}

/*body.portal .sub-menu {
    padding: 23px 0 8px 0;
    list-style: none;
    margin-bottom: 0px;
    background-color: #025ea5;
    color: #ffffff;
}

body.portal .sub-menu ul {
    padding-left: 0px;
}

body.portal .sub-menu li {
    display: inline;
}

body.portal .sub-menu li a {
    padding: 25px 30px 20px 20px;
    border-right: 1px solid #d4ebf1;
    margin-left: -3px;
    font-weight: bold;
    cursor: pointer;
    color: #ffffff;
    font-size: 14px;
}

body.portal .sub-menu li.active a{
    background-color: #b44c3b;
}

body.portal .sub-menu li:first-child a{
    padding-left: 75px;
    margin-left: 0px;
    border-bottom-left-radius: 25px;
}

body.portal .sub-menu li:last-child a{
    padding-right: 10.1%;
    border-bottom-right-radius: 25px;
}

body.portal .sub-menu li:last-child a{
    border-right: 0px;
    border-bottom-right-radius: 25px;
}*/

body.portal .step-container {
    display: flex;
    justify-content: center;
}

body.portal .request-row {
    padding:0 40px 40px 40px;
}

body.portal .request-steps {
    display:flex;
    /* Met nowrap kan deze flexrij breder worden dan het scherm, en dan schuift de
       hele pagina mee. Afbreken is op elke breedte beter dan uitlopen. */
    flex-wrap: wrap;
    overflow: hidden;
    padding: 0;
    background-color: #025ea5;
    color: #ffffff;
    border-radius: 0 0 25px 25px;
    font-weight: bold;
    width: 100%;
}



body.portal .request-steps li {
    display: block;
    border-left: 1px solid #fff;
    padding: 0;
}

body.portal .request-steps li a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 20px 20px;
    color: #fff;
}

body.portal .request-steps li.disabled a {
    color: #92aecf;
    cursor: not-allowed;
}

body.portal .request-steps li.active {
    background-color: #b44c3b;
}

body.portal .request-steps li:first-child {
    border-left: none;
    border-bottom-left-radius: 25px;
}

/*body.portal .request-steps li:first-child a {*/
/*    padding-left: 75px;*/
/*}*/

body.portal .request-steps li:last-child {
    flex: auto;
    border-bottom-right-radius: 25px;
}

body.portal .form-detail {
    padding-left: 75px;
    padding-right: 40px;
}



body.portal .animal-name {
     font-weight: 600;
     font-size: 14px;
}

body.portal .animal-name-container {
    margin-bottom: 30px;
    padding-top:10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

body.portal .animal-outer * {
   cursor: pointer;
}

body.portal .animal-inner {
    min-height: 190px;
    min-width: 190px;
    border: 5px solid #d4ebf1;
}

body.portal .animal-outer label {
    display: unset!important;
}

body.portal .animal-inner.active {
    border: 5px solid #b44c3b;
}

.modal-header .close {
    margin-top: -15px;
    margin-right: -10px;
    opacity: 1;
}

.modal-header i:hover {
    color:black!important;
}

body.portal .zoom-in {
    font-size: 14px;
    font-weight: bold;
}

body.portal .grid-table img {
    margin-right: 10px;
    margin-left: 10px;
}

body.portal .grid-table td {
    padding-bottom: 8px;
}

body.portal table .form-control {
    text-align: left;
}

body.portal .grid-table.table td {
    padding: 10px 0px 10px 8px;
}

body.portal .image-border {
    border: 1px solid #005ea5;
}


.message-read-form label {
    font-weight: normal;
}
.message-read-form input[type=checkbox] {
    vertical-align: middle;
    margin: 0;
}

.message-read-form.read label {
    color: #959595;
    font-style: italic;
}

body.portal .field-request-lots .perceel-item.active {
    border: 5px solid #b44c3b;
    background: #c2d6dc;
}


body.portal .field-request-lots .perceel-item {
    border: 5px solid #d4ebf1;
    padding: 5px;
}

body.portal .perceel-item label {
    display: unset;
    max-width: unset;
    margin-bottom: unset;
    font-weight: unset;
}

body.portal .perceel-item input {
    display: none;
}

body.portal .perceel-item {
    margin-bottom: 15px;
}

body.portal .perceel-item .perceel-afbeelding {
    border: 1px solid #005ea5;
    height: 100px;
    width: 135px;
    background-color: #ffffff;
}

body.portal .field-request-lots {
    padding: 0px 15px;
}

body.portal .perceel-item .perceel-afbeelding img {
    float:right;
    margin-top: 80px;
    margin-right: 5px;
}

body.portal .text-block h1,
body.portal .text-block h2,
body.portal .text-block h3,
body.portal .text-block h4,
body.portal .text-block h5,
body.portal .text-block h6 {
    padding: 0 25px;
}

body.portal .grid-table th {
    font-weight: 400;
    padding-bottom: 10px;
    padding-top: 10px;
    color: #005ea5;
}


body.portal .grid-table thead {
    border-top: 1px solid #d4ebf1;
}

body.portal .grid-table tbody tr {
    border-bottom: 1px solid #d4ebf1;
}

body.portal .grid-table tbody tr.inactive {
    opacity: 0.6;
    background-color: #eefcff;
}

body.portal .grid-table tbody tr:nth-child(even) {
    background: #ecf6f8
}

/* De filterregel van een grid. Hing ook op #w0-filters, dus op het volgnummer dat Yii aan
   de widget geeft. Alleen het grid dat toevallig w0 heet kreeg daardoor de lichtblauwe
   regel en de krappere cellen, de rest stond wit en ruim. Yii zet zelf class="filters" op
   die rij, dus daar hoort het aan te hangen.

   Beheerschermen die hun eigen filterregel vastzetten, zoals companies en het beheerlayout
   van gebruikers, zetten background met !important en houden dus gewoon hun witte regel. */
body.portal table .filters > td,
body.portal table.grid-table .filters > td {
    background-color: #ecf6f8;
    padding-bottom: 4px;
    padding-top: 4px;
}

/* Een filterveld is zo breed als zijn kolom, en een kolom is zo breed als zijn kop. Bij een
   smalle kop als ID of GFG bleef er een vakje van 50 pixels over waarin Zoeken... werd
   afgekapt tot Zoeker, en waarin van een keuzelijst alleen het pijltje overbleef. Dat is wat
   je op lot/index zag.

   Een ondergrens op het veld duwt de kolom breed genoeg. De tabel haalt die ruimte weg bij
   de kolommen die kunnen inschikken, en past hij niet meer, dan schuift de tabel opzij,
   zoals hij dat toch al doet.

   De maat is zo gekozen dat Zoeken... er net in past en geen pixel meer, want elke pixel
   erbij gaat af van een kolom die hem beter kan gebruiken. */
body.portal table.grid-table .filters .form-control,
body.portal table.grid-table .filters .select2-container {
    min-width: 80px;
}


body.portal table.grid-table {
    width: 100%;
}

body.portal table.grid-table input[type=text],body.portal table.grid-table select {
    background-color: #ffffff!important;
    border: 1px solid #ccc;
}

/* Een keuzelijst in de filterregel van een grid. Dit stond op #w0-filters td:nth-child(4)
   en op td:nth-child(5): dus op het volgnummer dat Yii aan de widget geeft en op de plek
   van de kolom in de tabel. Daardoor kreeg alleen een grid dat toevallig w0 heet en zijn
   keuzelijst in de vierde of vijfde kolom heeft het pijltje, en viel elk ander grid terug
   op de algemene regel in app.css. Komt er een kolom bij, dan verschuift het mee.

   Het pijltje stond bovendien op een maat in procenten van de kolombreedte: 7% van 220
   pixels is bijna goed, maar 7% van 95 pixels op een smal scherm is een vlekje van 6
   pixels. Het plaatje is 16 bij 16 en staat nu ook op die maat.

   De hoogte komt van .form-control in app.css, waar 38 pixels nodig is omdat een veld
   daar 11 pixels padding heeft. In een grid is die padding 5 pixels, dus daar past 35 en
   staat de keuzelijst weer op één lijn met de zoekvelden ernaast. */
body.portal .grid-table thead select.form-control {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    height: 35px;
    padding-right: 30px;
    background-image: url('../images/arrow_down.png');
    background-repeat: no-repeat;
    background-position: right 9px center;
    background-size: 16px 16px;
}

body.portal table.grid-table tr td:last-child img {
    width: 20px;
    height: 20px;
}
.nav.nav-tabs {
    background: #f2f2f2;
    border: 1px solid #ddd;
    padding-top: 10px;
}
.tab-content {
    padding: 15px;
    /* Stond op 40px. Dat gat tussen de tabbladen en de lijst eronder las als een lege
       strook en duwde de voettekst mee naar beneden. 20px laat nog zien dat de inhoud bij
       het gekozen tabblad hoort. */
    padding-top: 20px;
    border: 1px solid #ddd;
    border-top: none;
}

/*!* 2024 update CSS *!*/

/*#frame {*/
/*    height: 100%;*/
/*    margin: 0;*/
/*    overflow: hidden;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*}*/

#headerLogo {
    display: flex;
    height: 5.5rem; /*72px*/
    object-fit: contain;
    object-position: center;
    width: auto;
}
#header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1030;
}

/* Namens een ander werken
   -----------------------
   Dit was een gele balk over de volle breedte met drie regels tekst en een knop. Die duwde
   elke pagina ruim 300 pixels omlaag op een telefoon, en ook op een breed scherm een hele
   regel. Nu doen twee dingen het werk: een lint dat over de bovenrand van de vaste kop ligt
   en dus geen hoogte kost, en een pil die zegt namens wie je werkt. De rest staat in de lade
   die onder de kop hangt. Zie views/layouts/_imp_pil.php en _imp_lade.php. */

.imp-lint {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background-color: #ffc107;
    z-index: 3;
}

body.portal header > .container {
    position: relative;
}

/* Een doorzichtige strook over de hele kopbreedte, zodat de pil zich aan de rechterrand van
   de kop kan uitlijnen zonder dat we met losse getallen hoeven te rekenen. De strook zelf
   vangt geen muisklikken, anders zou hij het logo afdekken. */
.imp {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    text-align: right;
    pointer-events: none;
    z-index: 3;
}

.imp-pil {
    pointer-events: auto;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* Links van de hamburger, die 55px breed is en 15px van de rand staat. */
    margin-right: 90px;
    padding: 3px;
    background-color: #ffc107;
    border: 1px solid #e0a800;
    border-radius: 999px;
    text-align: left;
    vertical-align: middle;
}

.imp-knop {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: #1d1d1b;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}

/* Het poppetje komt als svg uit de Font Awesome-kit. Zonder deze regel houdt het nog een
   regelafstand over en staat het net te laag in zijn rondje. */
.imp-knop i,
.imp-knop svg {
    display: block;
    line-height: 1;
}

.imp-pil:hover,
.imp-pil:focus-within {
    background-color: #ffcd38;
}

/* Werkbalk boven een beheergrid: Kolommen en Export links, de knoppen van de pagina zelf
   rechts, alles op één regel. Scheelt hoogte tegenover de blokken onder elkaar met een
   streep ertussen die er eerst stonden. */
.grid-werkbalk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.grid-werkbalk-export {
    order: -1;
    margin-right: auto;
}

/* Onderhoudsstand
   ---------------
   De pil staat naast het logo. Daar is op een breed scherm ruimte over, en hij komt niet in
   de weg van het menu of van de pil voor namens een ander werken. De kolom met het logo
   wordt daarvoor een flexregel. */
.kop-logo {
    display: flex;
    align-items: center;
    gap: 20px;
}

.onderhoud {
    z-index: 3;
}

.onderhoud-pil {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 3px;
    /* De kleuren van alert-warning, dezelfde als de onderhoudsmelding op het inlogscherm.
       Onderhoud is gepland werk en geen storing, dus geen rood. De rand is een tint steviger
       dan die van bootstrap, anders valt een rondje van 36 pixels te weinig op. */
    background-color: #fcf8e3;
    border: 1px solid #e0a800;
    border-radius: 999px;
    vertical-align: middle;
}

.onderhoud-knop {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: #8a6d3b;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}

.onderhoud-knop i,
.onderhoud-knop svg {
    display: block;
    line-height: 1;
}

.onderhoud-pil:hover,
.onderhoud-pil:focus-within {
    background-color: #faf2cc;
}

/* De uitleg hangt onder de pil en komt pas tevoorschijn bij aanwijzen of toetsenbordfocus.
   Niet met display none, want dan valt hij buiten de toetsenbordvolgorde. */
.onderhoud-inhoud {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 260px;
    padding: 10px 12px;
    background-color: #ffffff;
    border: 1px solid #e0a800;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease;
}

.onderhoud-pil:hover .onderhoud-inhoud,
.onderhoud-pil:focus-within .onderhoud-inhoud {
    opacity: 1;
    visibility: visible;
}

.onderhoud-kop {
    display: block;
    font-weight: 700;
    color: #8a6d3b;
}

.onderhoud-uitleg {
    display: block;
    margin: 4px 0 8px;
    font-size: 13px;
    line-height: 18px;
    color: #1d1d1b;
}

/* Omgeving wisselen op de beheerpagina. Label, keuzelijst en knop op één regel zolang dat
   past, daaronder netjes onder elkaar. form-inline van bootstrap kon dat niet: daar liep de
   keuzelijst op een telefoon het scherm uit en bleef de knop op de hoogte van het label
   hangen. */
.omgeving-wisselen {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}

.omgeving-wisselen .form-group {
    flex: 1 1 220px;
    max-width: 320px;
    margin-bottom: 0;
}

.omgeving-wisselen .form-group label {
    display: block;
}

.omgeving-wisselen .select2-container {
    width: 100% !important;
}

/* Vanaf een tablet is er ruimte voor label, keuzelijst en knop op één regel. Op een telefoon
   blijft het onder elkaar staan. */
@media (min-width: 768px) {
    .omgeving-wisselen {
        align-items: center;
    }

    .omgeving-wisselen .form-group {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 0 1 auto;
        max-width: none;
    }

    .omgeving-wisselen .form-group label {
        display: inline-block;
        margin-bottom: 0;
        white-space: nowrap;
    }

    .omgeving-wisselen .select2-container {
        width: 280px !important;
    }

    .omgeving-wisselen .btn {
        flex: 0 0 auto;
    }
}

.onderhoud-knop-uit,
.onderhoud-knop-uit:hover,
.onderhoud-knop-uit:visited {
    display: inline-block;
    padding: 4px 10px;
    background-color: #e0a800;
    border-radius: 4px;
    color: #1d1d1b;
    font-size: 13px;
    text-decoration: none;
}

/* Ingeklapt zie je het poppetje en het kruisje, de tekst niet. */
.imp-inhoud {
    display: none;
}

.imp-namens {
    white-space: nowrap;
}

.imp-rol,
.imp-nummers {
    color: #6b5a14;
}

/* De uitgang staat er altijd, ook ingeklapt. Op een aanraakscherm is aanwijzen geen optie,
   dus moet je de knop in één tik kunnen raken zonder eerst open te klappen. */
.imp-exit {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 28px;
    height: 28px;
    padding: 0;
    background-color: #1d1d1b;
    border-radius: 999px;
    color: #ffffff;
    font-weight: 700;
    font-size: 12.5px;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.imp-exit:hover,
.imp-exit:focus {
    background-color: #000000;
    color: #ffffff;
    text-decoration: none;
}

.imp-exit-icoon {
    display: block;
    flex: none;
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.imp-exit-tekst {
    display: none;
}

/* Het blok bovenin het uitklapmenu. Alleen zichtbaar op telefoon en tablet, want daar zit
   dat menu, en daar hoort de knop om terug te gaan bij de andere menuknoppen. */
.imp-menu {
    margin: 10px 0 20px;
    padding: 14px;
    background-color: #fffaea;
    border: 1px solid #e0a800;
    border-left: 5px solid #ffc107;
    border-radius: 4px;
    color: #1d1d1b;
    font-size: 14px;
    line-height: 1.4;
}

.imp-menu p {
    margin: 0 0 4px;
}

.imp-menu-rol {
    color: #5d5d58;
}

.imp-menu-nummers {
    font-size: 11px;
    color: #8a8a82;
}

.imp-menu-terug {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 9px 14px;
    background-color: #1d1d1b;
    border-radius: 999px;
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
}

.imp-menu-terug:hover,
.imp-menu-terug:focus {
    background-color: #000000;
    color: #ffffff;
    text-decoration: none;
}

/* Tot 992px zit alles in het uitklapmenu en staat er in de kopregel geen pil meer. Wat
   blijft is het lint en een gele rand om de hamburger, zodat je zonder het menu te openen
   ziet dat je namens een ander werkt. */
@media (max-width: 991px) {
    .imp {
        display: none;
    }

    .imp ~ .row .hamburger-mobile {
        box-shadow: inset 0 0 0 3px #ffc107;
    }
}

/* Vanaf 992px is er ruimte zat, dus groeit de pil zelf uit bij aanwijzen of aanklikken,
   net als in het portaal van de bosgroepen. Hij staat in de witruimte boven de menuregel en
   lijnt rechts uit met het laatste menu-item: 15px rand van de container plus de 20px marge
   die om het menu staat. */
@media (min-width: 992px) {
    /* Op dezelfde regel als het menu en rechts daarvan, zoals in het portaal van de
       bosgroepen. De 35px is de 15px rand van de container plus de 20px marge om het menu,
       zodat de rechterkant van de pil op het laatste menu-item uitkomt. */
    .imp {
        top: 26px;
        transform: none;
        padding-right: 35px;
    }

    .imp-pil {
        margin-right: 0;
    }

    /* Het menu schuift op om plaats te maken, maar alleen als de pil er is. Zonder
       impersonatie rendert .imp niet en blijft het menu staan waar het stond. */
    .imp ~ .row .main-menu {
        margin-right: 86px;
    }

    .imp-pil:hover .imp-inhoud,
    .imp-pil:focus-within .imp-inhoud,
    .imp-pil.open .imp-inhoud {
        display: flex;
        align-items: center;
        gap: 10px;
        padding-left: 2px;
        font-size: 12px;
        line-height: 1.2;
        white-space: nowrap;
    }

    .imp-pil:hover .imp-exit-tekst,
    .imp-pil:focus-within .imp-exit-tekst,
    .imp-pil.open .imp-exit-tekst {
        display: inline;
    }

    .imp-pil:hover .imp-exit,
    .imp-pil:focus-within .imp-exit,
    .imp-pil.open .imp-exit {
        width: auto;
        padding: 0 11px 0 9px;
    }

    /* Uitgeklapt legt de pil zich over de menuregel heen, dus hoe korter hoe beter. De
       nummers horen bij het zoeken naar een fout en niet in die ene regel, ze staan nog
       wel in de tooltip en in het paneeltje op een smal scherm. */
    .imp-pil .imp-nummers {
        display: none;
    }
}

/*#footer {*/
/*    position: fixed;*/
/*    bottom: 0;*/
/*    width: 100%;*/
/*    z-index: 1030;*/
/*}*/
/*#footer-dev {*/
/*    position: fixed;*/
/*    bottom: -160px;*/
/*    z-index: 1040;*/
/*}*/
#content {
    flex: 1 0 auto;
    margin-top:8.5rem ;
    height: calc(100% - 11.5rem );
    overflow-y: auto;
    overflow-x: auto;
}

.block {
    /*background: $white;*/
    border-radius: 20px;
    box-shadow: 0px 0px 10px #00000033;
    margin: 30px 0;
    position: relative;
}

.block-content {
    padding: 25px 50px;
}
.block-content .block-title{
    color: #1d1d1b;
    font-size: 23px;
    font-weight: 700;
}

.bottom-right-link {
    display: inline-block;
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 10px 15px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
}
.bottom-right-link i {
    margin-left: 7px;
}

.top-right-link {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px 15px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
}
.top-right-link:hover {
    color: black;
}
.top-right-link i {
    margin-left: 7px;
}

@keyframes flash {
    0% {opacity: 1;}
    50% {opacity: 0.1;}
    100% {opacity: 1;}
}

.flash-text {
    animation: flash 1s linear infinite;
}

/* Traffic light styling */
.traffic-light-housing {
    background-color: #333;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    margin: 20px auto;
    width: 80px;
}

/* Mini traffic light styling */
.mini-traffic-light-housing {
    background-color: #333;
    border-radius: 6px;
    padding: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
    margin: 5px;
    width: 30px;
    height: 90px;
}

.traffic-light {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin: 8px 0;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
    position: relative;
    transition: all 0.3s ease;
}

.mini-traffic-light {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin: 3px 0;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
    position: relative;
    transition: all 0.3s ease;
}

.traffic-light::after, .mini-traffic-light::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    height: 40%;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.2);
    box-shadow: 0 0 10px rgba(255,255,255,0.5);
}

.mini-traffic-light::after {
    box-shadow: 0 0 5px rgba(255,255,255,0.5);
}

.traffic-light.red, .mini-traffic-light.red {
    background-color: #ff3333;
    box-shadow: 0 0 20px rgba(255,0,0,0.5), inset 0 0 10px rgba(0,0,0,0.3);
}

.mini-traffic-light.red {
    box-shadow: 0 0 10px rgba(255,0,0,0.5), inset 0 0 5px rgba(0,0,0,0.3);
}

.traffic-light.yellow, .mini-traffic-light.yellow {
    background-color: #ffcc00;
    box-shadow: 0 0 20px rgba(255,204,0,0.5), inset 0 0 10px rgba(0,0,0,0.3);
}

.mini-traffic-light.yellow {
    box-shadow: 0 0 10px rgba(255,204,0,0.5), inset 0 0 5px rgba(0,0,0,0.3);
}

.traffic-light.green, .mini-traffic-light.green {
    background-color: #33cc33;
    box-shadow: 0 0 20px rgba(0,255,0,0.5), inset 0 0 10px rgba(0,0,0,0.3);
}

.mini-traffic-light.green {
    box-shadow: 0 0 10px rgba(0,255,0,0.5), inset 0 0 5px rgba(0,0,0,0.3);
}

.traffic-light.inactive, .mini-traffic-light.inactive {
    background-color: #555;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}

.mini-traffic-light.inactive {
    box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
}

.light-text-container {
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    margin: 10px 0;
    width: 100%;
}

.status-monitor-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 2px solid #333;
    border-radius: 10px;
    padding: 20px;
    background-color: #f5f5f5;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    margin: 0 auto;
    width: fit-content;
}

.status-text {
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 4px;
    min-width: 80px;
    text-align: center;
}

.status-online {
    background-color: rgba(0, 255, 0, 0.2);
    color: #006600;
}

.status-offline {
    background-color: rgba(255, 0, 0, 0.2);
    color: #990000;
}

.status-warning {
    background-color: rgba(255, 204, 0, 0.2);
    color: #996600;
}

/* Legend styling */
.status-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin: 15px 0;
    padding: 10px;
    border-top: 1px solid #ddd;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
}

.legend-color {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

.legend-color.red {
    background-color: #ff3333;
}

.legend-color.yellow {
    background-color: #ffcc00;
}

.legend-color.green {
    background-color: #33cc33;
}

.tooltip-container {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.tooltip-content {
    display: none;
    position: absolute;
    left: 100%;
    margin-left: 10px;
    top: 50%;
    transform: translateY(-50%);
    background-color: white;
    color: black;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 10px;
    font-size: 12px;
    line-height: 1.4;
    width: 300px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
    z-index: 100;
    /* Let's add word wrap property */
    word-wrap: break-word;
    white-space: normal;
}

.tooltip-container:hover .tooltip-content {
    display: block;
}

.tab-year .counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    padding: 5px;
    /* Wit op #f00 is 3,99:1 en dat haalt de eis van 4,5:1 net niet. Pure rood kan
       niet donkerder zonder van kleur te veranderen, dit scheelt een tint en komt
       op 5,04:1. De tekst is 0,8em, dus de uitzondering voor grote tekst geldt niet. */
    background-color: #e00000;
    color: #fff;
    text-align: center;
    font-size: 0.8em;
}

.alert-danger {
    background-color: #FFECE6;
    border:2px solid #b44c3b;
    color: #b44c3b;
}

.field-container .select2-container--krajee-bs3 .select2-selection--multiple {
    background-color:#DAEEF3;
    color:#0E5EA3;
    border:1px solid #A9C3CB;
    border-radius:0px;
}

.field-container #request-animal_notes {
    background-color:#DAEEF3;
    color:#0E5EA3;
    border:1px solid #A9C3CB;
    border-radius:0px;
}

.field-container label {
    color:#b44c3b;
    font-weight: 700;
}

.document-container {
    display: flex;
    flex-direction: column;
}

.document-container .document {
    display: flex;
    gap: 16px;
    padding:8px 0px;
    border-bottom: 2px solid #A9C3CB;
    align-items: center;
    justify-content: space-between;
}

.document-container .document a {
    text-decoration: underline;
    font-weight: 700;
}

.document-container .document:last-child {
    border-bottom: none;
    color: black;
}

.document-container .document div {
    display: flex;
    align-items: center;
    gap:16px;
}

/* Een bestandsnaam als Dell_U4919DW_FirmwareUpdate_Instruction_Windows_en_A03.pdf is één
   woord zonder spaties. Een flexkind krimpt standaard niet onder de breedte van zijn
   inhoud, dus die naam duwde het oogje ernaast de kaart uit. Dat zag je op een telefoon,
   op een iPad en op een klein laptopscherm.

   min-width 0 laat het naamblok wel krimpen, en wat er dan niet meer past eindigt met drie
   puntjes. De volledige naam staat al in de title, dus die blijft te lezen door erop te
   staan. De knop ernaast houdt zijn eigen maat. */
.document-container .document > div:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-container .document > div:first-child a,
.document-container .document > div:first-child span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-container .document .preview-button {
    flex: 0 0 auto;
}

/* modal CSS */

.information-check-container {
    display: flex;
    flex-direction: column;
    gap:4px;
    margin-bottom: 20px;
}

.button-container {
    display: flex;
    gap:14px;
}

@media screen and (max-width: 767px) {
    .button-container {
        flex-direction: column;
    }
}

/* Design update 2024 */

/* Animal image checkboxes */
input[type="checkbox"].animal-checkbox {
    position: absolute;
    top: 10px;
    left: 25px;
    width: 24px;
    height: 24px;
    appearance: none;
    border-color: #b44c3b;
    border-style: solid;
    border-width: 1px;
    border-image: linear-gradient(to top right, #b44c3b 50%, #b44c3b 50%) 1;
}

/* Unchecked state */
input[type="checkbox"].animal-checkbox:before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;

    appearance: none;
    border-color: transparent;
    border-style: solid;
   border-width: 1px;
    border-image: linear-gradient(to top right, #b44c3b 50%, #b44c3b 50%) 1;
}
.animal-checkbox ~ .animal-name {
    font-weight: normal;
}
/* Checked state */
input[type="checkbox"].animal-checkbox:checked:before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background-color: #4caf50;
}

.animal-checkbox:checked ~ .animal-name {
    font-size: 1.1em;
    font-weight: bold;
    text-decoration: underline;
    text-decoration-color: transparent;
    box-shadow: inset 0 -1px 0 0 #4caf50;
}

/* Checked state alternative with green checkmark  */
input[type="checkbox"].animal-checkbox2:checked:before {
    content: "";
    border-color: transparent;
    border-style: solid;
    border-width: 3px;
    border-image: linear-gradient(to top right, #4caf50 50%, transparent 50%) 1;
    transform: rotate(-35deg);
    position: absolute;
    top: 3px;
    left: 5px;
    width: 8px;
    height: 15px;
}

.animal-outer {
    position: relative;
}
input[type="checkbox"].animal-checkbox {
    accent-color: #4caf50;
}
/* Animal image checkboxes End */

input[type="checkbox"], input[type="radio"] {
    accent-color: #0E5FA3;
}

.radio-form-step-1 .radio-inline input[type="radio"] {
    margin-top: -14px;
}

.document-overview-table table {
    border:2px solid #D5EBF1;
}

.document-overview-table table thead tr th {
    border-top:2px solid #D5EBF1!important;
}

body.portal .document-overview-table tbody tr {
    border-bottom:2px solid #D5EBF1!important;
}

body.portal .document-overview-table tbody tr td, body.portal .document-overview-table thead tr td  {
    border-top:none;
    border: 2px solid #D5EBF1!important;
}

body.portal .document-overview-table tbody tr th {
    border-bottom: none;
}

body.portal .document-overview-table tbody tr:last-child {
    border-bottom:2px solid #D5EBF1!important;
}

body.portal .document-overview-table table thead tr th, .document-overview-table table thead tr th a {
    color:#b44c3b!important;
}

body.portal .document-overview-table .table > thead > tr > th {
    border:2px solid #D5EBF1!important;
}

th .color-red a {
    color:#b44c3b!important;
}

.grey-overview-block {
    max-width: 586px;
    width: 100%;
}

.select-lot-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #DAEEF3;
    gap:12px;
}

.select-lot-cta a span {
    color: #0E5EA3;
    font-weight: 600;
    text-decoration: underline;
}

.select-lot-cta i , .select-photo-cta i {
    text-decoration: none!important;
    --fa-primary-color: #b44c3b;
    --fa-secondary-color: white;
}


.select-lot-cta a:hover {
    text-decoration: none!important;
}

.select-lot-cta a:hover span {
    color:black;
}

.select-photo-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #DAEEF3;
    gap:12px;
    width: 100%;
}

.select-photo-cta button {
    background-color: transparent;
    color: #0E5EA3;
    border:none!important;
    font-weight: 600;
}

.select-photo-cta button div {
    display: flex;
    flex-direction: column;
    gap:12px;
}

.select-photo-cta button div span {
    text-decoration: underline;
}

.select-photo-cta button:hover {
    color:black;
}

.form-input-blue .form-control {
    height: 50px;
}

.form-input-blue input , .form-input-blue span.select2-selection, .form-input-blue select {
    background-color: #DAEEF3;
    border-radius: 0px;
    border:1px solid #CADBE0;
    color:#0E5EA3;
    font-weight: 600;
    text-align: left;
    height: 50px;
}

.form-input-blue select {
    background: #DAEEF3!important;
}


.form-input-blue .select2-container--krajee-bs3 .select2-selection--single .select2-selection__rendered {
    color:#0E5EA3;
    font-weight: 600;
}

.form-input-blue .select2-selection__arrow {
    border-left:none!important;
}

.form-input-blue label {
    color:#b44c3b;
    font-weight: 700;
}

.form-input-blue .radio-inline {
    color: black;
}

#add-photo-modal .file-preview {
    background-color: white;
    padding:12px;
    border-radius: 25px;
}

#add-photo-modal .file-preview .fileinput-remove {
    right: 12px;
    top: 12px;
}

#add-photo-modal .file-caption {
    margin-top: 24px;
}

#add-photo-modal .fileinput-upload-button {
    margin-right: 8px;
}

.document-page .nav.nav-tabs {
    background-color: #DAEEF3;
    border: 1px solid #A9C3CB;
}

/*------------------------------------------------------------------
Bevestigingsvensters (kartik dialog)
------------------------------------------------------------------*/

/* Zonder deze regels houdt de dialoog zijn eigen gekleurde balk en zijn eigen
   knoppen. Hier volgt hij de kop en de knoppen van de rest van het portaal.
   De kleur per type zit in de stylesheet van de widget zelf en is even sterk,
   daarom staat die hier overschreven. */
.bootstrap-dialog .modal-header,
.bootstrap-dialog .modal-header:hover,
.bootstrap-dialog .bootstrap-dialog-header:hover {
    background-color: transparent !important;
    border: 0;
    box-shadow: none;
    padding: 0 0 5px;
    cursor: default;
}

.bootstrap-dialog .bootstrap-dialog-title {
    color: #005ea5 !important;
    font-size: 22px;
    font-weight: bold;
}

.bootstrap-dialog .modal-body {
    padding: 0 0 10px;
}

.bootstrap-dialog .modal-footer {
    border-top: 0;
    padding: 10px 0 0;
}

.bootstrap-dialog .bootstrap-dialog-footer-buttons {
    display: flex;
}

.bootstrap-dialog .bootstrap-dialog-footer-buttons .btn {
    flex: 1 1 0;
    margin: 0 7px;
}

.bootstrap-dialog .bootstrap-dialog-footer-buttons .btn:first-child {
    margin-left: 0;
}

.bootstrap-dialog .bootstrap-dialog-footer-buttons .btn:last-child {
    margin-right: 0;
}

.bootstrap-dialog .bootstrap-dialog-close-button .btn-modal-close {
    background: none;
    border: 0;
    color: #1d1d1b;
    padding: 0;
    font-size: 18px;
}

/*------------------------------------------------------------------
Machtigingsvenster
------------------------------------------------------------------*/

/* De algemene regel in app.css zet .form-control op text-align: center,
   waardoor je midden in het veld begint te typen. In deze vensters links. */
#invite-agent-modal .form-control,
#change-mail-modal .form-control,
#change-password-modal .form-control {
    text-align: left;
}

/* Ook als een widget het veld zonder .form-control neerzet: in een venster begin je links. */
#change-mail-modal input[type="text"],
#change-mail-modal input[type="email"],
#change-password-modal input[type="text"],
#change-password-modal input[type="password"] {
    text-align: left;
}

/* De 25px die app.css aan elk invoerveld geeft, is bedoeld voor de brede formulieren. In een
   venster van 450 pixels schuift de tekst daardoor zichtbaar naar binnen en voelt het veld
   niet als een veld waar je links in begint te typen. */
#change-mail-modal .form-control,
#change-password-modal .form-control,
#invite-agent-modal .form-control,
#rvo-update-modal .form-control {
    padding-left: 12px;
    padding-right: 12px;
}

#rvo-update-modal .form-control,
#rvo-update-modal input[type="text"],
#rvo-update-modal input[type="password"] {
    text-align: left;
}

/* Twee gelijkwaardige manieren om percelen op te halen, met het scheidingswoord ertussen. */
#rvo-update-modal .rvo-keuze__of {
    text-align: center;
    color: #59626b;
    font-size: 13px;
    margin: 8px 0;
}

/* Info-icoontje achter een label, met de uitleg in een popover. */
.veld-uitleg {
    color: #005ea5;
    cursor: pointer;
    margin-left: 4px;
    font-weight: normal;
}

.veld-uitleg:hover,
.veld-uitleg:focus {
    color: #b44c3b;
    outline: none;
}

/* Het icoontje hoort bij de uitleg, niet bij de validatie, dus het kleurt niet
   mee met het rood of groen dat Bootstrap over de hele form-group zet. */
#invite-agent-modal .has-error .veld-uitleg,
#invite-agent-modal .has-success .veld-uitleg {
    color: #005ea5;
}

#invite-agent-modal .has-error .veld-uitleg:hover,
#invite-agent-modal .has-error .veld-uitleg:focus,
#invite-agent-modal .has-success .veld-uitleg:hover,
#invite-agent-modal .has-success .veld-uitleg:focus {
    color: #b44c3b;
}

#invite-agent-modal .checkbox.agent-cc-same {
    margin-top: 0;
    margin-bottom: 8px;
}

#invite-agent-modal .checkbox.agent-cc-same label {
    font-weight: normal;
}

#invite-agent-modal .cc-keuze {
    margin-bottom: 10px;
}

#invite-agent-modal .cc-keuze .radio {
    margin-top: 4px;
    margin-bottom: 4px;
}

#invite-agent-modal .cc-keuze label {
    font-weight: normal;
}

/* Stond als lijst van zeven vensternamen. Daardoor kreeg elk nieuw venster de blauwe kop
   niet, zoals het detailvenster bij de consolefouten. Nu geldt het voor elk venster in het
   portaal. */
body.portal .modal-title {
    color: #005ea5;
    font-size: 22px;
    font-weight: bold;
    margin: 0;
}

/* De kop staat dicht genoeg op de tekst eronder, de ruimte eromheen komt al van
   de modal zelf. */
body.portal .modal-header {
    padding-bottom: 5px;
}

/* De eerste alinea van de uitleg sluit aan op de kop. */
#change-mail-modal .modal-body > p:first-child,
#change-password-modal .modal-body > p:first-child {
    margin-top: 0;
}

#revoke-agent-modal .modal-body > p:first-child {
    margin-top: 0;
}

#invite-agent-modal .modal-intro {
    margin-bottom: 20px;
}

/* Het CC-blok komt pas in beeld zodra er een e-mailadres staat. */
#invite-agent-modal .cc-blok {
    display: none;
}

/* De keuzerondjes zijn geen invoerveld, dus die mogen niet mee verkleuren met
   de validatiestatus van het CC-veld. */
#invite-agent-modal .cc-keuze label,
#invite-agent-modal .has-error .cc-keuze label,
#invite-agent-modal .has-success .cc-keuze label {
    color: #1d1d1b !important;
    font-weight: normal;
}

#invite-agent-modal .akkoord-blok .checkbox {
    margin-top: 0;
    margin-bottom: 0;
}

#invite-agent-modal .akkoord-blok label {
    font-weight: normal;
    color: #1d1d1b;
}

/* Pas aan te vinken als de verplichte velden kloppen. */
#invite-agent-modal .akkoord-blok.akkoord-uit label {
    color: #8c8c8c;
    cursor: not-allowed;
}

#invite-agent-modal .verplicht {
    color: #b44c3b;
}

/* Waarschuwing dat het CC-adres bij de eigen gegevens wordt vervangen. */
#invite-agent-modal .cc-overschrijven {
    display: none;
    background-color: #fdf2ef;
    border-left: 3px solid #b44c3b;
    padding: 8px 12px;
    margin-top: 8px;
    color: #1d1d1b;
}

#invite-agent-modal .cc-overschrijven .glyphicon {
    color: #b44c3b;
    margin-right: 4px;
}

/* Voorbeeldtekst als grijze tekst in het lege berichtveld, met tab over te nemen. */
#invite-agent-modal .bericht-veld {
    position: relative;
}

#invite-agent-modal .bericht-ghost {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    color: #8c8c8c;
    pointer-events: none;
    white-space: pre-wrap;
    overflow: hidden;
}

/* De tip staat achter de suggestie, in het veld zelf. */
#invite-agent-modal .bericht-ghost .ghost-tab {
    margin-left: 8px;
    padding: 1px 7px;
    background-color: #e7e7e7;
    border: 1px solid #c4c4c4;
    border-radius: 3px;
    color: #6b6b6b;
    font-size: 12px;
    white-space: nowrap;
}

#invite-agent-modal .btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Het vraagteken bij een label zweeft van huis uit naar rechts (.kv-hint-icon in activeform.css
   van kartik). In een smalle labelkolom viel dat niet op, maar zodra die kolom breder is komt het
   icoontje los van de tekst aan de rechterrand te hangen. Hier loopt het gewoon achter het label
   mee, waar het bij hoort. */
.kv-hint-icon {
    float: none;
    margin-left: 6px;
}

/* Bij hintType HINT_SPECIAL zet kartik de hinttekst eerst als gewoon blok in de pagina. Pas
   als alles geladen is leest activeform.js die tekst eruit, maakt het vraagteken met het
   pop-upje, en haalt het blok weg. Tot dat moment staat de volle tekst onder het veld en zie
   je hem wegspringen. Hier is hij vanaf de eerste weergave verborgen. De tekst blijft in de
   pagina staan, alleen onzichtbaar, dus kartik leest hem nog gewoon in het pop-upje. */
.kv-hint-special .kv-hint-block {
    display: none;
}

/* Staat het label boven het veld, dan hoeft een invoerveld niet de volle breedte te gebruiken:
   een bedrag of een datum van 1000 pixels breed leest slechter dan een veld op maat. */
#autotax_form .form-control,
#autotax_form .filedrop {
    max-width: 620px;
}

/* Op de beheerpagina van het bedrijf stond hier ook een grens van 620px, met als reden dat een
   postcode of telefoonnummer geen veld van de volle breedte nodig heeft. Die is eraf: de velden
   bleven daardoor op elke schermbreedte op 620px staan, zodat er vanaf 1280px ruim 300px naast
   het veld leeg bleef terwijl label en veld samen wel de volle rij innemen. Op autotax blijft de
   grens staan, want daar staat het label boven het veld en is de rij dus veel breder. */
#autotax_form .select2-container,
#autotax_form .input-group {
    max-width: 620px;
}

/* Een veld met een knop ernaast is een input-group: daar geldt de maat voor de groep als geheel.
   Zou het invoerveld zelf begrensd worden, dan kromp het veld en bleef de knop los aan de
   rechterkant van de rij hangen. */
#autotax_form .input-group .form-control {
    max-width: none;
}

/* Het sterretje van een verplicht veld komt uit een ::after op het label en staat dus altijd
   achteraan, dus achter het vraagteken. Met een flexlabel bepalen we de volgorde zelf: eerst de
   tekst, dan het sterretje, dan het icoontje. */
.form-group.required .control-label {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 2px;
}

.form-group.required .control-label:after {
    order: 1;
}

.form-group.required .control-label .kv-hint-icon {
    order: 2;
    margin-left: 4px;
}

/* Pijl in een knop die zijn breedte om de tekst heen vormt, zoals de knoppen in een tabel.
   De gewone .right-arrow zweeft naar rechts en valt dan buiten zo'n knop. */
.pijl-rechts {
    margin-left: 6px;
}

/*------------------------------------------------------------------
Bezwaar en zienswijze: één blok per onderwerp
------------------------------------------------------------------*/

/* Het gaat vrijwel altijd om één onderwerp. Een tabel met drie kolommen leest dan als een
   beheerlijst, terwijl het hier om een keuze van de deelnemer gaat. */
.reactie-blok {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 20px;
    padding: 14px 16px;
    margin-bottom: 10px;
    background-color: #f5fafc;
    border: 1px solid #daeef3;
    border-radius: 6px;
}

.reactie-blok__naam {
    font-weight: bold;
    color: #1d1d1b;
    flex: 1 1 260px;
}

.reactie-blok__status {
    color: #59626b;
    flex: 1 1 200px;
}

.reactie-blok__acties {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

@media (max-width: 767px) {
    .reactie-blok__acties {
        margin-left: 0;
    }
}

/* Een rij knoppen naast elkaar met vaste tussenruimte, in plaats van een marge per knop. */
.knoprij {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

@media (max-width: 767px) {
    .knoprij {
        flex-direction: column;
    }
}

/*------------------------------------------------------------------
Documentpagina met voorvertoning in de pagina zelf
------------------------------------------------------------------*/

/* Het document onder de gegevens en de knoppen, binnen dezelfde witte blok. */
.doc-preview {
    padding: 0 25px;
    margin-top: 20px;
}

.doc-preview__top {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

/* Is de knop door de werkbalk van de viewer overgenomen, dan blijft er een lege rij over. */
.doc-preview__top:empty {
    display: none;
}

/* De hoogte komt van het scherm, zodat het document meeschaalt met de monitor. */
.doc-preview__frame {
    position: relative;
    height: 78vh;
    min-height: 420px;
    border: 1px solid #dde1e4;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

.doc-preview__loading {
    color: #59626b;
    padding: 40px 20px;
    text-align: center;
}

.doc-preview__none {
    text-align: center;
    color: #59626b;
    padding: 50px 20px;
}

.doc-preview__none i {
    font-size: 42px;
    margin-bottom: 12px;
    display: block;
    color: #8694a3;
}

/*------------------------------------------------------------------
Kaartvenster bij het kiezen van schadepercelen

Dit venster is ouder dan het kaartvenster in de pagina (zie geo-modal.css) en had
nog zijn eigen kop: een kop van 24px in een balk van zestig pixels hoog. Twee
kaartvensters in hetzelfde portaal die er anders uitzien is verwarrend, dus deze
krijgt dezelfde maat, dezelfde kleuren en hetzelfde kruisje.

De knop Sluiten onderin blijft wel staan. Dit venster heeft backdrop static en
keyboard false, dus Escape en een tik naast het venster werken hier niet, en dan
wil je meer dan alleen een kruisje van 32 pixels.
------------------------------------------------------------------*/

#map-modal .modal-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px 4px 14px;
}

#map-modal .modal-header h2 {
    flex: 1 1 auto;
    overflow: hidden;
    color: #b44c3b;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Yii zet het kruisje vóór de titel in de html, dus zonder dit staat het links. */
#map-modal .modal-header .close {
    order: 2;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border-radius: 6px;
    color: #1d1d1b;
    font-size: 24px;
    line-height: 1;
    opacity: 1;
    text-shadow: none;
}

#map-modal .modal-header .close:hover,
#map-modal .modal-header .close:focus {
    background: #fff;
    color: #1d1d1b;
    opacity: 1;
}

/* Volledig scherm: het kader wordt een laag over de hele pagina. */
.doc-fs-ic--close {
    display: none;
}

body.doc-fullscreen .doc-fs-ic--open {
    display: none;
}

body.doc-fullscreen .doc-fs-ic--close {
    display: inline-block;
}

/* Op een smal scherm staat de werkbalk van de viewer onder het document, en daar zit op
   dit scherm de enige weg terug uit het volledige scherm. Met 100vh is dat vak op iOS in
   portret hoger dan wat je ziet, want vh rekent met een ingeklapte adresbalk. De balk viel
   daardoor onder de rand van het scherm, en body overflow hidden maakt scrollen onmogelijk,
   dus je zat vast. In landschap is de browserbalk minimaal en viel het niet op.
   dvh is de hoogte die echt zichtbaar is. vh blijft staan voor browsers zonder dvh.
   De veilige zone onderin is voor de iPhone-streep, die anders over de knoppen valt. */
body.doc-fullscreen .doc-preview__frame {
    position: fixed;
    inset: 0;
    z-index: 100000;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    border: 0;
    border-radius: 0;
    background: #fff;
    padding: 8px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}

body.doc-fullscreen {
    overflow: hidden;
}

/* En een slot op de deur. Op een smal scherm staat de werkbalk normaal onderaan, waar hij
   met de duim te bedienen is. In het volledige scherm gaat hij naar boven: de bovenrand van
   een vastgezet vak is altijd in beeld, ook in een browser die dvh niet kent. De knop die
   je terugbrengt kan zo niet buiten beeld vallen. */
body.doc-fullscreen .doc-preview__frame .pdfv--narrow {
    flex-direction: column;
}

body.doc-fullscreen .doc-preview__frame .pdfv--narrow .pdfv-bar {
    border-top: 0;
    border-bottom: 1px solid #dde1e4;
}

@media (max-width: 767px) {
    .doc-preview {
        padding: 0;
    }

    .doc-preview__frame {
        height: 70vh;
    }
}

/*------------------------------------------------------------------
Sterktemeter bij een nieuw wachtwoord
------------------------------------------------------------------*/

/* Komt pas in beeld zodra er iets staat, zodat een leeg veld geen rode balk met 0% toont. */
.pw-meter {
    display: none;
    margin-top: 8px;
    max-width: 320px;
}

.pw-meter.is-zichtbaar {
    display: block;
}

.pw-meter__balk {
    height: 5px;
    border-radius: 3px;
    background-color: #e7e7e7;
    overflow: hidden;
}

.pw-meter__vulling {
    display: block;
    width: 0;
    height: 100%;
    background-color: #b44c3b;
    transition: width .15s ease-out, background-color .15s ease-out;
}

.pw-meter__tekst {
    margin-top: 4px;
    font-size: 13px;
    color: #59626b;
}

.pw-meter__oordeel {
    font-weight: bold;
    margin-right: 6px;
}

.pw-meter[data-niveau="0"] .pw-meter__vulling {
    background-color: #b44c3b;
}

.pw-meter[data-niveau="0"] .pw-meter__oordeel {
    color: #b44c3b;
}

.pw-meter[data-niveau="1"] .pw-meter__vulling {
    background-color: #d08b2c;
}

.pw-meter[data-niveau="1"] .pw-meter__oordeel {
    color: #b8761f;
}

.pw-meter[data-niveau="2"] .pw-meter__vulling,
.pw-meter[data-niveau="3"] .pw-meter__vulling {
    background-color: #4e7d33;
}

.pw-meter[data-niveau="2"] .pw-meter__oordeel,
.pw-meter[data-niveau="3"] .pw-meter__oordeel {
    color: #4e7d33;
}

/*------------------------------------------------------------------
Menupagina in een kader

De helpomgeving kan in Beheer op een eigen adres staan en dan in een kader binnen de
pagina getoond worden. De hoogte komt van het scherm, zodat er geen kader van 150px
overblijft, de standaardhoogte van een iframe.
------------------------------------------------------------------*/

.menu-frame {
    border: 1px solid #dde1e4;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

/* 72vh alleen was te veel: boven en onder het kader staan de koptekstbalk, de titelregel,
   de knop en de voettekst, samen ruim 330px. De onderrand van het kader viel daardoor op
   elk scherm onder de vouw, en het muiswiel schoof dan de binnenpagina in plaats van de
   onze. De tweede maat is wat er van het scherm overblijft. */
.menu-frame__venster {
    display: block;
    width: 100%;
    height: min(72vh, calc(100vh - 340px));
    min-height: 360px;
    border: 0;
}

@media only screen and (max-width: 767px) {
    /* svh en niet dvh: dvh krimpt en groeit mee met de adresbalk van de telefoon, waardoor
       het kader tijdens het schuiven verspringt. */
    .menu-frame__venster {
        height: 70vh;
        height: min(70svh, calc(100svh - 260px));
        min-height: 320px;
    }

    /* De kaart houdt op een telefoon 25px padding aan beide kanten, waardoor er voor het
       kader nog zo'n 240px overbleef en elke site erin horizontaal ging schuiven. Hier mag
       het kader tot de rand van de kaart. */
    .menu-frame {
        margin-left: -25px;
        margin-right: -25px;
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }
}

/* De knop die de pagina in een nieuw venster opent. Staat boven het kader, en in plaats
   van het kader als de andere site ons geen kader gunt. Minstens 44px hoog, zodat hij op
   een telefoon met een vinger te raken is. */
.menu-frame__knop {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.menu-frame__melding {
    max-width: 640px;
    padding: 20px 0 10px;
}