/*------------------------------------------------------------------
[Master Stylesheet]

Project:        Fret
Version:        0.2
Last change:    2019-07-09
Customer:       BIJ12
Assigned to:    Pieter de Vries / NIO Communicatie
--------------------------------------------------------------------
--------------------------------------------------------------------
[Color codes]

Black:      #1d1d1b
Red:        #b44c3b             knoppen, haalt 4,5:1 met witte tekst
Red:hover   #954533             tweede stand uit het schermontwerp van BIJ12
Blue:       #005ea5
Blue:hover  #014275             ** KRISTY CHECK **
Dark Gray:  #999999
Light Gray: #f2f2f2
White:      #ffffff
BG.Blue:    #d4ebf1
--------------------------------------------------------------------
--------------------------------------------------------------------
[Table of contents]

1. Body
2. Signin
3. Form
4. BLock Box
5. Yii2
-------------------------------------------------------------------*/
@import "portal.css";
@import "mobile.css";
@import "print.css";


/*------------------------------------------------------------------
1. Body
------------------------------------------------------------------*/
/* Dit moet height blijven en geen min-height worden. De kaartpagina's draaien op de
   popup-layout en bestaan uit één blok, #wgp_container met height: 100% (zie
   views/geo/*.php). Een percentagehoogte heeft een ouder met een vaste hoogte nodig,
   dus zonder deze regel klapt die kaart dicht tot een strook van negentig pixels.
   Geprobeerd op 26-10-2026, teruggedraaid toen de perceelkaart stukging. Wie dit
   alsnog wil opruimen moet die zes views eerst op dvh zetten. */
html,
body {
    margin:0;
    padding:0;
    height:100%;
}

.clearfix::after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

body {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 14px;
    line-height: 22px;
}

a, a:hover, a:visited, a:active {
    color: #1d1d1b;
}

h1 {
    color: #1d1d1b;
    font-size: 23px;
    font-weight: 700;
}

h2 {
    color: #1d1d1b;
    font-size: 28px;
    font-weight: 700;
}

h2.small {
    font-size: 24px;
}

h3 {
    color: #1d1d1b;
    font-size: 16px;
    font-weight: 700;
}

h4 {
    font-size: 16px;
    margin-bottom: 18px;
}

.cursor-pointer {
    cursor: pointer;
}

.color-white,.color-white a {
    color: #ffffff;
}

.color-blue, .color-blue a{
    color: #005ea5!important;
}

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

.background-white {
    background-color: #ffffff;
}

.background-blue {
    background-color: #005ea5;
}

.background-red {
    background-color: #b44c3b;
}

.background-green {
    background-color: #336832;
}

.background-orange {
    background-color: #FF9D00;
}

/* Witte tekst op deze amber haalt 2,08:1 en dat is de slechtste verhouding in het
   hele portaal. Donkerder maken tot wit er wel op kan betekent een heel andere,
   bruine kleur: elke kleur met R=255 haalt met wit hoogstens 3,99:1. Donkere tekst
   op dezelfde amber haalt 8,10:1, dus de kleur van BIJ12 blijft zoals hij is en
   alleen de tekst erop draait om.

   De andere statuskleuren (blauw 6,68:1, rood 5,20:1, groen 6,63:1) houden hun
   witte tekst.

   Let op de zwaarte van de selector. Op Aanvragen en Documenten draagt het label
   zelf color-white, maar op de startpagina staat het in een <td class="color-white">
   en dan grijpt .color-white a aan met zwaarte 0,1,1. Een enkele klasse haalt het
   daar niet van, hoe laat in het bestand hij ook staat. Daarom staan de vorm met
   het element en de vorm met de ouder er allebei bij. Amber staat op drie plekken
   en is daar altijd de default-tak van de statuskeuze, nergens als omhullend vlak. */
.background-orange,
a.background-orange,
.color-white a.background-orange {
    color: #1d1d1b;
}

