.logo-image
{
    background-image: url('../img/triggre_logo.png?064984BE8762028D7CEEB04803B79931');
}
.logo-image.auth
{
    background-image: url('../img/triggre_logo_auth.png?064984BE8762028D7CEEB04803B79931');
}

.preview-64 { width: 64px; height: 64px; }.preview-256 { width: 256px; height: 256px; }
.logo-image
{
    background-image: url('../img/triggre_logo.png?064984BE8762028D7CEEB04803B79931');
}
.logo-image.auth
{
    background-image: url('../img/triggre_logo_auth.png?064984BE8762028D7CEEB04803B79931');
}

.preview-64 { width: 64px; height: 64px; }.preview-256 { width: 256px; height: 256px; }
.logo-image
{
    background-image: url('../img/triggre_logo.png?064984BE8762028D7CEEB04803B79931');
}
.logo-image.auth
{
    background-image: url('../img/triggre_logo_auth.png?064984BE8762028D7CEEB04803B79931');
}

.preview-64 { width: 64px; height: 64px; }.preview-256 { width: 256px; height: 256px; }
.logo-image
{
    background-image: url('../img/triggre_logo.png?928E8B3D4CA754BE9F6BBA485275076F');
}
.logo-image.auth
{
    background-image: url('../img/triggre_logo_auth.png?928E8B3D4CA754BE9F6BBA485275076F');
}

.preview-64 { width: 64px; height: 64px; }.preview-256 { width: 256px; height: 256px; }
.logo-image
{
    background-image: url('../img/triggre_logo.png?928E8B3D4CA754BE9F6BBA485275076F');
}
.logo-image.auth
{
    background-image: url('../img/triggre_logo_auth.png?928E8B3D4CA754BE9F6BBA485275076F');
}

.preview-64 { width: 64px; height: 64px; }.preview-256 { width: 256px; height: 256px; }
.logo-image
{
    background-image: url('../img/triggre_logo.png?928E8B3D4CA754BE9F6BBA485275076F');
}
.logo-image.auth
{
    background-image: url('../img/triggre_logo_auth.png?928E8B3D4CA754BE9F6BBA485275076F');

}

.preview-64 { width: 265px; height: 2em;!important}.preview-256 { width: 256px; height: 256px; }

/* Header font*/
/* cyrillic */
@font-face {
  font-family: 'Yanone Kaffeesatz';
  font-style: normal;
  font-weight: 400;
  src: local('Yanone Kaffeesatz Regular'), local('YanoneKaffeesatz-Regular'), url(https://fonts.gstatic.com/s/yanonekaffeesatz/v9/3y976aknfjLm_3lMKjiMgmUUYBs04Y8fH-qVHQ.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Yanone Kaffeesatz';
  font-style: normal;
  font-weight: 400;
  src: local('Yanone Kaffeesatz Regular'), local('YanoneKaffeesatz-Regular'), url(https://fonts.gstatic.com/s/yanonekaffeesatz/v9/3y976aknfjLm_3lMKjiMgmUUYBs04Y8UH-qVHQ.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Yanone Kaffeesatz';
  font-style: normal;
  font-weight: 400;
  src: local('Yanone Kaffeesatz Regular'), local('YanoneKaffeesatz-Regular'), url(https://fonts.gstatic.com/s/yanonekaffeesatz/v9/3y976aknfjLm_3lMKjiMgmUUYBs04Y8VH-qVHQ.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Yanone Kaffeesatz';
  font-style: normal;
  font-weight: 400;
  src: local('Yanone Kaffeesatz Regular'), local('YanoneKaffeesatz-Regular'), url(https://fonts.gstatic.com/s/yanonekaffeesatz/v9/3y976aknfjLm_3lMKjiMgmUUYBs04Y8bH-o.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Regular font*/
/* cyrillic-ext */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: local('PT Sans'), local('PTSans-Regular'), url(https://fonts.gstatic.com/s/ptsans/v9/jizaRExUiTo99u79D0-ExdGM.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: local('PT Sans'), local('PTSans-Regular'), url(https://fonts.gstatic.com/s/ptsans/v9/jizaRExUiTo99u79D0aExdGM.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: local('PT Sans'), local('PTSans-Regular'), url(https://fonts.gstatic.com/s/ptsans/v9/jizaRExUiTo99u79D0yExdGM.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: local('PT Sans'), local('PTSans-Regular'), url(https://fonts.gstatic.com/s/ptsans/v9/jizaRExUiTo99u79D0KExQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/*
    Standard color changes for Triggre
*/

/* Set font */
body,
html,
pre {
    font: normal 12pt / 20pt 'PT Sans', sans-serif;
    color: #151516;
}

h1,
h2,
h3,
h4,
h5,
h6
{
    font-family: 'Yanone Kaffeesatz', sans-serif;
    color: #7e2d7a;
}
button,
input,
optgroup,
select,
textarea,
#menu a,
#menu a:link,
#menu a:visited,
#menu a:focus,
#menu .level-2,
#menu .level-2 > li,
#menu .level-2 .level-3 li,
#context-bar button,
#context-bar button:active,
#context-bar button:focus,
#context-bar button:visited {
    font-family: 'PT Sans', sans-serif;
}

/* Set body color */
body {
    background: #ececec;
}

/*Menu font size and weight aangepast*/
#menu a,
#menu a:link,
#menu a:visited,
#menu a:focus {
    font-size: 16.5pt;
    color: #555;
	letter-spacing: 0px;
	font-family: 'Yanone Kaffeesatz', sans-serif;
	line-height: 55px;
}
/*Menu font size and weight kleur aangepast*/
#menu .level-2 > li {
    font-size: 16.5pt;
    font-weight: normal;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    text-indent: 14px;
    background: #ffffff;
    padding-bottom: 0;
    line-height: 46px;
    color: #555;
}
#menu .level-2 a,
#menu .level-2 a:link,
#menu .level-2 a:visited,
#menu .level-2 a:focus {
    font-size: 12pt;
    font-weight: normal;
    font-family: 'PT Sans', sans-serif;
    text-indent: 24px;
    line-height: 48px;
    transition: background-color .2s ease-out, color .2s ease-out;
}

/* Page title font size kleur aangepast */
#title {
    font-size: 21pt;
    font-weight: normal;
    background: #ffffff;
    height: 46px;
    left: 310px;
    top: 134px;
    padding: 10px 14px;
	letter-spacing: 0px;
}

/* User name and sign out font size */
#user {
    font-size: 12pt;
}

