/*
dit is een stylesheet van Joël van der Schans  
Versie: 2.0 (1 september 2025)
*/

/* TIJDELIJK */
.cx_form-group-autosize .cx_control-label-left .cx_label-buttons {
	right: -5px;
}
.cx_control-label-left {
  text-align: left !important;
}

/************************************************/
/******** Custom fonts Smart connections ********/
/************************************************/
@media screen { 
	@font-face {
		font-family: 'Ubuntu';
		src: 
		url('/systeem/customfont/woff/Ubuntu-Bold.woff') format('woff'),
		url('/systeem/customfont/ttf/Ubuntu-Bold.ttf') format('truetype');
		font-weight: bold;
		font-style: normal;
		font-display: swap;
	}
	
	@font-face {
		font-family: 'Ubuntu';
		src: 
		url('/systeem/customfont/woff/Ubuntu-BoldItalic.woff') format('woff'),
		url('/systeem/customfont/ttf/Ubuntu-BoldItalic.ttf') format('truetype');
		font-weight: bold;
		font-style: italic;
		font-display: swap;
	}
	
	@font-face {
		font-family: 'Ubuntu';
		src: 
		url('/systeem/customfont/woff/Ubuntu-Italic.woff') format('woff'),
		url('/systeem/customfont/ttf/Ubuntu-Italic.ttf') format('truetype');
		font-weight: normal;
		font-style: italic;
		font-display: swap;
	}
	
	@font-face {
		font-family: 'Ubuntu';
		src: 
		url('/systeem/customfont/woff/Ubuntu-Regular.woff') format('woff'),
		url('/systeem/customfont/ttf/Ubuntu-Regular.ttf') format('truetype');
		font-weight: normal;
		font-style: normal;
		font-display: swap;
	}
}
/************************************************/
/* einde custom font Smart Connections */
/************************************************/

html, body {
	width: initial!important;
	padding-left: 0!important;
}
body{
	font-size:14px;
	font-family: 'Ubuntu', arial, sans-serif;
	display:flex !important;
	flex-direction:column;
	min-height:100vh;
}
.homepagina{
	background:rgb(234, 236, 243);
}
@media (max-width: 767px){
	img{
		min-width: 0 !important;
		max-width: 100% !important;
	}
	table,
	td[width="600"]{
		width: 100%;
	}
}

/***************************/
/***************************/
/**** Achtergrond tabs *****/
/***************************/
/***************************/
.tab-content {
	background:#eaecf4;
}

.cx_tabpanel-nav .nav-link:not(.active):hover, .cx_tabpanel-nav .nav-link:not(.active):focus {
  border-color: #eaecf4;
  background: #eaecf4;
}
/******************************************/
/******************************************/
/***	   Popup classes zoekscherm	 ******/
/******************************************/
/******************************************/
.cx_node-selected {
	background: #eaecf4;
}
/***************************/
/***************************/
/****    Buttons		****/
/***************************/
/***************************/
/* button grootte */
.btn:not(.cx_btn-rowDetails) {
    padding: 0.4rem 1rem;
}

/************************************************/
/******** buttons query page ********/
/************************************************/
.sc-btn ,.btn.btn-secondary.cx_btn.btn-sm.cx_btn-clear,
.btn.btn-secondary.cx_btn.btn-sm.cx_btn-saveQuery.cx_submit,
.btn.btn-secondary.cx_btn.btn-sm.cx_btn-clear,
.btn.btn-secondary.cx_btn.btn-sm,
.btn-primary,
.btn.btn-link.cx_btn.btn-sm.cx_btn-previousPage{
	background: #ffffff;
	color: #45517f;
	border: 1px solid #45517f;
	border-radius: 10px;
}

.btn.btn-primary.cx_btn.btn-sm.cx_btn-find.cx_submit{
	background:#45517f;
	color:#ffffff;
	border: 1px solid #45517f;
	border-radius: 10px;

}
.btn.btn-default.cx_btn-Open_query, .cx_btn_wrapper.cx_btn_wrapper-Open_query{
	background:#8f97b2;
	color:#ffffff;
	border:none;
}

