/* kantinescan fonts */
/* Frutiger */
@font-face {
	font-family: 'Frutiger-light';
	font-style: normal;
	font-weight: 400;
	src: local('Frutiger LT Std 55 Roman'), url('/fonts/kantinescan/FrutigerLTStd-Roman.woff') format('woff');
}
@font-face {
	font-family: 'Frutiger';
	font-style: normal;
	font-weight: 700;
	src: local('Frutiger LT Std 65 Bold'), url('/fonts/kantinescan/FrutigerLTStd-Bold.woff') format('woff');
}
@font-face {
	font-family: 'Frutiger-bold';
	font-style: normal;
	font-weight: 800;
	src: local('Frutiger LT Std 75 Black'), url('/fonts/kantinescan/FrutigerLTStd-Black.woff') format('woff');
}
/* Archer */
@font-face {
	font-family: 'Archer';
	font-style: normal;
	font-weight: bold;
	src: local('Archer Bold'), url('/fonts/kantinescan/Archer-Bold-Pro.woff') format('woff');
}

/* kantinescan colors */
:root {
	/* Primary color */
	--primary_color: #2ea9dc;
	--primary_color_tint: #229cce;
	--primary_color_light: #70c4e7;

	/* Secondary color */
	--secondary_color: #4EAF46;
	--secondary_color_tint: #41a239;

	/* Health colors (Schijf van Vijf) */
	--imported_product: #b8000d;
	--health_green: #50B848;
	--health_yellow: #FFDD00;
	--health_orange: #F7941E;
	--health_unknown: #D5D9DC;

	--error_color: #ed1c24;
	--light_grey: #F4F7F9;
	--dark_grey: #A6AEB6;
	--carbon_grey: #353535;
	--lignite_grey: #292C2F;
	--green_yellow: #50B848;
}
/*
 * CSS variables
 */
:root {
	/* An accent or fade-out color */
	--accent_color: hsv(0, 0%, 94%);
	/* Used for situations where a light tint is desired  */
	--subtitle_color: #4a4a4a;
	/* Color used for success messaging. */
	--success_color: #50B848;
	/* Color used for error messaging. */
	--error_color: #d21129;

	/*
	 * Size variables
	 */

	--sidebar_width: 275px;
	--topbar_height: 80px;
	--main_padding: 35px;
}

#pattern {
	/*box-shadow: 0 15px 30px 0 grey;*/
	max-width: 100%;
	box-shadow: 0 4px 8px 2px rgba(28, 28, 28, 0.2);
	z-index: 10;
}


/*
 * Regularly used fonts
 */
@font-face {
    font-family: 'montserrat_extralight';
    src: url('/fonts/Montserrat-ExtraLight.ttf');
}

@font-face {
    font-family: 'montserrat_italic';
    src: url('/fonts/Montserrat-Italic.ttf');
}

@font-face {
    font-family: 'montserrat_light';
    src: url('/fonts/Montserrat-Light.ttf');
}

@font-face {
    font-family: 'montserrat_medium';
    src: url('/fonts/Montserrat-Medium.ttf');
}

@font-face {
    font-family: 'montserrat_regular';
    src: url('/fonts/Montserrat-Regular.ttf');
}

@font-face {
    font-family: 'montserrat_bold';
    src: url('/fonts/Montserrat-Bold.ttf');
}
/*
 * General styling of the main elements
 */
html,body
{
    font-family: Frutiger, sans-serif;
    background-color: var(--accent_color);
}

/** Topbar styling */
#topbar {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: white;
    z-index: 10;
}

#topbar-flex-container {
    display: flex;
    align-items: center;
    height: var(--topbar_height);
    padding-left: var(--main_padding);
    padding-right: var(--main_padding);
    justify-content: flex-end;

    /* Animation */
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
}

#repeating-pattern {
	height: 10px;
	width: 100%;
	background: url('/img/backend/zuurstok.svg') bottom center;
	box-shadow: 0 4px 8px 2px rgba(28, 28, 28, 0.2);
}

