/*
 klantreis css
*/

.hd-klantreis .onderdeel {
    margin:10px;
    padding:10px;
}

.hd-klantreis .onderdeel .onderdeel-header{
    background-color: #e5e5e5;
    display:grid;
    grid-template-columns: 33% 16% 16% 16% 16% 3%;
    margin-bottom:5px;
}
.hd-klantreis .onderdeel .onderdeel-label{
    padding:2px 15px;
}
.hd-klantreis .onderdeel .onderdeel-label .status.ready{
    color: #00ac00;
    padding:3px;
}
.hd-klantreis .history-grid .row.header {
    font-weight:bold;
}
.hd-klantreis .history-grid .row {
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.hd-klantreis .onderdeel .stap {
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
}
.hd-klantreis .stap .aspect{
    display:grid;
    grid-template-columns: 1fr 1fr;
}

.hd-klantreis .keuze-rij{
    margin-left: 10px;
    display:grid;
    grid-template-columns: 20%  80%;
    border-top:1px solid #ddd;
    padding-top: 8px;
}
.hd-klantreis .keuze-rij:last-child{
    border-bottom: 1px solid #ddd;
}
.hd-klantreis .keuze-rij .attr-log {
    margin-left:10px;
}
.hd-klantreis .keuze-rij .kies {
    width:100px;
}
.hd-klantreis .attr-log .log-row .date{
    padding-left:4px;
}
.hd-klantreis .attr-log .log-row .buttons{
    text-align:right;
}
.hd-klantreis .attr-log .log-row{
    display:grid;
    grid-template-columns: 15% 35% 40% 10%;
    margin-bottom:4px;
 
}
.hd-klantreis  .attr-log .log-row:not(:first-child){
    border-top: 1px solid #dfdfdf;
}
.hd-klantreis .keuze-rij .attr-log .log-row.mine{
    background-color: #eee;
}
.hd-klantreis .keuze-rij .attr-log .log-row .bb-icon-l {
    cursor: pointer;
}
.hd-klantreis .bb-icon-l {
    font-size: 22px;
}
.cft-acf-instruction .bb-icon-info {
    cursor:pointer;
    margin-left:3px;
    font-size:18px;
}
/*
.xxxcft-acf-instruction .bb-icon-info:hover {
*/

.hd-klantreis .header-rij{
    margin-left: 5px;
    display:grid;
    grid-template-columns: 40% 50%;
    background-color: #eee;
}


.cft-acf-instruction {
    display:inline-block;
}

.hd-klantreis .cft-modal-window {
   background-color: #fefefe;
   padding: 20px;
   border: 1px solid #888;
   width: 80%;
   position:absolute;
   top:300px;
   z-index:1050;
   display:none;
   border-radius: 4px;
   box-shadow: 3px 3px;
}
.hd-klantreis .cft-modal-wrap.info .cft-modal-window {
    width: 50%;
}
.hd-klantreis .cft-modal-wrap.stap-detail .cft-modal-window {
    width: 95%;
}

.cft-modal-bg-blur.active{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
}
.cft-modal-window .cf-buttons {
    display:flex;
    justify-content:end;
    font-size:20pt;
}
.cft-modal-window .cf-buttons span{
    cursor:pointer;
}


.cf-hd-button {
    color: #333;
    padding: 4px;
    border: 1px solid #DDD;
    margin-bottom: 5px;
    border-radius: 10px;
    line-height: 1;
    font-size: 14px;
    text-align: center;
    cursor:pointer;
}
.stap .stap-label{
    padding-left:20px;
}
.stap .cf-details-button{
    height:30px;
    display:flex;
    justify-content: space-between;
    margin-right:40px;
    padding-left:10px;
}
.stapwaarde span.klaar{
    color: #00ac00;
}



.keuze-rij .radio label {
    padding-left:5px;
    cursor:pointer;
    font-size: 14px;
}
.keuze-rij .radio label.klaar {
    text-decoration:underline;
}
.cft-modal-window .loading img{
    width:100px;
}
.cft-modal-window .keuze-rij:last-child {
    margin-bottom:100px;
}