.sc-btn:hover,.btn.btn-secondary.cx_btn.btn-sm.cx_btn-clear:hover,
.btn.btn-secondary.cx_btn.btn-sm.cx_btn-saveQuery.cx_submit:hover,
.btn.btn-secondary.cx_btn.btn-sm.cx_btn-clear:hover,
.btn.btn-secondary.cx_btn.btn-sm:hover,
.btn-primary:hover,
.cx_btn-previous:hover,
.cx_btn-newRecord:hover,
.cx_btn-next:hover,
.btn.btn-link.cx_btn.btn-sm.cx_btn-previousPage:hover,
.btn-warning:hover
{
	background:#45517f; 
	color:#ffffff;
	text-decoration:none;
	border-color:transparent;
}

.sc-btn.active{
	background:#45517f !important; 
	color:#ffffff !important;
	border-color:transparent !important;
}

/********************************************** */
/* annuleren button bij colorpicker naar links */
.sp-cancel {
  margin-right: 5px;
}
/************************************************/
/**** voor use range of zoekveld toevoegen  ******/
/****		vergrootglas op zoekscherm		******/
/************************************************/


.btn.btn-link.cx_btn.btn-sm.cx_btn-addSearchField.cx_ajax,
.btn.btn-link.cx_btn.btn-sm.cx_ajax,
.btn.btn-link-danger.cx_btn.btn-sm.cx_btn-delete.cx_ajax
	{
	color: #45517f;
}

/************************************************/
/********		dialogscherm		 ********/
/************************************************/

.cx_btn-previousPage .cx_icon:not([class*="fa-"])::before {
  display: none;
}

.cx_btn-toolbar-section-paging {
	background-color:transparent;
}
.cx_btn-nextPage::after {
   display: none;
}

.sc-btn, .btn.btn-secondary.cx_btn.btn-sm.dropdown-toggle, .btn-sm, .btn-group-sm > .btn {
	font-weight: bold;
}


/*******************************/
/*******************************/
/**** buttons onder titel *****/
/*******************************/
/*******************************/
 
.sc-btn,.cx_btn-startEditing,.cx_btn-stopEditing, .cx_btn-saveAndStopEditing, .btn-warning{ 
	background: #ffffff;
	color: #45517f;
	/*border: 1px solid #45517f;*/
	border-radius: 10px;
	font-weight:bold;
	font-size:14px;
} 
.cx_btn-next .cx_icon:not([class*="fa-"])::before {
	content: "\f054";
}
.btn-success {
	border-color: #45517f;
	border-radius: 10px !important;
}
/*******************/
/**** tooltip *****/
/*******************/

.btn.cx_btn-explanation {
	background:none ;
}
.cx_btn-explanation .cx_icon::before { 
	color: #45517f;
}
.fa-circle-arrow-right::before {
	color: #45517f;
}
.cx_btn-explanation .sc_tooltip_wit::before, .sc_tooltip_wit { 
	color:#ffffff;
}
.cx_btn-explanation .sc_tooltip_paars::before, .sc_tooltip_paars { 
	color:#45517f;
}
/**********************/
/* vraagteken tooltip */
/**********************/
.btn.btn-default.cx_btn-explanation {
	color: red;
}

/**********************/
/********* tab ********/
/**********************/
.nav-tabs > li.active > a, .nav-tabs > li > a { 
	color: #45517f;
} 

.nav.nav-tabs.cx_tabpanel {
	background: #eaecf4;
}

.nav-tabs .nav-link.active {
	color: #FF285A;
	font-weight:bold;
} 
.nav-link:hover {
	color: #45517f;
}

/*********************/
/******* rijen  ******/
/*********************/

.cx_th-content > .form-control-plaintext {
  color: #45517f;
}

.cx_th-tooltip-icon {
	display:none;
}

/*******************/
/*******************/
/**** Toolbar *****/
/*******************/
/*******************/ 

/* toolbar boven titel */
.cx_btn-back {
	color: #FF285A;

}
.cx_btn-previous,.cx_btn-newRecord, .cx_btn-next{ 
	background: #ffffff;
	color: #45517f;
	border: 1px solid #45517f;
	border-radius: 10px;
	font-weight:bold;
	font-size:14px;

}
.cx_btn-back .cx_icon::before {
	content: "\f053" !important;
	font-weight: 900;
	color: #FF285A;
}

.cx_btn-previous .cx_icon:not([class*="fa-"])::before {
	content: "\f053" !important;
	font-weight: 900;
}
.btn.btn-link.cx_btn.btn-sm.cx_btn-stopEditing.cx_ajax, .btn.btn-link-danger.cx_btn.btn-sm.cx_btn-delete.cx_ajax {
	border: none;
	color: #45517f;
}

.cx_btn-back.btn-link:hover {
	color: #FF285A;
	text-decoration: none;
}