#breadcrumbs, #logout{
    color: black !important;
    font-size:20px;
}

#logged-in-as {
    color: black;
    padding-right: 25px;
}

#logged-in-as span:first-child {
    font-family: Frutiger-light, sans-serif;
}

#logged-in-as span:nth-child(2) {
    font-family: Frutiger, sans-serif;
}

#logout, .navbar-toggler, #logged-in-as {
    justify-content: flex-end;
}

.navbar-toggler {
    display:none;
}

#sidebar-toggler{
    display:none;
    margin-right: -15px;
    padding-right: 15px;
    margin-left: 20px;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: .25rem;
    cursor: pointer;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox='0%200%2030%2030'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20stroke='rgba(0,%200,%200,%2001)'%20stroke-width='2'%20stroke-linecap='round'%20stroke-miterlimit='10'%20d='M4%207h22M4%2015h22M4%2023h22'/%3E%3C/svg%3E");
}

/** Main styling */
main {
    display: flex;
    margin-left: var(--sidebar_width);
    margin-top: var(--topbar_height);
    flex: 1;

    /* Animation */
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
}

#main-flex-container {
    display: flex;
    overflow: hidden;
    padding: var(--main_padding);
    flex-direction: column;
    flex: 1;
}

/** Sidebar styling */
#sidebar {
    position: fixed;
    top: 0;
    height: 100vh;
    width: var(--sidebar_width);
    background-color: #F4F7F9;
    padding-top: calc(var(--topbar_height) + 20px);
    z-index: 5;

    /* Animation */
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
}

#sidebar-flex-container {
    height: 100%;
    display: flex;
    flex: 1;
    flex-direction: column;
}

#side-menu {
    height: 100%;
    max-height: calc(100% - 165px);
    overflow-y: auto;
}

#sidebar li {
    border-bottom: 1px solid #e7e7e7;
}

#brand-box:hover, #page-header, #logout {
    text-decoration: none;
}

#brand-box {
    margin-right: 100px;
}

#menu-header {
	width: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.logo-image {
	width: var(--sidebar_width)
}

#brand-head{
    padding-top: 15px;
    color: var(--primary_color) !important;
    font-size: 20px;
    font-family: Frutiger, sans-serif;
    text-align: center;
    text-shadow: 0.5px 1px 0.75px rgba(0,0,0,0.3);
}

#brand-subhead{
    font-size: 14px;
    font-family: Frutiger, sans-serif;
    text-align: center;
    padding-bottom: 15px;
    color: black;
}

.nav-link {
    color: #292C2F;
    -o-transition:0.15s;
    -moz-transition:0.15s;
    -webkit-transition:0.15s;
    transition:0.15s;
    padding: 15px 15px 15px 30px !important;
    font-size: 16px;
    font-family: Frutiger-light, sans-serif;
}

.nav-link:hover {
    color: white !important;
    text-shadow: 0 0 0.25px grey;
    background-color: var(--primary_color);
}

.menu-icon {
    font-size: 18px;
    padding-right: 30px;
}

/* Breadcrumbs styling */
ul#breadcrumbs li {
    display: inline;
}

#breadcrumbs {
    color: black;
    padding-top: 0;
    padding-left: 0;
    margin-right: auto;
    margin-bottom: 0;
}

#breadcrumbs > li > a {
    color: black;
    text-decoration: none;
}

/** Brand logo in the bottom left */
.menu-logo {
    position:absolute;
    padding-left: calc(var(--sidebar_width) / 2 - 77px); /* 144 is the width of the image */
    padding-bottom: 15px;
    bottom: 0;
}
div.flex-space {
    display: inline-flex;
    justify-content: space-between;
    align-content: space-between;
    width: 100%;
}

/*
 * Styling for input elements
 */