/* Een link in lopende tekst mag niet alleen aan zijn kleur te herkennen zijn.
   Die teksten komen uit de tekstmodule en uit de provincievelden, dus uit de
   database, en daar valt geen opmaak in af te dwingen. Knoppen houden hun eigen
   vorm, en links in een tabelcel vallen hier niet onder. */
.text-block a:not(.btn),
.block-box p a:not(.btn),
.block-box li a:not(.btn) {
    text-decoration: underline;
}

/* Bootstrap zet hier #777777. Dat is 4,48:1 op wit en dus net te licht, en in een
   blauw infovlak (#d9edf7) zakt het naar 3,71:1. Deze tint haalt 6,01:1 op wit en
   4,98:1 op dat infovlak, en blijft duidelijk gedempt ten opzichte van #1d1d1b. */
.text-muted {
    color: #636363;
}

/* Velden die de KVK-opzoeking vult zijn alleen-lezen en dus niet zelf in te vullen.
   Het sterretje suggereerde dat je er iets moest doen, terwijl de enige handeling het
   KVK-nummer invullen is. Een schermlezer maakte er "verplicht, alleen-lezen, leeg" van.
   Server-side blijven ze gewoon verplicht, zie registration/_form.php en
   company/_manage_tab_company.php, waar ook aria-required op false staat. */
/* Kartik zet het sterretje met
   .required .has-star:not(.custom-control-label):not(.custom-file-label)::after
   (activeform.css:237), een selector die vier klassen zwaar weegt. Die overtreffen
   betekent hem hier nabouwen, en dan breekt dit stil zodra kartik zijn selector wijzigt.
   Daarom !important op een eenvoudige selector: minder fraai, maar het blijft werken. */
.niet-zelf-invullen .has-star::after {
    content: none !important;
}

/* Het blok met de kaart op de startpagina heeft dezelfde ronding van 25px als de
   blokken erboven en eronder, maar je ziet hem niet: de bovenrand van de kaart scheelt
   maar 24 van 255 met de paginakleur, waar een wit blok 42 scheelt. De vorm heeft dus
   geen lijn om zich aan te tonen. Een dunne rand en een zachte schaduw geven hem die,
   zonder iets aan de kaart zelf te veranderen. */
.perceel-kaartblok {
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.background-grey {
    background-color: #EBEBEB;
}

.background-linear {
    background: rgb(255,255,255);
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 75%, rgba(2,94,165,1) 75%, rgba(2,94,165,1) 100%);
}

.margin-5 {
    margin: 5px;
}

.margin-10 {
    margin: 10px;
}

.margin-15 {
    margin: 15px;
}

.margin-20 {
    margin: 20px;
}

.margin-25 {
    margin: 25px;
}

.margin-top-10 {
    margin-top: 5px;
}

.margin-top-5 {
    margin-top: 10px;
}

.margin-top-15 {
    margin-top: 15px;
}

.margin-bottom-5 {
    margin-bottom: 3px!important;
}

.margin-right-15 {
    margin-right: 15px;
}

.margin-bottom-15 {
    margin-bottom: 15px;
}

.margin-right-70 {
    margin-right: 70px;
}

.margin-right-200 {
    margin-right: 200px;
}

.no-margin-left {
    margin-left: 0px;
}

.no-padding-left {
    padding-left: 0px;
}

.no-padding-right {
    padding-right: 0px;
}

.no-margin {
    margin: 0px;
}

.no-margin-top {
    margin-top: 0px;
}

.no-margin-bottom {
    margin-bottom: 0px;
}

.margin-left-25 {
    margin-left: 25px;
}

.margin-right-25 {
    margin-right: 25px;
}


.padding-10 {
    padding: 10px;
}

.padding-15 {
    padding: 15px;
}

.padding-20 {
    padding: 20px;
}

.padding-25 {
    padding: 25px;
}

.padding-30 {
    padding: 30px;
}

.padding-35 {
    padding: 35px;
}

.padding-left-75 {
    padding-left: 75px;
}

.padding-left-90 {
    padding-left: 90px;
}

.border-radius-small {
    border-radius: 12px;
}

.border-radius {
    border-radius: 25px;
}