/* General link color */
a,
a:link,
a:visited,
a:focus {
    color: #7e2d7a;
}

/* General link color when hovered */
a:hover {
    color: #7e2d7a;
}

/* Link in selected grid cell color, when hovered */
.k-state-selected td[role="gridcell"] a:hover {
    color: #7e2d7a;
}

/* Main header Kleur aangepast*/
#header {
    background-color: #ffffff;
}

/* Color of the open menu link on mobile */
.mobile #open-menu {
        color: #67686e;
}

/* Main header user name color */
#user .user-name {
    color: #67686e;
}

/* Main header log out color */
#user a,
#user a:active,
#user a:visited {
    color: #67686e;
}

/* Main header log out color when hovered */
#user a:hover {
    color: #7e2d7a;
}

/* Section menu background */
#menu {
    background-color: #fff;
   box-shadow: none;
}

/* Shadow on menu and content*/
/*html:not(.mobile) #menu .level-2 {
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);*/
}
html:not(.mobile) #content {
    overflow: hidden;
    width: auto;
    height: auto;
    position: absolute;
    left: 310px;
    top: 134px;
    bottom: 20px;
    right: 20px;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    background: transparent;
    /*box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);*/
}

/* Rounded corners on menu and content */
html:not(.mobile) #menu .level-2 {
    border-radius: 4px;
}
html:not(.mobile) #title {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
html:not(.mobile) #context-bar,
html:not(.mobile) #content {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

/* Active section underline */
#menu .level-1>li.current {
    border-bottom: 3px solid #7e2d7a;
}

/* Section link color */
#menu a:hover {
    color: #7e2d7a;
}

/* Side menu links kleur aangepast*/
#menu .level-2 a:hover,
#menu .level-2 a:active {
    color: #ffffff;
    background: #e1e1e1;
}

/* Active side menu link */
#menu .level-2 .current a,
#menu .level-2 .current a:link,
#menu .level-2 .current a:hover,
#menu .level-2 .current a:visited,
#menu .level-2 .current a:focus,
#menu .level-2 .current a:active {
    font-weight: normal;
    color: #fff;
    background: #7e2d7a;
}

/* Context bar Bottom height */
#context-bar {
    box-shadow: none;
    background-color: #ffffff;
    right: 20px;
    left: 20px;
    bottom: 20px;
    z-index: 4;
    min-width: 480px;
    height: 48px;
    padding-left: 0px;
    padding-right: -16px;
    padding-top: 0;
    padding-bottom: 0;
}

/* Context bar button color, including login button */
#context-bar button,
#context-bar button:active,
#context-bar button:focus,
#context-bar button:visited,
#auth .auth-control .footer .btn {
    background-color: #7e2d7a;
	font-size: 10pt;
	text-transform: uppercase; 
}

/* Context bar button hover color, including login button */
#context-bar button:hover,
#context-bar button:active:hover,
#context-bar button:focus,
#context-bar button:focus:hover,
#context-bar button:visited:hover,
#auth .auth-control .footer .btn:hover {
    background-color: #7e2d7a;
	   
}

/* Format help texts */
.form .help {
    padding-right: 100px;
	font-weight: normal;
}

/************************
  Loading animation color
************************/
.k-loading-image {
    border-top: 3px solid rgba(22, 140, 217, 0.2);
    border-right: 3px solid rgba(22, 140, 217, 0.2);
    border-bottom: 3px solid rgba(22, 140, 217, 0.2);
    border-left: 3px solid rgba(22, 140, 217, 1.0);
}

/************
  Auth screen
************/

/* Logo alignment */
#auth .auth-control .header .logo {
    background-position: 0% 50%;
    /*background: url(https://cdn.triggre.com/ibki/ibki-logo.jpg) no-repeat;*/
    margin: 32px 40px;
    width: 200px;
}

/* Hover transition for sign in button */
#auth .auth-control .footer .btn {
    transition: background-color .2s ease-out;
}

/* Hide auth header */
#auth .title {
    display: none;
}

/* Set auth control size */
#auth .auth-control {
    /* min-height: 360px; */
}

/* Login background */
#auth .decorator {
    background-image: url("https://cdn.triggre.com/itq4y/achtergrondafbeelding.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}

/* Login header background */
#auth .auth-control .header {
    height: 80px;
    background: #fff;
}

/* Login title color */
#auth .auth-control .header .title {
    color: #67686e;
}


/************
  Form colors
************/

/* Form element hover and focused colors */
input[type="email"]:hover,
input[type="text"]:hover,
input[type="password"]:hover,
input[type="email"]:focus,
input[type="text"]:focus,
input[type="password"]:focus,
.form .type-lookup .editor .current:hover,
.k-textbox:hover,
.k-overflow-anchor:hover,
.k-autocomplete.k-state-hover,
.k-picker-wrap.k-state-hover,
.k-numeric-wrap.k-state-hover,
.k-dropdown-wrap.k-state-hover .k-textbox.k-state-default:hover,
.k-overflow-anchor.k-state-default:hover,
.k-autocomplete.k-state-default.k-state-hover,
.k-picker-wrap.k-state-default.k-state-hover,
.k-numeric-wrap.k-state-default.k-state-hover,
.k-dropdown-wrap.k-state-default.k-state-hover,
.k-textbox:focus,
.k-autocomplete.k-state-focused,
.k-picker-wrap.k-state-focused,
.k-numeric-wrap.k-state-focused,
.k-dropdown-wrap.k-state-focused,
.k-multiselect.k-header.k-state-focused {
    border-color: #7e2d7a;
}