input[type=text]:not(.full-input), input[type=password]:not(.full-input), input[type=search]:not(.select2-search__field), input[type=number], .select2-selection, textarea {
    font-family: montserrat_extralight, sans-serif;
    border-radius:30px !important;
    border-style: none !important;
    box-shadow: 1px 2px 3px lightgrey, -1px 2px 3px lightgrey;
    transition: box-shadow 0.15s ease-in-out;
}


input[type=text]:not(.full-input), input[type=password]:not(.full-input), input[type=search]:not(.select2-search__field), input[type=number] {
    line-height: 32px;
}

/* Hide step counter input type number */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}


.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 34px;
}

.select2-container--default .select2-selection--single {
    height: 34px;
}

.select2-selection__arrow {
    height: 30px !important;
}


input[type=text]:not(.full-input), input[type=password]:not(.full-input), input[type=search]:not(.select2-search__field), input[type=number], textarea, .select2-selection__rendered {
    padding-left: 13px;
    padding-right: 13px;
}

input[type=text]:not(.full-input):focus, input[type=password]:not(.full-input):focus, input[type=search]:focus, input[type=number]:focus, .select2-selection[aria-expanded=true], textarea:focus {
    border-color: var(--primary_color);
    box-shadow: 0 0 8px var(--primary_color) !important;
    outline: none;
}

textarea {
    height: 106px !important;
    border-radius:7px !important;
    padding-top: 5px;
    padding-bottom: 5px;
    transition: box-shadow 0.15s ease-in-out;
}

select {
    border-radius: 30px !important;
    border-style: none !important;
    box-shadow: 1px 2px 3px lightgrey, -1px 2px 3px lightgrey;
    transition: box-shadow 0.15s ease-in-out;
}

select:focus {
    border-color: var(--primary_color);
    box-shadow: 0 0 8px var(--primary_color) !important;
    outline: none;
}

.select2-selection {
    outline: none;
}

.select2-results__option {
    text-align: left;
    margin-top: 0;
    padding-left: 7px;
}

.select2-container--default .select2-results__option--highlighted {
    background-color: var(--primary_color) !important;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--secondary_color);
    color:white;
}

/**Datepicker styling */
.bootstrap-datetimepicker-widget th, .bootstrap-datetimepicker-widget td {
    padding: 5px;
}

.bootstrap-datetimepicker-widget .today:not(.active)::before {
    border-bottom-color: var(--primary_color) !important;
}

.bootstrap-datetimepicker-widget .active{
    background-color: var(--primary_color) !important;
}

.bootstrap-datetimepicker-widget .picker-switch {
    padding-top: 7.5px;
    padding-bottom: 7.5px;
}

.bootstrap-datetimepicker-widget a {
    color: var(--primary_color);
}

.timepicker {
    margin-top: 7px;
}

/*
 * Styling for the DataTables
 */
.dataTable {
    border-spacing: 0 7px !important;
    border-bottom: 0 !important;
}

/* Table headers */
.dataTable > thead th {
    border-bottom: 0 !important;
    font-family: Frutiger-light, sans-serif;
    background-color: #F4F7F9;
}

/* Table cells */
.dataTable > tbody tr, .dataTable > thead tr {
    font-family: Frutiger-light, sans-serif;
    /** It is better to color the cells instead of the rows */
    /*background-color: var(--accent_color) !important;*/
}

/* Styling specific to sorted columns */
.dataTable th.sorting_asc, .dataTable th.sorting_desc {
    font-family: frutiger-bold, sans-serif;
}

.dataTable td.sorting_1 {
    font-family: frutiger-light, sans-serif;
}

/*Rounding each table row */
.dataTable tr td:first-child, tr th:first-child {
    border-radius: 15px 0 0 15px;
    -moz-border-radius: 15px 0 0 15px;
}
.dataTable tr td:last-child, tr th:last-child {
    border-radius: 0 15px 15px 0;
    -moz-border-radius: 0 15px 15px 0;
}