.border-radius-top {
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}

.border-radius-bottom {
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
}

.spacer-5 {
    height: 5px;
}

.spacer-10 {
    height: 10px;
}

.spacer-15 {
    height: 15px;
}

.spacer-20 {
    height: 20px;
}

.spacer-25 {
    height: 25px;
}

.spacer-30 {
    height: 30px;
}

.spacer-35 {
    height: 35px;
}

.spacer-40 {
    height: 40px;
}

.spacer-50 {
    height: 50px;
}

.spacer-75 {
    height: 75px;
}

.text-left {
    text-align: left;
}
.text-right {
    text-align: right;
}
.text-center {
    text-align: center;
}

.font-normal {
    font-weight: normal;
}

.font-light {
    font-weight: 300;
}

.font-weight-400 {
    font-weight: 400!important;
}

.text-bold {
    font-weight: 700;
}

a.link-underline {
    text-decoration: underline;
}

a.link-underline:hover {
    text-decoration: none;
}

.font-size-12,
.btn.font-size-12 {
    font-size: 12px;
}

.font-size-14,
.btn.font-size-14 {
    font-size: 14px;
}

.font-size-16,
.btn.font-size-16 {
    font-size: 16px;
}

.font-size-20 {
    font-size: 20px;
}
.text-truncate {
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}




@media (min-width: 992px) {
    .container {
        /* Dit stond op een vaste width: 1350px. Daardoor was de container breder dan het
           scherm van een 13 tot 15,6 inch laptop op 125 of 150 procent schaling en van een
           tablet in liggende stand. De pagina kreeg dan een horizontale schuifbalk, de inhoud
           werd links en rechts afgesneden en het hoofdmenu viel aan de rechterkant buiten
           beeld, met Uitloggen als eerste. Als maximum blijft de brede weergave precies
           gelijk en past de smalle weergave zich aan het scherm aan. */
        width: auto;
        max-width: 1350px;
    }
    label.col-md-12.col-md-2 {
        width: 100% !important;
    }
}

/*------------------------------------------------------------------
1a. Frame
------------------------------------------------------------------*/
.frame {
    min-height:100%;
    position:relative;
}

.frame .signin-frame {
    padding-bottom:80px;	/* Height of the footer */
}
.frame .portal-frame {
    padding-bottom:85px;	/* Height of the footer */
}

.frame footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:85px;			/* Height of the footer */
}

/*------------------------------------------------------------------
2. Signin
------------------------------------------------------------------*/
body.signin {
    background: url('../images/background.jpg') no-repeat center center fixed;
    background-color: rgba(0, 0, 0, 0);
    background-size: auto;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

/* Hier stond padding-top: 100px plus een margin-top van 40 tot 51px op de titel.
   Samen reserveerde de kop 187px voor een logo en vier woorden, een kwart van een
   scherm van 720px hoog. */
.header-signin {
    position: relative;
    padding-top: 16px;
    padding-bottom: 16px;
    margin-bottom: 24px;
}

/* Donkere verloopscrim achter de kop. De achtergrondfoto is een beheerinstelling,
   dus een leesbaarheid die afhangt van welke foto er toevallig staat is geen
   oplossing. Hiermee haalt de witte titel ook boven een lichte lucht genoeg
   contrast. */
.header-signin:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* De uitloop valt buiten de kop in plaats van erbinnen. Zat hij erbinnen, dan
       moest hij van 30 procent naar nul in de laatste 13px, en zo'n korte overgang
       zie je als een rand: het verloop las dan als een grijze veeg over de foto.
       Nu loopt hij over ongeveer 110px uit en gaat hij op in de achtergrond.
       z-index houdt hem achter de kaarten.

       Het verloop blijft wel sterk op de hoogte van de titel. Een verloop dat daar
       al is uitgedoofd laat wit boven een lichte lucht op 2,7:1 achter, en dat is
       precies wat hier eerder misging. */
    bottom: -110px;
    z-index: -1;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, .62) 0%,
        rgba(0, 0, 0, .56) 32%,
        rgba(0, 0, 0, .26) 62%,
        rgba(0, 0, 0, 0) 100%);
}

