/* 	CSS IS VERDEELD IN GROEPEN.*/
	/* DE HOOFD KLEUREN*/
	/* DEBODY*/
	/* DE BUTTONS*/
	/* DE PAGINA`S*/
	/* DE GEEN IDEE WAT IK ER MEE MOET MAAR IK LAAT HET STAAN VOOR HET GEVAL DAT*/
	


    :root {
    /* oranje #e18ca3; */
    /* antraciet #1E1E1E; */
    
    --main-color: #fff;
    --main-color-font: #1d1d1b;
    --main-color-invert: #1d1d1b;
    --secondary-color: #e3000f; /* #1E1E1E;*/
    --secondary-color-warning:#CC0000; /* #1E1E1E;*/
    
    --background-color: #fff;
    --container-color: #fff;
    
    
    --button-bg-color: #1d1d1b;
    --button-text-color: rgba(255, 255, 255, 0.87);
    --button-text-color-hover: #fff;
    --button-bg-color-hover: rgba(255, 255, 255, 0.87);
    --top-bar-bg-color: #fff;
    
    
    /*##primary button COLOR##*/
    --btn-primary-text: #1d1d1b; /* #1E1E1E;*/
    --btn-primary-bg: #e3000f; /* #1E1E1E;*/
    --btn-primary-border: #e3000f; /* #1E1E1E;*/
    
    --btn-primary-text-hover: #1d1d1b;
    --btn-primary-bg-hover: rgba(255, 255, 255, 0.87);
    --btn-primary-border-hover: #000; /* #1E1E1E;*/
    
    /*##secondary button COLOR##*/
    --btn-secondary-text: #1d1d1b; /* #1E1E1E;*/
    --btn-secondary-bg: #e3000f; /* #1E1E1E;*/
    --btn-secondary-border: #e3000f; /* #1E1E1E;*/
    
    --btn-secondary-text-hover: #1d1d1b;
    --btn-secondary-bg-hover: rgba(255, 255, 255, 0.87);
    --btn-secondary-border-hover: #1d1d1b; /* #1E1E1E;*/
    
    /*font*/
    --font-fam: calibri, verdana, sans-serif;
    --font-w: 400;
    }
    
    * {
    color: var(--main-color-font);
    /*background-color: var(--background-color);*/
    }
    
    
    /*#######				  BODY				  #######*/ 
    
    html {
        font-size: 14px;
        position: relative;
        min-height: 100%;
    }
    
    body {
        /*background-color:blue;*/
        background-color: var(--background-color);
        color: #000;
        
        font-family: var(--font-fam);
        font-weight: var(--font-w);
        
        
    }
    
    
    
    .container, .container-fluid {
        background: var(--container-color);
        max-width: 1200px;
        color: var(--main-color-font);
    }
    
    .generalfooter{
        background-color: var(--secondary-color);
        color: white;
        max-width: 100%;
        margin-top: 2rem;
    }
    
