:root {
    --background: white;
    --label: black;
    --button-text: black;
    --main-yellow: #F1D302;
    --button_bck: var(--main-yellow);
    --border: var(--main-yellow);
    --hover: #e1e500;
    --slider: #d6d6d6;
    --navbar: #d6d6d6;
    --default: #f5f5f5;
}


body {
    background-color: var(--default);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

footer {
    background-color: var(--navbar);
    font-size: .8em;
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 0.5rem;
    text-align: center;
}

p {
    text-align: center;
}

a {
    color: var(--label);
    cursor: pointer;
}

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;       /* Remove default arrow */
}

.slider {
    -webkit-appearance: none; /* Override default CSS styles */
    width: 100%; /* Full-width */
    height: 15px; /* Specified height */
    background: var(--slider); /* Grey background */
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    border-radius: 25px;
}

    /* Mouse-over effects */
    .slider:hover {
        opacity: 1; /* Fully shown on mouse-over */
    }

    /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
    .slider::-webkit-slider-thumb {
        -webkit-appearance: none; /* Override default look */
        width: 30px; /* Set a specific slider handle width */
        height: 30px; /* Slider handle height */
        background: var(--button_bck); /* Green background */
        cursor: pointer; /* Cursor on hover */
         -moz-border-radius: 25px;
        -webkit-border-radius: 25px;
        border-radius: 25px;
    }

.container {
    background-color: var(--background);
    padding: 40px;
     -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    border-radius: 25px;
    border-color: var(--border);
    border-style: solid;
    border-width: 1px;
    color: var(--label);
    margin-top:20px;
}

#bottomContainer {
    margin-bottom:80px;
}

#bottomContainer img{
    border:solid;
    border-width:1px;
}

.form-control {
    border-style: solid;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    border-radius: 25px;
}

.btn {
    border-style: none;
    width: 200px;
    height: 50px;
    background-color: var(--button_bck);
     -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    border-radius: 25px;
    color: var(--button-text);
    font-weight: bold;
}

.btn:hover {
    background-color:var(--hover);
}

.btn_apply{
    padding-top:12px;
}

.btn_protect{
    padding-top:0px;
}
.container_apply{
    height: auto;
    vertical-align:middle;
    padding:10px;
}

.navbar {
    background-color:  var(--navbar);
    padding: 5px;
}

.navbar-nav li {
    list-style-type: none;
    margin: 0;
    padding-right: 20px;
}

.nav-link {
    font-size: 1.1em !important;
    color: var(--label);
    text-align: center;
    text-decoration: none;
    border-bottom: solid;
    border-bottom-color: var(--navbar);
}

.nav-link:hover {
    color: var(--label);
    border-bottom-color: var(--border);
}

.navbar-toggler{
    background-color:  var(--background);
}

.dropdown-menu {
    color:  var(--label);
    background-color: var(--navbar);
    padding:0px;
}

.dropdown-menu a{
    border-bottom: solid;
    border-bottom-color: var(--navbar);
}

.dropdown-menu a:hover {
    color: var(--label);
    border-bottom-color: var(--border) !important;
}

.dropdown-menu a:focus {
    color: var(--label);
    border-bottom-color: var(--border) !important;
}

.content-box {
    height: 240px;
    background-color: #ebeff4;
    padding: 10px;
     -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    border-radius: 25px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.content-box-item {
    height: 200px;
    overflow: auto;
}
.content-box-item p {
    text-align:left;
    font-size:14px;    
}

.row label {
    text-align:left;
}

.field-faq-answer{
	display:none;	
}
.faq-antwoord{
	margin-top:10px;
	padding-bottom:10px;
}
.faq-antwoord p{
	margin-bottom:0px;
	padding-left: 10px;
	margin-left:10px;
}
.faq-question {
    cursor: pointer;
    padding-top:2%;
    text-align:left;
}

.IcnOpen {
    height: 20px;
    width: 20px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    display: inline-block;
    margin-right:2%;
    background-image: url('../Content/Img/ArrowDown.jpg');
    background-size: contain;
    background-repeat: no-repeat;
}

.faq-antwoord ul li {
    text-align:left;
}


.TextAlignLeft p {
    text-align:justify ;
}

.FloatLeft {
    float:left;
}

.FloatRight{
    float:right;
}

.TAC p {
    text-align: center;
}

.TAL {
    text-align: left;
}

ul{
    list-style-type: circle;
}


tr.bordered {
    border-bottom: 1px solid #808B96;
}

tr.spaceUnder {
    height:10px;
}

/* Create an active/current tablink class */

button.active {
    background-color: var(--hover);
}

a.nav-link.active{
    background-color: var(--button_bck) !important;
}

.tab-pane{
    /*border:solid 1px #dee2e6;*/
    /*border-top:none;*/
    padding:5px;
    padding-top:15px;
}

.nav-tabs .nav-link {
    border: 1px solid #dee2e6;
}


/* datepicker */
.datepicker[readonly]:not([disabled]) {
    cursor: pointer !important;
    background-color: white !important;
}

#filters-container:last-child {
    display: flex;
    align-items: flex-end;
}
#filters-container #search {
    height: calc(1.5em + 0.75rem + 2px) !important;
    border: 1px solid var(--button_bck) !important;
}
#filters-container label{
    width: 100%;
    padding-left: 12px;
    font-weight: bold;
}
/*---------------*/

.dinersTotalRow{
    background-color: var(--main-yellow);
}

@media only screen and (max-width: 768px) {
 footer {
    position: unset;
    margin-top: auto;
 }
  #bottomContainer {
    margin-bottom:20px;
  }
 .container {
    padding: 15px 5px;
 }

 .info-form {
    padding: 0px;
 }
}