.header-signin .container {
    position: relative;
}

/* Logo en titel naast elkaar met een vaste tussenruimte. Stonden hiervoor in twee
   rasterkolommen, waardoor het gat meegroeide met het scherm: 50px op een telefoon,
   76px op 1536 breed. */
.header-signin .header-brand {
    display: flex;
    align-items: center;
}

.header-signin .header-brand img {
    display: block;
    width: 80px;
    height: 80px;
}

.header-signin .header-title {
    margin: 0 0 0 16px;
    letter-spacing: 0.5px;
    color: #ffffff;
    /* Tweede vangnet naast de scrim: de achtergrondfoto is een beheerinstelling,
       dus er kan altijd een lichte lucht achter de titel terechtkomen. */
    text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
}

@media (max-width: 767px) {
    .header-signin {
        padding-top: 12px;
        padding-bottom: 12px;
        margin-bottom: 16px;
    }

    .header-signin .header-brand img {
        width: 60px;
        height: 60px;
    }

    .header-signin .header-title {
        margin-left: 12px;
        font-size: 16px;
    }
}


.signin-errors {
    /*margin: 20px 0;*/
    height: 33px;
}

    .signin-errors .error-message {
        /*border: 2px solid #ed3d3b;*/
        background-color: #ffffff;
        color: #ed3d3b;
        font-weight: 400;
        padding: 0px;
    }

    .signin-errors .error-message img {
        float: left;
        margin-left: 0px;
        margin-right: 11px;
        margin-top: -1px;
    }


.signin-frame {

}

    .signin-frame .close-registration {
        float: right;
        margin-top: -15px;
        margin-right: -35px;
    }

.signin-footer {
    padding: 35px 0px 50px 0px;
}

    .signin-footer .footer-links {
        margin-left: 40px;
        color: #ffffff;
        font-weight: 300;
        text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
    }

    .signin-footer .footer-links a {
        color: #ffffff;
        font-weight: 300;
    }

/* Dezelfde scrim onder de voettekst. Die is wit en stond op de foto van het
   grindpad, waar hij niet te lezen was. */
.signin-footer:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* Zelfde opzet als bij de kop, maar van onder naar boven. */
    top: -110px;
    z-index: -1;
    background: linear-gradient(0deg,
        rgba(0, 0, 0, .62) 0%,
        rgba(0, 0, 0, .56) 32%,
        rgba(0, 0, 0, .26) 62%,
        rgba(0, 0, 0, 0) 100%);
}

.signin-footer .container {
    position: relative;
}

/*------------------------------------------------------------------
2a. Toegankelijkheid: zichtbare focus en overslaan naar de inhoud
------------------------------------------------------------------*/

/* Zonder zichtbare focus kun je met een toetsenbord niet zien waar je bent.
   Bijna zwart met een offset werkt op een witte kaart, op de oranje knop en op
   de achtergrondfoto, in tegenstelling tot een kleur uit het palet die op een
   van die drie wegvalt. */
a:focus,
button:focus,
[role="button"]:focus,
input[type="checkbox"]:focus,
input[type="radio"]:focus,
input[type="file"]:focus,
summary:focus {
    outline: 2px solid #1d1d1b;
    outline-offset: 2px;
}

/* Op een donkere of drukke achtergrond heeft de rand zelf te weinig houvast,
   daarom een witte halo eromheen. */
.header-signin a:focus,
.signin-footer a:focus,
.skip-link:focus {
    outline-color: #ffffff;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, .55);
}

.skip-link:focus {
    position: absolute;
    z-index: 100;
    top: 8px;
    left: 8px;
    width: auto;
    height: auto;
    padding: 10px 16px;
    clip: auto;
    background: #1d1d1b;
    color: #ffffff;
    text-decoration: none;
}

/*------------------------------------------------------------------
2b. Signin: scheidingslijn en kolommen van gelijke hoogte
------------------------------------------------------------------*/

