/* General */
* {outline:none !important; box-sizing:border-box!important;}
*:focus {box-shadow:none !important}
body {font-family:'Titillium Web', sans-serif; color:var(--font_color); font-size:var(--font_size); padding-left:var(--header_width);}
h1,h2,h3,h4,h5,h6 {color:var(--title_color); font-weight:700; margin-bottom:32px; display:inline-block;}
h1 {font-size:2.5rem;}
h2 {font-size:2rem;}
h3 {font-size:1.5rem;}
a {color:#879ea6;}
a:hover {color:var(--secondary_color);}

.primary_color {color:var(--primary_color);}
.secondary_color {color:var(--secondary_color);}

.center {display:flex; justify-content:center; align-items:center; flex-wrap:wrap;}
.right {display:flex; justify-content:flex-end; align-items:center; flex-wrap:wrap;}
.wrapper {width:100%;}

#content-wrapper {padding:32px;}
#content-wrapper .content-background {content:""; position:absolute; top:0; left:var(--header_width); right:0; height:250px; opacity:.3; background:url(/images/printplate.svg) center center no-repeat; background-repeat:repeat; z-index:-1;}
#content-wrapper .content-background:after {content:""; position:absolute; top:0; left:0; width:100%; height:250px; opacity:1; background:radial-gradient(circle, rgba(0,0,0,0) 50%, rgba(255,255,255,1) 100%); z-index:-1;} 
#content-wrapper .content-background:before {content:""; position:absolute; top:0; left:0; width:100%; height:250px; opacity:1; background: rgb(255,255,255); background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 100%); z-index:-1;} 

.success {color:#27ae60;}
.error {color:#c0392b; font-size:16px;}
.error a {color:#c0392b;}
.shadow {background:#fff; -webkit-box-shadow:0px 3px 6px 0px rgba(15,62,77,0.2)!important; box-shadow:0px 3px 6px 0px rgba(15,62,77,0.2)!important;}
.border-radius {border-radius:8px;}
.padding {padding:24px;}
.divider {height:1px; width:100%; background:var(--primary_color); margin:16px 0; display:inline-block;}
.divider.vertical {height:100%; width:1px; margin:0 16px;}
.blurred {filter:blur(2px);}
.relative {position:relative; display:inline-block; width:100%;}
.mb-8 {margin-bottom:8px;}
.mb-16 {margin-bottom:16px;}
.mb-32 {margin-bottom:32px;}
.mb-64 {margin-bottom:64px;}
.mt-8 {margin-top:8px;}
.mt-16 {margin-top:16px;}
.mt-32 {margin-top:32px;}
.mt-64 {margin-top:64px;}
.equal-height {display:flex;}

.row.row-max-width {max-width:1600px;}

.gradient {background-image:linear-gradient(to right, var(--primary_gradient_color) 0%, var(--secondary_gradient_color) 51%, var(--primary_gradient_color) 100%); background-size:200% auto;}
.gradient:hover {background-position:right center;}

.add-ticket {margin-left:32px;}

.loader-wrapper {text-align:center;}
.loader-wrapper .loader {width:64px;}

.result-message {font-weight:bold; margin-top:16px;}

/* Scrollbar */
.scrollbar-wrapper {overflow-y:auto; overflow-x:hidden; position:relative; padding:3px 24px 8px 3px;}
*::-webkit-scrollbar {width:8px;}
*::-webkit-scrollbar-track {background:#f1f1f1;}
*::-webkit-scrollbar-thumb {background:#888; border-radius:4px;}
*::-webkit-scrollbar-thumb:hover {background:#555; cursor:pointer;}

/* Title */
.title i {font-weight:300; margin-right:4px;}
.title .icon {margin-right:16px; max-width:48px; max-height:48px;}
h3.title .icon {margin-right:8px; max-width:32px; max-height:32px;}

/* Header */
#header-wrapper .header {position:fixed; display:flex; flex-wrap:wrap; align-items:flex-start; height:100%; width:var(--header_width); z-index:9999; top:0; left:0;}
#header-wrapper .header:after {content:""; position:absolute; height:100%; width:100%; top:0; left:0; background:linear-gradient(90deg, var(--primary_header_gradient_color) 0%,var(--secondary_header_gradient_color) 100%); z-index:9998;}
#header-wrapper .header .logo-wrapper {align-self:flex-start; height:var(--header_width); width:100%; z-index:9999;}
#header-wrapper .header .logo-wrapper a {display:inline-flex; justify-content:center; align-items:center;}
#header-wrapper .header .logo-wrapper a .logo {width:80%;} 
#header-wrapper .header .menu-wrapper {display:flex; align-self:center; width:100%; position:relative;}
#header-wrapper .header .menu-wrapper .menu {padding:0; margin-bottom:0; width:100%; z-index:9999;}
#header-wrapper .header .menu-wrapper .menu .menu-item {height:var(--header_width); display:flex; justify-content:center; align-items:center;}
#header-wrapper .header .menu-wrapper .menu .menu-item i {font-size:32px; color:#fff; font-weight:100; transition:.3s;}
#header-wrapper .header .menu-wrapper .menu .menu-item svg {fill:var(--icon_color); transition:.3s;}
#header-wrapper .header .menu-wrapper .menu .menu-item:hover {cursor:pointer;}
#header-wrapper .header .menu-wrapper .menu .menu-item:hover svg {transform:scale(1.15);}
#header-wrapper .header .menu-wrapper .menu .menu-item:hover i {font-size:36px;}
#header-wrapper .header .menu-wrapper .menu .menu-item.current {}
#header-wrapper .header .menu-wrapper .menu .menu-item.current:hover {background-position:initial;}
#header-wrapper .header .menu-wrapper .flyout-menu {position:absolute; top:0; left:100%; height:100%; color:#fff; background:linear-gradient(270deg, var(--primary_header_gradient_color) 0%,var(--secondary_header_gradient_color) 100%); border-radius:0 16px 16px 0; z-index:9998; transform:translateX(-100%); overflow:hidden; -webkit-transition:transform .3s ease-in-out; -moz-transition:transform .3s ease-in-out; -o-transition:transform .3s ease-in-out; transition:transform .3s ease-in-out;}
#header-wrapper .header .menu-wrapper:hover .flyout-menu {transform:translateX(0); transition-delay:.5s;}
#header-wrapper .header .menu-wrapper .flyout-menu .menu-item {height:var(--header_width); white-space:nowrap; display:flex; align-items:center; padding:0 32px; font-weight:bold; font-size:20px;}
#header-wrapper .header .menu-wrapper .flyout-menu .menu-item.current {background-image:linear-gradient(to right, var(--primary_gradient_color) 0%, var(--secondary_gradient_color) 51%, var(--primary_gradient_color) 100%); background-size:200% auto; background-position:right center}
#header-wrapper .header .menu-wrapper .flyout-menu .menu-item a {color:#fff; text-decoration:none;}
#header-wrapper .header .profile-wrapper {align-self:flex-end; height:var(--header_width); width:100%; position:relative;}
#header-wrapper .header .profile-wrapper .profile {height:100%; width:100%; background:linear-gradient(90deg, var(--primary_header_gradient_color) 0%,var(--secondary_header_gradient_color) 100%); z-index:9999; transition:.3s;}
#header-wrapper .header .profile-wrapper .profile.gradient {background-image:linear-gradient(to right, var(--primary_gradient_color) 0%, var(--secondary_gradient_color) 51%, var(--primary_gradient_color) 100%); background-size:200% auto; background-position:right center}
#header-wrapper .header .profile-wrapper .profile i {font-size:22px; color:#fff; border:1px solid #fff; border-radius:999px; width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;}
#header-wrapper .header .profile-wrapper .flyout-menu {position:absolute; bottom:0; left:100%; height:auto; color:#fff; background:linear-gradient(270deg, var(--primary_header_gradient_color) 0%,var(--secondary_header_gradient_color) 100%); border-radius:0 16px 16px 0; z-index:9998; transform:translateX(-100%); overflow:hidden; -webkit-transition:transform .3s ease-in-out; -moz-transition:transform .3s ease-in-out; -o-transition:transform .3s ease-in-out; transition:transform .3s ease-in-out;}
#header-wrapper .header .profile-wrapper:hover .flyout-menu {transform:translateX(0); transition-delay:.5s;}
#header-wrapper .header .profile-wrapper .flyout-menu .menu-item {height:var(--header_width); white-space:nowrap; display:flex; align-items:center; padding:0 32px; font-weight:bold; font-size:20px;}
#header-wrapper .header .profile-wrapper .flyout-menu .menu-item.current {background-image:linear-gradient(180deg, var(--primary_header_gradient_color) 0%,var(--secondary_header_gradient_color) 100%); background-size:200% auto; background-position:right center}
#header-wrapper .header .profile-wrapper .flyout-menu .menu-item a {color:#fff; text-decoration:none;}
#header-wrapper .header .mobile-menu-toggle {display:none;}
#header-wrapper .header .mobile-menu-wrapper {display:none;}

/* Topbar */
.topbar-wrapper {display:flex; width:100%; border-bottom:var(--primary_color) solid 2px; margin-bottom:32px; padding-bottom:8px;}
.topbar-wrapper h3 {margin-bottom:0; margin-right:24px}
.topbar-wrapper .dropdown button{background:transparent; padding:0; width:auto; min-width:240px; font-size:1.5rem; font-style:normal; text-transform:inherit; vertical-align:inherit; padding-right:48px;}

/* Button */
.button:hover {cursor:pointer;}
.button.default {background-image:linear-gradient(to right, var(--primary_gradient_color) 0%, var(--secondary_gradient_color) 51%, var(--primary_gradient_color) 100%); text-decoration:none; border:none; width:auto; padding:8px 40px; text-align:center; font-size:20px; font-weight:600; background-size:200% auto; color:#fff; box-shadow:0 0 20px #eee; border-radius:8px; display:inline-block; transition:background .3s, opacity .3s;}
.button.default:hover {background-position:right center; color:#fff; text-decoration:none; cursor:pointer;} 
.button.default:disabled {opacity:.5; cursor:no-drop;} 
.button.default:disabled:hover {background-position:left center;} 
.button.default.small {padding:8px 24px; font-size:16px;}
.button.secondary {background:#fff; border:2px solid var(--secondary_color); padding:15px 44px; text-align:center; text-transform:uppercase; text-decoration:none; font-weight:600; color:var(--secondary_color); box-shadow:0 0 20px #eee; border-radius:8px; display:block; transition:background .3s, opacity .3s;}
.button.secondary:hover {background:var(--secondary_color); color:#fff;}
.button.secondary.small {padding:6px 22px; font-size:16px; text-transform:none;}
.button.delete {background:#fff; border-radius:8px; border:2px solid #c0392b; color:#c0392b; font-weight:900; font-size:14px; padding:4px 8px; transition:.3s;}
.button.delete:hover {background:#c0392b; color:#fff;}

/* Form */
.form-wrapper .form.default .title {margin-bottom:16px;}
.form-wrapper .form.default .form-row {margin-bottom:16px;}
.form-wrapper .form.default .form-row .invalid {border-color:var(--secondary_color);}
.form-wrapper .form.default .form-divider {display:inline-block; margin-bottom:16px; margin-top:16px;}
.form-wrapper .form.default label {width:100%; margin-bottom:2px; position:relative;}
.form-wrapper .form.default label.required:after {content:'*'; color:var(--secondary_color);}
.form-wrapper .form.default input.input {color:#212529; border:2px solid #ebe8e8; font-style:italic; border-radius:8px; width:100%; height:56px; padding:8px 16px; transition:.3s;}
.form-wrapper .form.default input.input:focus {border-color:var(--primary_color);}
.form-wrapper .form.default input.input:disabled {background:#f4f4f4; cursor:not-allowed;}
.form-wrapper .form.default select::-ms-input-placeholder,form.default select::placeholder,form.default select::-ms-input-placeholder {color: #212529}
.form-wrapper .form.default input.submit {border:none;}
.form-wrapper .form.default [type=radio] {position:absolute; opacity:0; width:0; height:0;}
.form-wrapper .form.default [type=radio] + div {cursor:pointer;}
.form-wrapper .form.default [type=radio]:checked + div {background-image:linear-gradient(to right, var(--secondary_color) 0%,#7b0840 51%, var(--secondary_color) 100%); background-size:200% auto; color:#fff;}
.form-wrapper .form.default [type=radio]:checked + div h4 {color:#fff;}
.form-wrapper .form.default textarea {color:#212529; border:2px solid #ebe8e8; font-style:italic; border-radius:8px; width:100%; height:256px; padding:8px 16px; margin-bottom:-6px; resize:none; transition:.3s;}
.form-wrapper .form.default textarea:focus {border-color:var(--primary_color);}
.form-wrapper .form.default textarea:disabled {background:#f4f4f4; cursor:not-allowed;}
.form-wrapper .form.default select {color:#212529; border:2px solid #ebe8e8; font-style:italic; border-radius:8px; width:100%; height:56px; padding:8px 16px; resize:none; transition:.3s;}
.form-wrapper .form.default select:focus {border-color:var(--primary_color);}
.form-wrapper .form.default select:disabled {background:#f4f4f4; cursor:not-allowed;}
.form-wrapper .form.default select option[disabled] {display:none;}
.form-wrapper .form.default .error-message {font-size:13px; color:var(--secondary_color); margin-left:4px; display:block;}
.form-wrapper .form.default .file-upload {color:#212529; border:2px solid #ebe8e8; font-style:italic; border-radius:8px; width:100%; padding:16px 13px; transition:.3s;}
.form-wrapper .form.default .file-upload:hover {cursor:pointer; border-color:var(--primary_color);}
.form-wrapper .form.default .file-response {font-size:14px; color:#c0392b;}
.form-wrapper .form.default .checkbox-wrapper {margin-top:4px; font-style:italic; user-select:none;}
.form-wrapper .form.default .checkbox-wrapper *:hover {cursor:pointer;}
.form-wrapper .form.default .checkbox-wrapper input {display:none;}
.form-wrapper .form.default .checkbox-wrapper label {padding:4px 0;}
.form-wrapper .form.default .checkbox-wrapper label:before {content:'\f0c8'; font-family:"Font Awesome 6 Pro"; font-style:normal; font-weight:400; color:var(--primary_color); margin-right:4px; transition:color .3s;}
.form-wrapper .form.default .checkbox-wrapper input:checked + label:before {content:'\f14a'; font-weight:900; color: var(--secondary_color);}

/* Search */
form.search-wrapper {position:relative;}
form.search-wrapper:after {content:""; background:url(/images/icons/search.svg) no-repeat center center; position:absolute; right:0; top:0; height:100%; width:56px;}
form.search-wrapper input.search {border:1px solid #ebe8e8; padding:8px 56px 8px 16px; color:var(--primary_color);}

/* Call to action */
.cta-wrapper .cta {display:flex; align-items:center; margin-bottom:32px; text-decoration:none;}
.cta-wrapper .cta .icon {display:flex; height:72px; width:72px; border-radius:8px; transition:background .3s;}
.cta-wrapper .cta .icon i {font-size:32px; color:#fff;}
.cta-wrapper .cta .icon img {max-height:80%; max-width:80%;}
.cta-wrapper .cta .title {margin-bottom:0; margin-left:24px;}
.cta-wrapper .cta:hover .icon {background-position:right center;}

/* Table */
.table-wrapper {background:#fff;}
.table-wrapper .table.default thead th,
.table-wrapper .table.default thead th > * {font-size:20px; color:var(--primary_color);}
.table-wrapper .table.default tbody tr {transition:.3s;}
.table-wrapper .table.default tbody tr:hover {--bs-table-accent-bg:none;}
.table-wrapper .table.default tbody tr.clickable-row:hover {cursor:pointer; background:#f5f5f5;}
.table-wrapper .table.default tbody tr.hover-row:hover {cursor:pointer; background:#f5f5f5;}
.table-wrapper .table.default tbody td,
.table-wrapper .table.default tbody td > * {color:var(--primary_color); text-decoration:none; align-items:center;}
.table-wrapper .table.default tbody td span {display:inline-block;}
.table-wrapper .table.default tbody td span.has-reaction {position:relative; padding-right:8px;}
.table-wrapper .table.default tbody td span.has-reaction:after {content:''; position:absolute; top:4px; right:0; height:6px; width:6px; background:var(--secondary_color); border-radius:50%;}
.table-wrapper .table.default tbody td .sla {height:12px; width:12px; border-radius:50%; background:#9aaeb4;}
.table-wrapper .table.default tbody td .sla.u {background:red;}
.table-wrapper .table.default tbody td .sla.m {background:yellow;}
.table-wrapper .table.default tbody td .sla.l {background:green;}
.table-wrapper .table.default tbody td i {font-size:18px;}
.table-wrapper .table.default tbody td i.open {color:#9aaeb4;}
.table-wrapper .table.default tbody td i.planned {color:#f1c40f;}
.table-wrapper .table.default tbody td i.active {color:#2ce3b9;}
.table-wrapper .table.default tbody td i.complete {color:#2ce3b9;}
.table-wrapper .table.default tbody tr:last-child > * {border-bottom-color:#dee2e6;}
.table-wrapper .table.default tfoot tr td {border-bottom:none;}

.table-background {position:fixed; top:0; left:0; height:50vh; width:100%; z-index:-1;}

/* Login Page */
body.login {background:url(/images/login-background.webp) center center no-repeat; background-size:cover; min-height:100vh; padding-left:0;}
body.login:after {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:url(/images/printplate.svg) center center no-repeat; background-repeat:repeat; z-index:1; opacity:.1;}
body.login .container {min-height:100vh;}
body.login .login-wrapper {background:#fff; width:100%; padding:64px; position:relative; z-index:2; max-height:640px; max-width:768px; display:flex; align-items:center;}
body.login .login-wrapper h1 {display:inline-flex; align-items:center; flex-wrap:wrap;}
body.login .login-wrapper .logo {max-width:240px; margin-left:16px; margin-top:-8px;}
body.login .login-wrapper .form-wrapper .login-form {max-width:640px;}

/* Dashboard */
.tickets-wrapper .overview-link {color:var(--primary_color); text-decoration:none; display:flex; align-items:center;}
.tickets-wrapper .overview-link img {height:16px; padding-left:8px; padding-right:8px; transition:.3s;}
.tickets-wrapper .overview-link:hover img {padding-left:16px; padding-right:0px;}
.statistics-wrapper .statistic {height:100%; background:#fff; border-bottom:8px solid #fff;}
.statistics-wrapper .statistic.good {border-color:#2cd3b9;}
.statistics-wrapper .statistic.neutral {border-color:#fcbd2f;}
.statistics-wrapper .statistic.bad {border-color:#f43855;}
.statistics-wrapper .statistic .icon {margin-bottom:8px;}
.statistics-wrapper .statistic .title {margin-bottom:0;}

.statistics-wrapper .statistic.solar-wrapper .col-6 {display:flex; justify-content:center;}
.statistics-wrapper .statistic.solar-wrapper .col-6:first-child {border-right:solid #000 1px;}
.statistics-wrapper .statistic.solar-wrapper .col-6:last-child {border-left:solid #000 1px;}
.statistics-wrapper .statistic.solar-wrapper .col-6 .title {display:flex; align-items:center;}
.statistics-wrapper .statistic.solar-wrapper .col-6 .title img {margin-right:16px;}

.statistics-wrapper .statistic .stat {font-size:18px;}
.statistics-wrapper .statistic .stat span {font-size:12px;}

/* Dropdown */
.dropdown input {width:256px; background:#fff; color:#212529; text-align:left; padding:16px 32px; font-style:italic; border:none;}
.dropdown input.xl {width:320px;}
.dropdown button {width:256px; background:#fff; color:#212529; text-align:left; padding:16px 32px; font-style:italic;}
.dropdown button.xl {width:320px;}
/*.dropdown button:after {position:absolute; right:16px; margin:0; top:50%; transform:translateY(-50%);}*/
.dropdown button:after {font-family:"Font Awesome 6 Pro"; font-weight:900; content:"\f078"; position:absolute; right:16px; top:50%; transform:translateY(-50%); pointer-events:none; border:none; font-style:normal;}
.dropdown .dropdown-menu {top:48px; width:100%; background:rgba(255,255,255,.95); max-height:56vh; overflow-y:scroll;}
.dropdown .dropdown-menu .filter-item {display:block; width:100%; color:var(--primary_color); padding:8px 16px;}
.dropdown .dropdown-menu .filter-item:hover {cursor:pointer;}
.dropdown .dropdown-menu .filter-item a {color:var(--primary_color); text-decoration:none;}

.dropdown .multiselect-dropdown {width:256px!important; background:#fff; color:#212529; text-align:left; padding:16px; font-style:italic; border:none; -webkit-box-shadow:0px 3px 6px 0px rgba(15,62,77,0.2)!important; box-shadow:0px 3px 6px 0px rgba(15,62,77,0.2)!important;}
.dropdown .multiselect-dropdown .placeholder {opacity:1;}
.dropdown .multiselect-dropdown .multiselect-dropdown-list-wrapper {z-index:999;}
.dropdown .multiselect-dropdown .multiselect-dropdown-list-wrapper label {font-size:14px; margin-bottom:0;}

/* Tickets */
.filter-wrapper {display:flex; width:100%; flex-wrap:wrap; gap:32px; margin-bottom:32px;}
.filter-wrapper > .filter {}
.filter-wrapper > .filter select {width:256px!important; background:#fff; color:#212529; text-align:left; display:flex; /* flex-direction:column; */ padding:16px; border-radius:8px; height:58px; overflow:hidden; font-style:italic; border:none; resize:none; -webkit-box-shadow:0px 3px 6px 0px rgba(15,62,77,0.2)!important; box-shadow:0px 3px 6px 0px rgba(15,62,77,0.2)!important;}
/* .filter-wrapper .filter select option {display:none!important;} */
.filter-wrapper > .filter label {font-size:24px; margin-bottom:8px;}
.filter-wrapper > .filter .search-wrapper {position:relative;}
.filter-wrapper > .filter .search-wrapper input {padding-right:56px;}
.filter-wrapper > .filter .search-wrapper .search-icon {position:absolute; top:0; right:0; height:56px; width:56px; display:flex; align-items:center; justify-content:center;}
.filter-wrapper > .filter .search-wrapper .search-icon:hover {cursor:pointer;}
.filter-wrapper > .filter .search-wrapper .search-icon i {transition:.3s;}
.filter-wrapper > .filter .search-wrapper .search-icon:hover i {color:var(--secondary_color);}

span.link { text-decoration:underline; cursor:pointer; } 
span.link:hover { color: var(--secondary_color); } 

/* Datepicker */
.daterangepicker {margin-top:2px; border-radius: .25rem; overflow:hidden;}
.daterangepicker:before,
.daterangepicker:after {display:none;}
.daterangepicker .ranges ul {width:auto;}
.daterangepicker .ranges ul li {display: block; font-size:1rem; width: 100%;color: var(--primary_color);padding: 8px 16px; font-family: 'Titillium Web', sans-serif !important;}
.file-delete{display:none; margin-top:8px; cursor:pointer;}

/* Key statistics */
.activity-wrapper {margin-top:32px;}
.activity-wrapper .single-activity {padding:24px; margin-bottom:24px;}
.activity-wrapper .single-activity h5 {margin-bottom:8px;}
.activity-wrapper .single-activity .activity-info {display:flex; flex-wrap:wrap; align-items:center;}
.activity-wrapper .single-activity .activity-info .divider.vertical {width:1px; margin:0; background:#000; height:100%; margin:0 6px; height:15px;}
.activity-wrapper .single-activity .activity-info .start-time {margin-right:4px; font-weight:bold;}
.activity-wrapper .single-activity .activity-info .end-time {margin-left:4px; font-weight:bold;}

/* Contact */
.contact-wrapper {display:flex; flex-wrap:wrap; width:100%; margin-top:32px;}
.contact-wrapper h4 {width:100%; margin-bottom:16px;}
.contact-wrapper .contact {display:flex; margin-right:16px;}
.contact-wrapper .contact:last-child {margin-right:0;}
.contact-wrapper .contact .icon {width:40px;}

/* Archive link */
.archive-link {display:flex; color:var(--primary_color); margin-bottom:16px; align-items:center; text-decoration:none; transition:.3s;}
.archive-link i {margin-right:8px;}

/* Modal */
.modal {background:rgb(15 62 77 / 50%);}
.modal .modal-header {border-bottom:none; justify-content:space-between}
.modal .modal-header .title {justify-self:flex-start;}
.modal .modal-header .title i {margin-right:8px;}
.modal .modal-header .close {background:transparent; color:var(--primary_color); border:none; font-size:24px; justify-self:flex-end; transition:.3s;}
.modal .modal-header .close:hover {cursor:pointer; color:var(--secondary_color);}
.modal .modal-header .close span {line-height:1;}
.modal .modal-body {padding-top:0;}
.modal .loader-wrapper {text-align:left; margin-top:16px;}
.modal .loader-wrapper .loader {width:40px; margin-left:8px;}
#room_modal .modal-footer {justify-content:flex-start; border-top:0;}
#room_modal .modal-footer .button {margin-left:0;}

/* Details */
.detail {display:flex; flex-wrap:wrap; width:100%; margin-bottom:16px;}
.detail .label {width:100%;}
.detail .value {color:#879ea6; border:2px solid #ebe8e8; font-style:italic; border-radius:8px; width:100%; height:56px; padding:8px 16px; transition:.3s;}
.detail .value i {margin-right:8px;}
.detail .value i.open {color:#9aaeb4;}
.detail .value i.planned {color:#f1c40f;}
.detail .value i.active {color:#2ce3b9;}
.detail .value i.complete {color:#2ce3b9;}

/* Chat */
.chat-wrapper {background:#f8f8f8; padding:32px; max-height:56vh; min-height:320px; overflow-y:scroll; display:flex; flex-direction:column-reverse;}
.chat-wrapper .message {display:flex; flex-wrap:wrap; width:100%; margin-bottom:16px;}
.chat-wrapper .message .sender {display:flex; flex-wrap:wrap; align-items:flex-start; width:100%;}
.chat-wrapper .message .sender .image {width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; overflow:hidden; margin-right:8px;}
.chat-wrapper .message .sender .image img {min-width:100%; min-height:100%; width:auto; height:auto; object-fit:cover;}
.chat-wrapper .message .sender .name {font-weight:bold; line-height:24px; margin-right:8px;}
.chat-wrapper .message .sender .time {font-style:italic; font-size:12px; line-height:24px;}
.chat-wrapper .message .content {background:#fff; padding:16px; margin-left:56px; margin-top:-16px; position:relative; }
.chat-wrapper .message .content:after {content:""; position:absolute; top:0; left:-10px; background:#fff; clip-path:polygon(100% 0, 0 0, 100% 100%); width:12px; height:12px;}

/* Send */
.chat-wrapper .message.send {justify-content:flex-end;}
.chat-wrapper .message.send .sender {flex-direction:row-reverse;}
.chat-wrapper .message.send .sender .image {margin-right:0; margin-left:8px;}
.chat-wrapper .message.send .sender .name {margin-right:0; margin-left:8px;}
.chat-wrapper .message.send .content {margin-left:0; margin-right:56px;}
.chat-wrapper .message.send .content:after {left:auto; right:-10px; clip-path:polygon(0 0, 0% 100%, 100% 0);}

/* Reply */
.reply-wrapper {background:#e8e8e8; padding:32px;}
.reply-wrapper .form-wrapper textarea {height:128px!important;}

/* Previews */
.preview {display:flex; flex-wrap:wrap; max-width:640px; margin-bottom:16px;}
.preview.large {max-width:1280px; max-height:64vh;}
.preview small {width:100%;}
.preview .image-wrapper {width:100%; position:relative; cursor:default;}
.preview .image-wrapper:after {content:"Dit is een voorbeeld"; position:absolute; top:0; left:0; height:100%; width:100%; display:flex; justify-content:center; align-items:center; color:#fff; font-size:24px; font-weight:700; text-shadow:1px 1px 1px #0f3e4d; background:rgba(15,62,77,.3); opacity:0; transition:.5s;}
.preview .image-wrapper:hover:after {opacity:1;}
.preview .image-wrapper img {width:100%; transition:.3s;}
.preview .image-wrapper:hover img {filter:grayscale(50%) blur(4px);}
.preview .iframe-wrapper {position:relative; padding-top:56.25%; width:100%;}
.preview .iframe-wrapper iframe {position:absolute; top:0; left:0; width:100%; height:100%;}

.dropdown-content { position: absolute; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; display: none; background-color: #fff; width: 100%; max-height: 300px; overflow-y: auto; border: 1px solid #ddd;z-index: 1;}
.dropdown-content .option {cursor:pointer; color:#000; padding:12px 16px; text-decoration:none; display:block;}
.dropdown-content .option:hover {background-color: var(--bs-primary); color:#fff}
.rooms_search:focus{border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;}
.arrow_down{position:relative;}
.arrow_down:after{font-family:"Font Awesome 6 Pro"; font-weight: 900; content: "\f078"; position: absolute; right: 16px; top: 16px; pointer-events:none;}
.arrow_down:hover:after {cursor:pointer;}
.deletearrow{ -webkit-appearance: none; -moz-appearance: none;text-indent: 1px;text-overflow: '';}
.deletearrowselect:after{top:0;right: 16px;}

/* scroll bar show */ 
.scrollbar-track-y {display:block!important; opacity:1!important; border-radius:4px!important;}
#rooms .room-title {display:flex;}
#rooms .room-title .info-button {width:12px; height:12px; color:#fff; background:var(--primary_color); border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:bold; margin-left:2px; margin-top:2px; font-size:8px; transition:.3s;}

/*star rate */ 
.starrating{position: fixed; bottom: 24px; right: 24px; background-color:#0F3E4D;color: #fff;padding:25px;border-radius: 24px;max-width:250px}
.starrating h2{color: #fff;font-size: 20px}
.starrating p{font-size: 15px}
.rate { float: left;height: 46px;padding: 0 10px;}
.rate:not(:checked) > input { position:absolute; top:-9999px;}
.rate:not(:checked) > label { float:right; width:1em; overflow:hidden; white-space:nowrap; cursor:pointer; font-size:30px;color:#ccc;}
.rate:not(:checked) > label:before {content: '★ ';}
.rate > input:checked ~ label {color: #f60f7fcb;}
.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label { color: #F60F80; }
.rate > input:checked + label:hover,
.rate > input:checked + label:hover ~ label,
.rate > input:checked ~ label:hover,
.rate > input:checked ~ label:hover ~ label,
.rate > label:hover ~ input:checked ~ label { color: #F60F80;}

.selecttype{ color: #879ea6; border: 2px solid #ebe8e8; font-style: italic; border-radius: 8px; width: 100%; padding: 8px;resize: none; transition: .3s;}

/* Password reset */
#passwordmessage {position:absolute; top:72px; z-index:10; display:none; background-color:#fff; padding:24px; border-radius:24px; max-width:320px}
#passwordmessage h3 {font-size:16px; margin-bottom:12px;}
#passwordmessage p {padding: 0px 0px 0px 35px; font-size:14px; margin-bottom:4px;}

.password-valid {color:green;}
.password-valid:before {position: relative;  left: -35px;  content: "✔";}
.password-invalid { color: red;}
.password-container{  width: 100%;  position: relative;}
.passwordfield {font-weight:900; position:absolute; cursor:pointer; right:16px; top:16px;}
.passwordfield.disabled {opacity:.5; pointer-events:none;}
.password-invalid:before {  position: relative;  left: -35px;  content: "✖";}

.password-weak {border: solid;border: 2px solid red !important;}
.password-medium {border: solid;border:2px solid  orange !important;}
.password-strong {border: solid;border:2px solid  green !important;}

.notifications input[type=checkbox] + label {display: block; margin: 0.2em; cursor: pointer;padding: 0.2em; margin-bottom: 8px; }
.notifications input[type=checkbox] {display: none; }
.notifications input[type=checkbox] + label:before { content: "\2714"; border: 2px solid #EBE8E8; border-radius: 0.2em;display: inline-block;width: 1.5rem;height: 1.5rem;padding-left: 0.2em;  padding-bottom: 0.3em;  margin-right: 0.2em;  vertical-align: bottom;  color: transparent;  transition: .2s;margin-right: 8px;}
.notifications input[type=checkbox] + label:active:before { transform: scale(0);}
.notifications input[type=checkbox]:checked + label:before {   color: var(--secondary_color);}
.notifications input[type=checkbox]:disabled + label:before {  transform: scale(1);  border-color: #aaa;}
.notifications input[type=checkbox]:checked:disabled + label:before {  transform: scale(1);  background-color: #bfb;  border-color: #bfb;}

.profile-header{display: flex; justify-content: space-between; align-items: self-end;position: relative}
.profile-header img {display:inline-flex; border-radius:50%; width:128px; height:128px; border:2px solid #ebe8e8;}
.profile-header .changepff{position: absolute;right: 0;cursor:pointer}

.noselect {-webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */  -moz-user-select: none; /* Old versions of Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */}

/* Faqs */
.faqs-wrapper .faq .title {display:flex; justify-content:space-between; align-items:center; width:100%; padding:8px 0;}
.faqs-wrapper .faq .title:hover {cursor:pointer;}
.faqs-wrapper .faq .title span {width:calc(100% - 56px); font-weight:bold;}
.faqs-wrapper .faq .title .toggle-button {display:inline-block; position:relative; width:56px; transition:.3s;}
.faqs-wrapper .faq .title .toggle-button:after {content:""; height:2px; width:16px; background:var(--primary_color); position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
.faqs-wrapper .faq .title .toggle-button:before {content:""; height:2px; width:16px; background:var(--primary_color); position:absolute; top:calc(50% - 1px); left:calc(50% - 1px); transform:rotate(90deg) translate(-50%, -50%); transform-origin:left center; transition:.3s;}
.faqs-wrapper .faq .content {display:none; max-width:720px; padding:8px 0;}
.faqs-wrapper .faq.open .title .toggle-button {transform:rotate(-45deg);}
.faqs-wrapper .faq-cat-wrapper {margin-bottom:32px;}
.faqs-wrapper .faq-cat-wrapper > .title {margin-bottom:8px;}

/* Logout */
.logout-wrapper {position:fixed; top:0; left:0; height:100%; width:100%; display:flex; justify-content:center; align-items:center; background:rgba(255,255,255,.4); z-index:99999;}
.logout-wrapper .logout-container {max-width:480px;}

/* 404 Page */
body.error-404 {background:url(/images/login-background.webp) center center no-repeat; background-size:cover; min-height:100vh; overflow:hidden;}
body.error-404:after {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:url(/images/printplate.svg) center center no-repeat; background-repeat:repeat; z-index:-1; opacity:.1;}
body.error-404 .container {min-height:100vh;}
body.error-404 .login-wrapper {max-width:640px; background:#fff; width:100%; padding:64px; position:relative; z-index:2; display:flex; align-items:center;}
body.error-404 .admin-login-wrapper {position:absolute; bottom:16px; right:0; transform:translateX(calc(100% - 40px)); display:flex; align-items:flex-end; transition:.3s;}
body.error-404 .admin-login-wrapper.open {transform:translateX(0);}
body.error-404 .admin-login-wrapper .admin-login-toggle {display:inline-flex; align-items:center; justify-content:center; height:40px; width:40px; font-size:19px; background:#fff; border-radius:4px 0 0 4px;}
body.error-404 .admin-login-wrapper .admin-login-toggle:hover {cursor:pointer;}
body.error-404 .admin-login-wrapper .admin-login {background:#fff; padding:24px; border-radius:4px 0 0 0;}
body.error-404 .admin-login-wrapper .admin-login .login-form {width:240px; line-height:1;}
body.error-404 .admin-login-wrapper .admin-login .login-form .form-row:not(:last-child) {margin-bottom:8px;}
body.error-404 .admin-login-wrapper .admin-login .login-form .form-row strong {font-size:14px;}
body.error-404 .admin-login-wrapper .admin-login .login-form .form-row input {width:100%; font-size:14px;}
body.error-404 .admin-login-wrapper .admin-login .login-form .form-row input[type="submit"] {padding:8px 16px; font-size:12px; font-weight:400; line-height:1; width:auto;}

#download-loader-wrapper {display:none; position:fixed; top:0; left:var(--header_width); width:calc(100% - var(--header_width)); height:100%; background:rgba(255,255,255,.64);}
#download-loader-wrapper .download-loader-container {display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; height:100%;}
#download-loader-wrapper .download-loader-container .loader {width:96px;}
#download-loader-wrapper .download-loader-container h3 {width:100%; text-align:center; font-size:40px;}

/* Map */
#map-wrapper {position:relative; margin-top:32px;}
#map-wrapper svg {width:auto; max-width:80vw; height:auto; max-height:80vh;}
#map-wrapper .map {max-height:calc(100vh - 360px); max-width:100%;}
#map-wrapper .marker {width:24px; height:24px; background:var(--secondary_color); border-radius:50%; position:absolute; transform:translate(-50%); transition:.3s;}
#map-wrapper .marker:hover {cursor:pointer; background:var(--primary_color);}
#map-wrapper .marker .marker-position {position:relative; width:100%; height:100%;}
#map-wrapper .marker .marker-position .marker-pulse {position:absolute; width:100%; height:100%; top:0; left:0; border-radius:50%; background:var(--secondary_color); opacity:.4; animation:pulse 1.6s ease-in-out infinite;}
#map-wrapper .marker:hover .marker-position .marker-pulse {background:var(--primary_color);}
#map-wrapper .marker .marker-position .marker-name {position:absolute; white-space:nowrap; top:calc(100% + 4px); transform:translateX(-50%); left:50%; font-size:14px;}
#map-wrapper .marker .marker-position .marker-name .name-position {position:relative; width:100%; height:100%;}
#map-wrapper .gl-col {position:absolute; height:100%; width:2px; transform:translateX(-50%); top:0; background:#e1e1e1; opacity:.64; pointer-events:none;}
#map-wrapper .gl-row {position:absolute; width:100%; height:2px; transform:translateY(-50%); left:0; background:#e1e1e1; opacity:.64; pointer-events:none;}
#map-wrapper .gl-position {position:relative; width:100%; height:100%;}
#map-wrapper .gl-col .gl-position .gl-per {position:absolute; top:-28px; transform:translateY(-32%) rotate(-40deg); pointer-events:none;}
#map-wrapper .gl-row .gl-position .gl-per {position:absolute; right:-32px; transform:translateY(-88%) rotate(-40deg); pointer-events:none;}

#map-wrapper .marker.small {width:16px; height:16px;}
#map-wrapper .marker.small .marker-position .marker-name {top:50%; left:calc(100% + 8px); transform:translateY(-50%); opacity:0; transition:.3s; pointer-events:none;}
#map-wrapper .marker.small:hover .marker-position .marker-name {opacity:1;}
#map-wrapper .marker.small .marker-position .marker-name .name-position {position:relative; width:100%; height:100%; background:var(--primary_color); color:#fff; padding:4px 8px; border-radius:4px; -webkit-box-shadow:0px 3px 6px 0px rgba(15,62,77,0.2)!important; box-shadow:0px 3px 6px 0px rgba(15,62,77,0.2)!important;}
#map-wrapper .marker.small .marker-position .marker-name .name-position:before {content:''; position:absolute; width:0; height:0; border-right:4px solid var(--primary_color); border-top:4px solid transparent; border-bottom:4px solid transparent; right:100%; top:50%; transform:translateY(-50%); z-index:999;}

/* Animations */
@keyframes pulse {
    0% {transform:scale(1.1);}
    75% {transform:scale(1.4);}
    100% {transform:scale(1.1);}
}

select:hover,
select option:hover {cursor:pointer!important;}
#rooms_search:hover {cursor:pointer!important;}

.tree-wrapper {display:flex; flex-direction:column; padding:8px 16px;}
.tree-wrapper .tree-leaf {position:relative; padding-left:16px; transition:.3s;}
.tree-wrapper .tree-leaf:before {content:"\f054"; font-family:"Font Awesome 6 Pro"; font-weight:900; position:absolute; left:0px; top:50%; transform:translateY(-50%); pointer-events:none; transition:.3s; font-size:10px; font-style:normal;}
.tree-wrapper .tree-leaf:hover {cursor:pointer; color:var(--secondary_color);}
.tree-wrapper .tree-leaf.open:before {transform:rotate(90deg) translateX(-100%);}
.tree-wrapper .tree-branch.sub {margin-left:16px;}

.multiselect-dropdown {color:#212529; border:2px solid #ebe8e8; background-color:field; font-style:italic; border-radius:8px; width:100%; height:56px; padding:8px 32px 8px 16px; position:relative; transition:.3s;}
.multiselect-dropdown:hover {cursor:pointer;}
.multiselect-dropdown:after {content:'\f078'; position:absolute; right:12px; top:0; font-size:16px; font-family:"Font Awesome 6 Pro"; font-style:normal; height:100%; display:flex; align-items:center;}
.multiselect-dropdown span.optext,.multiselect-dropdown span.placeholder {margin-right:4px; margin-bottom:4px; padding:1px 0; border-radius:4px; display:inline-block}
.multiselect-dropdown span.optext{background:#e8e8e8; padding:0 16px 0 8px; height:100%; display:inline-flex; font-size:14px; align-items:center;}
.multiselect-dropdown span.optext .optdel {float:right;margin:0 -6px 1px 5px;font-size:.7em;margin-top:2px;cursor:pointer;color:#666}
.multiselect-dropdown span.optext .optdel:hover {color:#c66}
.multiselect-dropdown span.placeholder {height:100%; background:#fff; color:#212529; display:flex; align-items:center; margin-bottom:0; cursor:auto;}
.multiselect-dropdown span.placeholder:hover {cursor:pointer;}
.multiselect-dropdown-list-wrapper {display:none; margin:-1px; position:absolute; top:100%; left:0;right:0;}
.multiselect-dropdown-list {z-index:99; padding:2px; border-radius:4px; -webkit-box-shadow: 0px 3px 6px 0px rgba(15,62,77,0.2)!important; box-shadow: 0px 3px 6px 0px rgba(15,62,77,0.2)!important; overflow-y:auto; overflow-x:hidden; background:#fff; height:auto!important; max-height:400px; margin-bottom:32px;}
.multiselect-dropdown-list::-webkit-scrollbar{width:6px}
.multiselect-dropdown-list::-webkit-scrollbar-thumb{background-color:#bec4ca;border-radius:3px}
.multiselect-dropdown-list div {display:flex; padding:4px; align-content:center; transition:.3s;}
.multiselect-dropdown-list div:before {content:'\f0c8'; font-family:"Font Awesome 6 Pro"; font-style:normal; font-weight:400; color:var(--primary_color); margin-right:4px; transition:color .3s;}
.multiselect-dropdown-list div.checked:before {content:'\f14a'; font-weight:900; color:var(--secondary_color);}
.multiselect-dropdown-list input {display:none;}
.multiselect-dropdown-list label:hover,
.multiselect-dropdown-list div:hover {cursor:pointer;}
.multiselect-dropdown span.maxselected{width:auto}
.multiselect-dropdown-all-selector{border-bottom:solid 1px #999}

/* Matterport */
.matterport-wrapper {display:grid; grid-template-columns:repeat(2, 1fr); grid-gap:32px;}
.matterport-wrapper[data-amount="1"] {grid-template-columns:1fr;}
.matterport-wrapper .single-matterport iframe {width:100%; max-width:960px; height:auto; aspect-ratio:16 / 9;}

/* Attachments Modal */
#attachments_modal .attachments-wrapper {display:flex; gap:16px; align-items:center; flex-wrap:wrap;}
#attachments_modal .attachments-wrapper > * {width:80px; height:80px; object-fit:cover; background:#eee; display:flex; align-items:center; justify-content:center; border-radius:4px; overflow:hidden;}
#attachments_modal .attachments-wrapper img {width:80px; height:80px; object-fit:cover;}
#attachments_modal .attachments-wrapper .notfound:after {content:"\f070"; font-family:"Font Awesome 6 Pro"; color:#6c757d; font-size:24px;}
#attachments_modal .attachments-wrapper .download:after {content:"\f019"; font-family:"Font Awesome 6 Pro"; color:#6c757d; font-size:24px; transition:.3s;}
#attachments_modal .attachments-wrapper .download:hover {cursor:pointer;}
#attachments_modal .attachments-wrapper .download:hover:after {color:var(--primary_color); transform:scale(1.1);}
#attachments_modal .attachments-wrapper .download.pdf:after {content:"\f1c1";}
#attachments_modal .attachments-wrapper .download.doc:after,
#attachments_modal .attachments-wrapper .download.docx:after {content:"\f1c2";}
#attachments_modal .attachments-wrapper .download.pot:after,
#attachments_modal .attachments-wrapper .download.potm:after,
#attachments_modal .attachments-wrapper .download.potx:after,
#attachments_modal .attachments-wrapper .download.ppt:after,
#attachments_modal .attachments-wrapper .download.pptm:after,
#attachments_modal .attachments-wrapper .download.pptx:after {content:"\f1c4";}
#attachments_modal .attachments-wrapper .download.csv:after,
#attachments_modal .attachments-wrapper .download.xls:after,
#attachments_modal .attachments-wrapper .download.xlsx:after,
#attachments_modal .attachments-wrapper .download.xlsm:after,
#attachments_modal .attachments-wrapper .download.xml:after {content:"\f1c3";}
#attachments_modal .attachments-wrapper .download.zip:after {content:"\e5ee";}

.detail .label {margin-bottom:8px;}
.detail .value {display:flex; align-items:center;}
.detail .value .image .avatar {width:32px; height:32px; object-fit:cover; border-radius:50%; margin-right:8px;}


#file_upload {display:none;}

.form-row .files {display:flex; gap:4px; flex-wrap:wrap; margin-top:8px;}
.form-row .files .file {padding:4px 8px; border-radius:4px; background:#ebe8e8; line-height:1.2; font-size:14px; position:relative; overflow:hidden;}
.form-row .files .file:hover {cursor:pointer;}
.form-row .files .file:after {content:'\f2ed'; position:absolute; top:0; left:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:#c0392b; color:#fff; font-family:'Font Awesome 6 Pro'; opacity:0; pointer-events:none; transition:.3s;}
.form-row .files .file:hover:after {opacity:.6;}