.dataTables_empty {
    border-radius: 15px 15px 15px 15px !important;
}

/* The 'Show x entries' section */
.dataTables_length {
    margin-top: 4px;
}

.dataTables_length .select2-container {
    margin-left: 3px;
    margin-right: 3px;
    width: 55px !important;
}

/** Styling for Questions Page */
.colored-bold-highlight {
    font-weight: bold;
    color: #DC0D15
}

.form-question-list {
    position: absolute;
    left: 20rem;
    margin-top: 4rem;
    width: 75%;
}

.danger-shadow {
    box-shadow: 0 0 15px #FF0000 !important;
}

.delete-column {
    position: absolute;
    right: 3%;
    z-index: 10;
}

.delete-answer,
.delete-icon {
    position: absolute;
    right: 3%;
    z-index: 10;
}

.width-25 {
    width: 25%;
}

.hr-style {
    border: 0;
    clear: both;
    display: block;
    width: 100%;
    background-color: #eb3939;
    height: 1px;
}

.question {
    display: grid;
    grid-row-gap: 1rem;
    padding-bottom: 1.5rem;
}

.question-input {
    margin-left: 1rem;
    width: 90%;
    display: inline;
    position: inherit;
}

label[for="question[]"],
label[for="newQuestions[]"] {
    font-weight: 400;
    font-size: 24px;
}

#add-question {
    width: 25%;
    margin-bottom: .5rem;
}

.add-question-div {
    display: flex;
    margin-top: 1rem;
}

.answer {
    display: grid;
    row-gap: 1rem;
}

label[for="answer[]"],
label[for="newAnswer[]"]{
    font-weight: 400;
    font-size: 24px;
}

.add-answer {
    width: 25% !important;
    margin-top: 1.5rem;
    margin-bottom: .5rem;
}

.answers-order {
    margin-bottom: 1rem;
    width: 25%;
}


.small-margin {
    margin: 1rem 0;
}

/** Paginate buttons */
.dataTables_wrapper .dataTables_paginate {
    border-radius: 5px;
    padding: 0 !important;
    margin-top: 10px !important;
    border: 1px solid #ddd !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--primary_color) !important;
    margin: 0 !important;
    border-right: 1px solid #ddd !important;
}

/** On hover non-disabled paginate buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: white !important;
    background: none;
    background-color: var(--secondary_color) !important;
    border-color: var(--secondary_color) !important;
}

/** On hover disabled paginate buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background: none;
    margin: 0 !important;
    border-color: #ddd !important;
    background-color: #eee !important;
    border-right: 1px solid #ddd !important;
}

/** Current pagination button normal and on hover */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: none;
    color: #ffffff !important;
    border-color: var(--primary_color) !important;
    background-color: var(--primary_color) !important;
    cursor: default !important;
}

/*
 * Button styling.
 * Whenever you use buttons, use at least class button and one of the below.
 *
 * button-success is used for actions with a positive expectation.
 * button-fail is used for negative actions
 * button-cancel is used for neutral actions.
 */
.button {
    padding: 7px 18px;
    border-radius: 20px;
    border-style: none;
    cursor: pointer;
    font-family: Frutiger, sans-serif !important;
    text-transform: uppercase;
    width: 125px;
    height: 40px;
}

.button-success {
    background-color: var(--primary_color);
    color: white; !important;
}

.button-cancel {
    background-color: white;
    border: 1px solid var(--primary_color);
    color: var(--primary_color);
}

.button-fail {
    background-color: var(--error_color);
    color: white;
}

/* Overwriting some bootstrap button styling */
.btn-info {
    background-color: var(--primary_color);
    border-color: var(--primary_color);
}

.btn-info:hover {
    background-color: #237da5;
    border-color: #237da5;
}

.btn-success {
    background-color: #50B848;
    border-color: #50B848;
}

/*
 * Modal styling
 */

.modal form {
    margin: 0 auto;
}