/* Selected dropdown item color */
.k-scheduler-layout .k-state-selected,
.k-scheduler .k-today.k-state-selected,
.k-grid tr.k-state-selected,
.k-grid td.k-state-selected,
.k-grid td.k-state-selected.k-state-focused,
.k-marquee-color,
.k-gantt .k-treelist .k-state-selected,
.k-gantt .k-treelist .k-state-selected td,
.k-gantt .k-treelist .k-alt.k-state-selected,
.k-gantt .k-treelist .k-alt.k-state-selected>td,
.k-listview > .k-state-selected,
.k-state-selected.k-line {
    background-color: #7e2d7a;
}
/* Selected dropdown item color when hovered */
.k-grid td.k-state-selected:hover,
.k-grid tr.k-state-selected:hover td {
    background-color: #7e2d7a;
    color: #fff;
}

/* Grid cells transition Padding 2em aangepast*/
.k-grid td,
.k-grid tr {
    transition: background-color .2s ease-out, color .2s ease-out;

}

/* Logo positioning correction */
#auth .auth-control .header .logo,
#header #logo a,
.mobile #context-bar.menu-open
.buttons-header .logo a {
    background-size: contain;
    background-image: url(https://cdn.triggre.com/itq4y/CRISlogo_giga.jpg);
}
/* Position mobile lookup correctly */
.mobile .form .type-lookup .editor .list-popup {
    top: 108px;
}
/* Prevent mobile header from moving */
.mobile #header {
    position: fixed;
}



/*
    Extra CSS changes for IBKI
*/

/* Show menu item always */
#menu .level-1>li:first-child:last-child>a {
    display: block;
}

/* Position and color of menu */
#menu .level-2 {
    bottom: 20px;
    left: 20px;
    background: #f7f7f7;
    padding: 0px;
}
#menu .level-3 {
    background: #f7f7f7;
    padding: 0px;
}

/* Position and color of main content*/
#inner {
    bottom: 64px;
    left: 310px;
    right: 20px;
    background: #f7f7f7;
}
.mobile #inner {
    top: 110px;
}

/* Padding for forms Padding bottom */
#inner .form {
    padding: 0px 16px 16px 16px;
}

/* Change search input */
input[type="text"].simple-search,
input[type="text"].simple-search:hover,
input[type="text"].simple-search:focus {
    border: none;
    background: transparent;
    border-radius: 0;
    border-bottom: 3px solid #7e2d7a;
}

/* Change advanced search button color */
.search-box .open-advanced,
.search-box .close-advanced,
.search-box .open-search {
    color: #7e2d7a;
    transition: color .2s ease-out;
}
.search-box .open-advanced:hover,
.search-box .close-advanced:hover,
.search-box .open-search:hover {
    color: #7e2d7a;
}
html:not(.mobile) .search-box .open-advanced:before,
html:not(.mobile) .search-box .close-advanced:before {
    line-height: 29px;
    margin: .35em .35em .35em 0;
    width: 32px;
    height: 32px;
}
html:not(.mobile) .search-box .open-advanced:before {
    border-bottom: 3px solid transparent;
}
html:not(.mobile) .search-box .close-advanced:before {
    border-bottom: 3px solid transparent;
}

/* Link color for selected rows */
.k-state-selected td[role="gridcell"] a:link {
    color: #fff;
}
.k-state-selected:hover td[role="gridcell"] a:link {
    color: #fff;
}
.k-state-selected td[role="gridcell"] a:link:hover {
    color: #287798;
}

/* Kendo text color aangepast */
.k-block,
.k-widget,
.k-popup,
.k-content,
.k-dropdown .k-input {
    color: #000000;
}


/* Table row color */
.k-grid table {
    background: transparent;
}

/* Text color of selected table row kleur aangepast*/
.k-grid tr.k-state-selected,
.k-grid td.k-state-selected,
.k-listview>.k-state-selected,
.k-state-selected .k-progress-status {
    color: #ffffff;
}

.k-grid-header .k-header .k-link,
.k-grid-header .k-header,
.k-grid-header .k-link,
.k-grid-header .k-link:link,
.k-pager-info,
.k-scheduler-header,
.k-scheduler-agendaview .k-scheduler-datecolumn {
    color: #000000;
}


/* Adjust title on mobile */
.mobile #title {
    right: 0;
    left: 0;
    top: 64px;
}

/* Adjust context bar on mobile */
.mobile #context-bar {
    left: 0;
    right: 0;
    bottom: 0;
}

/* Color mobile button */
.mobile #context-bar .show-menu,
.mobile .search-box.advanced-filled .open-advanced {
    color: #67686e;
}
.mobile .search-box.opened .close-search,
.mobile .search-box.opened .open-advanced {
    color: #67686e;
}
.mobile .search-box .open-advanced,
.mobile .search-box .close-advanced,
.mobile .search-box .open-search {
    color: #67686e;
}
.mobile .search-box .open-advanced:hover,
.mobile .search-box .close-advanced:hover,
.mobile .search-box .open-search:hover {
    color: #67686e;
}
.mobile .search-box {
    background: #ffffff;
}

/* Mobile menu changes */
.mobile #header.menu-shown #menu .level-2 {
    padding-left: 0;
}
.mobile #menu .level-2 > li {
    text-indent: 10px;
}
.mobile #menu .level-2 a,
.mobile #menu .level-2 a:link,
.mobile #menu .level-2 a:visited,
.mobile #menu .level-2 a:focus {
    text-indent: 24px;
}
.mobile #header.menu-shown #menu .level-1>li>a {
    text-transform: uppercase;
}

/* Hide logo in mobile menu */
.mobile #header.menu-shown #logo a {
    display: none;
}

/* Mobile logo size */
.mobile #header #logo a {
    width: 128px;
    height: 36px;
}

@media only screen and (max-width: 1056px)  {
    .form .name {
        display: inline;
        text-indent: 2px;
    }
}

/* Make form descriptions show new lines */
.form .description {
    white-space: pre-line;
    margin: 0;
    margin-bottom: 16px;
}

