/* General */
* {outline:none !important; box-sizing:border-box!important;}
*:focus {box-shadow:none !important}
body {font-family:'Titillium Web', sans-serif; color:var(--primary_color); font-size:var(--font_size);}
h1,h2,h3,h4,h5,h6 {color:var(--primary_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 {padding:32px 32px 32px calc(32px + var(--header_width));}

#content .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 .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 .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:var(--secondary_color);}
.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;}
.equal-height {display:flex;}

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

.gradient {background:var(--secondary_gradient); 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 .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 {position:fixed; display:flex; flex-wrap:wrap; align-items:flex-start; height:100%; width:var(--header_width); z-index:9999;}
.header-wrapper:after {content:""; position:absolute; height:100%; width:100%; top:0; left:0; background:var(--primary_gradient); background-size:200% auto; z-index:9998;}
.header-wrapper .logo-wrapper {align-self:flex-start; height:var(--header_width); width:100%; z-index:9999;}
.header-wrapper .logo-wrapper .logo {width:80%;} 
.header-wrapper .menu-wrapper {display:flex; align-self:center; width:100%; position:relative;}
.header-wrapper .menu-wrapper .menu {padding:0; margin-bottom:0; width:100%; z-index:9999;}
.header-wrapper .menu-wrapper .menu .menu-item {height:var(--header_width); display:flex; justify-content:center; align-items:center;}
.header-wrapper .menu-wrapper .menu .menu-item svg {transition:.3s;}
.header-wrapper .menu-wrapper .menu .menu-item:hover {cursor:pointer;}
.header-wrapper .menu-wrapper .menu .menu-item:hover svg {transform:scale(1.15);}
.header-wrapper .menu-wrapper .menu .menu-item.current {}
.header-wrapper .menu-wrapper .menu .menu-item.current:hover {background-position:initial;}
.header-wrapper .menu-wrapper .flyout-menu {position:absolute; top:0; left:100%; height:100%; color:#fff; background:var(--primary_gradient_rev); background-size:200% auto; 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 .menu-wrapper:hover .flyout-menu {transform:translateX(0); transition-delay:.5s;}
.header-wrapper .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 .menu-wrapper .flyout-menu .menu-item.current {background:var(--secondary_gradient_rev); background-size:200% auto;}
.header-wrapper .menu-wrapper .flyout-menu .menu-item a {color:#fff; text-decoration:none;}
.header-wrapper .profile-wrapper {align-self:flex-end; height:var(--header_width); width:100%; position:relative;}
.header-wrapper .profile-wrapper .profile {height:100%; width:100%; z-index:9999;}
.header-wrapper .profile-wrapper .flyout-menu {position:absolute; bottom:0; left:100%; height:auto; color:#fff; background:var(--primary_gradient_rev); background-size:200% auto; 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 .profile-wrapper:hover .flyout-menu {transform:translateX(0); transition-delay:.5s;}
.header-wrapper .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 .profile-wrapper .flyout-menu .menu-item.current {background:var(--secondary_gradient_rev); background-size:200% auto;}
.header-wrapper .profile-wrapper .flyout-menu .menu-item a {color:#fff; text-decoration: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.default {background:var(--secondary_gradient); text-decoration:none; border:none; width:auto; padding:12px 48px; 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;} 
.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-divider {display:inline-block; margin-bottom:16px; margin-top:16px;}
.form-wrapper .form.default label {width:100%;}
.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.input.invalid {border-color:var(--secondary_color);}
.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:var(--secondary_gradient); 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; 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 .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);}

/* 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 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:hover {cursor:pointer;}
.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 .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 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.jpg) center center no-repeat; background-size:cover; min-height:100vh;}
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; height:80vh; max-height:640px; display:flex; align-items:center;}
body.login .login-wrapper .form-wrapper {border-right:2px solid #ebe8e8; padding-right:64px;}
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 button {width:256px; background:#fff; color:#212529; text-align:left; padding:16px 32px; font-style:italic;}
.dropdown button:after {position:absolute; right:16px; margin:0; top:50%; transform:translateY(-50%);}
.dropdown .dropdown-menu {top:48px; width:100%; background:rgba(255,255,255,.95);}
.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;}

/* Tickets */
.filter-wrapper {display:flex; width:100%;}
.filter-wrapper .filter {margin-right:32px;}
.filter-wrapper .filter label {font-size:24px; margin-bottom:8px;}

/* 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;}
.archive-link img {transform:rotate(180deg); height:14px; margin-right:8px;}

/* Modal */
.modal {background:rgb(15 62 77 / 50%);}
.modal .modal-header {border-bottom:none;}
.modal .modal-header .title {justify-self:flex-start;}
.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 .loader-wrapper {text-align:left; margin-top:16px;}
.modal .loader-wrapper .loader {width:40px; margin-left:8px;}

/* 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;}

/* Chat */
.chat-wrapper {background:#f8f8f8; padding:32px;}
.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;}

/* 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: black; 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 5 Pro"; font-weight: 900; content: "\f107"; position: absolute; right: 16px; top: 16px;}
.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;}

.clean-up-page h3{margin-top: 36px; margin-bottom: 16px !important;}
.clean-up-page .team-image{width: 100%; float: left;display: flex; align-items: center; padding: 32px;padding-left: 0;margin-bottom: 64px}
.clean-up-page .team-image p {margin-left: 32px}

/*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{float:right;border-radius:50%; width:134px;height:134px;}
.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;}