/* Vervangt de spacer-50 plus spacer-15, samen 65px leegte die las als het einde
   van de pagina. */
.signin-divider {
    border: 0;
    border-top: 1px solid #e2e2e2;
    margin: 24px 0;
}

.signin-register .text-center {
    margin-top: 12px;
}

@media (min-width: 992px) {
    /* De inlogkaart loopt door tot de onderkant van de rechterkolom, zodat beide
       kolommen op dezelfde lijn eindigen. De ruimte die daardoor vrijkomt staat
       niet als blok bovenin maar verdeelt zich met auto-marges rond de
       scheidingslijn, waardoor het registratieblok onderaan uitlijnt met de
       kaart Heeft u vragen. */
    .signin-row {
        display: flex;
        flex-wrap: wrap;
    }

    /* Bootstrap zet een clearfix op .row. In een flexcontainer worden die twee
       pseudo-elementen zelf flexitems en duwen ze de kolommen opzij. */
    .signin-row:before,
    .signin-row:after {
        display: none;
    }

    .signin-row .signin-col {
        display: flex;
        flex-direction: column;
    }

    /* De laatste kaart in een kolom had nog een afsluitende marge onder zich,
       terwijl er niets meer kwam. Daardoor eindigden de kolommen niet op
       dezelfde lijn. */
    .signin-row .signin-col > .block-box:last-child {
        margin-bottom: 0;
    }

    .signin-card {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }

    .signin-card .signin-divider {
        margin-top: auto;
        margin-bottom: auto;
    }
}


/*------------------------------------------------------------------
3. Forms
------------------------------------------------------------------*/
.form-control {
    display: block;
    width: 100%;
    height: 35px;
    padding: 11px 25px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #1d1d1b;
    text-align: center;
    background-color: #f2f2f2;
    background-image: none;
    border: 0;
    border-radius: 0px;
    -webkit-box-shadow: unset;
    box-shadow: unset;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}

.form-control[disabled], fieldset[disabled],
.form-control[readonly], fieldset[readonly]{
    cursor: not-allowed!important;
}

select.form-control{
    background: url('../images/arrow_down.png') 96% / 3% no-repeat #eee;
}

.alert-border {
    border: 1px solid #ed3d3b;
}

.form-horizontal .control-label {
    padding-top: 10px;
}

.form-input-white .form-control {
    background-color: #ffffff;
}

.form-input-white select.form-control {
    background-color: #ffffff;
    border: 1px solid #d4ebf1;
    height: 40px;
    padding: 9px 25px 10px 25px;
    text-align: left;
}

.form-horizontal .form-control {
    text-align: left;
    /*height: 40px;*/
    padding: 14px 25px;
}

.form-horizontal .form-control[type=number] {
    padding: 11px 25px;
}

.form-horizontal input[type="file"].form-control{
    padding: 0px;
}

.form-horizontal select.form-control{
    padding: 9px 25px;
}

.form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #999999;
    opacity: 1; /* Firefox */
}

.form-horizontal .control-label {
    text-align: left;
}

.form-group.required .control-label:after {
    content: ' *';
}

.well .form-control {
    background-color:white;
}

.multiple-input-list .form-control,
.multiple-input-list select.form-control {
    padding: 0 5px;
}

option:disabled {
    color: #e3e3e3!important;
}

.error-summary {
    color: #ed3d3b;
    font-weight: 400;
    margin-bottom: 25px;
    /*padding: 0px;*/
}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
select:focus,
.form-control:focus,
.uneditable-input:focus {
    border: 1px solid #999999;
    box-shadow: none;
    /* Hier stond outline: 0 none, bedoeld om de blauwe gloed van de browser weg te
       halen. Daarmee verdween ook het enige teken waaraan je met een toetsenbord
       ziet waar je bent. De eigen rand hieronder vervangt die gloed. */
    outline: 2px solid #1d1d1b;
    outline-offset: 2px;
}

.btn-block + .btn-block {
    margin-top: 3px;
}