/* Text spacing for content */
#inner p {
    padding: 0 16px;
}

/* Make sure preformatted text has the correct color in grids aangepast van fff naar ffffff */
.k-grid tr.k-state-selected:not(:hover)>td pre {
    color: #ffffff;
}

/* Make long texts wrap */
pre.text-value {
    white-space: pre-line;
}

/* Error page content positioning aangepast van fff naar ffffff*/
body.error-page #inner {
    background: #fff;
}
html:not(.mobile) body.error-page #inner,
html:not(.mobile) body.error-page #title,
html:not(.mobile) body.error-page #content,
html:not(.mobile) body.error-page #context-bar {
    left: 20px;
}

/* Make text in dropdowns align correctly when nothing selected */
.editor .selection {
    line-height: 18px;
}

/* Translate empty drop down */
.editor .selection.empty {
    font-size: 0;
}
.editor .selection.empty:after {
    content: "Niets geselecteerd";
    font-size: 12pt;
    line-height: 30px; 
}

/* Make login button black instead of grey */
#auth .auth-control .custom .nap .providers .link.ibki {
    color: #000;
}

/* Payment link as button */
.portal-externen #c9_betalenval {
    background: #633786;
    color: #fff !important;
    font-weight: 500;
    font-size: 18px;
    padding: 4px 16px;
    border-radius: 20px;
    line-height: 36px;
    display:inline-block;
    cursor: pointer;
    transition: background 0.2s linear 0s;
}
.portal-externen #c9_betalenval a {
    color: #fff !important;
}
.portal-externen #c9_betalenval:hover {
    background: #502078;
}
/*Hover menu color*/
#menu .current a, #menu .current a:hover, #menu .current a:focus{
	color: #7e2d7a;
}
html:not(.mobile) #header{
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
	height: 112px;
}

/*
 * This CSS allows you to change font definitions in the your application.
 *
 * If you want to use Google fonts, you can simply import them. Select the font on Google Fonts and choose
 * import embed -> import. Then copy the @import line. For example, this would import Open Sans:
 * 
 *      @import url('https://fonts.googleapis.com/css?family=Open+Sans');
 * If you want to use other custom fonts, use the following code for manual import. Make sure the font files
 * are available over HTTPS.

@font-face {
    font-family: 'Proxima Nova';
    src: url('https://cdn.triggre.com/triggre/fonts/Proxima-Nova/ProximaNova-Semibold.woff2') format('woff2'),
         url('https://cdn.triggre.com/triggre/fonts/Proxima-Nova/ProximaNova-Semibold.woff') format('woff'),
         url('https://cdn.triggre.com/triggre/fonts/Proxima-Nova/ProximaNova-Semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

 *
 * NOTE: this template expects the default Triggre CSS template to be imported before it,
 * which can be done by adding the following line to your custom CSS:
 * 
 *      @import https://cdn.triggre.com/triggre/css/triggre-base.css
 */

/* latin-ext */
@font-face {
  font-family: 'Bree Serif';
  font-style: normal;
  font-weight: 400;
  src: local('Bree Serif Regular'), local('BreeSerif-Regular'), url(https://fonts.gstatic.com/s/breeserif/v7/4UaHrEJCrhhnVA3DgluA96Tp56N1.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bree Serif';
  font-style: normal;
  font-weight: 400;
  src: local('Bree Serif Regular'), local('BreeSerif-Regular'), url(https://fonts.gstatic.com/s/breeserif/v7/4UaHrEJCrhhnVA3DgluA96rp5w.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Set fonts */
body,
html,
pre {
    font: normal 16px / 20px font-family: 'Open Sans', sans-serif;;
}

h1,
h2,
h3,
h4,
h5,
h6
{
    font-family: "Bree Serif",sans-serif;
    font-weight: 600;
    text-transform: none;
}
button,
input,
optgroup,
select,
textarea,
#menu a,
#menu a:link,
#menu a:visited,
#menu a:focus,
#menu .level-2,
#menu .level-2 > li,
#menu .level-2 .level-3 li,
#context-bar button,
#context-bar button:active,
#context-bar button:focus,
#context-bar button:visited {
    font-family: "Bree Serif",sans-serif;
}

/* Menu font size and weight */
html:not(.mobile) #menu .level-1 > li > a {
    font-size: 18px;
    font-family: "Bree Serif", Arial, sans-serif;
    font-weight: 600;
}
#menu .level-2 > li {
    font-family: "Bree Serif",sans-serif;
    font-weight: 500;
}
html:not(.mobile) #menu .level-2 a,
html:not(.mobile) #menu .level-2 a:link,
html:not(.mobile) #menu .level-2 a:visited,
html:not(.mobile) #menu .level-2 a:focus {
    font-weight: normal;
    font-family: "Bree Serif", sans-serif;
}

/* Page title font size */
#title {
    font-family: "Bree Serif", sans-serif;
    font-weight: 500;
}

/* Font for the main page title on vertical scroll pages */
body[class*="_vscroll"] #menu > ul::before,
.error-page #menu > ul::before {
    font-family: 'Bree Serif', Arial, Tahoma;
}

/* Font for the page sub title on vertical scroll pages */
body[class*="_vscroll"] #menu > ul::after,
.error-page #menu > ul::after {
    font-family: 'Bree Serif', Arial, Tahoma;
}

/* Font for the login button on an error page */
.error-page #user a.login {
    font-family: "Bree Serif", sans-serif;
}

/* 
 * VERTICAL SCROLL PAGES
 * 
 * All pages that have 'vscroll' in their name in the Triggre designer, will place all content in such a way that
 * it is vertically scrollable. Also includes error pages.
 * 
 * NOTE: This is only compatible with form pages and (not tested) content pages.
 */

/* Make pages automatically show scroll bar */
html {
    overflow: initial;
}

/* Menu size dependent on contents on dekstop */
html:not(.mobile) body[class*="_vscroll"] #menu,
html:not(.mobile) .error-page #menu {
    height: auto;
}

