﻿/* Reset fieldset*/
body, h1, h2, h3, h4, h5, h6 {
    font-family: 'Trebuchet MS', Arial, Helvetica, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', sans-serif, 'Times New Roman', Times, serif
}

body {
    background-color: white;
}

:root {
    background-color: #a1aade;
}

p {
    margin-top: 0.1em;
    margin-bottom: 0.5em;
}

ol {
    margin: 0 auto;
    padding: 0 inherit;
}

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 0px;
    padding: .1em .1em .1em
}

/*.input-group-text {
    padding: .225rem;
    margin-bottom: 0px;
    border-radius: 2px;
    border-left:none;
}*/

.w3-input {
    padding: 1px;
    margin-bottom: 0px;
    border-radius: 2px;
}

.w3-input:focus {
        outline: 2px solid blue;
}

.w3-select {
    padding: 2px;
    width: 100%;
    border-radius: 2px;
    margin-bottom: 2px;
}

.w3-select:focus {
        outline: 2px solid blue;
}

.pointer {
    cursor: pointer;
}

.text-uppercase {
    text-transform: uppercase;
}

.text-capitalize {
    text-transform: capitalize;
}

/* End Reset fieldset*/

/* Aangepaste stijl voor radio buttons
-----------------------------------------------------------*/
.vertical-radio-buttons span {
    display: block;
    padding-left: 20px;
    cursor: inherit;
}

.vertical-radio-buttons label {
    display: block;
}

.vertical-radio-buttons input {
    float: left;
    width: 20px;
    margin-left: -5px;
    margin-top: -5px;
    -webkit-appearance: radio;
}

.w3-content{max-width:100%;margin:auto}
.w3-container{max-width:100%;margin:auto;padding:5px 40px!important}
.w3-panel{padding:0.01em 0px}.w3-panel{margin-top:5px;margin-bottom:5px}
.w3-padding{padding:2px 16px!important}
.w3-padding-large{padding:12px 18px!important}
.w3-table td,.w3-table th,.w3-table-all td,.w3-table-all th{padding:0px 2px;display:table-cell;text-align:left;vertical-align:top}

/*@media screen and (max-device-width:768px) {*/
/*@media screen and (max-device-width:815px) {*/
@media screen and (max-device-width:900px) {
    .CCfooter {font-size: 0.80em;}
    p,div,.paragraaf {font-size: 0.98em;}

    h1{font-size:24px;}
    h2{font-size:18px;}
    h3{font-size:12px;}
    h4{font-size:10px;}
    h5{font-size:9px;}
    h6{font-size:8px;}

    .w3-container{max-width:100%;margin:auto;padding:1px 5px!important}
    .w3-large{font-size:14px!important}
    .w3-xlarge{font-size:17px!important}
    .w3-xxlarge{font-size:20px!important}
    .w3-xxxlarge{font-size:48px!important}
    .w3-jumbo{font-size:64px!important}
    .w3-medium{font-size:14px!important}
    .w3-padding-large{padding:12px 2px!important}
    .w3-modal-content {margin: 0 60% 60% 0;width: 90% !important}
    .w3-bar .w3-bar-item{padding:6px 9px;}
    .w3-table td, .w3-table th, .w3-table-all td, .w3-table-all th {padding: 1px 1px;font-size: 0.9em}
}

/* Eigen css
-----------------------------------------------------------*/
.CCfooter {
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 0.5em;
    background-color: #a1aade; /*is een tint van #3f51b5 (w3-indigo)*/
    color: white;
    text-align: center;
}

.cclabel {
    margin-top: 4px;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

.ccTextLineThrough {
    text-decoration: line-through;
    text-decoration-color: red;
    text-decoration-style: double;
    text-decoration-line: underline line-through;
    background-color: #ffe5ee;
}

/*iframe {
    border: 1px solid grey;
    width: 100%;
    height: 100vh;
}

/*.ccCenter {
    margin-left: auto;
    margin-right: auto;
}*/

.ccCyanLight {
    background-color: #a1aade;
}

/* Aangepaste stijl voor w3-table
-----------------------------------------------------------*/
#w3-tableBorder td, #w3-tableBorder th {
    border: 1px solid #ddd;
}

#w3-tableBorder tr:hover {
    background-color: #ddd;
}

/* Styles for validation helpers
-----------------------------------------------------------*/
.invalid {
    color: red;
    background-color: #fff0f0;
    outline: 1px solid #ff0000;
}

.valid {
    border-color: none;
    /*    background-color: #f1f1e1;*/
    background-color: #F0F8FF;
    outline: none;
}

.invalidPostcodeCheck {
    color: red;
    border-radius: 2px;
    background-color: #fff0f0;
}


.ccList {
    padding-left: 0px;
    list-style-type: none;
}

@media print {
    body {
        width: 21cm;
        height: 29.7cm;
    }
}

/*Blazor Attempting to reconnect to the server*/
.components-reconnect-show, .components-reconnect-failed, .components-reconnect-rejected {
    display: none;
}