.modal input[type=text], .modal input[type=number], .modal input[type=password], .modal textarea, .modal .select2-container {
    width: 100% !important;
    margin-bottom: 15px;
}

.modal-header {
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 2rem;
    border-bottom: 0;
}

.modal-body {
    padding-left: 2rem;
    padding-right: 2rem;
}

.modal-title {
    font-family: montserrat_bold, sans-serif;
    text-transform: uppercase;
}

/* Center the buttons in the footer*/

.modal-footer {
    justify-content: center;
    padding-bottom: 25px;
    border-top: none;
}

.modal-footer * {
    margin-left: 12px !important;
    margin-right: 12px !important;
}

.modal-error {
    color: var(--error_color);
    font-family: montserrat_extralight, sans-serif;
}

/*
 * Flash session message styling
 */
.alert-danger{
    color: white;
    border-radius: 0;
    margin-bottom: 10px !important;
    background-color: var(--error_color);
    border: none;
}

.alert-success{
    color: white;
    border-radius: 0;
    margin-bottom: 10px !important;
    background-color: var(--success_color);
    border: none;
}

.alert-warning{
    color: white;
    border-radius: 0;
    margin-bottom: 10px !important;
    background-color: rgba(242, 146, 13, 0.7);
    border: none;
}

.alert-info{
    color: white;
    border-radius: 0;
    margin-bottom: 10px !important;
    background-color: rgba(42, 143, 215, 0.70);
    border: none;
}

/**
 * Image Upload styling
 */
.image-holder > img{
    width: 100%;
    margin-bottom: 15px;
}

label.custom-file-upload input[type="file"] {
    position: fixed;
    top: -1000px;
}

.custom-file-upload {
    display: block;
    width: 150px;
}
.forgot-password-close{
	float: right;
	cursor: pointer;
	margin-top: -35px;
	margin-right: -20px;
}

/*
 * Loading icons
 */
#loading-icon {
    top:calc(50% - 50px);
    position:absolute;
    left:calc(50% - 50px);
    border-radius: 50%;
    width: 100px;
    height: 100px;
    animation: spin ease-in-out 0.5s infinite;
    display: none;
    border: 16px solid var(--secondary_color); /* Light grey */
    border-top: 16px solid var(--primary_color);
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/*
* edit question form styling
*/
.question-question-input{
	margin-bottom: 20px;
	width: 90%;
}

.question-answer-input{
	margin-left: 10px;
	margin-bottom: 20px;
	width: 90%;
}
.question-images{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.question-image{
}
.edit-question-image{
	position: relative;
	width: 40%;
	margin-top: 20px;
	margin-right: 20px;
	border-radius: 20px;
}
.questions-save-button{
	float: left;
}
.question-tab{
	padding: 2.1px;
	padding-right: 10px;
	padding-left: 10px;
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
	background-color: #FFFFFF;
	border:1px solid;
	border-color: #E7E7E7;
	border-bottom: none;
	color: black;
	text-decoration: none;
	text-align: center;
}
.question-tab:Hover{
	text-decoration: none;
	background-color: #2EA9DC;
	color: #fff;
}
.tab-content{
	margin-top: 20px;
}
.active{
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
	z-index: 2;
	background-color: #2EA9DC;
	border: none;
	color: #fff;
}
.example-text-questions{
	width: 70%;
	font-weight: unset;
	font-size: 14px;
}
/*
 * Media Queries
 * Media Queries
 * Media Queries
/*
\
/*
 * Media query large size: < 1280px width
 */
@media screen and (max-width:1280px){
    #sidebar-toggler {
        display: block;
    }
    main, #topbar-flex-container {
        margin-left: 0;
    }
    #logged-in-as {
        display: none;
    }
}
/*
 * Media query medium size: < 770px width
 */
@media screen and (max-width:770px){
    .create-button {
        margin: 15px auto 0;
    }
}

/*
 * Media query small size < 525px.
 */
@media screen and (max-width:525px){
}