/* Allow vertical scrolling in body */
body[class*="_vscroll"],
.error-page {
    overflow-y: auto;
    overflow-x: hidden;
}

/* Mobile header height depends on contents */
.mobile body[class*="_vscroll"] #header:not(.menu-shown) #header,
.mobile .error-page #header:not(.menu-shown) #header {
    height: auto;
}

/* Header positioning and color */
body[class*="_vscroll"] #header,
.mobile body[class*="_vscroll"] #header,
.error-page #header,
.mobile .error-page #header {
    background: #2c2d35;
    position: relative;
    box-shadow: none;
    height: auto;
}

/* Logo positioning and image */
body[class*="_vscroll"] #header #logo a,
.error-page #header #logo a {
    left: 24px;
    top: 30px;
    width: 260px;
    height: 120px;
    background: url('https://cdn.triggre.com/triggre/img/triggre-white.png');
    background-size: contain;
    background-repeat: no-repeat;
}

/* Logo positioning on mobile */
.mobile body[class*="_vscroll"] #header #logo a,
.mobile .error-page #header #logo a {
    left: 16px;
    top: 8px;
    width: 100px;
    height: 48px;
}

/* User link hover color (log in/out) */
body[class*="_vscroll"] #user a:hover,
.error-page #user a:hover {
    color: #f1d441;
    opacity: 0.9;
}

/* Header height on desktop */
html:not(.mobile) body[class*="_vscroll"] #menu,
html:not(.mobile) .error-page #menu {
    height: 636px;
    position: relative;
    top: 0;
    box-shadow: none;
    min-width: 0;
}

/* Header height on mobile */
.mobile body[class*="_vscroll"] #menu,
.mobile .error-page #menu {
    display: block;
    height: 200px;
}

/* Make a vertical scroll page show a nice image */
body[class*="_vscroll"] #menu > ul,
.error-page #menu > ul {
    background: url('https://cdn.triggre.com/triggre/img/homepage.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
    max-height: 227px;
    position: absolute !important;
    bottom: 36px !important;
    padding: 0;
    margin: 0;
    right: 0 !important;
    left: 0 !important;
    max-width: 100% !important;
}

/* Hide the content of the menu, other than the image */
.mobile body[class*="_vscroll"] #menu > ul,
.mobile .error-page #menu > ul {
    background: none;
    height: 0px;
}

/* Format the main page title. Add the title to 'content' here. */
body[class*="_vscroll"] #menu > ul::before,
.error-page #menu > ul::before {
    content: " ";
    position: absolute;
    color: #fff;
    font-weight: 700;
    font-size: 60px;
    line-height: 64px;
    margin: auto;
    display: block;
    width: 100%;
    text-align: center;
    top: -150px;
}

/* Format the main page title on mobile. */
.mobile body[class*="_vscroll"] #menu > ul::before,
.mobile .error-page #menu > ul::before {
    position: relative;
    font-size: 32px;
    line-height: 32px;
    top: -100px;
}

/* Format the page sub title. Add the title to 'content' here. */
body[class*="_vscroll"] #menu > ul::after,
.error-page #menu > ul::after {
    content: " ";
    position: absolute;
    color: #fff;
    font-weight: 600;
    font-size: 28px;
    line-height: 32px;
    margin: auto;
    display: block;
    width: 100%;
    text-align: center;
    top: -66px;
}

/* Format the page sub title on mobile. */
.mobile body[class*="_vscroll"] #menu > ul::after,
.mobile .error-page #menu > ul::after {
    position: relative;
    font-size: 20px;
    line-height: 24px;
    margin: 0px 8px;
    width: calc(100% - 16px);
    top: -88px;
}

/* Hide all other menus */
html body[class*="_vscroll"] #menu ul li,
html .error-page #menu ul li {
    display: none;
}

/* Position the page content */
body[class*="_vscroll"] #content,
.error-page #content {
    overflow-y: auto;
    overflow-x: hidden;
    margin-left: auto;
    margin-right: auto;
    max-width: 480px;
    width: auto;
    padding: 0;
}

/* Position the regular page title */
html body[class*="_vscroll"] #title,
html .error-page #title {
    display: inline-block;
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin-top: 32px;
    font-size: 24px;
    line-height: 28px;
    margin-bottom: 0px;
    white-space: normal;
}

/* Regular page title on mobile positioning */
.mobile body[class*="_vscroll"] #title,
.mobile .error-page #title {
    margin-left: 16px;
}

/* Position the inner content relative so it sizes correctly */
html body[class*="_vscroll"] #inner,
html .error-page #inner {
    position: relative;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

/* Add some padding to the inner content on mobile to make sure it doesn't touch the edges of the screen */
.mobile body[class*="_vscroll"] #inner,
.mobile .error-page #inner {
    padding-left: 16px;
    padding-right: 16px;
}

/* Format H1 titles in content pages */
html:not(.mobile) body[class*="_vscroll"] #inner h1,
html:not(.mobile) .error-page #inner h1 {
    margin-top: 32px;
    font-size: 24px;
    line-height: 28px;
    text-transform: none;
}

/* Format forms */
body[class*="_vscroll"] #inner .form {
    margin: 0;
    margin-top: 16px;
}

/* Format form fiels */
body[class*="_vscroll"] #inner .form .fields {
    min-width: 100px;
    overflow: hidden;
}

/* Format mobile form fields */
html:not(.mobile) body[class*="_vscroll"] #inner .form .field {
    margin: 4px 0;
}

/* Make labels fill entire width */
body[class*="_vscroll"] #inner .form .label {
    width: 100%;
}

/* Align form labels left and apply extra spacing below */
body[class*="_vscroll"] #inner .form .label label {
    text-align: left;
    margin-bottom: 4px;
}

/* Format form help text */
body[class*="_vscroll"] #inner .form .label .help {
    text-align: left;
    margin-left: 2px;
    width: 100%;
    color: #999A9E;
}

/* Format form validation text */
body[class*="_vscroll"] #inner .form .validation {
    text-align: left;
    margin-left: 2px;
    width: 100%;
    max-width: 480px;
}