/*******************/
/*******************/
/**** secties *****/
/*******************/
/*******************/
.cx_grid-col {
	padding-right: 12px;
	padding-left: 12px;
}

.card-header, a.cx_card-header {
	color:#FFFFFF;
	background:#45517f;
	font-weight:bold;
	border-bottom: none;
	font-size:18px;
}

.card-header:hover {
	color: #FFFFFF; 
}
.card-header:first-child {
	box-shadow: 0 10px 10px rgba(46,71,101,.1);
	border-radius: calc(.75rem - 1px) calc(.75rem - 1px) 0 0;
}

.card{
	background-color:transparent;
	box-shadow: 0 10px 10px rgba(46,71,101,.1);
	border: none;
}
.card-body {
	background:#fbfcfc;
	border-radius: 0 0 calc(.75rem - 1px) calc(.75rem - 1px);

}
/* labels in de secties */
.control-label.cx_control-label-left.col-form-label.col-form-label-sm {
	color: #45517f;
} 
/*******************/
/**** styling *****/
/*******************/
/*******************/
/* ahref in klantkaart */
.cx_a { 
	color: #41a6ff;
} 
.cx_a:hover {
	color: #41a6ff;
}
.cx_h1, .cx_title1 {
	color:#FF285A;
	margin-bottom: 30px;
}

.btn.btn-link.cx_btn.btn-sm.cx_actionbtn > .cx_btn-label{
	color:#45517f ;
	background:transparent;
}
 
/* omlijning velden in bewerkmode */
.form-select-sm , .form-control {
	border: 1px solid #e9ebf0;
}


.page-item.active .page-link {
	background-color: #45517f;
border-color: #45517f;
}
.page-link, .page-link:hover {
	color: #45517f;
}

/***************************/
/***************************/
/*********** toggle ********/
/***************************/
/***************************/
.cx_toggleBtn {
  text-decoration: none !important;
  color: #6c757d;
}
.cx_toggleBtn.active {
	color: #45517f;
}
.cx_toggleBtn.active .cx_icon {
	background: #45517f;
	border-color: #45517f;
}
.cx_toggleBtn:hover .cx_icon::before {
	border-color: #45517f;
	-webkit-box-shadow: 0 0 10px 0 rgba(69,81,127,0.8);
	box-shadow: 0 0 10px 0 rgba(69,81,127,0.8);
}
/***************************/
/***************************/
/*********** Footer ********/
/***************************/
/***************************/

.footer-bottom ul li {
	display: inline;	
	margin-right: 20px;
	font-size: 14px;
}
.footer-bottom ul li a{
	color:#fff;
}

.footer-bottom ul {
	float: right;
}

.footer-bottom ul li:last-child {
	margin-right: 0;
}
.copyright {
	font-size: 14px;
	color:#ffffff;
}

.footerwidget a:hover {
  color: #FF285A !important;
  text-decoration:none;
}



/***************************/
/***************************/
/************ menu *********/
/***************************/
/***************************/
.cx_menu {
	background:#fff;
}
 
@media (min-width:770px) {
    .nav-item.cx_nav-item {
        padding-right: 20px;
        height:45px;
    }
    .navbar-nav.navbar-right.cx_nav-noCollapse.cx_menu-right {
        height:45px;
    }
}
/* uitzoeken */
.dropdown-header {
	font-weight:normal;
}

.nav-link {
	transition: 0.3s ease;
	padding: 10px;
}

a:hover {
	color: #45517f;
}


.navbar-nav .nav-link.active,.nav-link.active.dropdown-toggle, .navbar-nav .nav-link.show {
	color: #FF285A;
	border-bottom: 1px solid #FF285A;
}

.cx_nav-item > .nav-link , .nav-link.dropdown-toggle{
	color: #45517f;
	font-size:15px;
	font-weight:bold;

}

.cx_menu-sessionInfo.nav-item > .nav-link, .cx_menu-user.nav-item > .nav-link {
	border:none;
}
/**********************/
/******** dropdown ****/ 
/**********************/
.dropdown-item:hover {
	background-color:#ffffff;
	color:#FF285A;
}
.dropdown-item.active {
	background-color:#ffffff;
	color:#FF285A; 
}
.dropdown-menu {
	background: #ffffff;
}
.dropdown-menu.cx_btn-label {
	font-weight:normal !important;
}
.dropdown-item {
	color: #45517f;
}

/***************************/
/******* hamburger Menu *****/
/***************************/
.navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='black' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-toggler {
	border-color:black;
}

