@font-face {
    font-family: "Material Design Icons";
    src: url("./fonts/materialdesignicons-webfont.eot?v=5.3.45");
    src: url("./fonts/materialdesignicons-webfont.eot?#iefix&v=5.3.45") format("embedded-opentype"), url("../fonts/materialdesignicons-webfont.woff2?v=5.3.45") format("woff2"), url("../fonts/materialdesignicons-webfont.woff?v=5.3.45") format("woff"), url("../fonts/materialdesignicons-webfont.ttf?v=5.3.45") format("truetype");
    font-weight: normal;
    font-style: normal;
}
html, body {
    font-family: Verdana, Arial, sans-serif;
    font-size: 14px;
    background: #f4f5f9 no-repeat 180% 0/60% fixed url('/images/background.svg');
}
@media (max-width: 768px) {
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* Bootstrap color override */
.bg-primary, .btn-primary {
    background-color: #27aae1 !important;
    border:none;
}
.btn-outline-primary {
    color:#27aae1 !important;
    border-color:#27aae1 !important;
}
.btn-outline-primary:hover {
    color:white !important;
    border-color: #27aae1 !important;
    background-color:#27aae1 !important;
}

.bg-secondary, .btn-secondary {
    background-color: #fcaf17 !important;
    border:none;
}
.btn-tertiary {
    background-color: #27aae1;
    border: none;
    color:white;
}
.btn-tertiary:hover {
    background-color: #27aae1;
    color:white;
}
.nav-link {
    color:white;
}
.page-link {
    color: white !important;
    background-color: #27aae1 !important;
    border-color: white;
    font-size: 90% !important;
}
.active .page-link, .page-link:hover {
    background-color: #fcaf17 !important;
    border-color: white;
}
.bg-info {
    background-color: #27aae1 !important;
}

.bg-info, .bg-danger {
    color: white;
    padding: 20px;
    border-radius: 15px;
}
.documentcard {
    min-width: 300px;
}
.img-thumbnail, .documentpicture {
    max-width:290px;
}
.documentpicture .img {
    height:180px;
    overflow:hidden;
    background-color:#999;
}
.pdf {
    background-color: #ee3f40 !important;
}
.doc, .docx {
    background-color: #185abd !important;
}
.xls, .xlsx {
    background-color: #21a366 !important;
}
.showextension {
    font-size:140%;
    color:white;
    text-transform:uppercase;
    position:absolute;
    top: 0px;
    left:10px;
}
.documentpicture {
    font-size:80%;
}
.documentdelete {
    font-size:120%;
    color:red;
}

tr.notactive td {
    color:#999 !important;
    background-color:#efefef !important;
}
#ddRowsPerPage .btn {
    border: none;
    font-size: 90% !important;
    background-color:#27aae1 !important;
    color:white !important;
}
html {
    position: relative;
    min-height: 100%;
}

body {
  margin-bottom: 60px;
}
a {
    color:#27aae1;
}
th a {
    text-decoration:none;
}
th.active a {
    color: #fcaf17;
}
a span.mdi, .bg-danger span.mdi {
    display: inline-block;
    margin-right: 5px;
}
.mdi-close {
    margin-right:0 !important;
}

span.mdi-right {
    margin-left:5px;
    margin-right:0;
}
label {
    position:relative;
}
.new::after {
    content:' nieuw';
    text-transform:uppercase;
    font-size:55%;
    position:absolute;
    top:-5px;
    padding:3px 4px;
    margin-left:3px; 
    border-radius:5px;
    background-color:#ff6a00;
    opacity:0.5;
    color:white;
}
.new2::after {
    content: ' nieuw';
    text-transform: uppercase;
    font-size: 100%;
    padding: 3px 4px;
    margin-left: 3px;
    border-radius: 5px;
    background-color: #ff6a00;
    color: white;
}
.title {
    font-size:85%;
    text-transform:uppercase;
    margin-bottom:10px;
}
.subtitle {
    color:red;
    margin-bottom:5px;
    position:relative;
}
.subtitle2 {
    text-transform:uppercase;
    margin-bottom:5px;
    font-size:85%;
}
.validation-summary-valid, .field-validation-valid {
    display:none;
}
.field-validation-error {
    color: red;
    margin-left: 3px;
}
.required::after {
    content:'(verplicht)';
    margin-left:3px;
    font-size:85%;
    color:#999;
}
input::placeholder {
    color:#c0c0c0 !important;
}
input:focus {
    color:dodgerblue !important;
}
input:focus::placeholder {
    color: white !important;
}
#profile img {
    max-width:200px;
}
.nav-tabs .nav-item {
    background-color: #c0c0c0;
    border-radius: 0 5px 0 0;
    margin-right:1px;
}
.nav-tabs .nav-item .nav-link {
    color:white;
    border:none;
    border-radius:0 5px 0 0;
    padding:15px 10px;
    min-width:80px;
}
.nav-tabs .nav-item .nav-link.active {
    color:black;
}
.tab-pane {
    background-color:white;
    min-height:50vh;
    border-radius:0 5px 5px 5px;
    border:none;
}
.dropdown-item a {
    text-decoration:none;
    color:black;
}
.showDetail .form-label {
    font-weight: bold;
    display: block;
}

.showDetail span {
    display: inline-block;
    min-height: 3px;
}
.credits {
    font-size:80%;
    color:#999;
}
.form-select-fvi {
    display:inline-block;
    width:initial !important;
}
.tooltipicon::after {
    font: normal normal normal 24px/1 "Material Design Icons";
    font-size: 100%;
    content: "\F02D7";
    text-transform: uppercase;
    margin-left: 3px;
    color: black;
}
.tooltip {
    max-width:500px;
}
.customtooltip {
    --bs-tooltip-max-width: auto !important;
}
.legend {
    font-size: 85%;
    color: #999;
    font-style: italic;
}
.subcompetentie {
    padding:15px;
    margin-left:15px;
    color:#999;
    background-color:#efefef;
}