/* Format the context bar to be at bottom of form and look as part of page */
body[class*="_vscroll"] #context-bar {
    position: relative;
    padding-left: 0;
    padding-right: 0;
    background: transparent;
    box-shadow: none;
    height: 80px;
}

/* Position the button placeholder in the context bar */
body[class*="_vscroll"] #context-bar .buttons {
    position: absolute;
    max-width: 480px;
    width: 100%;
    margin: auto;
    left: 0;
    right: 0;
    overflow-x: auto;
}

/* Format each button in the context bar*/
body[class*="_vscroll"] #context-bar .buttons button {
    float: right;
    margin-right: 20px;
    background: #f1d441;
    color: #000;
    border-radius: 6px;
    padding: 14px 26px 13px 10px;
    font-weight: 600;
    font-size: 18px;
    height: auto;
}

/* Mobile context bar buttons get different spacing */
.mobile body[class*="_vscroll"] #context-bar .buttons button {
    margin-right: 16px;
    margin-top: 16px;
}

/* Hover color of context bar buttons */
body[class*="_vscroll"] #context-bar .buttons button:hover {
    opacity: 0.9;
}

/*
 * TILE PAGES
 *
 * Create a tile page by adding 'tiles' to the name of a page in the designer. This is only compatible with content pages that have
 * no content, since all content will be hidden. The action buttons in the context bar will be used as tiles. The side menu is also
 * hidden (categories and user flows).
 * 
 * Alternatively, you can add 'tilesmenu' to the name of the page to include a side menu on your tiles page.
 */

/* Make mobile page scroll vertically in case of too many tiles */
html.mobile body[class*="_tiles"] {
    overflow-y: auto;
}

/* Place header on top of tiles so it can be clicked */
html body[class*="_tiles"] #header {
    z-index: 5;
}

/* Make header scroll with tiles on mobile */
html.mobile body[class*="_tiles"] #header {
    position: relative;
}

/* Hide side menu, contents and title */
html body[class*="_tiles"][class*="_nomenu"] #menu .level-2,
html body[class*="_tiles"] #title,
html body[class*="_tiles"] #inner {
    display: none;
}

/* Use context bar as tile container */
html body[class*="_tiles"] #context-bar {
    position: absolute;
    top: 0;
    bottom: 0px;
    height: auto;
    box-shadow: none;
    padding: 20px;
    padding-top: 168px;
    padding-right: 4px; /* 20 - 16 from the right margin of each tile */
    background: transparent !important;
    left: 0;
}

/* Spacing for side menu */
html:not(.mobile) body[class*="_tiles"]:not([class*="_nomenu"]) #context-bar {
    padding-left: 306px;
    padding-top: 134px;
}

/* Move tiles down to make space for header */
html.mobile body[class*="_tiles"] #context-bar {
    padding-top: 80px;
}

/* Make the tiles fill the entire width */
html body[class*="_tiles"] #context-bar .buttons {
    width: 100%;
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
    white-space: initial;
}

/*
 * Format tiles 
 */

/* 6 or more tiles per line without menu */
html body[class*="_tiles"][class*="_nomenu"] #context-bar .button { 
    width: calc(16.6% - 16px);
    min-width: 196px;
    height: 196px;
    transition: all .2s ease-out;
}

/* 5 tiles per line without menu */
@media only screen and (max-width: 1701px) { 
    html body[class*="_tiles"][class*="_nomenu"] #context-bar .button {
        width: calc(20% - 16px);
    }
}

/* 4 tiles per line without menu */
@media only screen and (max-width: 1367px) { 
    html body[class*="_tiles"][class*="_nomenu"] #context-bar .button {
        width: calc(25% - 16px);
    }
}

/* 3 tiles per line without menu */
@media only screen and (max-width: 871px) { 
    html body[class*="_tiles"][class*="_nomenu"] #context-bar .button {
        width: calc(33% - 16px);
    }
}

/* 2 tiles per line without menu */
@media only screen and (max-width: 659px) { 
    html body[class*="_tiles"][class*="_nomenu"] #context-bar .button {
        width: calc(50% - 16px);
    }
}

/* 1 tile per line without menu */
@media only screen and (max-width: 447px) { 
    html body[class*="_tiles"][class*="_nomenu"] #context-bar .button {
        width: calc(100% - 16px);
        max-width: 100%;
    }
}

/* 6 or more tiles per line with menu */
html:not(.mobile) body[class*="_tiles"] #context-bar .button { 
    width: calc(16.6% - 16px);
    min-width: 196px;
    height: 196px;
    transition: all .2s ease-out;
}

/* 5 tiles per line with menu */
@media only screen and (max-width: 2101px) { 
    html:not(.mobile) body[class*="_tiles"] #context-bar .button {
        width: calc(20% - 16px);
    }
}

/* 4 tiles per line with menu */
@media only screen and (max-width: 1767px) { 
    html:not(.mobile) body[class*="_tiles"] #context-bar .button {
        width: calc(25% - 16px);
    }
}

/* 3 tiles per line with menu */
@media only screen and (max-width: 1121px) { 
    html:not(.mobile) body[class*="_tiles"] #context-bar .button {
        width: calc(33% - 16px);
    }
}

/* 2 tiles per line with menu */
@media only screen and (max-width: 1009px) { 
    html:not(.mobile) body[class*="_tiles"] #context-bar .button {
        width: calc(50% - 16px);
    }
}

/* 1 tile per line with menu */
@media only screen and (max-width: 847px) { 
    html:not(.mobile) body[class*="_tiles"] #context-bar .button {
        width: calc(100% - 16px);
        max-width: 100%;
    }
}

/* Tile color and size. If you change this, you also have to change the sizes at which to display 6, 5, 4, 3, 2 or 1 tile(s) per line! */
html body[class*="_tiles"] #context-bar .button {
    background: #e1e1e1;
    color: #2c2d35;
    font-size: 20px;
    margin: 0;
    margin-right: 16px;
    margin-bottom: 16px;
    vertical-align: middle;
}

