/* btn action hover */


.hover-target {
    position:absolute; right:10px; 
		top:calc(50% - 12px); font-size:26px;  z-index:2000 !important; align-items: center;   
		justify-content:center;  color:#222222; background:white;
    display: none;  
}

	.hover-target:hover { color:#0099D8; cursor:pointer;  }

div:has(> .hover-target):hover > .hover-target {
    display: flex;  
}



.select2-selection__placeholder { color: #ced4da !important; }

select:has(option[value=""]:checked) {
  color: #ced4da; /* Maakt de tekst grijs in de gesloten box */
  background:white;
}

.select2-selection { background-color:white !important; }

select option {
  color: #000000;
}

select option[value=""] { 
	 color: #ced4da; /* Maakt de tekst grijs in de gesloten box */
}


/* SELECT2 */

.select2-container--bootstrap-5 .select2-selection--single
{
	background:none;
}

.select2-selection__clear 
{ 
	display:none;
	background-color:white !important;
	padding:12px !important;
	    position: absolute;
    top: 50%;
    right: 2.25rem;
    width: .75rem;
    height: .75rem;
    padding: .25em;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23676a6d'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") 50%/.75rem auto no-repeat;
    transform: translateY(-50%);
}

span:has(> .select2-selection__clear ):hover > .select2-selection__clear  {
    display:block;
}


/* Zorg dat de Select2 container meebeweegt in de input-group */
.input-group > .select2-container--bootstrap-5 {
    flex: 1 1 auto;
    width: 1% !important; /* Forceert flex-growth */
}

/* Verwijder de dubbele border-radius aan de linkerkant van de select */
.input-group > .select2-container--bootstrap-5 .select2-selection {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.select2-container--bootstrap-5 .select2-selection { 
	border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
	padding-left:30px;
}


// Widths
.w-1{width:1%}.w-2{width:2%}.w-3{width:3%}.w-4{width:4%}.w-5{width:5%}.w-6{width:6%}.w-7{width:7%}.w-8{width:8%}.w-9{width:9%}.w-10{width:10%}.w-11{width:11%}.w-12{width:12%}.w-13{width:13%}.w-14{width:14%}.w-15{width:15%}.w-16{width:16%}.w-17{width:17%}.w-18{width:18%}.w-19{width:19%}.w-20{width:20%}.w-21{width:21%}.w-22{width:22%}.w-23{width:23%}.w-24{width:24%}.w-25{width:25%}.w-26{width:26%}.w-27{width:27%}.w-28{width:28%}.w-29{width:29%}.w-30{width:30%}.w-31{width:31%}.w-32{width:32%}.w-33{width:33%}.w-34{width:34%}.w-35{width:35%}.w-36{width:36%}.w-37{width:37%}.w-38{width:38%}.w-39{width:39%}.w-40{width:40%}.w-41{width:41%}.w-42{width:42%}.w-43{width:43%}.w-44{width:44%}.w-45{width:45%}.w-46{width:46%}.w-47{width:47%}.w-48{width:48%}.w-49{width:49%}.w-50{width:50%}.w-51{width:51%}.w-52{width:52%}.w-53{width:53%}.w-54{width:54%}.w-55{width:55%}.w-56{width:56%}.w-57{width:57%}.w-58{width:58%}.w-59{width:59%}.w-60{width:60%}.w-61{width:61%}.w-62{width:62%}.w-63{width:63%}.w-64{width:64%}.w-65{width:65%}.w-66{width:66%}.w-67{width:67%}.w-68{width:68%}.w-69{width:69%}.w-70{width:70%}.w-71{width:71%}.w-72{width:72%}.w-73{width:73%}.w-74{width:74%}.w-75{width:75%}.w-76{width:76%}.w-77{width:77%}.w-78{width:78%}.w-79{width:79%}.w-80{width:80%}.w-81{width:81%}.w-82{width:82%}.w-83{width:83%}.w-84{width:84%}.w-85{width:85%}.w-86{width:86%}.w-87{width:87%}.w-88{width:88%}.w-89{width:89%}.w-90{width:90%}.w-91{width:91%}.w-92{width:92%}.w-93{width:93%}.w-94{width:94%}.w-95{width:95%}.w-96{width:96%}.w-97{width:97%}.w-98{width:98%}.w-99{width:99%}


.input-group.fixed {
    flex: 0 0 auto;
}



.select2-ledger-dropdown {
    min-width: 500px;   /* of wat je nodig hebt */
}

.select2-container--open .select2-dropdown {
    left: auto !important; /* voorkomt rare offset */


}




input, textarea, select, a, span {     outline:none !important;     box-shadow: none !important; }
input:focus, textarea:focus, select:focus, a:focus, span:focus { border-color:#222222;  }

.select2  .select2-search__field { display:none !important; }
.select2-container--focus .select2-search__field { display:block !important; }


.bg-blue { background:#0099D8; }
.bg-yellow { background:#ffd54f; }
.bg-green { background:#95c85b; }
.bg-orange { background:#de8943; }
.bg-purple { background:#97a3e8; }
.bg-grey { background-color:#e9e8e8; }
.bg-grey-light { background-color:#FAFAFB; }


.bs-primary{ background: #0099D8;}

.text-blue { color:#0099D8; }

.bg-tag { background:#d9d9d9; }
.ticket:hover .bg-tag { background:#0099D8; }

.richText-help {display:none !important; }

--bs-list-group-active-bg: #0d6efd;
--bs-list-group-active-border-color: #0d6efd;

/* Action button on field */
	form .col-9, form .col-8 { position:relative; }
	.btn-action {  position:absolute; right:10px; 
		top:calc(50% - 12px); font-size:26px;  z-index:2000 !important; align-items: center;   
		display: flex;  justify-content:center;  color:#222222; background:white; }
	.btn-action:hover { color:#0099D8; cursor:pointer;  }

body, p, span
{
		   font-family: "Noto Sans", sans-serif; 
  font-weight:400;
}



#alerts
{ 
	position:fixed;
	width:25vw;
	right:0px;
	bottom:0px;
	z-index:2000; }

/* HEADER */


.header-profile
{
	height:46px;
	border-radius:30px;
}


.select2-selection 
{
	padding:5px !important;
}

.select2-selection__choice {
	padding:2px 5px 2px 10px !important;
	background:#222222;
	border-radius:30px !important;
	color:white !important;
	border:none !important;
	font-size:14px !important;
	font-weight:600 !important;
	margin:2px !important;
	float:left;
}


.select2-selection__choice__remove
{
	order: 2;
	margin-left:5px;
	background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293z'/%3e%3c/svg%3e") 50%/.75rem auto no-repeat !important;
	
	
}

.select2-selection__choice__display
{
	order: 1;

}

.select2-search--inline { 
	display:inline !important;
	/*display:none !important; */
	}
	
	
	
	.form-floating {
    .select2-container--bootstrap-5 {
        .select2-selection {
            height: $form-floating-height;
            padding: $form-floating-padding-y $form-floating-padding-x;

            > .select2-selection__rendered {
                margin-top: 25px;
                margin-left: 5px;
            }
        }
    }
}
	

/**/


table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order:before,table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order:before,table.dataTable thead>tr>td.dt-orderable-asc span.dt-column-order:before,table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order:before{
	position:absolute;
	display:block;
	bottom:55%;
	content:"▲";
	content:"▲"/""
}

table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order:after,table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order:after,table.dataTable thead>tr>td.dt-orderable-desc span.dt-column-order:after,table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order:after{
	position:absolute;
	display:block;
	top:55%;
	content:"▼";
	content:"▼"/""
}

table.dataTable thead>tr>th.dt-orderable-asc,table.dataTable thead>tr>th.dt-orderable-desc,table.dataTable thead>tr>th.dt-ordering-asc,table.dataTable thead>tr>th.dt-ordering-desc,table.dataTable thead>tr>td.dt-orderable-asc,table.dataTable thead>tr>td.dt-orderable-desc,table.dataTable thead>tr>td.dt-ordering-asc,table.dataTable thead>tr>td.dt-ordering-desc{
	position:relative;
	padding-right:30px
}

table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order,table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order,table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order,table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order,table.dataTable thead>tr>td.dt-orderable-asc span.dt-column-order,table.dataTable thead>tr>td.dt-orderable-desc span.dt-column-order,table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order,table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order{
	position:absolute;
	right:12px;
	top:0;
	bottom:0;
	width:12px
}

table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order:before,table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order:after,table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order:before,table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order:after,table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order:before,table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order:after,table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order:before,table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order:after,table.dataTable thead>tr>td.dt-orderable-asc span.dt-column-order:before,table.dataTable thead>tr>td.dt-orderable-asc span.dt-column-order:after,table.dataTable thead>tr>td.dt-orderable-desc span.dt-column-order:before,table.dataTable thead>tr>td.dt-orderable-desc span.dt-column-order:after,table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order:before,table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order:after,table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order:before,table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order:after{left:0;opacity:.125;line-height:9px;font-size:.8em}table.dataTable thead>tr>th.dt-orderable-asc,table.dataTable thead>tr>th.dt-orderable-desc,table.dataTable thead>tr>td.dt-orderable-asc,table.dataTable thead>tr>td.dt-orderable-desc{cursor:pointer}table.dataTable thead>tr>th.dt-orderable-asc:hover,table.dataTable thead>tr>th.dt-orderable-desc:hover,table.dataTable thead>tr>td.dt-orderable-asc:hover,table.dataTable thead>tr>td.dt-orderable-desc:hover{
	outline:2px solid rgba(0, 0, 0, 0.05);
	outline-offset:-2px
}

table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order:before,table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order:after,table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order:before,table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order:after{opacity:.8}













:root, [data-bs-theme=light] {
	--bs-blue:#0099D8;
	--bs-primary:#0099D8;
	--bs-link-color: #0099D8;
}

.pagination {
	--bs-pagination-active-bg: #0099D8;
	--bs-pagination-active-border-color: #0099D8;
	--bs-pagination-hover-color: #00a6ed;
	--bs-pagination-focus-color:#00a6ed;;	
}



.textoverflow
{
	width:100%;
  outline: 1px solid #000;
  margin: 0 0 2em 0;
  
text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

#tabel p { margin-bottom:0; }


.page-item:first-child .page-link
{
	border-top-left-radius: 30px;;
	border-bottom-left-radius: 30px;;
}

.page-item:last-child .page-link
{
	border-top-right-radius: 30px;;
	border-bottom-right-radius: 30px;;
}

.dt-search input[type='search']
{
	border-radius:30px;
	padding:7px 16px;
	font-weight:500;
	letter-spacing:1px;
	font-size:15px;
}

.dt-search input[type='search']::placeholder {
	color:#c0c0c0;
}

.dt-search input[type='search']:focus
{
	border-color:#0099D8;
}

.dt-length select
{
	border-radius:30px;
	padding:7px 16px;
	font-weight:500;
	letter-spacing:1px;
	font-size:15px;
	width:80px;
	
}


body
{
	/*font: 1rem/1.5 var(--bs-font-sans-serif); */
	font-family: "Noto Sans", sans-serif;
	background:#FAFAFB;
}

a
{
	color: var(--bs-blue);
}   

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: "Noto Sans", sans-serif; 
  font-weight:700;
  color:#222222;
  
  }
  
  h4 {font-size:21px; }
  
label, input
  {
	   font-family: "Noto Sans", sans-serif; 
  font-weight:400;
  font-size:16px;
  color:#222222; 
  }

input[type="range"]
{
	accent-color:#0099D8;
	margin-right:20px;
}

input[name="search"]
{
	border-radius:30px;
	font-size:20px;
	padding:8px 25px;
	font-weight:400;
	letter-spacing: 1px;
	z-index:1050 !important;	

}

#search
{
	z-index:1050 !important;
}

#search-results
{
	display:none;
	position:absolute;
	margin-right:0px;
	min-height:100%;
	background:white;
	padding:120px 50px 50px 50px;
			   font-family: "Barlow", sans-serif; 
  font-weight:400;
}

input::placeholder
{
	color:#c0c0c0 !important;
}

input[name="search"]::placeholder
{
	color:#c0c0c0;
}

input[name="search"]:focus
{
	border-color:#0099D8;
}


  
 .nav-link
 {
	 font-family: "Barlow", sans-serif;
	 font-weight:400;
	 line-height:45px;
	 font-size:19px;
	 color:black;
	 
 }
 
  .dashboard_device
 {
	 background:white;
	 border: 1px solid #FFE130;
 }
 
 
 .dashboard_device:hover
 {
	 background-color:#FFE130;
 }
 


.nav-logout
{	 font-family: "Barlow", sans-serif;
	 font-weight:300;
	 line-height:36px;
	 font-size:18px;
	 color:black;
	 }
	 
  .nav-link:hover, .nav-logout:hover
 {
	 color:#0099D8;
}

a
{
	text-decoration: none;
	color:#0099D8;
}


hr
{
	border-top: 0px dotted #0099D8;
	margin-bottom:20px;
}

a:hover
{
	text-decoration: underline;
	color:#0099D8;
}

input[type=submit], .linkbutton
{
	font-family: "Noto Sans", sans-serif;
	font-size:17px;
	font-weight:500;
	background:#0099D8;
	border-radius:30px;
	padding:9px 15px 9px 14px;
	border:none;
	letter-spacing:0.2px;
	color:white;
}

.linkbutton i { font-size:19px;  }

.white { background:white; font-color:#0099D8; }
.button-grey { background-color:#FAFAFB; font-color:#0099D8; }


.linkbuttonadd
{
	 font-family: "Barlow", sans-serif;
	font-weight:500;
	color:#0099D8;
	background: #FAFAFB;
	border-radius:30px;
	padding:8px 20px 10px 20px;
	
}

.linkbuttonadd i { font-weight:700; }

.linkbutton.active
{

	font-weight:600;
	background:#333;
	color: white;
}

input[type=submit]:hover, .linkbutton:hover
{ 
	background: #00a6ed;
	color:white;
	text-decoration: none;
}

.btn-primary 
{
	font-family: "Noto Sans", sans-serif;
    font-size: 16px;
    font-weight: 500;
    background: #0099D8;
    border-radius: 30px;
    padding: 8px 20px 10px 20px;
    border: none;
    color: white;

    --bs-btn-active-bg:  #00a6ed;
}

.btn-primary:hover, .btn-primary:active, .btn-primary:focus
{ 
	background: #00a6ed;
	color:white;
	text-decoration: none;
}

.btn-link:hover
{
	color: #00a6ed;
}

.white
{
	background:white;
	color: #0099D8;
}

.trumbowyg-editor-box {
	background:white;
}


.linkbuttonsub
{
	 font-family: "Barlow", sans-serif;
	 font-size:17px;
	 font-weight:500;
	padding:10px;
	color:#222;
	
}

.linkbuttonsub:hover
{ 
	text-decoration: none;
}


.linkbuttonsub.active
{ 
	text-decoration-line: underline;
	text-decoration-thickness: 4px;
	text-underline-offset:5px;
	color:#0099D8;
}

.select2-container {
    width: 100% !important;
}

.form-check-input {
    border-radius:30px !important;
}

.form-check-input:checked {
    background-color: #0099D8;
    border-color: #0099D8;
}