/***********************************/
/***********************************/
/******* Smartconnectionsclass *****/
/***********************************/
/***********************************/
.sc_lichtpaars > .card-header {
  background: #7c85a5;
}
.sc_label {
	font-weight:bold;
}
.sc_label_form {
	color:#45517f;
	font-weight:bold;
}
.sc_card_body {
	background:#f65b7d;
	color:#ffffff;
	border-radius:0;
}
.sc_safe-text {
	color:#60C081 !important;
}
.sc_danger-text {
	color:#F44336 !important;
}
.sc_text-Diamant {
	color:#70d1f4;	
	font-weight:bold;
}
.sc_text-Goud {
	color:#ae9a64;	
	font-weight:bold;
}
.sc_text-Zilver {
	color:#acafb2;	
	font-weight:bold;
}
.sc_text-Brons {
	color:#bf873c;
	font-weight:bold;
}
.sc_text-Koper {
    color:#b87333;
    font-weight:bold;
}

.sc_card_body:hover {
	font-weight:bold;
	background:#fb95ab !important;
}

.sc_card_body:hover .sc_metrics {
	display: inline !important;
}
.cx_row.sc_metrics:hover .sc_metrics {
	display: inline !important;
}

.sc_card_body_disable {
	background:grey;
	color:#ffffff;
	border-radius:0;
}

.sc_card_body_wit {
	background:#ffffff;
	border-radius:0;
	height:150px;
}
.sc_card { 
	height:auto;
	padding-top:20px;
	
}

.sc_h4_wit {
	padding:20px 0px;
	font-size:1.3rem;
	color:#ffffff;
}

.sc_h1_roze, .sc_h2_roze, .sc_h3_roze, .sc_h4_roze, .sc_h5_roze {
	color:#FF285A;
}
.sc_h1_donkerblauw, .sc_h2_donkerblauw, .sc_h3_donkerblauw, .sc_h4_donkerblauw, .sc_h5_donkerblauw {
	color:#45517f;
}
.sc_h4_roze {
	font-size:1.3rem;
}
.sc_h4_donkerblauw {
	font-size:1.3rem;
}
.sc_h5_roze {
	font-size:1.2rem;
}
.sc_h5_donkerblauw {
	font-size:1.2rem;
}
.sc_h5{
	font-size:1.2rem;
}

h3{
	color:#FF285A;
	margin-bottom: 30px;
}

.sc_svg_icon {
	height:25px;
}

.progress-bar { 
	background:#45517f !important;
}
.sc_danger{
	background:#F44336 !important;
}
.sc_warning{
	background:#ffc107 !important;
}

.modal-title {
	font-weight:bold;
	color:#45517f;
}
/********** Test versturen dialogscherm */
.select2-container .select2-search--inline .select2-search__field {
	font-family:'Ubuntu', arial, sans-serif;
}


/* voor de weergave van tabel rijen */
.table-striped > tbody > tr:nth-of-type(2n+1) > *{
	background-color: #ffffff;
	--bs-table-bg-type: transparent;
}

.table-striped > tbody > tr:nth-of-type(2n) > * { 
	background-color: #fbfbfb;
	--bs-table-bg-type: transparent;
} 
.cx_table-system\:query_result_field > tbody > tr:nth-of-type(2n+1) > *{
	background-color: #dee0e7;
	--bs-table-bg-type: transparent;
}

.cx_table-system\:query_result_field > tbody > tr:nth-of-type(2n) > * { 
	background-color: rgba(0,0,0,0.01);
	--bs-table-bg-type: transparent;
} 
/* specifiek voor hover in de tabelrijen*/
.table,.table-striped {
	--bs-table-hover-bg: transparent;
	
}
/*.table-striped>tbody>tr:nth-of-type(odd)>* {*/
/*    --bs-table-color-type: transparent;*/
/*    --bs-table-bg-type: transparent;*/
/*}*/

@media only screen and (max-width:991px) {
	.sc_svg_icon { 
		height:14px !important;
	} 
	.sc_icon {
		font-size:14px !important;
	}
	.sc_card_body {
		font-size:12px !important;
	}
	.sc_card_body_wit {
		height:auto;
	}
	  .sc_h4 {
		font-size:20px !important;
	}
	.sc_p10 {
		padding-top:10px !important;
	}
}