/* Tile hover color */
html body[class*="_tiles"] #context-bar .button:hover {
    background: #f1d441;
    color: #2c2d35;
}

/* Allow users to remove the first category or userflow in a menu on a page. This is useful if the first category
 * or userflow contains a tile page that allow navigation to the other userflows. Now, when the user clicks the
 * section, they will see the tiles page, but cannot in any other way navigate there. This provides cleaner 
 * navigation, but should be used with care! */

/* Hide first category from menu */
body[class*="_nofirstcat"] #menu .level-2 > li:first-child {
    display: none;
}

/* Hide first user flow from menu */
body[class*="_nofirstflow"] #menu .level-2 > li:first-child .level-3 > li:first-child {
    display: none;
}

/* 
 * HIDE SIDE MENU
 * 
 * All pages that have '_nomenu' in their name in the Triggre designer, will hide the left menu.
 */

/* Hide side menu */
html:not(.mobile) body[class*="_nomenu"] #menu .level-2 {
    display: none;
}

/* Move content and title left */
html:not(.mobile) body[class*="_nomenu"] #title,
html:not(.mobile) body[class*="_nomenu"] #inner,
{
    left: 20px;
}

/* Move context bar buttons left */
html:not(.mobile) body[class*="_nomenu"] #context-bar {
    padding-left: 12px;
}


/*
 * ERROR PAGES
 * 
 * Below are overrides for specific error pages.
 */

/* Hide all content */
html .error-page #inner {
    display: none;
}

/* Login link as button */
.error-page #user a.login {
    margin-right: 20px;
    background: #f1d441;
    color: #000;
    border-radius: 6px;
    padding: 14px 26px 13px 26px;
    font-weight: 600;
    font-size: 18px;
    height: auto;
    display: inline-block;
    margin-top: 8px;
    line-height: 20px;
    text-transform: none;
    letter-spacing: initial;
    font-weight: 600;
}

/* Hide all menu items on error pages */
html:not(.mobile) .error-page #menu .level-1 > li {
    display: none;
}

/* Hide context bar */
body.error-page #context-bar {
    display: none !important;
}

/* Login button hover color */
.error-page #user a.login:hover {
    opacity: 0.9;
    color: #000;
}

/* Set general main title */
.error-page #menu > ul::before {
    content: "Oops. This is embarassing";
}

/* Set general sub title */
.error-page #menu > ul::after {
    content: "Something went wrong. This almost never happens. No, really.";
}

/* Set 404 main title */
.error-page.error-404 #menu > ul::before {
    content: "Nope. Nothing here.";
}

/* Set 404 sub title */
.error-page.error-404 #menu > ul::after {
    content: "The page you requested doesn't exist.";
}

/* Set 403 main title */
.error-page.error-403 #menu > ul::before {
    content: "Yeah. Nice try, but no.";
}

/* Set 403 sub title */
.error-page.error-403 #menu > ul::after {
    content: "You do not have access to this page.";
}

/*
 * Tile page specific overrides
 */

 /* Tile color */
html body[class*="_tiles"] #context-bar .button {
    background: #c0bec2;
}

/* Tile hover color */
html body[class*="_tiles"] #context-bar .button:hover {
    background: #7e2d7a;
    color: #fff;
}

/* No menu override */
html body[class*="_nomenu"] #inner {
    bottom: 64px;
    left: 20px;
    right: 20px;
    background: #f7f7f7;
}

html body[class*="_nomenu"] #title {
    bottom: 10px;
    left: 20px;
    right: 20px;
    background: #f7f7f7;
}

/* move bar 2px down */
html:not(.mobile) body[class*="_nomenu"] #context-bar {
    position: absolute;
    bottom: 16px;
}

/* broaden input fields */

/* dropdown */
html:not(.mobile) .form .editor{
    width: calc(100% - 400px);
}

html:not(.mobile) .form .type-lookup .editor .list-popup {
     width: calc(100% - 286px);
}

html:not(.mobile) .form .type-lookup .editor .list-popup .k-grid {
    width: 100%;
}

html:not(.mobile) .form .type-lookup .editor .list-popup input{
    width: 100%
}

/* textfield */
html:not(.mobile) .form .type-text .editor input {
    width: 100%;
}

/* picklist */
html:not(.mobile) .form .type-select .editor .k-dropdown {
    width: 100%;
}

/* email */
html:not(.mobile) .form .type-email .editor input {
    width: 100%;
}

html:not(.mobile) .form .type-text .editor textarea {
    width: 100%
}

html:not(.mobile) .form .type-text .editor textarea.scrollable {
    width: 100%
}

/* Fixes for version 6.0 */

/* 1a. auth screen -> move buttons to correct position under email and password */
html:not(.mobile) #auth .auth-control .footer .secondary {
    position: relative;
    left: 10px;
    bottom: 4px;
}
html:not(.mobile) #auth .auth-control .footer .btn {
    position: relative;
    right: 10px;
}
/* 1b. auth screen -> change color of sign in button when hovered */
html:not(.mobile) #auth .auth-control .footer .btn:hover {
    background-color: #80c4e2;
}

/* 2. change title font and size */
#inner h3 {
    font-size: 21pt;
    font-weight: normal;
    background: #ffffff;
    height: 26px;
    left: 310px;
    top: 134px;
    padding: 10px 14px;
    letter-spacing: 0px;
}

/* 3. move buttons of context bar to right position */
html:not(.mobile) #context-bar > .buttons .buttons-inner {
    position: relative;
    right: 16px;
    bottom: 4px;
}

/* 4a. move search bar to right down position */
/* Delete all lines of code where search bar is put in downleft corner */
.search-box {
    position: relative;
    /*! bottom: -4px; */
    /*! left: 194px; */
    line-height: 0;
}

/* 4b. move search form to right down position */
/* Search form input size */
.search-box .search-form {
    position: relative;
    right: 20px;
    bottom: 520px;
}
/* Position labels on the search form on the left */
.search-box .search-form .field .label .name {
    text-align: left;
}
.search-box .search-form .field .label {
    position: relative;
    right: 80px;
}

