* {
    font-size: 14px;
}

span.productnaam {
    float: left; 
}

span.productprijs {
    float: right;
    margin-left: 20px;
    margin-right: 20px;
    width: 70px;
    text-align: right;
}

span.productduur {
    float: right;
    margin-left: 20px;
    width: 70px;
}

span.productlink {
    float: right;
    margin-left: 20px;
    border: 1px solid #ccc;
    padding: 5px 10px;
    border-radius: 3px;
    background-color: #eee;
    line-height: 18px;
    font-size: 13px;
}

span.prijsomschrijving {
    font-size: 12px;
    margin-right: 5px;
}

.winkelwagen-tabel tbody tr:nth-child(even) td, .afspraken-tabel tbody tr:nth-child(even) td {
    /*background-color: #eeeeee;*/
}

.winkelwagen-tabel tbody tr:last-child td {
    background-color: #ffffff;
}

.winkelwagen-tabel .totaal {
    border-top: 1px solid #aaaaaa;
    margin-top: 5px !important;
}

.winkelwagen-tabel .totaal-label, .winkelwagen-tabel .totaal, .winkelwagen-tabel .stukprijs {
    text-align: right;
}

.winkelwagen-tabel .totaal-label, .winkelwagen-tabel .totaal {
    font-weight: bold;
}

.knop {
    display: inline-block;
    padding: 4px 12px;
    background-color: #eeeeee;
    text-decoration: none;
    color: #333333 !important;
    border: 1px solid #dddddd;
    width: 200px;
    margin-right: 10px;
    text-align: center;
    -moz-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
}

.knop:hover {
    background-color: #dddddd;
}

.knop .fa {
    margin-right: 10px;
}

.home-knop .fa {
    margin-right: 0px;
}

.knoppen .knop {
    float: left;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    text-align: center;
}

.knoppen {
    float:left;
    margin-bottom: 5px;
    width:100%;
}

.knoppen .knop{
    width:calc( 50% - 40px);
    margin:0px;
    float:left;
    padding:7px;
}

.knoppen .knop:first-child{
    margin-right:10px;
}

@media (max-width: 35em) {
    .winkelwagen-tabel .totaal-label, .winkelwagen-tabel .totaal, .winkelwagen-tabel .stukprijs {
        text-align: left;
    }

    .ui-table-reflow.ui-responsive td.totaal .ui-table-cell-label, .ui-table-reflow.ui-responsive td.totaal-label .ui-table-cell-label {
        display: none;
    }

    .knoppen .knop {
        float: left;
        border-bottom-left-radius: 5px;
        border-top-left-radius: 5px;
        text-align: center;
        border-bottom-right-radius: 5px;
        border-top-right-radius: 5px;
        border-left: none;
        margin-bottom: 10px;
        padding-right: 10px;
        width: 100%;
        max-width: 200px;
    }

    .winkelwagen-tabel .totaal {
        border-top: none;
    }

    .winkelwagen-tabel .totaal-label {
        border-top: 1px solid #aaaaaa;
        
    }
}

.opties, .registreren, .bevestigen {
    width: 100%;
   
    border: 1px solid #dddddd;
    padding: 10px;
    box-sizing: border-box;
    float: left;
}

.opties .calendar-holder {
    width: calc(50% - 5px);
    display: inline-block;
    float: left;
}

.opties .opties-holder {
    width: calc(50% - 5px);
    display: inline-block;
    float: right;
}

.opties-holder .optie {
    display: inline-block;
    margin: 0px 5px 5px 0px;
    text-align: center;
}

.opties-holder .optie a {
    color: #333333;
    font-weight: normal;
    text-decoration: none;
    width: 40px;
    padding: 6px 10px;
    background-color: #f6f6f6;
    display: block;
    -moz-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
    border: solid 1px #808080;
    border-radius:4px;
}

.opties-holder .optie a:hover {
    background-color: #ededed;
}

.opties-holder .medewerkers {
    margin-bottom: 20px;
}

.spanvalue {
    display: block;
    float: left;
    width: 74%;
}

.fieldcontain {
    float: left;
    width: 100%;
}

.stap {
    background-color: #f8f9fa;
    padding: 20px 15px;
    clear: both;
    border: solid 1px #DDD;
}

.stap.kiesBehandeling  {
    margin-top: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    
}

.stap.first {
    
}

.stap.compleet, .stap.compleet h2 {
    color: #808080;
    cursor: pointer;
}

.stap.active {
    background-color: #662d91;
}

.stap h2 {
    margin: 0px;
    text-shadow: none;
    color: #ffffff;
    font-weight: normal;
    
}