@media only screen and (max-width: 768px) {
	.aside-1 { order: 2; } 
	.aside-2 { order: 1; padding-bottom:20px; }
	.sc_h4 {
		font-size:20px !important;
	}
}
 @media only screen and (max-width:441px) {
	.sc_svg_icon {
		display:none;
	}
	.sc_icon {
		display:none;
	}
	.sc_card_body {
		font-size:12px !important;
	}
	.sc_card_body_wit {
		height:auto;
	}
  .aside-1 { order: 2; } 
  .aside-2 { order: 1; }
  	.sc_h4 {
		font-size:20px !important;
	}
	.sc_h5 {
		font-size:16px !important;
	}
}
/**************************/
/*** Werkvoorraad		 **/
/**************************/
#medewerkerSelect, #overzichtSelect {
  width: 300px;
  margin-bottom: 20px;
}


.cx_fieldline-content {
  text-overflow: ellipsis;
  overflow: hidden;
}

/**************************/
/*** Handleidingenpagina **/
/**************************/
.card-button {
        display: flex;
        justify-content: center;
        padding: 10px 0;
        width: 100%;
        background-color: #FFFFFF;
        color: #FF285A;
        border-radius: 0 0 8px 8px;
        font-weight:bold;
    }

.card-button:hover {
	
    text-decoration: none;
    background-color: #FF285A;
    color: #fff;
    transition: 0.5s;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
}

/* Open zoekvragen scherm */
.cx_form-search-system-query.cx_form {
  background: #eaecf3;
  padding: 10px;
}

.btn-toolbar > .btn.btn-link.cx_btn.btn-sm.disabled {
	color: #FF285A;
}


.alert-info {
  background-color: #ecedf2;
  border-color: #d9dce5;
  color: #45517f;
}

/**************************/
/***	Homepagina		 **/
/**************************/

@media (min-width: 1350px) {
	.row-diensten-lijntekening {
	  background-size: contain;
	}
}

.container-diensten-cat-header {
	display:none
}
@media (min-width:920px) {
	.container-diensten-cat-header {
	display:block;
	max-width:900px
	}
}
.container-diensten-cat {
	display:none;
	max-width:100%;
}
@media (min-width:920px) {
	.container-diensten-cat {
	display:block
	}
}
.container-diensten-cat .col-diensten-cat {
	height:30px
}
.container-diensten-cat-mobile {
	background:#fff url(/systeem/home/images/diensten-lijntekening-2-mobile.png) no-repeat center center;
}
@media (min-width:920px) {
	.container-diensten-cat-mobile {
	display:none
	}
}
.container-diensten-cat-mobile .col-diensten-cat {
	height:112px
}
.container-diensten-cat-mobile .col-diensten-cat .dienst-img a {
	display:block;
	width:100%;
	height:100%
}
.container-diensten-cat-mobile .col-diensten-cat .dienst-name {
	display:flex;
	align-items:center
}
.container-diensten-cat-mobile .col-diensten-cat .dienst-name a {
	display:flex;
	align-items:center;
	font-size:26px;
	width:100%;
	height:100%
}
.row-diensten-lijntekening {
	height:160px;
	background:#fff url(/systeem/home/images/diensten-lijntekening-1.png) no-repeat center center;
	background-size:cover
}
@media (min-width:1350px) {
	.row-diensten-lijntekening {
	background-size:contain;
	}
}
.row-diensten-cat {
	max-width:900px;
	margin-left:auto;
	margin-right:auto
}
.row-diensten-cat a.cat-title {
	font-size:26px;
	-webkit-transition:font-size 0.1s;
	-moz-transition:font-size 0.1s;
	-o-transition:font-size 0.1s;
	transition:font-size 0.1s
}
.row-diensten-cat a.cat-title:hover {
	font-size:30px;
	color:#FF285A;
	text-decoration: none;
}
.row-diensten-cat .col-diensten-cat:first-child {
	padding-right:70px!important
}
.row-diensten-cat .col-diensten-cat:nth-child(2) {
	padding-right:83px!important
}
.row-diensten-cat .col-diensten-cat:nth-child(3) {
	padding-right:54px!important
}

.cat-title.smooth-scroll {
	color:#FF285A;
}

/**************************/
/***	Dashboard		 **/
/**************************/
#if($request.get('service').contains("dashboard"))
    .cx_btn-toolbar > .btn-toolbar > .btn.btn-primary.cx_btn.btn-sm {
		background: #45517f;
		color: #ffffff;
		border-radius: 10px;
	}
	.cx_paragraph-standalone-title{
		color:#FF285A;	
	}
#end