.btn {
    cursor: pointer;
    border: 1px solid transparent;
    font-size: 14px;
    border-radius: 0px;
    padding-top: 6px;
    padding-bottom: 6px;
    font-weight: bold;
}

.btn-big {
    font-size: 16px;
    font-weight: normal;
}

.btn-min-width {
    min-width: 200px;
}
.right-arrow {
    float: right;
}
/* De oranje knop stond op #E2511A met witte tekst, en dat is 3,87:1 waar de norm 4,5:1 vraagt. De
   uitzondering van 3:1 voor grote tekst geldt hier niet: .btn is 14px vet en .btn-big 16px normaal,
   en grote tekst begint pas bij 18,66px vet of 24px normaal.

   #E2511A kwam uit onze eigen logo.svg en staat in geen enkel aangeleverd bestand van BIJ12. Geen van
   de officiele oranjes haalt het overigens met witte tekst erop, dus een donkerder tint was sowieso
   nodig. #b44c3b is de interfacekleur die BIJ12 zelf op bij12.nl gebruikt, daar gezet als
   --strl-color-secondary naast een --strl-color-blue-wcag-light. 5,20:1.

   Zie docs/manual/huisstijl/kleuren-en-contrast.md voor de meting en de bronnen. */
.btn-primary {
    color: #fff!important;
    background-color: #b44c3b!important;
    border:1px solid white;
}
.btn-primary .right-arrow {
    float: right;
    display: inline-block;
}
/* #954533 is de tweede stand van de oranje knop in het schermontwerp van BIJ12 zelf
   (docs/manual/huisstijl/BIJ12_MFZ_Schermen.pdf, pagina 9, de componentenbibliotheek). 6,61:1.
   Het oude #B2482E kan hier niet meer dienen, dat ligt te dicht bij de nieuwe gewone stand. */
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    color: #fff!important;
    background-color: #954533!important;
    border-color: #954533!important;
}

/* Als tekst op wit is #b44c3b net zo goed, want de verhouding is symmetrisch: ook 5,20:1. Daarmee
   dekt een kleur zowel het vlak als de omlijnde variant. */
.btn-primary-outline {
    color: #b44c3b!important;
    background-color: #ffffff!important;
    border-color: #b44c3b!important;

}

.btn-primary-outline:hover, .btn-primary-outline:focus, .btn-primary-outline:active {
    color: #954533!important;
    background-color: #ffffff!important;
    border-color: #954533!important;
}

.btn-secondary {
    color: #ffffff!important;
    background-color: #005ea5!important;
    border-color: white!important;
}
.btn-secondary .right-arrow {
    float: right;
    display: inline-block;
}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
    color: #ffffff!important;
    background-color: #0E5FA3!important;
    border-color: #0E5FA3!important;
}

.btn-secondary-outline {
    color: #0E5FA3!important;
    background-color: #ffffff!important;
    border-color: #0E5FA3!important;

}

.btn-secondary-outline:hover, .btn-secondary-outline:focus, .btn-secondary-outline:active {
    color: #014275!important;
    background-color: #ffffff!important;
    border-color: #014275!important;
}