.tekst-onder .stap h2{
    color:#DDD;
}

.ui-listview > li.ui-first-child, .ui-listview > li.ui-last-child {
    border-radius: 0px;
}

.ui-page-theme-a a {
    font-size: 14px;
    font-weight: normal;
}

.ui-page-theme-a a.ui-collapsible-heading-toggle {
    font-weight: bold;
}

.ui-collapsible-content  {
    padding: 0px;
}

.ui-listview > li h2.rubrieknaam {
    margin: 0px;
}

.ui-collapsible-content > .ui-listview-inset {
    margin: 0;
}

a.reserveerlink:after {
    display: none;
}

.ui-listview-outer .ui-listview .ui-first-child a {
    border-top: 0px;
}

.ui-listview-outer .ui-listview .ui-last-child a {
    border-bottom: 0px;
}

.ui-listview-outer .ui-listview a.ui-btn {
    border-left: 0px;
    border-right: 0px;
    border-right-width: 0px;
    border-left-width: 0px;
}

a.reserveerlink {
    line-height: 30px;
    background-color: #ffffff !important;
}

a.reserveerlink:hover {
    background-color: #ededed !important;
}

h2 .fa-check {
    margin-left: 15px;
}

a i.fa-trash-o {
    color: #CCC;
    font-size: 20px;
}

.cart {
    border: 1px solid #dddddd;
    float: left;
    width: 100%;
   
    padding: 10px;
    box-sizing: border-box;
}

.optie-medewerkers {
    border-color: #808080;
    width:100%;
    border-radius:5px;
    padding:7px;
}

.ui-mobile label, div.ui-controlgroup-label {
    font-size: 14px;
}

.inloggen, .registreer {
    float: left;
    width: 100%;
}

.inloggen {
    border-bottom: 1px solid #dddddd;
    padding-bottom: 10px;
}

.knop.grote-knop {
    width: 100%;
    line-height: 60px;
    padding: 0px;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    text-shadow: none;
    -moz-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
}

.bevestig-knop {
    border-radius: 0px;
}

.bevestig-knop:hover {
    background-color: #cccccc;
}

.knop.home-knop:first-of-type {
    margin-top: 20px;
}

.knop.home-knop {
    font-size: 14px;
    line-height: 40px;
    border: 1px solid #dddddd;
    margin-bottom: 10px;
}

.home-knop .fa.groot {
    font-size: 24px;
    position: relative; 
    top: 10px;
}

.home-knop .fa.fa-mobile {
    font-size: 28px;
    top: 12px;
}

.stap.kiesBehandeling {
    /*margin-top: 50px;*/
}

.next, span.productlink, .opties-holder .optie a:hover {
    background-color: #7aba1d; /* For browsers that do not support gradients */

    text-shadow: none;
    color: #FFF !important;
    -moz-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
}

    .next:hover {
        color:#FFF;
        background:   #662d91 ;/* For browsers that do not support gradients */
        -moz-transition: 0.3s ease;
        -o-transition: 0.3s ease;
        -webkit-transition: 0.3s ease;
        transition: 0.3s ease;
    }

.winkelwagen-knop {
    float:right;
    margin-bottom:10px;
}

#productenlijst .ui-btn-icon-right {
    padding-right: 14px;
}

.mijn-afspraken hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #dddddd;
    margin: 10px 0;
    padding: 0; 
}

@media(max-width:570px) {
    span.productprijs, span.productduur {
        margin: 0px;
    }

    span.productduur {
        width: 40px;
    }

    span.productlink {
        width: 10px;
        padding: 5px 8px;  
        overflow: hidden;   
    }

    .productlink .fa {
        position: relative;
        left: -1px;
    }

    .opties .calendar-holder {
        width: 100%;
        margin-bottom: 20px;
    }

    .opties .opties-holder {
        width: 100%;
    }
}

@media(max-width:430px) {
    span.productnaam {
        width: 100%;
    }

    span.productprijs {
        width: 30%;
        text-align: left;
    }

    span.productduur {
        width: auto;
        float: left;
    }

    span.productlink {
        width: auto;
        padding: 5px 10px;  
        overflow: hidden;   
    }

    .productlink .fa {
        position: relative;
        left: -1px;
    }

    .fieldcontain label, .fieldcontain .ui-input-text {
        width: 100%;
    }

    .bevestigen .fieldcontain label {
        font-weight: bold;
    }
}

li *  {
    font-size: 12px;
}

.productnaam{
    max-width: 290px;
    overflow:hidden;
    text-overflow:ellipsis;
}