/* 5. Move details to the left in detailspage */
html:not(.mobile) #inner .label {
    position: relative;
    left: 0px;
}

/* 6. fix tiles to normal proportions */
/* Change tiles position */

/* 7. make profile button visible by changing color */
#user .user-menu-btn .user-menu-icon {
    color: #7e2d7a;
}

#user .user-menu-btn .user-menu-icon:hover {
    color: #444549;
}

#user .user-menu-btn .drop-down .user-menu-header .user-name {
    color: #7e2d7a;
}


/* 8. Details fields */
    .field.trg-named-view .label {
        display: inline;
		margin: 24px;
    }

/* Position logo */
@media all {
    /*
 * This CSS allows you to change the logo image in the default Triggre layout, which
 * is the image that is shown instead of the logo set in the designer (on desktop, the
 * mobile version uses the logo from the designer).
 *
 * Please make sure the image is available over an HTTPS connection.
 *
 * NOTE: this template expects the default Triggre CSS template to be imported before it,
 * which can be done by adding the following line to your custom CSS:
 * 
 *      @import https://cdn.triggre.com/triggre/css/triggre-base.css
 */

/* Desktop logo */
html:not(.mobile) #header #logo a,
body[class*="_vscroll"] #header #logo a,
.error-page #header #logo a {
    background: url('https://cdn.triggre.com/itq4y/CRISlogo_giga.jpg');
    background-size: contain;
    background-repeat: no-repeat;
}

/*
 * Makes the logo size position different, changing with the scale of the screen.
 */

/* Bigger logo size, lower position */
html:not(.mobile) #header #logo {
    left: 18px;
    top: 4px;
    width: 200px;
    height: 70px;
}
html:not(.mobile) #header #logo a {
    width: 260px;
    height: 80px;
}

/* Mobile logo slightly lower so it's centered */
.mobile #header #logo {
    top: 17px;
}

/* 
* SMALL DESKTOP SCREENS
*
* For desktop screens that are smaller than 1600px wide, make all elements a bit smaller so more stuff fits.
*/
@media only screen and (max-width: 1600px) { 
    /* Position logo, make smaller */
    html:not(.mobile) #header #logo {
        left: 16px;
        top: 40px;
        width: 130px;
        height: 60px;
    }
    html:not(.mobile) #header #logo a {
        width: 130px;
        height: 60px;
    }
}
}




/* MAKE INPUT FIELDS LARGER */
@media all{
html:not(.mobile) .field .editor {
    display: inline-block;
    width: 1120px;
}

/* Change width of input fields TEXT */
html:not(.mobile) .field.type-email .editor input[type="password"], .field.type-email .editor input[type="text"], .field.type-email .editor textarea, .field.type-link .editor input[type="password"], .field.type-link .editor input[type="text"], .field.type-link .editor textarea, .field.type-text .editor input[type="password"], .field.type-text .editor input[type="text"], .field.type-text .editor textarea {
    width: calc(100% - 100px);
}

/*  Change width of input fields SELECT */
html:not(.mobile) .field.type-lookup .editor .current {
    width: calc(100% - 112px);
}
    
.field.type-lookup .editor .current:focus, .field.type-lookup .editor .current:hover {
	   border-color: #7e2d7a;
}
    
}

/* NEW CHANGES FOR ED 20240412*/

	/* Grid header */
    html:not(.mobile) .k-grid-header th.k-header, .k-filter-row th {
        padding: .5em;
         border-right: 1px solid #9e9e9e;
         border-bottom: 1px solid #9e9e9e;

    }

    /* Grid standard row height */
    html:not(.mobile) .table-list tbody[role=rowgroup] tr[role=row] {
        height: 48px;
    }

    /* Small table row height */
    html:not(.mobile) .k-grid td {
        padding: .2em .6em;
           
    }
    html:not(.mobile) .table-list tbody[role=rowgroup] tr[role=row] {
        height: 48px;
    }

	




      /* No text overflow */
	/* html:not(.mobile) .text-value {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: clip;
     */
	}

	/* Make help text into pop-up */
	/* html:not(.mobile) .help {
		display: none !important;
	}

	html:not(.mobile) .label:hover .help {
		display: block !important;
*/
	}

/*
 * This CSS allows you to change the logo image in the default Triggre layout, which
 * is the image that is shown instead of the logo set in the designer (on desktop, the
 * mobile version uses the logo from the designer).
 *
 * Please make sure the image is available over an HTTPS connection.
 *
 * NOTE: this template expects the default Triggre CSS template to be imported before it,
 * which can be done by adding the following line to your custom CSS:
 * 
 *      @import https://cdn.triggre.com/triggre/css/triggre-base.css
 */

/* Desktop logo */
html:not(.mobile) #header #logo a,
body[class*="_vscroll"] #header #logo a,
.error-page #header #logo a {
    background: url('https://cdn.triggre.com/itq4y/CRIS Logo aangepast.png');
    background-size: contain;
    background-repeat: no-repeat;
}

/*
 * Makes the logo size position different, changing with the scale of the screen.
 */

/* Bigger logo size, lower position */
html:not(.mobile) #header #logo {
    left: 36px;
    top: 10px;
    width: 75%;
    height: 64px;
}
html:not(.mobile) #header #logo a {
    width: 49%;
    height: 64px;
}

/* Mobile logo slightly lower so it's centered */
.mobile #header #logo {
    top: 8px;
    left: 24%;
    width: 50%;
    height: 100%;
}
.mobile #header #logo a {
	width: 100%;
	height: 48px;
}

/* 
* SMALL DESKTOP SCREENS
*
* For desktop screens that are smaller than 1600px wide, make all elements a bit smaller so more stuff fits.
*/
@media only screen and (max-width: 1600px) { 
    /* Position logo, make smaller */
    html:not(.mobile) #header #logo {
        left: 36px;
        top: 10px;
        width: 75%;
        height: 64px;
    }
    html:not(.mobile) #header #logo a {
        width: 50%;
        height: 64px;
    }
}