@-webkit-keyframes load {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes load {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.btn-loading::before {
    width: 15px;
    height: 15px;
    margin: -2px 7px 0 0;
    display: inline-block;
    vertical-align: middle;
    border-top: 2px solid rgba(0,0,0, 0.2);
    border-right: 2px solid rgba(0,0,0, 0.2);
    border-bottom: 2px solid rgba(0,0,0, 0.2);
    border-left: 2px solid #000000;
    content: "";
    border-radius: 100%;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load 0.5s infinite linear;
    animation: load 0.5s infinite linear;
}


.btn-secondary-outline.btn-loading:before {
    border-top-color: rgba(0, 94, 165, 0.2);
    border-right-color: rgba(0, 94, 165, 0.2);
    border-bottom-color: rgba(0, 94, 165, 0.2);
    border-left-color: rgba(0, 94, 165);
}


/*------------------------------------------------------------------
4. Block box
------------------------------------------------------------------*/
.block-box {
    /*padding: 25px 50px 35px 50px;*/
    padding: 25px 50px;
    margin-bottom: 30px;
}



.block-box .block-title {
    color: #1d1d1b;
    font-size: 23px;
    font-weight: 700;
    margin: 0px 0px 25px 0px;
}

.block-box.opacity-90 {
    background-color: rgba(255,255,255,0.90);
}

.block-box h3 {
    margin: 0px 0px 15px 0px;
}

.block-box p:last-child,
.block-box div.help-block:last-child {
    margin: 0px;
}

.block-box .block-button-img img {margin-bottom: 15px;}

/*------------------------------------------------------------------
Registratiewizard

De wizard loopt over een reeks tekstpagina's en eindigt in het formulier. Er was
geen enkele aanduiding van waar je bent of hoeveel er nog komt, en de knoppenrij
stond achter een vaste spacer na een tekst van wisselende lengte, waardoor hij
per stap tot 288px verspringt en op een telefoon bij stap 2 onder de vouw valt.

De balk gebruikt de kleuren uit de legenda bovenaan: blauw voor gedaan, rood voor
waar je staat, lichtgrijs met een rand voor wat nog komt.
------------------------------------------------------------------*/

.wizard-voortgang {
    margin: 0 0 18px 0;
}

.wizard-voortgang-balk {
    display: flex;
    gap: 6px;
    list-style: none;
    margin: 0 0 8px 0;
    padding: 0;
}

.wizard-voortgang-balk li {
    flex: 1 1 0;
    height: 8px;
    border: 1px solid #999999;
    border-radius: 4px;
    background-color: #f2f2f2;
}

.wizard-voortgang-balk li.gedaan {
    border-color: #005ea5;
    background-color: #005ea5;
}

.wizard-voortgang-balk li.nu {
    border-color: #b44c3b;
    background-color: #b44c3b;
}

.wizard-voortgang-tekst {
    margin: 0;
    color: #1d1d1b;
    font-size: 14px;
    font-weight: 600;
}

/* De kaart is een kolom, de inhoud groeit en duwt de knoppenrij naar onderen. */
.wizard-kaart {
    display: flex;
    flex-direction: column;
}

.wizard-inhoud {
    flex: 1 1 auto;
}

.wizard-knoppen,
.wizard-keuze {
    padding-top: 40px;
}

/* Vanaf tabletbreedte is er hoogte over, dus daar vult de kaart de ruimte die het
   venster biedt en staat de knoppenrij op elke stap op dezelfde plek. Die hoogte
   hangt aan het venster en niet aan een vast getal, want de teksten zijn in beheer
   te wijzigen en dan klopt een getal uit een meting van vandaag morgen niet meer.
   De 280px is de ruimte boven en onder de kaart: kop, voettekst en marges.
   Op een telefoon zou een minimumhoogte de knoppen juist verder onder de vouw
   duwen, daar staat de knoppenrij vast aan de onderkant van het beeld. Zie
   mobile.css. */
@media only screen and (min-width: 768px) {
    .wizard-kaart {
        min-height: calc(100vh - 280px);
    }
}

.ql-toolbar.ql-snow {
    background-color: #fff;
}

/*------------------------------------------------------------------
5. Yii2
------------------------------------------------------------------*/

.grid-view .empty {
    padding-left: 27px;
}
.grid-view input[type=text],
.grid-view select {
    padding: 5px;
    width: 90%;
}

.input-group-addon.password-toggle-addon {
    border: none;
    border-left: 2px solid #fff !important;
}

.kv-password > .input-group > input[type=password] {
    padding-left: 66px;
}
.form-horizontal .kv-password > .input-group > input[type=password] {
    padding-left: 25px;
}

.password-toggle-addon input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
.password-toggle-addon label {
    padding: 0;
    margin: 0;
}
.password-toggle-addon label img {
    height : 1em;
    cursor: pointer;
    opacity: 0.6;
}

.password-toggle-addon label:hover img {
    opacity: 0.8;
}
.password-toggle-addon label input:checked + img {
    opacity: 1;
}

.ticket-content {
    background: white;
}