html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.CardVandaag {
    background-color: #00b8ff;
    color: white;
}

    .CardVandaag .table, .CardVandaag .IconButton, .Cardverlopen .table, .Cardverlopen .IconButton {
        color: white;
    }

.Cardverlopen {
    background-color: #ff8d00;
    color: white;
}

.CardNodate {
    background-color: #f1f1f1;
}
    

.TaskOverview ion-icon {
    font-size: 28px;
    vertical-align:middle;    
}

.IconButton {
    color: #212529;
    text-decoration: none;
    cursor:pointer;
}

ion-icon {
    pointer-events: none;  
}

    ion-icon.IconVerlopen, ion-icon.IconGeannuleed {
        fill: #d70000;
        color: #d70000;
    }

   ion-icon.IconAfgerond {
        fill: #12a600;
        color: #12a600;
    }

    ion-icon.IconDeelsAfgerond {
        fill: #001fa6;
        color: #001fa6;
    }

.CalendarView .col-1 {
    width:14.28%;
    padding:5px;
}

.CalendarView .table > :not(caption) > * > * {
    padding: 3px;
    word-break:break-word;
}

.CalendarView .card-body {
    padding: 0px;
}

.CalendarView .card-header {
    padding:3px;
}

.CalendarView .IconRight {
    float:right;
}

.CalendarView.TaskOverview ion-icon { font-size:20px;
}

@media only screen and (max-width: 770px) {
    .CalendarView { font-size:8px;}
        .CalendarView.TaskOverview ion-icon { font-size: 14px; }
}