.spa-footer span {color: var(--main-color)}

    .accordionPanel {
        color: var(--main-color-font) !important;
        background-color: var(--background-color) !important;
    }
    
        .accordion span {
        background-color: #ccc !important;
        }
    
    .home {
        min-height: 100%;
        text-shadow: 0px 0px 1px #8A8A8A;
        background-size: cover;
    }
    
    
    .bg-primary {
        background-color: var(--top-bar-bg-color) !important;
        color: var(--main-color-font)
    }
    
    a.bg-primary:hover, a.bg-primary:focus,
        button.bg-primary:hover,
        button.bg-primary:focus {
        background-color: #3d4f41 !important;
    }
    
    .bg-primary .navbar-brand {
        color: var(--main-color-font);
		visibility: hidden;
		width: 1.5rem;
    }

	.bg-primary a.navbar-brand:before {
    	font-family: FontAwesome;
    	content: "\f015";
		visibility: visible;
	}

    
    .navbar-toggler
    {
    background-color: var(--secondary-color);
    }
    
	.navbar-nav .nav-link {
	font-weight:700;	
	}

	.nav-link:focus, .nav-link:hover {
		color: var(--secondary-color);
	}

	.navbar-toggler path{
  		stroke: var(--main-color-font) !important;
	}



    .login-icons
    {
    color: var(--secondary-color);
    
    }
    
    
    
    
    
    .btn {
        border-radius: 24px;
        color: var(--primary-color);
    }
    
    
    .btn-tertiary {
        color: var(--btn-primary-text);
        background-color: var(--btn-primary-bg);
        border-color: #CBCBCB;
    }
    
    .btn-tertiary:hover {
        color: var(--btn-primary-text);
        background-color: var(--btn-primary-bg);
        border-color: #b1b1b1;
    }
    
    .btn-tertiary:focus, .btn-tertiary.focus {
        box-shadow: 0 0 0 0.2rem rgba(203, 203, 203, 0.5);
    }
    
    .btn-navigation {
        border-radius: 0px;
    }
    
    
    .btn-primary {
        color: var(--btn-primary-text);
        background-color: var(--btn-primary-bg);
        border-color: var(--btn-primary-border);
    }
    .btn-primary:hover {
        color: var(--btn-primary-text-hover);
        background-color: var(--btn-primary-bg-hover);
        border-color: var(--btn-primary-border-hover);
    }
    
    .btn-primary:focus, .btn-primary.focus {
        box-shadow: 0 0 0 0.2rem rgba(84, 108, 89, 0.5);
    }
    
    .btn-primary.disabled, .btn-primary:disabled {
        color: #fff;
        background-color: #546C59;
        border-color: #546C59;
    }
    
    .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
        color: #fff;
        background-color: #3d4f41;
        border-color: #36463a;
    }
    
    .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-primary.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(84, 108, 89, 0.5);
    }
    
    .btn-outline-primary {
        color: #546C59;
        background-color: transparent;
        border-color: #546C59;
    }
    
    .btn-outline-primary:hover {
        color: #fff;
        background-color: #546C59;
        border-color: #546C59;
    }
    
    .btn-outline-primary:focus, .btn-outline-primary.focus {
        box-shadow: 0 0 0 0.2rem rgba(84, 108, 89, 0.5);
    }
    
    .btn-outline-primary.disabled, .btn-outline-primary:disabled {
        color: #546C59;
        background-color: transparent;
    }
    
    .btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.dropdown-toggle {
        color: #fff;
        background-color: #546C59;
        border-color: #546C59;
    }
    
    .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-primary.dropdown-toggle:focus {
         box-shadow: 0 0 0 0.2rem rgba(84, 108, 89, 0.5);
    }
    .btn-secondary {
        color: var(--btn-secondary-text);
        background-color: var(--main-color);
        border-color: var(--btn-secondary-border);
		padding: .2rem .5rem;
    }
    
    .btn-secondary > b 
    {
        
    
    }
    .btn-secondary:hover {
        color: #000 !important;
        background-color: var(--btn-secondary-bg-hover);
        border-color: var(--btn-secondary-border-hover);
    }
    
    .btn-secondary:focus, .btn-secondary.focus {
        box-shadow: 0 0 0 0.2rem rgba(234, 165, 123, 0.5);
    }
    
    .btn-secondary.disabled, .btn-secondary:disabled {
        color: #FFFFFF;
        background-color: #EAA57B;
        border-color: #EAA57B;
    }
    
    .btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, .show > .btn-secondary.dropdown-toggle {
        color: #FFFFFF;
        background-color: #e3874f;
        border-color: #e07e41;
    }
    
    .btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus, .show > .btn-secondary.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(234, 165, 123, 0.5);
    }
    
    .btn-outline-secondary {
        color: #FFFFFF;
        background-color: transparent;
        border-color: #EAA57B;
    }
    
    .btn-outline-secondary:hover {
        color: #FFFFFF;
        background-color: #EAA57B;
        border-color: #EAA57B;
    }
    
    .btn-outline-secondary:focus, .btn-outline-secondary.focus {
        box-shadow: 0 0 0 0.2rem rgba(234, 165, 123, 0.5);
    }
    
    .btn-outline-secondary.disabled, .btn-outline-secondary:disabled {
        color: #FFFFFF;
        background-color: transparent;
    }
    
    .btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active, .show > .btn-outline-secondary.dropdown-toggle {
        color: #FFFFFF;
        background-color: #EAA57B;
        border-color: #EAA57B;
    }
    
        .btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .btn-outline-secondary:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-secondary.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(234, 165, 123, 0.5);
    }
    
    /*#######			  BUTTONS - END					 #######*/ 
    
    
    
    /*#######			  HOME				 #######*/ 
    
    .button {
        background-color: var(--button-bg-color);
        color: var(--button-text-color);
        border: none;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
    }
    .button:hover {
        color: var(--button-text-color-hover);
        background-color: var(--button-bg-color-hover);
        text-transform: none;
    }
    
    
    /* home page icons */
    a.button1
    {
        padding: 10px;
        display: block;
        width: 100%;
        height: auto;
        text-align: center;
        align-items: center; /* align vertical */
        margin: auto;
        text-transform: none;
        font-family: var(--font-fam);
        font-weight: var(--font-w);
        font-size: 16px;
        color: #3A3A3A; /*#3e3e3e;*/
        background-color: #F2F3F2;
        
        border-width: 2px;
    
        transition: all 0.4s ease-in-out;
        -moz-transition: all 0.4s ease-in-out;
        -webkit-transition: all 0.4s ease-in-out;
        -o-transition: all 0.4s ease-in-out;
        box-shadow: 0 2px 14px 0 rgba(47, 60, 83, 0.4);
    }
    
    a.button1 * {
        background-color: #F2F3F2;
    
        transition: all 0.4s ease-in-out;
        -moz-transition: all 0.4s ease-in-out;
        -webkit-transition: all 0.4s ease-in-out;
        -o-transition: all 0.4s ease-in-out;
    }
    
    a.button1:hover,
    a.button1:hover * 
    {
        color: #fff;
        background-color: var(--secondary-color); /* #FF6600; */
        text-transform: none;
    }
        
    .fa {
        font-size: 35px !important;
        padding-top: 1rem;
    }
    
    .img-logo {
        width: 180px !important;
    
        
    }
    
    
        
    .companyname {
        display: none;
        font-weight: bold;
        font-size: 200%;
        color: var(--main-color);
        }
        .publisherlogo {
        padding-top: 35px;
        }
    
    
    
    
    #persoonlijke-gegevens .card-body .card-title
    {
        
        font-weight: bold;
        
    }
    
    #account-gegevens .card-body .card-title
    {
        
        font-weight: bold;
        
    }
    
    #extra-gegevens .card-body .card-title
    {
        
        font-weight: bold;
        
    }
    
    /*#######			 Profiel - END		 #######*/ 
    
    
    /*#######			Wijzig abonnement		 #######*/ 
    
    #Paymentmethod 
    {
        color: var(--main-color-invert);
        border: none;
        border-radius: 0px !important;
    }
    
    #Paymentmethod > option
    {
        color: var(--main-color-invert);
    }
    
    
    /*#######			Wijzig abonnement - END		 #######*/ 
    
    
    /*#######			Adresgegevens		 #######*/ 
    
    #Countries 
    {
        color: var(--main-color-invert);
        border: solid;
        border-radius: 2px !important;
        border-width: 1px;
        border-color: #A8A8A8;
    }
    
    #Countries > option
    {
        color: var(--main-color-invert);
    }
    
    
    /*#######			Adresgegevens - END		 #######*/ 
    
    
    
    /*#######			Wachtwoord wijzigen		 #######*/ 
    
    
    
    
    /*#######			Wachtwoord wijzigen - END		 #######*/ 
    
    
    /*#######			FAQ		 #######*/ 
    
    #faq-1
    {
    margin: auto;
    }
    
        
    .faqq {
        color: var(--main-color);
        background-color: var(--secondary-color);
        padding: 5px;
        width: 100%;
    }
    
    /*#######			FAQ - END		 #######*/ 
    
    
    
    
    
    /*#######			Bezorgklachten 			 #######*/ 
    .edition{
        height: 200px;
    
    }
    .img-history-cover
    {
        height: 200px;
        position: absolute;
        transition: transform .4s; /* Animation */
    }
    
    .img-history-cover:hover
    {
    
    transform: scale(1.5);
          z-index: 2;
    }
    
    
    
    /*#######			Bezorgklachten 	- END		 #######*/ 

    
	a.linkColor, a.linkColor:focus, a.linkColor:hover {
		color: var(--secondary-color) !important;
		background-color: transparent !important;
		text-decoration: none !important;
	}
    
    /*#######		Warning		text			 #######*/ 
    
    
    
    .text-warning {
          color: var(--secondary-color-warning) !important;
          font-weight: bold;
          text-decoration: underline;
          text-decoration-thickness: 2px; 
    }
    
    
    
    
    /*#######		Warning text 	-END			 #######*/ 
    
    
    
    
    
        @media screen and (max-height: 450px) {
        .sidenav {
        padding-top: 15px;
        }
    
        .sidenav a {
            font-size: 18px;
        }
        }
    
    
    
    
    
        a.homeselect {
        color: white;
        font-weight: bold;
        }
    
        svg {
        fill: var(--main-color);
        }
    
    
        /* Provide sufficient contrast against white background */
        a {
        color: #0366d6;
        }
    
    
        .dropdown {
        font-weight: bold;
        border: 1px solid rgba(0,0,0,.125);
        color: var(--background-color-font);
        background-color: var(--main-color);
        padding: 5px;
        }
    
    
    
    
        /*------------------------------------
        - COLOR primary
        ------------------------------------*/
        .alert-primary {
        color: #1e2720;
        background-color: #becdc1;
        border-color: #b3c4b6;
        }
    
        .alert-primary hr {
        border-top-color: #a5b9a9;
        }
    
        .alert-primary .alert-link {
        color: #080a08;
        }
    
        .badge-primary {
        color: #fff;
        background-color: #4ca2d5;
        }
    
        .badge-primary[href]:hover, .badge-primary[href]:focus {
        color: #fff;
        background-color: #3d4f41;
        }
    
    
    
        .border-primary {
        border-color: #546C59 !important;
        }
    
    
        .list-group-item-primary {
        color: #1e2720;
        background-color: #b3c4b6;
        }
    
        .list-group-item-primary.list-group-item-action:hover, .list-group-item-primary.list-group-item-action:focus {
        color: #1e2720;
        background-color: #a5b9a9;
        }
    
        .list-group-item-primary.list-group-item-action.active {
        color: #fff;
        background-color: #1e2720;
        border-color: #1e2720;
        }
    
        .table-primary,
        .table-primary > th,
        .table-primary > td {
        background-color: #b3c4b6;
        }
    
        .table-hover .table-primary:hover {
        background-color: #a5b9a9;
        }
    
        .table-hover .table-primary:hover > td,
        .table-hover .table-primary:hover > th {
        background-color: #a5b9a9;
        }
    
        .text-primary {
        color: var(--main-color-font) !important;
        }
    
        a.text-primary:hover, a.text-primary:focus {
        color: #3d4f41 !important;
        }
    
    
        /*------------------------------------
        - COLOR secondary
        ------------------------------------*/
        .alert-secondary {
        color: #ca6020;
        background-color: #10611d12b;
        border-color: #103111119;
        }
    
        .alert-secondary hr {
        border-top-color: #ff102103;
        }
    
        .alert-secondary .alert-link {
        color: #9e4b19;
        }
    
        .badge-secondary {
        color: #212529;
        background-color: #EAA57B;
        }
    
        .badge-secondary[href]:hover, .badge-secondary[href]:focus {
        color: #212529;
        background-color: #e3874f;
        }
    
        .bg-secondary {
        background-color: #EAA57B !important;
        }
    
        a.bg-secondary:hover, a.bg-secondary:focus,
        button.bg-secondary:hover,
        button.bg-secondary:focus {
        background-color: #e3874f !important;
        }
    
        .border-secondary {
        border-color: #EAA57B !important;
        }
    
    
    
        .list-group-item-secondary {
        color: #ca6020;
        background-color: #103111119;
        }
    
        .list-group-item-secondary.list-group-item-action:hover, .list-group-item-secondary.list-group-item-action:focus {
        color: #ca6020;
        background-color: #ff102103;
        }
    
        .list-group-item-secondary.list-group-item-action.active {
        color: #212529;
        background-color: #ca6020;
        border-color: #ca6020;
        }
    
    
        .table
        {
        color: var(--main-color-font);
        }
        .table-secondary,
        .table-secondary > th,
        .table-secondary > td {
        background-color: #103111119;
        }
    
        .table-hover .table-secondary:hover {
        background-color: #ff102103;
        }
    
        .table-hover .table-secondary:hover > td,
        .table-hover .table-secondary:hover > th {
        background-color: #ff102103;
        }
    
        .text-secondary {
        color: #EAA57B !important;
        }
    
        a.text-secondary:hover, a.text-secondary:focus {
        color: #e3874f !important;
        }
    
        /*    custom CSS    */
    
        .navbar-light {
        box-shadow: 0 0 8px rgba(0,0,0,0.25);
        font-weight: 500;
        }
    
        .navbar-toggler {
        color: black !important;
        display: flex;
        border: none;
        align-items: center;
        font-weight: 500;
		background-color: var(--main-color)
        }
    
        .card {
        padding: 10px;
        /* color: black; */
        text-shadow: none;
        color: var(--main-color-font);
        background-color: var(--background-color);
    
        }
    
        .col-4 {
        margin-top: 10px !important;
        }
    
        .main {
        }
    
        .card-details {
        color: #1E1E1E;
        text-shadow: none;
        border-radius: initial;
        border-left: none;
        border-right: none;
        border-top: none;
        /*border-bottom: 1px solid #1E1E1E; even uit*/
        margin: 10px 10px 0 10px;
        padding: 0 0 10px 0;
        }
    
        .card-body {
        padding: 1.25rem 0;
        }
    
        .col-xl-6, .col-xl-12 {
        padding: initial !important;
        }
    
    
        a, a:hover, a:focus, a:active {
        text-decoration: none;
        color: inherit;
        }
    
    
    
        h1 {
        font-weight: 700;
        }
    
        #sig-canvas {
        touch-action: manipulation;
        border: 1px solid #ced4da;
        border-radius: .25rem;
        width: 100%;
        }
    
        td, th {
        text-align: left;
        }
    
        td {
        font-weight: normal !important;
        }
    
        .homepage-icon {
        border-radius: 10px !important;
        }
    
    
        /* deliveryorder table, needs a hover because its lacking an a href*/
        #deliverytable:hover {
        cursor: pointer;
        }
    
    
        /*complaint description field with readmore button*/
        .box {
        }
    
        .complaintcheckbox {
        opacity: 0;
        position: absolute;
        pointer-events: none;
        }
    
        .complaintdesc {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        }
    
        .complaintcheckbox:focus ~ label {
        outline: -webkit-focus-ring-color auto 5px;
        }
    
        .complaintcheckbox:checked + p {
        -webkit-line-clamp: unset;
        }
    
        .complaintcheckbox:checked ~ label,
        .complaintdesc:not(.truncated) ~ label {
        display: none;
        }
    
        /*hide non active customers*/
    
        .non-active-subscription {
        display: none;
        }
    
        .custom-link {
        cursor: pointer;
        }
    
        .edition-cover {
        height: 200px;
        -webkit-filter: drop-shadow(0 0 8px #000);
        filter: drop-shadow(2px 2px 3px #000);
        }
    
        .elips {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        }
        .accordion {
        background-color: #dedede;
        color: #444;
        cursor: pointer;
        padding: 10px;
        width: 100%;
        border: none;
        text-align: center;
        outline: none;
        font-size: 12px;
        transition: 0.4s;
        border-radius: 10px;
        margin-bottom: 3px;
        }
    
        .accordion:active, .accordion:hover {
        background-color: #ccc;
        }
    
        .accordionPanel {
        padding: 0 18px;
        display: none;
        background-color: white;
        overflow: hidden;
        }
    
        .loginfield{
        margin: auto;
        width: 50%;
        }
    
        .text-muted{
        color: var(--main-color-font) !important;
		font-size: .875rem;
		margin-bottom: 1rem;
        }

		.text-muted a {
			color: var(--secondary-color);
		}
    
    
    
        @media only screen and (max-width: 600px) {
        #faq-1 {
         width: 100%;
        }
        .loginfield{
        width: 100%;
        }
        }
        @media (min-width: 768px) {
        html {
            font-size: 16px;
        }
        }
            @media all and (max-width:30em) {
            a.button1 {
            display: block;
            margin: 0.4em auto;
            }
        }
            @media only screen and (max-width: 600px) {
                a.button1 {
                display: block;
                width: 100%;
                height: auto;
                }
        
                .fa {
                font-size: 20px !important;
                float: left;
                padding-left: 15px;
                padding-right: -15px;
                padding-top: 0%;
                }
        
                .accordionrow {
                width: auto;
                }
        
                .mt-4 {
                margin-top: 0.0rem !important;
                }
        }