@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap');
@import url('https://rsms.me/inter/inter.css');
html { font-family: 'Inter', sans-serif; }
@supports (font-variation-settings: normal) {
  html { font-family: 'Inter var', sans-serif; }
}
:root{
    /*--blue:#55F;*/
    --primary:#542DFC;
    --primary-rgb:84,45,252;
    --primary:#4444ff;
    --primary:#5757ff;
    --primary:#5552F4;
    --primary:#796EFF;
    --primary:#6941C6;
    --primary:rgb(79, 70, 229);

    --primary:#4D46DC;
    --primary-light:#f0f4ff;

    --dark-1:#242937;
    --dark-2:#1D212C;
    --dark-3:#151922;
    --dark-4:#11141C;
    --light-4:#F7FBFF;
    --light-3:#EDF4FA;
    --light-2:#D1DAEC;
    --light-1:#B0BBD1;

    --dark-4:#0e1019;
    --dark-3:#171a26;
    --dark-2:#212533;
    --dark-1:#2c303f;

    --dark-4:#171a26;
    --dark-3:#212533;
    --dark-2:#2c303f;
    --dark-1:#393d4c;

    --grey: #95A4A6;
    --lightgrey: #f4f4f4;
    --red:#F66969;
    --red-rgb:246,105,105;
    --darkred:#CC3E3E;
    --darkred:#471010;
    --orange:#F68844;
    --orange-rgb:246,136,68;
    --green:#3CB371;
    --green:#26c281;

    --deepgreen: #43a36f;
    --grassgreen:#2FCC71;
    --green-rgb:38,194,129;
    --darkgreen:#072b1c;
    --lightgreen:#A7CC3E;
    --cyan:#3ECC99;
    --blue:#5552F4;
    --darkblue:#3E5DCC;
    --linkblue:#0071f2;
    --purple:#aa3Edd;
    --magenta:#CC3E9C;
    --pink:#CC3E9C;
    --pink-rgb:;
    --yellow:rgba(255, 205, 86, 1);
    --gold:#CCA43E;

    --mid-1:#8990A3;
    --mid-rgb:137,144,163;
    --white:#ffffff;
    --black:#000;
    --shade-overlay:255,255,255;
    --transition:200ms cubic-bezier(0.455, 0.030, 0.515, 0.955); /* easeInOutQuad */
    --transition-bounce:300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --transition-l:350ms cubic-bezier(0.455, 0.030, 0.515, 0.955); /* easeInOutQuad */
    --transition-nav:200ms cubic-bezier(0.455, 0.030, 0.515, 0.955);
    --transition-out:200ms cubic-bezier(.21,.01,0,1.02);
    --radius-s:4px;
    --radius-m:8px;
    --radius-l:12px;
    --radius-xl:16px;
    --shadow-s:0 2px 10px 0 rgba(0,0,0,0.06);
    --shadow-m:0 4px 40px 0 rgba(0,0,0,0.08);
    --shadow-l:0 8px 80px 0 rgba(0,0,0,0.12);
    --shadow-default:0px 4px 24px 0px rgba(0,0,0,0.04);
    --nav-w:90px;
    --nav-w-invoicecloud:250px;
    --aside-w:260px;
    --nav-fw:calc(var(--nav-w) + var(--aside-w));
    --font-body:'Inter',-apple-system,system-ui,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol',sans-serif;
}
*{box-sizing: border-box;transition:color 0s, background-color 0s;}
/*body{
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.4em;
  background:#edf4fa;
  color:#1D212C;
  overflow: hidden;
}*/
aside{display:none !important;}
.primary-color{color:var(--primary);}
.primary-bg{background:var(--primary);}
.primary-border{border-color:var(--primary);}

.green-color{color:var(--green);}
.green-bg{background:var(--green);}
.green-border{border-color:var(--green);}

.yellow-color{color:var(--yellow);}
.red-color{color:var(--red);}
html{
  height:100%;
  width:100%;
  scroll-behavior: smooth;
}
body{
  background:var(--body-bg);
  font-family: var(--font-body);
  color:var(--text-color);
  min-height:100vh;
  min-width:100vw !important;
  font-size:15px;
  line-height:18px;
  position:relative;
  /*overflow:hidden;*/
  transition: none;
  scroll-behavior: smooth;
}
main{
  /*max-width:calc(100% - 90px);*/
  width:calc(100vw - var(--nav-w));
  margin-left: var(--nav-w);
  background:var(--block-bg);
  height:calc(100vh - 60px);
  /*transform:translateX(90px);*/
  overflow:auto;
  z-index: 10;
  position: relative;
  box-shadow:var(--shadow-default);
  /*background:var(--light-3);*/
  /*border-top-left-radius:var(--radius-xl);*/
}
.main-invoicecloud{
  /*max-width:calc(100% - 90px);*/
  width:calc(100vw - var(--nav-w-invoicecloud));
  margin-left: var(--nav-w-invoicecloud);
  background:var(--block-bg);
  height:calc(100vh - 60px);
  /*transform:translateX(90px);*/
  overflow:auto;
  z-index: 10;
  position: relative;
  box-shadow:var(--shadow-default);
  /*background:var(--light-3);*/
  /*border-top-left-radius:var(--radius-xl);*/
}
.invoicecloud-payment-text{
  font-size: 13px;
}
.invoicecloud-payment-methods {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.invoicecloud-payment-method {
  display: flex;
  gap: 10px;
  cursor: pointer;
  flex-direction: unset !important;
  justify-content: unset !important;
}
main.show{
  /*max-width:calc(100% - 390px);*/
  /*transform:translateX(390px);*/
  width:calc(100vw - var(--nav-fw));
  margin-left:var(--nav-fw);
  transition:var(--transition-nav);
}

container{
/*height:100%;*/
width:1560px;
max-width:100%;
display:flex;
flex-direction:column;
margin:0 auto;
padding: 45px;
}
section{
/*background:var(--white);*/
display:block;
height:auto;
width:100%;
margin:0;
/*border-radius:var(--radius-m);*/
/*box-shadow:0 5px 30px 0 rgba(0,0,0,0.2);*/
/*border:1px solid var(--light-2);*/
}

.no-permission-message{
  background: var(--block-bg);
  padding: 40px 60px;
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-s);
  text-align: center;
  border: 1px solid var(--border-color);
}

.flex-block{
  display:flex;
  flex-direction:column;
}
.table{
  width:100%;
  height:100%;
  flex-grow:1;
  border-radius:inherit;
  padding:15px;
}
button{
  border:none;
  background:none;
  box-shadow:none;
  cursor:pointer;
  outline:none;
}
.button{
  background:var(--primary);
  color:var(--white) !important;
  border-color:var(--primary);
  font-weight:500;
  display:block;
  cursor:pointer;
  width:auto;
/*  height:auto;*/
  height:36px;
  /*  padding:16px 20px;*/
  padding:10px 12px;
  border-radius: var(--radius-s);
  text-align: center;
/*  margin-top: 12px;*/
}
.button.secondary{
  background:var(--button-bg);
  color:var(--button-color);
}
.button.secondary.invert{
  background:var(--button-bg-invert);
}
.button:hover{
  background:var(--primary);
}
.button.red:hover{
  background: #FB9090;
}
.button.secondary.invert:hover{
  color:var(--white);
}
.button.small{
  padding:10px 12px;
  font-size:0.85em;
}
.invoice-buttons{
  display: flex;
}
.invoice-pdf-icon{
  margin-right: 5px;
}
#partialpaymentdiv{
  display: none;
}


::-moz-selection {
  color: var(--primary);
  background: rgba(95, 39, 205,0.1);
}
::selection {
  color: var(--primary);
  background: rgba(95, 39, 205,0.1);
}
:focus {
outline: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
.price,
.input-label,
.total-sum {
  /*font-family: 'IBM Plex Sans', sans-serif;*/
  font-weight: 400;
  margin-bottom: 8px;
}
h1, h2{
  font-weight: 600;
  letter-spacing: -0.04em;
}
h5{
  font-size:1.1em;
  font-weight: 400;
  margin: 0;
}
.input-label{
  color:var(--mid-1);
  font-size: 0.85em;
}
.input-label-peppol{
  padding: 10px !important;
}
.input-label-peppol > img{
  width: 17px;
}
.input-disabled{
  color: rgb(138, 139, 145) !important;
  background: var(--light-4);
}
a{
  text-decoration: none;
  color:var(--text-color);
  cursor: pointer;
  /*transition: all 150ms ease-in-out;*/
}
h1{
  font-size:2.7em;
  font-weight: 700;
  line-height: 1.1em;
  margin-bottom: 12px;
}
h4{margin: 0;font-weight: 500;}

.link{
  color: #0071f2;
  width: 100%;
  cursor: pointer;
}
.link-hover:hover{
  text-decoration: underline;
}
.link-result-list{
  color: var(--text-color-light);
  width: 100%;
}
.link:hover, .link-result-list:hover{
  text-decoration: underline;
}
.link-delete{
  color: #E2163B !important;
}
.link-result-list{
  padding: 0px !important;
}
.link-inactive{
   pointer-events: none;
   cursor: default;
}
.btn-sm{
  display: inline !important;
}
.product .btn{
  width:100%;
  bottom:0;
  left:0;
  right:0;
}
.disabled-btn, .disabled-btn:hover{
/*  opacity:0.5;*/
  pointer-events: none;
  background: rgb(245, 249, 252) !important;
  color: rgb(138, 139, 145) !important;
}
.disabled-btn-dropdown{
  background: none !important;
}
.peppol-disabled{
  pointer-events: none;
  background: rgb(245, 249, 252) !important;
  cursor: default;
}
.peppol-disabled h3, .peppol-disabled span{
  color: var(--light-2) !important;
}
.color-options{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.color-options > div{
  height:32px;
  width:32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:none;
  border:none;
}
[type="radio"]:checked,
[type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}
[type="radio"]:checked + label,
[type="radio"]:not(:checked) + label
{
    position: relative;
    width: 24px;
    height:24px;
    cursor: pointer;
    border:none;
    margin: 0;
}
[type="radio"]:checked + label:before,
[type="radio"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    transition: var(--transition);
}
[type="radio"]:not(:checked) + label:before {
  border: 2px solid var(--border-color);
}
/*[type="radio"]:not(:checked):hover + label:before{
  background:var(--border-color);
}*/
.grey label:after{
  background:var(--grey);
}
.grey [type="radio"]:checked + label:before{
  border: 2px solid var(--grey);
}
.red label:after{
  background:var(--red);
}
.red [type="radio"]:checked + label:before{
  border: 2px solid var(--red);
}
.darkred label:after{
  background:var(--darkred);
}
.darkred [type="radio"]:checked + label:before{
  border: 2px solid var(--darkred);
}
.orange label:after{
  background:var(--orange);
}
.orange [type="radio"]:checked + label:before{
  border: 2px solid var(--orange);
}
.yellow label:after{
  background:var(--yellow);
}
.yellow [type="radio"]:checked + label:before{
  border: 2px solid var(--yellow);
}
.gold label:after{
  background:var(--gold);
}
.gold [type="radio"]:checked + label:before{
  border: 2px solid var(--gold);
}
.green label:after{
  background:var(--green);
}
.green [type="radio"]:checked + label:before{
  border: 2px solid var(--green);
}
.lightgreen label:after{
  background:var(--lightgreen);
}
.lightgreen [type="radio"]:checked + label:before{
  border: 2px solid var(--lightgreen);
}
.cyan label:after{
  background:var(--cyan);
}
.cyan [type="radio"]:checked + label:before{
  border: 2px solid var(--cyan);
}
.blue label:after{
  background:var(--blue);
}
.blue [type="radio"]:checked + label:before{
  border: 2px solid var(--blue);
}
.darkblue label:after{
  background:var(--darkblue);
}
.darkblue [type="radio"]:checked + label:before{
  border: 2px solid var(--darkblue);
}
.purple label:after{
  background:var(--purple);
}
.purple [type="radio"]:checked + label:before{
  border: 2px solid var(--purple);
}
.magenta label:after{
  background:var(--magenta);
}
.magenta [type="radio"]:checked + label:before{
  border: 2px solid var(--magenta);
}
.pink label:after{
  background:var(--pink);
}
.pink [type="radio"]:checked + label:before{
  border: 2px solid var(--pink);
}

[type="radio"]:checked + label:after,
[type="radio"]:not(:checked) + label:after {
    content: '';
    width: 12px;
    height: 12px;
    position: absolute;
    top: 6px;
    left: 6px;
    border-radius: 100%;
    transition: var(--transition-bounce);
}
[type="radio"]:not(:checked) + label:after{
    transform: scale(1.3);
}
[type="radio"]:checked + label:after {
    transform: scale(1);
}

h3{
  margin: 0;
  margin-bottom: 20px;
  font-weight: 500;
}
/*.price{
  background: #EEEAE2;
  padding:8px;
  margin-bottom: 10px;
  font-size: 1.2em;
  text-align: center;
  z-index: 998;
  transition: all 150ms ease-in-out;
}*/
.login-wrapper, .resetpassword-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 20px;
  width: 100%; /* Full width of its grid column */
  height: 100%; /* Full height within the grid */
}
.login-wrapper .block, .resetpassword-wrapper .block{
  width:540px;
  max-width: 100%;
  padding:30px;
}
.login-logo, .resetpassword-logo{
  width:200px;
  margin: auto;
  margin-bottom: 30px;
}
.login-heading, .resetpassword-heading{
  margin: auto;
  margin-bottom: 30px;
}
.login-form{
  display:flex;
  flex-direction: column;
  margin-bottom: 15px;
}
.login-form-info{
  font-size: 13px;
  margin-bottom: 15px;
  color: var(--text-color-light);
}
.login-links{
  font-size: 12px;
  margin-bottom: 5px;
}
.login-mfa-info{
  margin-bottom: 20px;
  font-size: 13px;
}
#mfa-wrapper{
  display: none;
}
.mfa-steps{
  display: flex;
  gap: 10px;
}
.mfa-steps .form-group{
  border: 1px solid var(--border-color);
  padding: 10px;
  border-radius: var(--radius-m);
  width: 350px;
}
.mfa-steps-info{
  font-size: 13px;
  margin-top: 10px;
}
.mfa-key{
  background: var(--body-bg);
  padding: 5px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-l);
}
.mfa-key i{
  margin-left: 10px;
  color: var(--primary);
  cursor: pointer;
}
.center-heading{
  text-align: center;
}
.center{
  margin: 0 auto;
}
.main-logo{
  height: 32px;
  display: block;
  position: absolute;
  top: 32px;
  left:20px;
}
label{
/*  margin-bottom: 4px;*/
  font-size: 0.8em;
  display: block;
  color:var(--mid-1);
}
input, select{
  border:1px solid var(--border-color);
  color:var(--text-color);
  margin-bottom: 8px;
  width: 100%;
  /*border:none;*/
  border-radius:var(--radius-s);
/*  border-width: 0 0 2px;*/
  font-size: 12px;
  line-height:16px;
  height: 36px;
  background:#fff;
  box-sizing:border-box;
  /*transition: var(--transition);*/
}
#login-form input{color:var(--black)}
input::placeholder{color:var(--text-color-light); font-weight:400;}
input{padding:8px;}
select{padding:8px;}
select:disabled{background:var(--light-4); color: var(--text-color-light);}
select.action{
  background: none !important;
}
.date-input{padding:6px;}
.upload-input{
  padding:10px;
}



/*READ MORE*/
.read-more-state {
  display: none;
}

.read-more-target {
  opacity: 0;
  max-height: 0;
  display: none;
  transition: .25s ease;
/*  padding: 10px 0px;*/
}

.read-more-content {
  background: var(--primary-light);
  border-radius: 4px;
  padding: 20px;
}

.read-more-state:checked ~ .read-more-wrap .read-more-target {
  opacity: 1;
  font-size: inherit;
/*  display: block;*/
  display: contents;
  max-height: 999em;
}

.read-more-state ~ .read-more-trigger:before {
  content: 'Lees meer';
}

.read-more-state:checked ~ .read-more-trigger:before {
  content: 'Lees minder';
}

.read-more-trigger {
  cursor: pointer;
  display: inline-block;
  color: var(--linkblue);
  font-size: .9em;
  line-height: 1;
  border-radius: .25em;
}


.asterix-required {
  color: var(--red);
}



.file-upload .file-upload-select {
  display: block;
  color: var(--button-color);
  cursor: pointer;
  text-align: left;
  background: var(--button-bg);
  overflow: hidden;
  position: relative;
  border-radius: 6px;
  height: 36px;
}
.file-upload .file-upload-select .file-select-button {
  background: var(--button-color);
  color: var(--white);
  padding: 9px;
  display: inline-block;
  position: absolute;
  right: 0;
}
.file-upload .file-upload-select .file-select-name {
  display: inline-block;
  padding: 9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 300px;
}
.file-upload .file-upload-select:hover .file-select-button {
  background: var(--light-1);
  color: var(--white);
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}
.file-upload .file-upload-select input[type="file"] {
  display: none;
}





/*input:hover,select:hover,input:focus {
  background-color: #f7f7f7;
  background:#f7fbff;
  background: #edf4fa;
}
input:hover,input:focus {
  color:rgba(124, 70, 230,1);
  font-weight:500;
}*/
.remember{
  margin-top: 15px;
}
.psw{
  font-size: 0.8em;
  font-weight: 500;
  text-align: center;
  margin-top: 10px;
}

.login-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 1fr for each column to split equally */
  height: 100vh; /* Takes full height of the viewport */
  position: relative;
  color: #222f3e;
  overflow: hidden; /* Ensure no overflow issues */
}
.login-grid .input-label{
  color:var(--mid-1);
}
/*.img-holder {
  position: relative;
  width: 100%;
  height: 100%;
  background: url('assets/deskbackground.jpg') no-repeat center center;
  background-size: cover;
  border-radius: 0px 150px 150px 0px;
}
.img-holder svg{
  height:100%;
  position: absolute;
  left: 0;
  top:0;
}*/

.img-holder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background-color: var(--aside-bg);
  border-radius: 0px 150px 150px 0px;
  text-align: center;
}

.login-banner-img {
  max-width: 400px;
  height: auto;
  margin-bottom: 20px;
}

.login-banner-title {
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 15px;
  color: #222;
}

.login-banner-text {
  font-size: 0.8rem;
  line-height: 1.5;
  max-width: 400px;
  color: #555;
}

.profile-banner{
  width:100%;
  height:200px;
  overflow:hidden;
  object-fit: cover;
  background:var(--text-color);
}
.profile-center{
  display:flex;
  flex-direction:column;
  align-items: center;
  margin-top:-70px;
  margin-bottom: 40px;
}
.profile-center h1{
  margin-top: 0;
}
.link-popup-box-editprofilepicture{
  border-radius:24px;
  overflow:hidden;
  position:relative;
  border:8px solid var(--block-bg);
  margin-bottom:12px;
text-decoration:none !important;}
.link-popup-box-editprofilepicture i{
  opacity:0;
  position: absolute;
  z-index:10;
  font-size:12px;
  left:50%;
  top:50%;
  color:var(--white);
  transform:translate(-50%,-50%);
  transition:var(--transition-bounce);
}
.link-popup-box-editprofilepicture:hover i{
  opacity:1;
  font-size:36px;
}
.link-popup-box-editprofilepicture:hover .profile-pic, .link-popup-box-editprofilepicture:hover .product-pic{
  filter:brightness(36%) !important;
  /*transform:scale(1.04);*/
}

.profile-pic img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.profile-grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 30px;
}

.profile-link{
  margin: 0 auto;
}

.profile-heading{
  width: 100%;
  display:flex;
}
.profile-heading div{
  flex-grow:1;
}
.profile-heading h1{
  margin-top: 0;
  margin-bottom: 16px;
}
.profile-heading h3{
  text-align: left;
}
.profile-heading{
  padding-bottom: 16px;
  margin-bottom: 40px;
}
#signature-pad {
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-s);
}
.user-signature{
  max-width: 250px;
}

.block{
  width: 100%;
  height: auto !important;
  max-height:100%;
  background: var(--block-bg);
  margin-bottom:12px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  border-radius:var(--radius-l);
  box-shadow:var(--shadow-s);
  border:1px solid var(--border-color);
  overflow: hidden;
}
.table-block{padding:0;height:100%;}
.table-block > div{box-sizing:border-box;}
.table-block > div:nth-child(2){padding:0;}
.table-block > div:first-child{position: sticky;top:0;}
.table-block > div:last-child{position: sticky;bottom:0;}
.flex-grow-block{
  flex-grow: 1;
}
h2{
  margin: 0;
}
.ww-grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 25px;
  grid-row-gap: 15px;
}
.flex-100{
  width: 100%;
  display: inline-grid;
}
.flex-left{
  width: 100%;
  display: flex;
  justify-content: flex-start;
}
.flex-left-signup{
  width: 20% !important;
}
.flex-right{
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.flex-center{
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.flex-right button{
  margin-left: 8px;
}
.flex-left button{
  margin-right: 8px;
}
.popup-fixed-block{
  position: fixed;
  top:0;
}
.invoice-list{
  background:var(--block-bg);
  border-radius: 8px;
  /*box-shadow:0px 10px 40px 0px rgba(0,0,0,0.1);*/
  /*padding:8px;*/
}
.table{
  min-width: 500px;
  display: flex;
  flex-direction: column;
}
.table a{
  color:var(--text-color-light);
  transition: none;
}
.table a:hover{
  color:var(--text-color);
}
.table-filters{
  border-bottom:1px solid #d9e8f4;
  background: var(--primary-light);
  border-color:var(--border-color);
  position: sticky;
  top:0;
  z-index:1;
  padding:0 18px;
}
.table-nopadding{
  padding: 0 !important;
}
.table > .table-grid{
  padding-bottom:0px;
}
.table-grid{
  display: grid;
  text-align: left;
}
.table-grid > span{
  flex-grow: 1;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 12px 8px 12px 0px;
}
.vertical-center{display:flex;align-items: center;}
span.check-span{
  display: flex;
  align-items: center;
  height:40px;
  width:32px;
  margin: 0;
  overflow: visible;
  padding: 12px;
  padding-left: 0;
  z-index: 1000;
}
span.check-span-timetracking{
  height:0px;
  width:0px;
  padding: 0px;
}
span.check-span-invoicetimetracking{
  height:auto;
  width:32px;
  padding: 0px;
}
/*.cbx{display:none;}*/
input.checkbox{
  margin:0;
  accent-color: var(--primary);
  height: 18px;
  width: auto !important;
}
.label-checkbox, .label-checkbox-big{
  display: flex;
}
.label-checkbox-big{
  font-size: 1em !important;
}
.label-checkout-checkbox{
  font-size: 13px;
  margin-top: 15px;
}
.label-checkbox input, .label-checkbox-big input{
  margin-right: 5px;
}
/*.checkbox{
  width:24px;
  height:24px;
  margin: 0;
  background:var(--button-bg);
}
input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  margin: 0;
  border-radius: 50%;
}
input[type="checkbox"]:focus {
  outline: 0;
}
.cbx {
  width: 24px;
  height: 24px;
  position: relative;
}
.cbx input {
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  border: 1px solid var(--border-color);
  border-radius: 50%;
}
.cbx label {
  width: 24px;
  height: 24px;
  margin: 0;
  background: none;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-filter: url("#goo");
  filter: url("#goo");
  transform: translate3d(0, 0, 0);
  pointer-events: none;
}
.cbx svg {
  position: absolute;
  top: 5px;
  left: 4px;
  z-index: 1;
  pointer-events: none;
}
.cbx svg path {
  stroke: #fff;
  stroke-width: 3;
  stroke-dasharray: 19;
  stroke-dashoffset: 19;
  transition: stroke-dashoffset 0.3s ease;
}
.cbx input:checked + label {
  animation: splash 0.6s ease forwards;
}
.cbx input:checked + label + svg path {
  stroke-dashoffset: 0;
}
@-moz-keyframes splash {
  40% {
    background: var(--primary);
    box-shadow: 0 -18px 0 -8px var(--primary), 16px -8px 0 -8px var(--primary), 16px 8px 0 -8px var(--primary), 0 18px 0 -8px var(--primary), -16px 8px 0 -8px var(--primary), -16px -8px 0 -8px var(--primary);
  }
  100% {
    background: var(--primary);
    box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
  }
}
@-webkit-keyframes splash {
  40% {
    background: var(--primary);
    box-shadow: 0 -18px 0 -8px var(--primary), 16px -8px 0 -8px var(--primary), 16px 8px 0 -8px var(--primary), 0 18px 0 -8px var(--primary), -16px 8px 0 -8px var(--primary), -16px -8px 0 -8px var(--primary);
  }
  100% {
    background: var(--primary);
    box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
  }
}
@-o-keyframes splash {
  40% {
    background: var(--primary);
    box-shadow: 0 -18px 0 -8px var(--primary), 16px -8px 0 -8px var(--primary), 16px 8px 0 -8px var(--primary), 0 18px 0 -8px var(--primary), -16px 8px 0 -8px var(--primary), -16px -8px 0 -8px var(--primary);
  }
  100% {
    background: var(--primary);
    box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
  }
}
@keyframes splash {
  40% {
    background: var(--primary);
    box-shadow: 0 -18px 0 -8px var(--primary), 16px -8px 0 -8px var(--primary), 16px 8px 0 -8px var(--primary), 0 18px 0 -8px var(--primary), -16px 8px 0 -8px var(--primary), -16px -8px 0 -8px var(--primary);
  }
  100% {
    background: var(--primary);
    box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
  }
}*/






.table-filters button{
  margin:0;
  padding: 0;
  font-size: 0.85em;
  background: none;
  text-align: left;
  outline: none;
  padding: 12px 8px 12px 12px;
  margin-left: -12px;
  margin-right: 10px;
  border-radius: 0;
  transition: var(--transition);
}
.table-filters button i{
  opacity: 0;
  transition: var(--transition);
}
.table-filters button:hover i{
  opacity: 1;
}
.table-filters button:hover{
  color:var(--dark-4);
  background:var(--light-3);
}

.table-grid > span.status-span{
  font-size: 0.9em;
  text-align: left;
  box-sizing: border-box;
  margin: 6px 12px 6px 0;
  display: flex;
}
.status-text{
  border-radius: 5px;
  font-size: 0.9em;
  text-align: center;
  box-sizing: border-box;
  margin: 6px 12px 6px 0;
  padding: 6px 12px 6px 12px;
  display: flex;
}
.table-grid > span.status-span, .status-text{
  font-size: 0.9em;
  text-align: left;
  box-sizing: border-box;
  margin: 6px 12px 6px 0;
  display: flex;
}
.status-span{
  border-radius: 5px;
  display:flex;
  justify-content: center;
  align-items: center;
  /*  height: 30px;*/

  border-radius: 50px;
}
.status-span i{
  margin-left: 6px;
  font-size: 20px;
}
.status-span div{
  width:100%;
  text-align: center;
  border-radius: 5px;
  padding: 6px 12px 6px 12px;
  /*background:rgba(5, 171, 91,0.1);
  color: #05ab5b;*/
}
.message-bubble {
  --r: 25px; /* the radius */
  --t: 30px; /* the size of the tail */
  width:600px;
  max-width: 100%;
  /*max-width: 300px;*/
  padding: calc(2*var(--r)/3);
  -webkit-mask:
    radial-gradient(var(--t) at var(--_d) 0,#0000 98%,#000 102%)
      var(--_d) 100%/calc(100% - var(--r)) var(--t) no-repeat,
    conic-gradient(at var(--r) var(--r),#000 75%,#0000 0)
      calc(var(--r)/-2) calc(var(--r)/-2) padding-box,
    radial-gradient(50% 50%,#000 98%,#0000 101%)
      0 0/var(--r) var(--r) space padding-box;
  background: var(--light-3) border-box;
  /*border: 1px solid rgba(0,0,0,0.12);
  border-left: var(--t) solid rgba(0,0,0,0.12);*/
  margin-right: var(--t);
  /*box-shadow:0px 16px 16px 16px rgba(0,0,0,0.12);*/
  gap: 4px;
  display: grid;
  margin-bottom: 16px;
}
.left {
  --_d: 0%;
  border-left: var(--t) solid #0000;
  margin-right: var(--t);
  place-self: start;
}
.stripped, .action.stripped{
  background:none;
  border:none;
  height: 30px;
  width: 30px;
}
.action.green, .status-span.green{
  /* GREEN */

  /* FULL */
  background:var(--green);
  color:var(--white);
  border:1px solid rgba(75, 192, 192, 0.2);

  /* LIGHT*/
  background: rgba(75, 192, 192, 0.1);
  color: var(--green);
  border: 1px solid rgba(75, 192, 192, 0.2);
}
.action.red, .status-span.red{
  /* RED */

  /* FULL */
  background:var(--red);
  color:var(--white);
  border:1px solid rgba(255, 99, 132, 0.2);

  /* LIGHT*/
  background: rgba(255, 99, 132, 0.1);
  color: var(--red);
  border: 1px solid rgba(255, 99, 132, 0.2);
}
.action.yellow, .status-span.yellow{
  /* YELLOW */

  /* FULL */
  background:var(--orange);
  color:var(--white);
  border:1px solid rgba(255, 159, 64, 0.2);

  /* LIGHT*/
  background: rgba(255, 205, 86, 0.1);
  color: var(--orange);
  border: 1px solid rgba(255, 205, 86, 0.2);
}

.action-disabled{
  background: #e4e4e6 !important;
  color: #c0c0c4 !important;
}
.action-selected{
  background: var(--text-color-light) !important;
  color: var(--light-4) !important;
}
.status-span span{
  margin-right: 4px;
}
.table-pagination{
  border-top:1px solid #d9e8f4;
  border-color:var(--border-color);
  width:100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-content: space-between;
  align-items: center;
  padding:20px;
  font-weight: 500;
  background-color:var(--block-bg);
}
.table-pagination-navigation{
  flex-grow: 1;
  display: flex;
  align-items: center;
  align-content: center;
}
.table-pagination-navigation span{
  margin: auto;
  display: flex;
  align-items: center;
}
.table-pagination-navigation span span{
  margin: 0 8px;
}
.table-pagination-num{
  display:flex;
  margin-left: auto;
}
.table-pagination button{
  color:var(--text-color);
  padding:8px;
  margin: 0;
  background: none;
}
button.active-num, .table-pagination button:hover{
  background:var(--button-bg);
  border-radius:var(--radius-s);;
}
.incomingdocuments-grid{
  grid-template-columns: 2fr 2fr 1fr 2fr 1fr 1fr 1fr 1fr;
}
.invoice-grid{
  grid-template-columns: 48px 10% 1.3fr 1fr 10% 10% 9% 14% 1fr 0.2fr;
}
.invoice-grid-company, .invoice-grid-contact{
  grid-template-columns: 1.2fr 2fr 2fr 2fr 2fr 1.5fr 2fr 1.5fr;
}
.subscription-grid{
  grid-template-columns: 1.5fr 1.3fr 2fr 1fr 1fr 1fr 1fr 1.5fr;
}
.offer-grid{
  grid-template-columns: 48px 2fr 1.5fr 1fr 1fr 1fr 15% 1.5fr;
}
.creditnote-grid{
  grid-template-columns: 48px 1fr 2fr 2fr 1fr 1fr 1.3fr 0.3fr;
}
.orderform-grid{
  grid-template-columns: 48px 1fr 1fr 1fr 1fr 0.7fr 0.7fr 15%;
}
.deliverynote-grid{
  grid-template-columns: 48px 1fr 1fr 1fr 1fr 0.8fr 0.8fr 1fr;
}
.expense-grid{
  grid-template-columns: 48px 3fr 2.5fr 1.2fr 1fr 2fr 2fr;
}
.dashboard-expense-grid{
  grid-template-columns: 1.8fr 1fr 0.8fr 1fr 1fr 1.2fr 0.7fr;
}
.bank-grid{
  grid-template-columns: 48px 1.8fr 1.8fr 2fr 1fr 0.7fr 0.7fr;
}
.entrepreneur-grid{
  grid-template-columns: 48px 2fr 2fr 2fr 1.5fr 1fr;
}
.bank-grid > span{
  align-content: center;
  white-space: normal;
}
.company-grid{
  grid-template-columns: 0.4fr 1.5fr 1fr 1.2fr 0.7fr 1fr 0.5fr;
}
.product-grid{
  grid-template-columns: 0.4fr 1fr 0.6fr 0.6fr 0.6fr 0.6fr 0.3fr;
}
.contact-grid{
  grid-template-columns: 0.4fr 1fr 1fr 1.5fr 15% 1fr;
}
.user-grid{
  grid-template-columns: 0.4fr 1.5fr 1fr 1.5fr 15% 0.5fr;
}
.account-grid{
  grid-template-columns: 0.5fr 1.5fr 1.5fr 1.5fr 1fr 1fr 0.5fr 0.5fr;
}
.accountant-grid{
  grid-template-columns: 0.5fr 1.5fr 1.5fr 1.5fr 1fr 1fr;
}
.fi{
  margin: 2px;
  border-radius: 2px;
}
.grid-image{
  margin: auto !important;
}
.invoiceitem-grid{
  display: grid;
  text-align: left;
  grid-template-columns: 5% 2fr 1fr 10% 15% 10%;
}
.invoiceitem-grid span{
  flex-grow: 1;
}
.drag-handle-icon {
  display: none;
  cursor: move;
}

.invoice-item-group:hover .drag-handle-icon {
  display: inline-block;
}

.invoice-item-group:hover .itemNumberValue {
  display: none;
}
.log-grid{
  padding: 25px 5px 5px;
  grid-template-columns: 10% 5fr 1fr;
  display: grid;
  text-align: left;
  position: relative;
}
.read-more-grid{
  padding: 0px 5px;
}
.read-more-content > a{
  color: #0071f2;
}
.log-grid span{
  flex-grow: 1;
}

.importcompanies-layout, .importcontacts-layout, .importproducts-layout{
  display: grid;
  grid-template-columns: 5fr 20px 3fr;
  grid-column-gap: 20px;
  margin-top: 20px;
}
.importcompanies-if, .importcontacts-if, .importproducts-if{
  margin-top: 25px;
  text-align: center;
}
#importcompanies-textarea, #importcontacts-textarea, #importproducts-textarea {
  display: block;
  float: left;
  font-family: Droid Sans Mono Pro,Consolas,Bitstream Vera Sans Mono,Andale Mono,Monaco,DejaVu Sans Mono,Lucida Console,monospace;
  font-size: 14px;
  font-weight: 400;
  height: 350px;
  line-height: 23px;
  outline: none;
  position: relative;
  resize: none;
  background: #f4f4f4;
  padding: 8px;
}
.import-message-bar {
  background: #f0f0f0;
  padding: 10px;
  margin-top: 10px;
}
.import-column-section {
  display: grid;
  grid-template-columns: 2fr 1fr;
  margin-bottom: 40px;
  grid-column-gap: 50px;
}
.import-column-content {
/*  border: 1px solid #ccc;*/
  border-bottom: 0px;
/*  border-radius: var(--radius-s) var(--radius-s) 0 0;*/
}
.import-column-title {
  font-weight: bold;
  font-size: 16px;
  text-transform: uppercase;
  background-color: #f7f7f7; /* Gray background only for the title */
  padding: 5px;
  border: 1px solid #ccc;
  border-bottom: none;
  border-radius: var(--radius-s) var(--radius-s) 0 0

}
.import-column-values {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.import-column-values li {
  padding: 5px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-bottom: none;
}
.import-column-values li:last-child {
  border-bottom: 1px solid #ddd;
}
.dashed-border{
  border-bottom: 1px dashed #ddd !important;
}
.import-field-select {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  font-size: 14px;
}
.import-field-select select {
  margin-left: 5px;
  font-size: 14px;
}
.import-field-label {
  font-size: 14px;
  margin-bottom: 5px;
  width: 100%;
  margin-left: 5px;
}
.import-standard-values{
  margin-top: 20px;
}


#numselected{
  margin: auto;
}
.merge-buttons{
  display: flex;
}
.merge-buttons > button{
  border: 1px solid var(--border-color) !important;
  margin-left: 0px;
  border-right: none !important;
  border-radius: 0px;
}
.merge-buttons > button:first-child{
  border-radius: var(--radius-s) 0px 0px var(--radius-s);
  border-right: none;
  margin-left: 8px;
}
.merge-buttons > button:last-child{
  border-radius: 0px var(--radius-s) var(--radius-s) 0px;
  border-right: 1px solid var(--border-color) !important;
}

.invoiceitem-grid button{
  margin:0;
  padding: 0;
  font-size: 1.1em;
}
.invoiceitemtitle-grid-edit{
  display: none;
  text-align: left;
  padding: 5px 0px;
  grid-template-columns: 20px 4fr 1fr 2fr 1fr;
  grid-column-gap: 10px;
  height: auto;
}
.invoiceitemtitle-grid-edit input,
.invoiceitemtitle-grid-edit select,
.invoiceitemtitle-grid-edit label{
  margin-bottom: 0;
}

.invoiceitem-grid-edit{
  display: grid;
  text-align: left;
  padding: 5px 0px;
  grid-template-columns: 20px 4fr 1fr 1fr 1fr 2fr 1fr;
  grid-column-gap: 10px;
  height:auto;
}
.invoiceitem-grid-edit input,
.invoiceitem-grid-edit select,
.invoiceitem-grid-edit label{
  margin-bottom: 0;
}
.invoiceitem-grid-edit label{
  display: flex;
  align-items: center;
}
.ri-delete-bin-6-line{font-weight: normal;color:#f7394f;font-size:1.2em;}
.invoiceitem-grid-edit span{
  flex-grow: 1;
  display: flex;
  align-items: center;
}
.invoiceitem-grid-edit button{
  margin:0;
  padding: 0;
  font-size: 1.1em;
}
.invoiceitem-grid-edit > .input-label{
  font-size: 12px;
}
.itemNumber, .itemNumberFake, .itemNumberValue{
  font-size: 12px;
  justify-content: center;   /* Horizontally center content */
}
.invoice-item-title{
  font-weight: bold !important;
}
.pdfCanvas{
  margin-bottom: 10px;
  width: 100%;
  border-radius: 4px;
}
.pdfCanvas-signvault{
  margin-bottom: 10px;
  width: 100%;
  border-radius: 4px;
  filter: drop-shadow(0 6px 10px rgba(130,130,140,.12));
  width: 70%;
}
#pdfContainer{
  text-align: center;
}
#xmlContainer{
  display: inline-grid;
}
.invoiceTotalDiv{
  text-align: end;
  padding-right: 12px;
  margin-top: 20px;
}
#invoicestotal{
  padding-left: 20px;
  font-weight: 300;
}
.invoiceTotalDivText{
  font-size: 12px;
  margin-right: 10px;
}
#editinvoicetotal, #invoicetotal, #editoffertotal, #offertotal, #editcreditnotetotal{
  font-weight: 500;
  font-size: 13px;
}
#incassoIntrestCalculation{
  font-size: 13px;
  padding-left: 5px;
}
.calculatedrecallcostdiv{
  font-size: 13px;
}

.discount-avatar{
  color:#2a3b4d;
  height: 24px;
  box-shadow: inset 0 0 0 1px hsla(240,4%,53%,.12);
  border-radius: 12px;
  border-color:gray;
  background-color:#f8f8ff;
  margin: 2px;
  margin-left: 30px;
  display: none;
}

.itemDiscountShow{
  padding: 3px 10px;
  font-size: 12px;
}

.discount-operator{
  margin: auto;
  margin-bottom: 20px;
}

.log-icon{
  background: #e8e8e8;
  color: #5b5b5b;
  align-items: center;
  border-radius: 50%;
  display: flex;
  height: 44px;
  justify-content: center;
  width: 44px;
  font-size: 17px;
  border: 5px solid var(--white);
}

.log-icon > i{
  color: #5b5b5b;
}
.log-icon > img{
  padding: 8px;
}

.log-type{
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 2px 5px;
  font-size: 12px;
  background: var(--light-4);
  font-weight: 450;
}
.log-text{
  display: flex;
  align-items: center;
  padding-top: 7px;
}
.log-text > a{
  padding: 0 5px;
  color: #0071f2;
}
.log-text > a:hover{
  text-decoration: underline;
}
.log-datetime{
  display: grid;
  align-items: center;
  text-align: right;
}



.nutritionitem-grid-edit{
  display: grid;
  text-align: left;
  grid-template-columns: 0.1fr 2fr 1fr 0.1fr;
  grid-column-gap: 10px;
  height:auto;
}
.nutritionitem-grid-edit span, .itemOptions{
  display: flex;
  align-items: center;
}
.ingredientitem-grid-edit{
  display: grid;
  text-align: left;
  grid-template-columns: 0.1fr 2fr 1fr 1fr 0.1fr;
  grid-column-gap: 10px;
  height:auto;
}
.ingredientitem-grid-edit span, .itemOptions{
  display: flex;
  align-items: center;
}
.fa-seedling{
  color:var(--green);
}
.fa-wheat-awn{
  color:#D29A31;
}

.fa-file-arrow-down{ margin-right: 5px; }
.fa-file-pdf, .fa-file-image, .fa-file{ margin-right: 5px; }


.excipientitem-grid-edit{
  display: grid;
  text-align: left;
  grid-template-columns: 0.1fr 2fr 0.2fr;
  grid-column-gap: 10px;
  height:auto;
}
.excipientitem-grid-edit span, .itemOptions{
  display: flex;
  align-items: center;
}



/*CONFIRM EMAIL*/
.confirmemail-wrapper {
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  height: 100vh; /* Full viewport height */
}
.confirmemail-container {
  max-width: 500px;
  text-align: center;
  margin: auto;
}

.confirmemail-logo {
  width: 80px;
  margin-bottom: 20px;
}

.confirmemail-title {
  font-size: 22px;
  margin-bottom: 20px;
}

.confirmemail-text {
  color: #333;
  font-size: 16px;
  margin-bottom: 10px;
}

.confirmemail-btn {
  display: inline-block;
  margin-top: 20px;
  text-decoration: none;
  font-size: 13px;
}

.confirmemail-btn:hover {
  color: var(--darkblue);
}



/*RESET PASSWORD*/
.resetpassword-info {
  font-size: 11px;
  color: var(--text-color-light);
  margin-bottom: 20px;
}



/*ACCEPT USER INVITE*/
.acceptuserinvite-container, .resetpassword-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    max-width: 600px;
    margin: auto;
    padding: 20px;
}

.acceptuserinvite-form-box {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 100%;
}

.acceptuserinvite-title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    text-align: center;
}

.acceptuserinvite-text {
    font-size: 14px;
    color: #666;
    margin-bottom: 30px;
    text-align: center;
}

.acceptuserinvite-password-info {
    font-size: 12px;
    color: #888;
    margin-bottom: 25px;
}

.acceptuserinvite-checkbox-group {
    display: flex;
    align-items: start;
    text-align: left;
    margin-top: 10px;
}

.acceptuserinvite-checkbox {
    margin-right: 10px;
    width: 18px;
    height: 18px;
}

.acceptuserinvite-submit-btn {
    width: 100%;
    margin-top: 15px;
}

.acceptuserinvite-login-link {
    margin-top: 20px;
    font-size: 13px;
    text-align: center;
}



/*section.section-scroll{
  overflow-y: scroll;
}*/
.dashboard-flex{
  height:auto;
  display: flex;
  flex-direction: column;
  margin-bottom: 90px;
}
.emailconfirmed{
  background: rgba(75, 192, 192, 0.1);
  border-bottom: 1px solid rgba(75, 192, 192, 0.2);
  padding: 15px;
}
.emailconfirmed i{
  color: var(--green);
}
.emailconfirmed .close-emailconfirmed{
  color: var(--grey);
  position: absolute;
  right: 0;
  padding-right: 15px;
  font-size: 24px;
  border-radius: var(--radius-s);
  transition: var(--transition-bounce);
  pointer-events: all;
}
.payment-status-grid{
  display: grid;
  grid-template-columns: 6fr 3fr;
  grid-gap: 20px;
}
.payment-status-grid{
  display: grid;
  grid-template-columns: 6fr 3fr;
  grid-gap: 20px;
}
.payment-status-amount-grid{
/*  display: grid;*/
  display: block;
  grid-gap: 10px;
}
.vat-declaration-grid{
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.vat-toggle-container {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: fit-content;
  border: 3px solid var(--light-1);
  border-radius: 20px;
  background: var(--light-1);
  font-weight: bold;
  color: #343434;
  cursor: pointer;
}
.vat-toggle-container::before {
  content: '';
  position: absolute;
  width: 50%;
  height: 100%;
  left: 0%;
  border-radius: 20px;
  background: white;
  transition: all 0.3s;
}
.vat-toggle-checkbox:checked + .vat-toggle-container::before {
  left: 50%;
}
.vat-toggle-container div {
  padding: 6px;
  text-align: center;
  z-index: 1;
}
.vat-toggle-checkbox {
  display: none;
}
.vat-toggle-checkbox:checked + .vat-toggle-container div:first-child{
  color: white;
  transition: color 0.3s;
}
.vat-toggle-checkbox:checked + .vat-toggle-container div:last-child{
  color: #343434;
  transition: color 0.3s;
}
.vat-toggle-checkbox + .vat-toggle-container div:first-child{
  color: #343434;
  transition: color 0.3s;
}
.vat-toggle-checkbox + .vat-toggle-container div:last-child{
  color: white;
  transition: color 0.3s;
}
.vat-quarter{
  padding:12px;
  display:flex;
  grid-gap:12px;
  flex-direction: column;
  box-shadow:0px 4px 10px 0px rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.12);
  border-radius:8px;
  justify-content: center; /* Center vertically */
  align-items: center; /* Center horizontally */
  position: relative; /* For positioning the icon */
}
.vat-quarter-heading{
  font-size: 1em;
  line-height: 1.5em;
  font-weight: 600;
  color: var(--text-color);
}
.vat-quarter .vat-quarter-amount {
  display: flex;
  align-items: flex-end;
  padding: 5px;
}
.vat-quarter .vat-quarter-amount i, .vat-quarter-amount span{
  font-size: 18px;
}
.vat-quarter:hover{
  box-shadow:0px 4px 6px 0px rgba(0,0,0,0.08);
}
.vat-quarter-date{
  line-height: 0px;
  font-size: 10px;
  color:var(--text-color-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.payment-status{
  padding: 7px;
  border-width: 1px solid var(--border-color);
  color:var(--text-color-light);
  border-radius: 5px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  box-sizing: border-box;
}
.payment-status p{
  margin: 0;
}
.payment-status h3{
  margin: 12px 0 0 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  font-size: 0.85em;
}
.payment-status i{
  display: none;
}
.h4-small {
  font-size: 0.8em;
  font-weight: 400;
}
.payment-amount-small{
  font-size:1.4em;
  line-height:1.5em;
  font-weight: 600;
  color:var(--text-color);
  /*margin-bottom: 12px;*/
}
.payment-amount-big{
  font-size:1.8em;
  line-height:1.5em;
  font-weight: 600;
  color:var(--text-color);
  /*margin-bottom: 12px;*/
  display: flex;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
}
.payment-status-grid canvas{
  padding:0;
  margin: 0;
}
.payment-status-grid div{
  width:100%;
}
.canvas-flex{
  display:flex;
  align-items: center;
  align-content: center;
}
.dashboard-grid{
  display: grid;
  grid-template-columns: 1fr;
  margin-bottom: 12px;
}
.dashboard-grid-1-1{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 30px;
  flex-grow:1;
  max-height:100%;
  
  display: flex;
  box-sizing: border-box;
  max-height: 100%;
  margin-bottom: 12px;
/*  overflow: hidden;*/
}
.dashboard-grid-1-2{
  display: grid;
  grid-template-columns: 2fr 3fr;
  grid-gap: 30px;
  flex-grow:1;
  max-height:100%;
  /*  margin-top: 50px;*/
}
.dashboard-grid-1-1-1{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 30px;
  flex-grow:1;
  max-height:100%;

  display: flex;
  box-sizing: border-box;
  max-height: 100%;
  margin-bottom: 12px;
  overflow: hidden;
}
.dashboard-stats-grid{
  order:2;
  display: grid;
  grid-gap:30px;
}
.dashboard-stats-grid div{
  height:100%;
}
.dashboard-heading{
  margin-bottom: 50px;
}
.dashboard-bookyear-date{
  color: var(--mid-1);
  margin: 0px auto 10px;
}
.dashboard-heading p{
  font-size: 1.1em;
  color:var(--mid-1);
  margin: 0;
}
.dashboard-block{
/*  min-height: 310px;*/
}
.dashboard-vat{
  display: none;
}
.block-content canvas{
  max-height: 100%;
  min-width: 100%;
}
.search-results-list{
  background:var(--block-bg);
  font-size: 0.9em;
  padding:0 2px;
  z-index: 0;
  overflow-y:scroll;
  flex-grow: 1;
  height:100%;
}
.dashboard-select{
  width: 110px;
}
.dashboard-select-bookyear{
  padding-bottom: 10px;
  margin: auto;
}

.dashboard-bank-block{
  display: grid;
  grid-template-columns: 60px 2fr 2fr 1.5fr;
  border-radius: var(--radius-m);
  border: 1px solid var(--border-color);
  align-items: center;
  margin-bottom: 5px;
  font-size: 14px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dashboard-bank-logo{
  display: flex;
  width: 40px;
  height: 40px;
  overflow: hidden;
  margin: 10px;
  border-radius: var(--radius-m);

  margin-right: 20px;
}
.dashboard-bank-info{
  flex-grow: 1;
}
.dashboard-bank-logo > img{
  max-width: 100%;
  max-height: 100%;
  min-width: 100%;
  min-height: 100%;
  display: block;
  margin: auto;
}
.dashboard-bank-name{
  font-weight: 600;
}
.dashboard-bank-status {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: var(--red);
    border-radius: 50%;
    margin-right: 8px;
}
.dashboard-bank-active{ background: var(--deepgreen); }
.dashboard-bank-nonactive{ background: var(--red); }
.dashboard-bank-iban{
  display: flex;
  align-items: center;
  color: var(--grey);
}
.dashboard-bank-amount{
  margin-right: 10px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--green);
}
.transaction-unassigned{
  color: #E2163B !important;
  background: #ff000008 !important;
  border-radius: var(--radius-xl);
}
.transaction-assigned{
  color:var(--green) !important;
  background:rgba(75, 192, 192, 0.1) !important;
  border-radius: var(--radius-xl);
}


.dashboard-expense-block{
  height: 379px !important;
}
.dashboard-expense-name{
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: auto auto auto 5px;
}
.dashboard-expenses-check{
  color: var(--white) !important;
  background: var(--grassgreen);
  background: #74B859;
  border-radius: 50%;
  margin: auto;
    margin-bottom: auto;
  padding: 6px 2px;
  font-size: 27px !important;
  height: 30px;
  width: 30px;
}





/*subscription*/
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800');

.subscription-container{
  display: grid;
  grid-template-columns: 3.5fr 1fr;
  padding: 0px;
  height: 100%;
}
.subscription-flex{
  height:auto;
  display: flex;
  flex-direction: column;
  padding: 45px;
}

.subscription-select-users {
  display: flex;
  margin: 0 auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.users-stepper {
  display: flex;
  border: 1px solid var(--border-color);
  font-family: sans-serif;
  border-radius: var(--radius-s);
  margin: 0 auto;
}

.users-stepper button {
  background: none;
  border: none;
  padding: 8px 14px;
  font-size: 17px;
  cursor: pointer;
  transition: background 0.2s;
  border-radius: 3px;
}

.users-stepper button:hover {
  background-color: var(--light-4);
}

.users-stepper input {
  width: 50px;
  text-align: center;
  font-size: 17px;
  padding: 10px 0;
  border: none;
  background: transparent;
  outline: none;
  margin: 0;
}

.users-stepper input::-webkit-outer-spin-button,
.users-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.users-stepper input[type=number] {
  -moz-appearance: textfield;
}

.user-count-table {
  width: 100%;
  max-width: 400px;
  border-collapse: collapse;
  font-size: 16px;
  margin-top: 10px;
}
.user-count-table td {
  padding: 6px 10px;
}
.user-count-table td:first-child {
  width: 60%;
}
.user-count-table tr:last-child {
  border-top: 1px solid var(--border-color);
}

.user-count-table tr td:last-child {
  text-align: end;
}

.subscription-current-information div, .subscription-billing-information div, .subscription-billing-method div, .subscription-billing-method div{
  font-size: 13px;
  margin-bottom: 1px;
  font-variant-ligatures: no-contextual;
}
.subscription-current-information div:first-child, .subscription-billing-information div:first-child, .subscription-billing-method div:first-child{
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 7px;
}
.subscription-cartbox-totalexcl span:last-child{
  font-weight: 600;
  font-size: 16px;
}
.subscription-billing-period-discount-green{
  color: var(--deepgreen);
  margin-top: 5px;
  font-weight: 600;
  font-size: 13px;
}
.subscription-cartbox-discount{
  color: var(--primary);
}
.subscription-billing-period-discount-orange{
  color: var(--orange);
  margin-top: 5px;
  font-weight: 600;
  font-size: 13px;
}
.fa-cc-visa, .american-express, .sepa, .invoice-payment{
  font-weight: normal;
  color: blue;
} 
.ri-mastercard-fill{
  font-weight: normal;
  background: linear-gradient(to right, #EA001B 0%, #FF5F00 50%, #FF9900 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.subscription-cart{
  background: var(--primary-light);
  display: flex;
  flex-direction: column;
}
.subscription-cartbox{
  background: var(--white);
  margin: 20px;
  padding: 10px;
  border-radius: var(--radius-s);
  width: -moz-available;
}
.subscription-cartbox-loading{
  text-align: center;
}
.subscription-cartbox-heading{
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 10px;
}
.subscription-cartbox-info{
  font-size: 13px;
}
.subscription-cartbox-items{
  padding: 10px 0px;
  border-top: 1px solid var(--border-color);
  font-size: 13px;

}
.subscription-cartbox-items{
  padding: 10px 0px;
  border-top: 1px solid var(--border-color);
  font-size: 13px;
  margin-top: 10px;
}
.subscription-cartbox-totals{
  padding: 10px 0px;
  border-top: 1px solid var(--light-1);
  font-size: 13px;
}
.subscription-cartbox-items div, .subscription-cartbox-totals div{
  display: flex;
  justify-content: space-between;
}
.subscription-cartbox-items div:not(:last-child), .subscription-cartbox-totals div:not(:last-child){
  margin-bottom: 10px;
}
.subcription-return{ margin-bottom: 20px; }
.subscription-checkout{ margin: 0 20px; }
.subscription-checkout a{ width: 100%;}
#subscription-checkout-button{ display: none; }
.subscription-discount-span{ display: none; margin-bottom: 20px;}
#subscription-discount-code{ margin-bottom: 0px; }
.subscription-check-discount-code{
  padding-left: 8px;
  font-size: 12px;
}

#subscription-billing-information{ display: none;}

/*subscription payment method*/
.paymentmethods-grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-column-gap: 20px;
  border-top: 1px solid var(--border-color);
  margin-top: 30px;
  padding-top: 30px;
}
.paymentmethods-grid-noborder{
  border-top: none;
  margin-top: 0px;
  padding-top: 0px;
}
.paymentmethod-box{
  display: flex;
  align-items: center;
}
.paymentmethod-box img{
  margin-right: 5px;
}
.paymentmethod-icons{
  display: flex;
  flex-direction: row;
  gap: 2px;
}
.paymentmethod-icon{
  height: 20px;
}
.paymentmethods-grid .choice-button{
  display: flex;
}
.paymentmethod-choice-button {
  display: flex;                /* use flexbox */
  flex-direction: column;       /* stack icon & text vertically */
  align-items: center;          /* center horizontally */
  justify-content: center;      /* center vertically if needed */
  padding: 10px 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  user-select: none; /* Prevent text selection when clicking */
}
.paymentmethod-choice-button i {
  font-size: 18px;
  margin-bottom: 5px;
}
.paymentmethod-choice-button span {
  font-size: 13px;
}
.paymentmethod-choice-button.active {
  border-color: #007bff; /* Blue border when active */
  background-color: #e6f0ff; /* Light-blue background */
}
.paymentmethod-creditcard-box {
  display: block;
  margin-top: 20px;
}
.paymentmethod-creditcard-info {
  display: flex;
  gap: 1rem;
  margin-top: 10px;
}
.paymentmethod-creditcard-info div {
  display: flex;
  flex-direction: column;
}
.paymentmethod-creditcard-info div:first-child {
  width: 100%;
}
.paymentmethod-sepa-info{
  display: none;
  margin-top: 20px;
}
.paymentmethod-sepa-info input{
  display: block;
  margin-bottom: 10px;
}




/*subscription plans*/
.subscription-heading{
  margin-bottom: 50px;
}

.subscription-heading p{
  font-size: 1.1em;
  color:var(--mid-1);
  margin: 0;
}

.subscription-plan-container {
  display: flex;
  flex-wrap: wrap;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
}

.subscription-plan {
  background: white;
  width: 20em;
  box-sizing: border-box;
/*  text-align: center;*/
  margin: 1em;
  margin-bottom: 1em;
/*  border: 1px solid var(--border-color);*/
/*  border-radius: var(--radius-s);*/
  padding: 20px;
  padding-top: 30px;
  position: relative;
}

.subscription-header {
  border-bottom: 1px solid #e2e8f0;
}

.subscription-plan-container .most-popular {
  background: var(--dark-4);
  border-radius: var(--radius-xl);
}
.most-popular-badge {
    position: absolute;
    top: -10px;
    right: 30px;
    background: var(--green);
    color: white;
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 15px;
}

.most-popular .subscription-header, .most-popular .subscription-features {
  color: #e2e8f0;
}
.most-popular .subscription-features {
  color: rgb(111, 126, 147);
}
#subscription-changes, #subscription-checkout{
  display: none;
}
.subscription-features-compare li {
  font-size: 14px;
  padding: 4px;
}

.subscription-info-title {
  margin-bottom: 20px;
}

.subscription-plan .subscription-title {
  /*font-size: 1.45em;
  text-transform: uppercase;
  color: var(--primary);*/
  font-weight: 700;

/*  border-bottom: 1px solid var(--border-color);*/
/*  font-weight: 500;*/
/*  font-size: 1em;*/
  /*padding-bottom: 20px;
  margin-bottom: 20px;
  padding: 1em;*/
}

.subscription-plan .subscription-info-container {
/*  padding: 1em;*/
  color: #2d3b48;
  box-sizing: border-box;
}




.subscription-plan-toggle-switch{
  display: flex;
  margin: 0 auto;
  margin-bottom: 0px;
  margin-bottom: 10px;
  align-items: center;
  gap: 10px;
}
.subscription-plan-toggle-container {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: fit-content;
  border: 4px solid #eee;
  border-radius: var(--radius-m);
  background: #eee;
  font-size: 15px;
  font-weight: 500;
  color: #343434;
  cursor: pointer;
}
.subscription-plan-toggle-container::before {
  content: '';
  position: absolute;
  width: 50%;
  height: 100%;
  left: 0%;
  border-radius: calc(var(--radius-m) - 3px);
  background: white;
  transition: all 0.3s;
}
.subscription-plan-toggle-checkbox:checked + .subscription-plan-toggle-container::before {
  left: 50%;
}
.subscription-plan-toggle-container div {
  padding: 9px 30px;
  text-align: center;
  z-index: 1;
}
.subscription-plan-toggle-checkbox {
  display: none;
}
.subscription-plan-toggle-checkbox:checked + .subscription-plan-toggle-container div:first-child{
  transition: color 0.3s;
}
.subscription-plan-toggle-checkbox:checked + .subscription-plan-toggle-container div:last-child{
  color: #343434;
  transition: color 0.3s;
}
.subscription-plan-toggle-checkbox + .subscription-plan-toggle-container div:first-child{
  color: #343434;
  transition: color 0.3s;
}
.subscription-plan-toggle-checkbox + .subscription-plan-toggle-container div:last-child{
  transition: color 0.3s;
}
.subscription-plan-discount-label{
  background: var(--primary);
  color: var(--white);
  padding: 3px 7px;
  border-radius: var(--radius-m);
  font-size: 14px;
}




.subscription-plan .subscription-price {
  font-size: 1.35em;
  padding: 1em 0 0;
  font-weight: 600;
  margin-top: 0;
  display: inline-block;
  width: 80%;
}

.subscription-plan .subscription-price span {
  font-size: 1.35em;
  display: inline-block;
  margin: 0;
}
.subscription-plan .subscription-price span:first-of-type {
  font-size: 0.9em;
  display: inline-block;
  margin: 0;
}

.subscription-plan .subscription-price span:last-of-type {
  font-size: calc(1.35em * 0.5);
  display: inline-block;
  color: rgb(111, 126, 147);
  font-weight: 400;
}

.subscription-header .subscription-description {
  margin-top: 15px;
  color: rgb(111, 126, 147);
  display: flex;
  flex-direction: column;
  font-size: 12px;
  gap: 5px;
}
.subscription-header .subscription-select-plan {
  padding: calc(1em * 0.75) 1em;
  font-size: 14px;
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: all 0.25s;
  margin: 15px auto;
  box-sizing: border-box;
  display: block;
  background: var(--primary);
  color: var(--white);
  text-align: center;
}
.subscription-header .subscription-select-plan:hover:not(.subscription-current-plan) {
  background: var(--blue);
}
.subscription-header .subscription-current-plan {
  background: #d0d0d0;
  cursor: default;
}
.subscription-plan .subscription-info-container .subscription-features {
  font-size: 1em;
  list-style: none;
  padding-left: 0;
  text-align: left;
}

.subscription-plan .subscription-info-container .subscription-features li {
  padding: calc(1em / 2);
}

.subscription-plan .subscription-info-container .subscription-features li i {
  padding: 1px;
  color: var(--green);
}

.subscription-plan .subscription-info-container .subscription-select-plan:hover {
  background-color: var(--primary);
  color: white;
}

.subscription-button-disabled {
  pointer-events: none;
}

@media screen and (max-width: 25em) {
  .subscription-plan-container {
    margin: 0;
  }

  .subscriptionplan {
    width: 100%;
    margin: 1em 0;
  }
}



/*subscription billing cycle*/
.billing-option input[type="radio"] {
  position: absolute;
  left: -9999px;
}
.billing-form {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
}
.billing-option {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Ensures text & price are spaced */
  background: var(--block-bg);
  padding: 15px 30px;
  border-radius: var(--radius-m);
  color: var(--text-color);
  margin: 5px;
  cursor: pointer;
  border: 1px solid var(--border-color);
  transition: all 0.3s ease-in-out;
  min-width: 180px;
  position: relative;
  min-height: 75px;
}
.billing-current-text {
  position: absolute;
  top: -10px;
  left: 15px;
  background: var(--block-bg);
  padding: 0px 8px;
  font-size: 12px;
  font-weight: bold;
  color: var(--primary);
  font-size: 12px;
  color: var(--subtext-color);
}
.billing-content {
  display: flex;
  flex-direction: column; /* Stacks label & current package */
  align-items: flex-start;
  margin-left: 10px;
}
.billing-option::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--text-color);
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  transition: all 0.3s ease-in-out;
}
.billing-option input[type="radio"]:checked ~ .billing-content .billing-label::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--primary);
  position: absolute;
  left: 17px;
  top: 50%;
  transform: translateY(-50%);
  transition: background 0.3s ease-in-out;
}
.billing-option input[type="radio"]:checked ~ .billing-content {
  background: rgba(255, 255, 255, 0.1);
}
.billing-label {
  font-size: 14px;
  font-weight: bold;
  transition: color 0.3s ease-in-out;
}
.billing-discount {
  font-weight: normal;
  color: var(--deepgreen);
  font-size: 12px;
}
.billing-current, .billing-current .billing-price {
  color: #d0d0d0;
}
.billing-current.billing-option::before{
  background: #d0d0d0;
  border-color: #d0d0d0;
}
.billing-price {
  font-size: 14px;
  font-weight: bold;
  color: var(--text-color);
}
.billing-simulation {
  background: var(--block-bg);
  padding: 5px;
  border-radius: var(--radius-m);
  color: var(--text-color);
  padding-left: 25px;

  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px;
}
#checkout-newlicense, #extrauserstext {
  padding-top: 5px;
}
.billing-title {
  margin-bottom: 15px;
}
#billing-total-info {
  border-top: 1px solid var(--border-color);
  padding-top: 10px;
  margin-top: 10px;
  width: 100%;
}
.billing-column {
  flex: 1;
  box-sizing: border-box;
  min-width: 300px;
}
.billing-current-plan {
  border-right: 1px solid var(--border-color);
  padding-right: 25px;
}
.billing-section {
  padding-left: 25px;
}
.billing-section > .billing-row:first-of-type {
  font-weight: bold;
}
.billing-section > .billing-row:first-of-type span:last-child {
  font-size: 16px;
  font-weight: 700;
}
.billing-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 5px 0;
}
.informationbar{
  background: var(--light-4);
  border: 1px solid #B3D5F7;
  margin-top: 10px;
  padding: 15px;
  border-radius: var(--radius-m);
  font-size: 12px;
  text-align: center;
}
.informationbar i{
  color: #1E90FF;
}


/*subscriptions & documentpeppol*/
.subscription-status, .documentpeppol-status{
  display: inline-block;
  border-radius: 60px;
  padding: 0.5em 0.6em;
  font-size: 12px;
  line-height: 4px;
}
.subscription-active, .documentpeppol-sent{
  background: rgba(75, 192, 192, 0.1);
  color: var(--green);
  border: 1px solid rgba(75, 192, 192, 0.2);
  border-radius: var(--radius-xl);
  text-align: center;
}
.subscription-suspended, .documentpeppol-sendingfailed{
  background: rgba(255, 99, 132, 0.1);
  color: var(--red);
  border: 1px solid rgba(255, 99, 132, 0.2);
}

/* subscriptions timeline*/
.subscription-timeline-block {
  margin-left: 50px;
  margin-right: 50px;
  margin-bottom: 100px;
  margin-top: 50px;
}
.subscription-timeline-block ol, li {
  margin: 0;
  padding: 0;
  font-size: 12px;
}
.subscription-timeline {
  display: flex;
  width: 100%;
  justify-content: space-between;
  position: relative;
  
  &:after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--light-2);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    z-index: 0;
  }
}

.subscription-timeline li {
  list-style-type: none;
  position: relative;
  z-index: 1;
  
  &:after {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--white);
    border: 2px solid var(--primary);
    transition: background-color .2s ease;
  }
}

.subscription-timeline li:first-child:after {
  background-color: var(--primary);
}

.subscription-timeline span {
  position: absolute;
  top: calc(100% + 20px);
  left: 50%;
  transform: translate(-50%, 0);
  display: inline-block;
  text-align: center;
  text-align: center;
  width: max-content;
}

#showadvancedoptions {
  margin-bottom: 8px;
  font-size: 13px;
}
#subscriptions-advanced-options {
  display: none;
}





/*admin*/
.mailingtpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(380px,1fr));
  gap: 22px;
}
.mailtpl-card {
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 14px;
  padding: 18px 22px;
  margin-bottom: 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,.03);
  transition: box-shadow .2s, transform .1s;
}

.mailtpl-card:hover {
  box-shadow: 0 3px 14px rgba(0,0,0,.07);
  transform: translateY(-2px);
}

.mailtpl-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}

.mailtpl-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: #2b2f35;
}

.mailtpl-desc {
  font-size: 13px;
  color: #7e8b9a;
  display: block;
  margin-top: 2px;
}

.mailtpl-header h3{
  margin:0 0 4px 0;
  font-size:16px;
  font-weight:600;
}

.mailtpl-header span{
  color:#888;
  font-size:13px;
}

.mailtpl-actions {
  display: flex;
  gap: 8px;
}

.mailtpl-preview {
  border: 1px solid #efefef;
  border-radius: 10px;
  padding: 14px 16px;
  background: #fafafa;
  font-size: 14px;
  line-height: 1.55;
  max-height: 180px;
  overflow: hidden;
  position: relative;
}
.mailtpl-preview::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 35px;
  background: linear-gradient(to bottom, transparent, #fafafa);
}

.mailtpl-preview img {
  max-width: 180px;
  height: auto;
  display: block;
  margin: 10px 0;
  opacity: .9;
}
.mailtpl-preview iframe {
  width: 100%;
  height: 200px;
  border: none;
  pointer-events: none;
}






/*.secondary-btn{
  background:#e6e5e3;
  color:#bfbdb8;
  background: none;
}
.secondary-btn:hover{
  color:#96948f;
  background: none;
}
.subtle-btn{
  background:rgba(0,0,0,0.04);
  color:#96948f;
}
.subtle-btn:hover{
  background:rgba(0,0,0,0.07);
  color:#96948f;
}*/
/* Style the buttons that are used to open and close the accordion panel */
.search-results-list a{
  border-top:1px solid #edf4fa;
  border-color:var(--border-color);
  padding:4px 0;
  box-sizing: border-box;
  display:block
}

.search-results-list a:first-child{border:none;}
.search-results-list a:hover .accordion{
  background:var(--button-bg);
  color:var(--text-color);
}


.search-results-list .search-result-list-item{
  border-top:1px solid #edf4fa;
  border-color:var(--border-color);
  padding:2px 0;
  box-sizing: border-box;
  display:block
}

.search-results-list .search-result-list-item:first-child{border:none;}
.search-results-list .search-result-list-item:hover .accordion{
  background:var(--button-bg);
  color:var(--text-color);
  /*box-shadow: 0px 4px 20px 0px rgba(0,0,0,0.1);*/
}


.accordion {
  border: none;
  color:var(--text-color-light);
  cursor: pointer;
  width: 100%;
  text-align: left;
  outline: none;
  margin-bottom: 0px;
  margin-top: 0px;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 0 16px;
  transition: var(--transition);
}
.accordion label{
  margin: 0;
}
.accordion svg{
  width:20px;
  height:20px;
}
.active{
}
/* Style the accordion panel. Note: hidden by default */
/*.panel {
  padding: 0 10%;
  margin: 0px;
  background-color:#f7f7f7;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}*/
.delivered{
  color:#05ab5b;
}
.waiting{
  color:#dba100;
}
.late{
  color:#de2c3b;
}
.panel select{
  width: 100%;
  height: 50px;
  background:#fff;
  border-color: #f2f1ef;
  border-width: 4px;
}
.no-margin{
  margin: 0;
}
.no-padding{
  padding: 0;
}
.block-heading{
  border-bottom: 1px solid var(--border-color);
  border-color:var(--border-color);
  background:var(--block-bg);
  padding:0 20px;
  min-height:65px;
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index:2;
  /*overflow:hidden;*/
}
.block-heading-table{
    border-bottom: none !important;
}
.block-content{
  padding: 20px !important;
  flex-grow: 1 !important;
}
.block-logs{
  padding: 0px !important;
}
.log-line{
  position: relative;
  padding: 13px;
}
.log-line:before{
  background: var(--border-color);
  bottom: 0;
  content: "";
  left: 39px;
  position: absolute;
  top: 0;
  width: 1px;
}
.block-content-top{
  padding-top: 0px;
}
.block-heading h2{
  /*margin-top: 4px;*/
  margin-right:20px;
}
.block-actions{
  display: flex;
  flex-grow: 1;
  justify-content: flex-end;
  align-items:center;
}
.block-actions input{margin-bottom: 0;}
.action i{display:inline-block;position: relative;transition:var(--transition-bounce);}
.action:hover i{transform:scale(1.2);}
.action{
  background:var(--button-bg);
  color:var(--button-color);
  border-radius:var(--radius-s);
  border:1px solid var(--border-color);
  margin: 0;
  padding: 8px;
  width:auto;
  margin-left: 8px;
  font-size: 13px;
  line-height: 16px;
  box-sizing: border-box;
  cursor: pointer;
  white-space: nowrap;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.action-light{
  background: var(--light-4);
}
.action-basic{
  background: none;
}
.action-nomargin{
  margin-left: 0px;
}
.action-icon{
  background:var(--button-bg);
  border-color:var(--border-color);
  color:var(--button-color);
  height:36px;
  width: 36px;
  padding:9px;
  font-size: 16px;
  line-height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.action-icon-small{
/*  border: 1px solid var(--border-color);*/
  background: var(--button-bg);
  border-radius: var(--radius-s);
  padding: 5px;
  cursor: pointer;
}
.action-icon-small:hover{
  background: var(--button-bg-hover);
}
.delete-document-icon{
  margin-left: 5px;
  padding: 2px;
}
.action-text{
  font-size:13px;
  line-height: 16px;
  padding:8px 10px;
}
.action-icon i{}
.action-red{
  color:#E8423B;
  background:rgba(232,66,59,0.075);
  border:1px solid rgba(232,66,59,0.2);
  color:rgba(255, 99, 132, 1);
  background:rgba(255, 99, 132, 0.1);
  border:1px solid rgba(255, 99, 132, 0.2);
}
.action-trigger-pdf:hover{
  transform: rotate(0deg) scale(1.15);
}
.action-primary{
  background:var(--primary);
  color:var(--white);
  border-color:var(--primary);
  font-weight:500;
  border:none;
}
.action-primary:hover{
  background:var(--primary);
}
.action-red:hover{background:rgba(232,66,59,0.125);background:rgba(255, 99, 132, 0.15);}



.action-icon{
  width: 32px;
  height: 32px;
  border: none;
  background: #f5f5f5;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: #4d4f53;
  font-size: 16px;
  transition: background .2s, color .2s;
}
.action-icon-small{
  background: #f5f5f5;
  border-radius: 6px;
  padding: 5px;
  cursor: pointer;
}
.action-icon:hover {
  background: #6366f1;
  color: white;
}



.block-heading input{
  width:150px;
  min-width: 150px;
  /*max-width: 350px;*/
  margin-bottom: 0;
  box-sizing: border-box;
  transition: var(--transition);
}
.block-heading input[type="text"]:focus{
  width:100%;
  /*box-shadow:0 5px 20px 0 rgba(0,0,0,0.1);*/
}
.block-heading input[type="date"]{
  margin-left: 5px;
}
.block-actions-span{
  margin-left: 5px;
  color: var(--grey);
}
.product-block{
  padding: 18px;
}
.product-edit{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap:20px;
  grid-row-gap:20px;
}
.product-edit input{
  background: var(--white);
}

/* autocomplete */
.autocomplete {
  /*the container must be positioned relative:*/
  position: relative;
}
.autocomplete-items {
  position: absolute;
  border: 1px solid var(--border-color);
  background: var(--white);
  /*border-bottom: none;
  border-top: none;*/
  border-radius: var(--radius-s);
  z-index: 99;
  top: 100%;
  left: 0;
  right: 0;
  min-width: 100%;
  width: max-content;
}
.autocomplete-items div {
  background-color: var(--block-bg);
  /*  border-bottom: 1px solid var(--border-color);*/
  /*  box-shadow: var(--shadow-s);*/
  border-radius: var(--radius-s);
  padding: 8px;
  cursor: pointer;
  font-size: 0.85em;
  color:var(--text-color-light);
  transition: var(--transition);
}
/*when hovering an item:*/
.autocomplete-items div:hover {
  color:var(--text-color);
  background-color: var(--lightgrey);
}
.autocomplete-items div:hover i{
  color:var(--primary);
}
/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
  background-color: var(--body-bg) !important;
  color: #ffffff;
}
.autocomplete-products-icon{
  float:right;
  margin-left: 10px;
}
.autocomplete-products-icon-green{
  float:right;
  margin-left: 10px;
  color: var(--green);
}
/* suffix */
.input-suffix {
  position: relative;
  margin-bottom: 8px;
}
.input-suffix input {
  padding-right: 25px;
}
.suffix{
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
}

/* prefix & suffix */
.input-prefix-suffix {
  position: relative;
}
.input-prefix-suffix input {
  padding-left:60px;
  padding-right:35px;
}
.suffix-2{
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
}
.prefix-2{
  position: absolute;
  left: 8;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
}



/*MODAL*/
.modal{
  display: none;
  background:none;
  width:100%;
  height:100%;
  max-height: 100%;
  position:absolute;
  z-index:1000;
  overflow: auto;
}
.modal:before{
  content:'';
  background:var(--dark-4);
  position:fixed;
  height:100%;
  width:100%;
  opacity: 0.75;
}
.modal-wrapper{
  height:100vh;
  width:100vw;
  position: relative;
  z-index: 1001;
}
.modal-inner{
  background: none;
  width:400px;
  min-width:40%;

  max-height: none;
  max-width: 90%;
  margin:0 auto;
  box-sizing: border-box;
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content:flex-start;

  position: absolute;
  right:0;
  left: 0;
  top: 25%;
  border-radius: 5px;
  transition:var(--transition-bounce);
  background:var(--block-bg);
  border:1px solid var(--border-color);
}
.modal-content{
  display: grid;
  grid-template-columns: 10% 90%;
  margin-bottom: 10px;
  padding: 20px;
  width: -moz-available;
}
.modal-detail{
  min-width: 490px;
}
.modal-icon{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 23px;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
}
.icon-delete{
  color: var(--red);
  background-color: rgba(255, 99, 132, 0.1);
}
.icon-info{
  color: #07c;
  background-color: #4eb3f2;
}
.modal-heading{
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 30px;
  margin-top: 10px;
}
.modal-info{
  font-size: 0.9rem;
  font-weight: 350;
}
.modal-footer{
  background:none;
  width:100%;
  display: flex;
  align-content: center;
  align-items:center;
  box-sizing:border-box;
  background-color: #f7f7f78f;
  padding: 10px;
}
.modal-footer .button{
  margin-top: 0px !important;
}


/*POPUP BOX*/
.popup-box{
  display: none;
  background:none;
  width:100%;
  height:100%;
  max-height: 100%;
  position:absolute;
  z-index:1000;
  overflow: auto;
}
.popup-box-timetracking, .popup-box-notifications{
  display: none;
  background:none;
  width:100%;
  height:100%;
  max-height: 100%;
  position:absolute;
  z-index:1000;
  overflow: auto;
}
.popup-box-notifications{
  display: none;
  background:none;
  width:100%;
  height:100%;
  max-height: 100%;
  position:absolute;
  z-index:1000;
  overflow: auto;
}



/*TIMETRACKING SUMMARY*/
.timetracking-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
  padding: 10px !important;
}

.summary-card {
  background: #fff;
  border-radius: 12px;
  padding: 1rem 1.25rem;
/*  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);*/
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-s);
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.25rem;
  position: relative;
}

.chart-card {
  align-items: center;
  text-align: center;
}

.circular-chart {
  width: 80px;
  height: 80px;
/*  transform: rotate(-90deg);*/
  margin: auto;
}

.circle-bg {
  fill: none;
  stroke: #eee;
  stroke-width: 3.8;
}

.circle {
  fill: none;
  stroke: #6366f1;
  stroke-width: 3.8;
  stroke-linecap: round;
}

.percentage {
  fill: #111827;
  font-size: 0.5rem;
  text-anchor: middle;
  transform-origin: center;
}

.summary-icon {
  width: 36px;
  height: 36px;
  background: var(--primary-light);
  color: #6366f1;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 0.25rem;
}

.summary-label {
  font-size: 0.85rem;
  color: #6b7280;
}

.summary-value {
  font-size: 1.25rem;
  font-weight: bold;
  color: #111827;
}


.timetracking-view-day {
  border: 1px solid #e1e4e8;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 16px;
  background: #fff;
  font-family: system-ui, sans-serif;
}

.timetracking-view-day-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  cursor: pointer;
}

.timetracking-view-day-hours {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  flex-wrap: wrap;
}

.timetracking-view-day-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.timetracking-view-day-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  padding: 0;
  margin-right: 2px;
  transform: rotate(0deg);
  transition: transform 0.2s ease;
}

.timetracking-view-day.open .timetracking-view-day-toggle {
  transform: rotate(90deg)
}

.timetracking-view-day-label {
  font-weight: bold;
  font-size: 16px;
}

.timetracking-view-day-badge {
  background: #f0f0f0;
  padding: 2px 6px;
  border-radius: 12px;
  font-size: 12px;
  margin-left: 6px;
  color: #333;
}

.timetracking-view-day-hours {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  flex-wrap: wrap;
}

.timetracking-view-day-progress {
  position: relative;
  height: 8px;
  background: #e2e2e2;
  border-radius: 4px;
  overflow: hidden;
  width: 150px; /* of 100% als dat beter past */
}

.timetracking-view-progress-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  background: #928cff;
  border-radius: 4px;
  height: 100%;
}

.timetracking-view-day-entries {
  display: none;
  margin-top: 8px;
}

.timetracking-view-day.open .timetracking-view-day-entries {
  display: block;
}

.timetracking-view-entry {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 8px 0;
  border-top: 1px solid #eee;
  font-size: 14px;
  flex-wrap: wrap;
}
.invoicetimetracking-view-entry {
  font-size: 13px;
}

.timetracking-view-entry-header {
  display: flex;
  padding: 8px 0px;
  font-size: 14px;
}

.timetracking-view-entry-empty {
  padding: 8px 0;
  padding-bottom: 8px;
  padding-bottom: 8px;
  border-top: 1px solid #eee;
  font-size: 14px;
}

.timetracking-view-entry:hover {
  background: var(--light-4);
}

.day-hours-label{
  font-weight: bold;
}

.timetracking-view-day-entries .timetracking-view-entry:last-child {
  padding-bottom: 0 !important;
}

.timetracking-view-entry-left {
  flex: 1;
  min-width: 0;
}
.invoicetimetracking-view-entry-left {
  display: flex;
}

.timetracking-view-entry-center {
  flex: 1;
  display: flex;
  justify-content: space-between;
}
.invoicetimetracking-view-entry-center {
  flex: 3;
}
.invoicetimetracking-view-entry-totals {
  flex: 1;
  display: flex;
  justify-content: end;
}

.timetracking-view-entry-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.invoicetimetracking-view-entry-right {
  flex: 0 0 140px
}

.timetracking-view-entry-client {
  font-weight: 500;
  color: var(--grey);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timetracking-view-entry-user {
  font-size: 13px;
  font-weight: 500;
  color: #555;
  margin-bottom: 4px;
}

.timetracking-view-entry-description {
  color: #666;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timetracking-view-entry-description.muted {
  color: #999;
  font-style: italic;
}

.timetracking-view-entry-billable {
  color: var(--grey);
  background: var(--lightgrey);
  padding: 2px 6px;
  border-radius: 12px;
  font-size: 12px;
}

.timetracking-view-entry-billable.billable {
  background: rgba(var(--primary-rgb),0.08);
  color: var(--primary);
}

.timetracking-view-entry-amount{
  font-weight: bold;
}

.timetracking-invoiced {
  background: rgba(75, 192, 192, 0.1);
  color: var(--green);
}

.timetracking-view-entry-duration {
  font-size: 13px;
  color: #555;
}


.label {
  color: var(--mid-1);
  margin-bottom: 10px;
}

.value {
  font-weight: bold;
}



.integration-grid{
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 16px;
}
.integration{
  border: 1px solid var(--border-color);
  border-radius: var(--radius-m);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.3s ease;
}
.integration:hover{
  box-shadow:0px 4px 6px 0px rgba(0,0,0,0.08);
  transform: scale(1.01);
}
.integration-logo{
  display: flex;
  justify-content: center; /* Horizontal centering */
  align-items: center; /* Vertical centering */
  height: 140px !important; /* Set height for the image container */
  padding: 10px;
  border-bottom: 1px solid var(--border-color);
  width: 100%;
  font-size: 40px;
  color: var(--primary);
}
.integration-logo-detail{
  border-bottom: none;
  height: 100%;
}
.integration-logo img{
  width: 60%;
  max-height: 100%; /* Ensure the image doesn't exceed the container size */
  object-fit: contain; /* Keeps the image aspect ratio */
}
.integration-info{
  padding: 10px;
  width: 100%;
  background: var(--light-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex-grow: 1;
}
.integration-name{
  padding: 5px;
  font-size: 19px;
  font-weight: 500;
  flex-grow: 1;
}
.integration-detail{
  font-size: 13px;
  padding: 5px;
  flex-grow: 1;
}
.integration-price{
  font-size: 12px;
  background: var(--lightgrey);
  border-radius: var(--radius-l);
  width: fit-content;
  padding: 0px 7px;
  margin-top: 10px;
  text-transform: uppercase;
  font-weight: 300;
  margin: auto;
}
.integration-price-detail{
  width: auto;
  margin: 0px 20px;
}
.integration-type{
  border: 1px solid var(--border-color);
  width: fit-content;
  padding: 2px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--mid-1);
  border-radius: var(--radius-s);
}
.integration-text{
  border-bottom: 1px solid var(--body-bg);
  padding: 20px;
}
.integration-steps{
  padding: 20px;
}
.integration-steps li:not(:first-child) { 
   margin-top: 15px;  
}
.integration-steps li { 
   margin-bottom: 5px;  
}
.integration-layout{
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-column-gap: 20px;
  margin-top: 20px;
}
.integration-layout a{
  color:var(--primary);
  font-weight: 500;
}
.integration-layout a:hover{
  text-decoration: underline;
}
.integration-layout-left{
  display: flex;
  align-content: center;
  flex-direction: column;
  text-align: center;
  padding-bottom: 20px;
  border-right: 1px solid var(--border-color);
}
.integration-layout-left button{
  margin: 20px;
}
.integration-layout-right{
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}


/*SETTINGS - EMAIL*/
.addcustomdomain-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 30px;
}
.addCustomDomainNameError{
  display: none;
  font-size: 12px;
  color: var(--red);
}
.addcustomdomain-preview-frame{
  border: 1px solid var(--border-color);
  height: auto;
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-s);
}
.addcustomdomain-preview-top{
  border-bottom: 1px solid var(--border-color);
  height: 25px;
  background: #e8e8e84a;
  display: flex;
  align-items: center;
}
.addcustomdomain-preview-button{
  background: var(--grey);
  border-radius: var(--radius-xl);
  width: 10px;
  height: 10px;
  margin-left: 4px;
}
.addcustomdomain-preview-button .red{ background: var(--red); }
.addcustomdomain-preview-button .orange{ background: var(--orange); }
.addcustomdomain-preview-button .green{ background: var(--green); }
.addcustomdomain-preview-header{ border-bottom: 1px solid var(--border-color); height: 80px; display: flex; align-items: center; }
.addcustomdomain-preview-header .header-pic{ margin: 15px; height: 45px; width: 45px; }
.addcustomdomain-preview-header-details{ font-size: 14px; }
.addcustomdomain-preview-username{ font-weight: bold; }
.addcustomdomain-preview-email{ color: grey; }
.addcustomdomain-preview-email p{ margin: 0px; }
.addcustomdomain-preview-recipient{ color: grey; display: flex; align-items: baseline; }
.addcustomdomain-preview-recipient-block{ width: 100px; background: lightgray; height: 8px; margin-left: 8px;}
.addcustomdomain-preview-content{ padding: 25px; }
.addcustomdomain-preview-content-line{ width: 400px; background: lightgray; height: 9px; margin-bottom: 10px; }
.addcustomdomain-preview-content-line.short{ width: 100px !important; margin-bottom: 20px; }
.addcustomdomain-preview-content-line.half{ width: 250px !important; }

.addedcustomdomain-info{
  font-size: 14px;
}
#showcustomdomainstable {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 1px solid var(--border-color);
}
.addedcustomdomain-copyall{
  border: 1px solid var(--border-color);
  background: var(--button-bg);
  color: var(--black) !important;
}
.addedcustomdomain-copyall:hover{
  background: var(--button-bg-hover);
}

.link-bankaccounts-box{
  margin-bottom: 20px;
}

/* Hide the default radio button */
input[type="radio"] {
  display: none;
}
.custom-radio {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 13px;
  margin-top: 5px;
}
.radio-mark {
  height: 19px;
  width: 19px;
  background-color: white;
  border: 2px solid var(--primary);
  border-radius: 50%;
  margin-right: 10px;
  position: relative;
}
.radio-mark::after {
  content: "";
  position: absolute;
  display: none;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background-color: var(--primary);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
input[type="radio"]:checked + .radio-mark::after {
  display: block;
}


#peppol-registration, #peppol-registration-integration, #peppol-registration-success{ display: none; }
#peppol-registration-info{ margin-bottom:30px; }
.integration-peppol{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0 auto;
  width: 100%;
  border-right: 1px solid var(--border-color);
  flex-direction: column;
}
.peppol-registration-header{
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.peppol-registration-table{
/*  padding: 12px;*/
  display: flex;
  justify-content: space-between;
  align-items: center;
} 
.integration-peppol img{
  width: 80px;
  height: 80px;
}
.integration-peppol-info{
  margin-top: 20px;
  font-size: 14px;
}
.integration-peppol-grid{
  display: grid;
  grid-template-columns: 400px 1fr;
  column-gap: 15px;
}
.peppol-registration-status, .invoice-status-small, .mfa-registration-status{
  display: inline-block;
  border-radius: 60px;
  padding: 0.5em 0.6em;
  font-size: 12px;
  line-height: 4px;
}
.peppol-active, .mfa-active{
  background: rgba(75, 192, 192, 0.1);
  color: var(--green);
  border: 1px solid rgba(75, 192, 192, 0.2);
  border-radius: var(--radius-xl);
  text-align: center;
}
.peppol-pending, .mfa-inactive{
  background: rgba(255, 205, 86, 0.1);
  color: var(--orange);
  border: 1px solid rgba(255, 205, 86, 0.2);
}

.peppol-info{
  display:flex;
  flex-direction:column;
  grid-gap:4px;
}
.peppol-registration-vat{
  font-size: 12px;
  color: var(--text-color-light);
}
.peppol-registration-status span{
  color:#2a3b4d;
  border:0.1px solid;
  border-radius: 20px;
  overflow: hidden;
  display:inline-flex;
  border-color:var(--light-2);
  background-color:var(--light-3);
  padding: 2px 6px;
  margin: 0px;
  font-size:11px;
}

/*peppol succes circle*/
.registration-success, .peppol-registration-success {
  position: relative;
  height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.registration-success {
  height: 100vh;
}

.registration-circles {
  position: relative;
  height: 240px;
  width: 240px;
}

.peppol-registration-circles {
  position: relative;
  height: 120px;
  width: 120px;
}

.registration-circle, .peppol-registration-circle {
  width: 100%;
  height: 100%;
  background-color: var(--primary);
  border-radius: 50%;
  animation: wobble360 4s linear infinite;
}

.icon-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);  /* Center the icon */
  z-index: 2;
}

.icon-wrapper i {
  font-size: 5vmin;  /* Size of the check icon */
  color: white;      /* Color of the check icon */
}

.registration-success-text, .peppol-registration-success-text {
  margin-top: 20px;  /* Space between circle and text */
  font-size: 1.1rem; /* Adjust font size as needed */
  text-align: center; /* Center the text */
  font-weight: 300;
}

.registration-success-text {
  margin-top: 40px;
}

@keyframes wobble360 {
  0% {
    border-radius: 50% 50% 50% 50%;
    transform: rotate(0deg) scale(1);
  }
  25% {
    border-radius: 60% 50% 70% 50%;
    transform: rotate(90deg) scale(1.1);
  }
  50% {
    border-radius: 50% 60% 50% 70%;
    transform: rotate(180deg) scale(1.05);
  }
  75% {
    border-radius: 70% 50% 60% 50%;
    transform: rotate(270deg) scale(1.1);
  }
  100% {
    border-radius: 50% 50% 50% 50%;
    transform: rotate(360deg) scale(1);
  }
}

/*.popup-overlay{
  background:var(--dark-4);
  opacity: 0.95;
  position:absolute;
  height:100%;
  width:100%;
  top:0;
  bottom:0;
  left:0;
  right:0;
  cursor:url("assets/close-line.svg"),auto;
  transition: var(--transition);
  overflow: auto !important;
  z-index: 0;
}*/
.popup-box:before{
  content:'';
  background:var(--dark-4);
  position:fixed;
  height:100%;
  width:100%;
  opacity: 0.75;
}

.popup-wrapper{
/*  height:100vh;*/
  height:85vmax;
  width:100vw;
  position: relative;
  z-index: 1001;
}
/*.popup-box:after{
  content:'';
  position:absolute;
  height:100%;
  width:100%;
  background:var(--dark-4);
  opacity:0.95;
  transition: var(--transition);
  pointer-events:all;
  cursor:url("assets/close-line.svg"),auto;
  z-index: 990;
}*/
/*.popup-box:hover:after{
  opacity:0.95;
}*/
.popup-box h3{
  color:var(--text-color);
  margin-bottom: 16px;
}
.popup-inner{
  background: none;
/*  width:540px;*/
  width: auto;
  min-width: 400px;
  max-height: none;
  max-width: 90%;
/*  max-width: 850px;*/
  margin:0 auto;
  padding:20px;
  box-sizing: border-box;
  position: relative;
  display: inline-table;
  flex-direction: column;
  align-items: center;
  justify-content:flex-start;
  position: absolute;
  right: 0;
  left: 0;
  top: 70px;
  border-radius: 5px;
  transition:var(--transition-bounce);
  background:var(--block-bg);
  border:1px solid var(--border-color);
}
.popup-inner-med{
  width: 50% !important;
}
.popup-inner-wide{
  width: 70% !important;
}
.popup-autowidth{
  width: auto;
  min-width: 0;
  max-width: 0;
}
.popup-inner-pdf{
  background: transparent;
  border: none;
  top: 0px;
  width: 70% !important;
}
.popup-inner-pdf-form{
  width: 90%;
}
.popup-pdf-form{
  display: flex;
}
.popup-inner-pdf-form #pdfContainer{
  width: 50%;
  margin-right: 20px;
}
.popup-inner-pdf-form .pdfCanvas, .pdf-border{
  border: 1px solid var(--border-color);
}
.popup-form-wrapper{
  background:var(--block-bg);
/*  border:1px solid var(--border-color);*/
  pointer-events: all;
/*  padding:30px;*/
  width: 100%;
  height:auto;
  border-radius: var(--radius-m);
  position: relative;
}
.popup-inner form{
  overflow: visible;
  width:100%;
  /*min-width:30%;*/
  margin: 0px;
}
.form-group{
  margin-bottom: 30px;
}
.fileupload-group{
  margin-top: 20px;
  margin-bottom: 0px;
}
.form-grid{
  /*display:grid;*/
  grid-template-columns: 1fr 1fr;
  column-gap: 45px;
  position: relative;
}
/*.link-popup-box {
  display: block;
  width: auto;
  background:var(--primary);
  padding: 12px 16px 12px 16px;
  color:#fff;
  margin-left: 8px;
  font-weight: 500;
}
.link-popup-box:hover{
  background:#7c4af0;
  background:#481aa3;
}*/
.link-popup-box{
  text-decoration: none !important;
}
.popup-text{
  display:flex;
  align-items: center;
  justify-content: center;
}
#popup-items-count{
  margin-left: 12px;
  font-size: 1em;
}
.popup-icon{
  width:16px;
  margin-left: 4px;
  transform: translateY(2px);
}
.popup-heading{
  width:100%;
  overflow: unset;
  position: relative;
  /*background: var(--block-bg);
  border-bottom:1px solid var(--border-color);*/
  display: flex;
  align-items:center;
  margin-bottom: 30px;
  z-index: 1001;
  pointer-events: none;
  height: 45px;
}
.popup-heading h1{
  margin: 0;
  padding: 0;
  height:auto;
  color:var(--white);
  width: 100%;
  text-align: center;
  pointer-events: none;
}
.popup-heading a.close-popup-box{
  /*background:var(--button-bg);*/
  color:var(--grey);
  position: absolute;
  right:0;
  top:2px;
  height:40px;
  width:40px;
  padding:6px;
/*  background:var(--primary);*/
  font-size: 28px;
  line-height: 28px;
  font-weight: 500;
  border-radius: var(--radius-s);
  transition: var(--transition-bounce);
  pointer-events: all;
}
.close-pdf{
  color:var(--white) !important;
}
.close-popup-box:hover{
  /*background:var(--primary);*/
  transform: rotate(0deg) scale(1.25);
}
.popup-heading .close-popup-box:hover{
  /*background:#8151de;*/
}
.popup-footer{
  background:none;
  width:100%;
  display: flex;
  align-content: center;
  align-items:center;
/*  padding-top: 30px;*/
  margin-top: 12px;
  box-sizing:border-box;
}
.popup-footer-pdf{
  background: var(--primary);
  width:100%;
  display: flex;
  align-content: center;
  align-items: center;
  box-sizing:border-box;
  opacity: 80%;
  border-radius: 5px;
  bottom: 20px;
  position: fixed;
  width: auto;
  left: 50%;
}
.popup-footer-pdf a{
  /*background:var(--button-bg);*/
  color:var(--white);
  position: relative;
  padding:7px;
  font-size: 28px;
  line-height: 28px;
  font-weight: 500;
  border-radius: var(--radius-s);
  transition: var(--transition-bounce);
  pointer-events: all;
}
.popup-footer .flex-center{gap:8px;}
.link-popup-box-info{
  background:var(--button-bg);
  color:var(--button-color);
  padding:8px 10px;
  position: absolute;
  font-size: 0.85em;
  font-weight: 400;
  top:16px;
  right:16px;
  border-radius: 8px;
  transition: var(--transition);
}
.link-popup-box-info:hover{
  padding:12px 14px;
  top:12px;
  right:12px;
}

.theme-slider-wrapper, .theme-slider-wrapper > label{
  margin: 0;
  padding: 0;
  font-size: 1.1em;
  width:32px;
  height:32px;
  cursor: pointer;
  transition: var(--transition);
}
.theme-slider-wrapper:hover{
}
.theme-slider-wrapper input{
  display: none;
}
.theme-slider{
  height: 100%;
  width:100%;
  display: flex;
  align-items: center;
  align-content: center;
  text-align: center;
}
.theme-slider i{
  margin-top: 2px;
  position: absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}
.light-mode-icon{
  display:block;
  color:#FAAF6A;
}
.dark-mode-icon{
  display:block;
  color:#b7c6e3;
  background:none;
}
/* The switch - the box around the slider */
.visible-toggle{
  display:flex;
  align-items: center;
  justify-content: flex-start;
  padding: 8px 0px;
  gap: 8px;
}
.switch {
  position: relative;
  display: inline-block;
  width: 46px;
  min-width: 46px;
  height: 26px;
}
.switch-small {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 18px;
}
/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
  border: 0px;
}
.switch-small input {
  opacity: 0;
  width: 0;
  height: 0;
  border: 0px;
}
.visible-toggle-settings, .visible-toggle-subscriptions {
  padding: 5px 15px !important;
}
.visible-toggle-import {
  padding: 15px 10px 15px 0px !important;
}
.visible-toggle-paidcomplete {
  padding: 0 15px 0 0 !important;
}
.visible-toggle-small {
  padding: 0px !important;
}
/* The slider */
.slider {
  background:var(--button-bg);
  color:var(--button-color);
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: var(--transition);
}
.slider-permissions {
  background: #ccc;
}
.slider:before {
  background-color: var(--white);
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 4px;
  bottom: 4px;
  transition: var(--transition);
}
.slider-small:before {
  background-color: var(--white);
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 2px;
  bottom: 2px;
  transition: var(--transition);
}
input:checked + .slider {
/*  background: var(--green);*/
  background: var(--primary);
}
input:focus + .slider {
/*  box-shadow: 0 0 1px var(--green);*/
}
input:checked + .slider:before {
  -webkit-transform: translateX(20px);
  -ms-transform: translateX(20px);
  transform: translateX(20px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 28px;
}

.slider.round:before {
  border-radius: 50%;
}
.toggle-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
/*  background-color: #fbfbfb;*/
  padding: 5px;
/*  border: 1px solid #f0f0f0;*/
  border-radius: var(--radius-m);
  margin-bottom: 10px;
}
.toggle-container:hover {
  background-color: #fbfbfb;
}
.permissions-div .toggle-container{
  padding: 6px;
  margin-bottom: 0px;
}
.toggle-container-settings, .toggle-container-paidcomplete, .toggle-container-subscriptions {
  justify-content: flex-start !important;
  background-color: transparent !important;
  margin-bottom: 1px !important;
  padding: 1px !important;
}
.toggle-container-paidcomplete {
  margin: 10px 0 !important;
} 
.toggle-container .visible-toggle {
  padding: 0px;
}
.logout{
  display: flex;
  justify-content: center;
  margin-top: 150px;
  margin-bottom: 100px;
}

#invoiceVatStatusLabel{
  width: 90px;
}

/* autocomplete */
.autocomplete{
  position:relative;
}
.autocomplete > input{
  width:100%;
}
.autocomplete > span{
  width: auto;
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  z-index:999;
  display:none;
}

/* Loader icon */
.lds-ring {
  display: inline-block;
  position: relative;
  width: 14px;
  height: 14px;
}
.lds-ring div {
  border: 2px solid var(--primary);
  border-color: var(--primary) transparent transparent transparent;
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Loader icon white */
.lds-ring-white {
  display: inline-block;
  position: relative;
  width: 14px;
  height: 14px;
}
.lds-ring-white div {
  border: 3px solid white;
  border-color: white transparent transparent transparent;
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
.lds-ring-white div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring-white div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring-white div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring-white {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


/* horizontal loader */
.animated {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
}

.horizontal-loader {
  animation: HorizontalProgressbar 1.35s ease infinite;
  background: #928cff;
  background:var(--light-2);
  height: 3px;
  left: 0;
  top: 0;
  width: 20%;
  z-index: 9999;
  position: absolute;
  left:0;
  right:0;
  max-width:100%;
  top: 100%;
  margin-top: -3px;
  overflow:hidden;
}

.horizontal-loader:after{
  display: block;
  position: absolute;
  content:'';
  right: 0px;
  width: 100px;
  height: 100%;
  opacity: 0.5;
}

@keyframes HorizontalProgressbar {
 to {
  transform:translate3d(650%,0,0)
 }
}


.grid-1col{
  display:grid;
  grid-template-columns: 1fr;
  column-gap: 15px;
}
.grid-2col{
  display:grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 15px;
}
.grid-3col{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 15px;
}
.grid-4col{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  column-gap: 15px;
}
/*.grid-2col span{
  width:100%;
}*/
.grid-2-1col{
  display:grid;
  grid-template-columns: 2fr 1fr;
  column-gap: 15px;
}
.grid-3-1col{
  display:grid;
  grid-template-columns: 3fr 1fr;
  column-gap: 15px;
}
.grid-1-3col{
  display:grid;
  grid-template-columns: 1fr 3fr;
  column-gap: 15px;
}
.grid-1-2col{
  display:grid;
  grid-template-columns: 1fr 2fr;
  column-gap: 15px;
}
.grid-5col{
  display:grid;
  grid-template-columns: 1fr 0.1fr 1fr 0.1fr 1fr;
  column-gap: 15px;
}
.autocomplete input{
  width: 100% !important;
  padding-right: 25px;
}


/* TABS */
.tabs{
  display:flex;
  flex-direction:row;
  width:100%;
  margin-bottom:16px;
}
.tabs .tab{
  list-style: none;
  padding:10px 12px;
  border-radius: var(--radius-s);
  cursor:pointer;
  margin-right: 5px;
}
.tabs .tab:hover{
  background: var(--primary-light);
}

.tabs .tab.active{
  color:var(--primary);
  background: var(--primary-light);
}
/*.tab-container{
  height:calc(100% - 66px);
}
.tab-panels{
  max-height:100%;
  display: flex;
}
.tab{
  background:#f7fbff;
  width:100%;
  border-bottom: 1px solid #d9e8f4;
  display: flex;
  padding: 12px;
  height:66px;
  align-items: center;
  box-sizing:border-box;
}
.tab button{
  position: relative;
  display: inline-block;
  padding: 12px;
  border: 1px solid #edf4fa;
  margin-right: 8px;
  margin-bottom: 0px;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.9em;
  color:#000;
  background:#fff;
  border-radius:5px;
}
.tab button.active{
  color:var(--primary);
  background:#edf4fa;
}
.tabcontent {
  display: none;
  width:100%;
  max-height: 100%;
  animation: tabfade 300ms;
}
@keyframes tabfade {
  from {opacity: 0;}
  to {opacity: 1;}
}*/
.invoice-information-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 30px;
}
.invoice-structured{
  border:1px solid var(--border-color);
  border-radius: 5px;
  padding: 12px;
  font-weight: 500;
  text-align: center;
  margin: 20px 0 4px 0;
}
.invoice-structured-code{
  background:var(--button-bg);
  padding: 4px;
  border-radius: 2px;
  display:block;
  margin-top: 8px;
}
.invoice-navigation{
  position: absolute;
  right: 0;
  top: 0;
}
.invoice-information-grid .button{
  margin: 0;
}
.invoice-information-grid .button i{
  margin-left: 4px;
}
.invoice-creditnote{
  font-weight: 500;
  font-size: 0.9em;
}
.download-invoice{
  margin-top: 20px !important;
}
.invoice-actions{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
/*  grid-gap:8px;*/
/*  margin: 30px 0 12px 0;*/
/*  margin: 30px 0 0px 0;*/
}
.creditnote-actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
/*  grid-gap:8px;*/
/*  margin: 30px 0 12px 0;*/
/*  margin: 30px 0 0px 0;*/
}
.orderform-actions{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
/*  grid-gap:8px;*/
/*  margin: 30px 0 12px 0;*/
/*  margin: 30px 0 0px 0;*/
}
.deliverynote-actions{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
/*  grid-gap:8px;*/
/*  margin: 30px 0 12px 0;*/
/*  margin: 30px 0 0px 0;*/
}
.invoice-action{
/*  border:1px solid var(--border-color);*/
  background:var(--button-bg);
  color:var(--text-color);
  width:100%;
  margin: 0;
  text-align: center;
  padding: 4px 8px;
  font-size: 0.9em;
  border: 0px;
  border-right: 1px solid var(--border-color) !important;
  border-top: 1px solid var(--border-color) !important;
  border-radius: 0 !important;
}
.invoice-action-last{
  border-right: none !important;
}
.invoice-action:hover{
  background:var(--button-bg-hover);
  color:var(--primary);
}
.detail-info{
  padding-bottom: 20px;
}
.detail-info-row{
  display: grid;
  grid-template-columns: 1fr 2fr;
  padding-bottom: 5px;
}
.detail-info-header{
  font-weight: 500;
}
.detail-info-value{
  font-weight: 350;
}
.invoice-status{
  border-top: 1px solid var(--border-color);
  font-weight: 500;
  font-size: 0.9em;
  padding-top: 20px;
}
.invoice-status > div{
  padding-top: 5px;
}
.remarks{
  all: unset;
  display: revert;
  font-weight: 350;
}
.invoice-totals{
  text-align: right;
  padding: 20px;
}
.invoice-total > span{
  font-weight: 550;
}
.invoice-totals-row{
  display: grid;
  grid-template-columns: 85% 15%;
  padding-bottom: 5px;
}
.invoice-totals-heading{
  margin-right: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 350;
}
.invoice-totals-value{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 350;
}
.invoice-vatrules{
  font-size: 12px;
  padding: 20px;
}
#popup-box-editvatrules textarea{
  min-height: 100px !important;
}
.edit-vat-button{
  color: var(--mid-1);
}



/*TRANSACTIONS*/
.transaction-information-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 30px;
}
.transaction-amount{
  display: inline-block;
  border-radius: 60px;
  padding: 0.5em 0.6em;
  font-size: 12px;
  line-height: 4px;
}
.transaction-amount-positive{
  background: rgba(75, 192, 192, 0.1);
  color: var(--green);
  border: 1px solid rgba(75, 192, 192, 0.2);
}
.transaction-amount-negative{
  background: rgba(255, 99, 132, 0.1);
  color: var(--red);
  border: 1px solid rgba(255, 99, 132, 0.2);
}


/* MAIL FORM */
.mail-form{
  border: 2px solid var(--border-color);
  border-radius: 5px;
}
.mail-form-heading{
  padding: 20px;
  background: rgba(79, 70, 229, 0.01);
}
.label-front{ 
  display: grid;
  grid-template-columns: 100px 1fr;
  grid-gap: 50px;
  width: 100%;
  margin-bottom: 10px;
}
.label-front-select{ 
  max-width: 400px !important;
}
.label-front select { margin-bottom: 0px; }
.label-front label {
  text-align:right;
  display: flex;
  align-items: center;
  min-width: 80px;
}
.label-front input {
  margin-bottom: 0px;
}
.label-left{
  margin-bottom: 0px !important;
}
.mail-to-cc-block, .mail-to-bcc-block{ display: none; }
.sendinvoice-recipients{
  display: flex;
  align-items: baseline;
}
.row-with-buttons {
  display: flex;
  align-items: flex-start;
  width: 100%;
}
.mailcc-button{
  background: var(--light-1);
  margin-left: 10px; /* Adds spacing between the input and buttons */
  height: 36px;
  padding: 10px 12px;
  border-radius: var(--radius-s);
  flex-shrink: 0; /* Prevents the buttons from shrinking */
}
.mail-message{
  border: none;
  border-top: 1px solid var(--border-color);
  border-radius: 0px 0px 5px 5px;
  overflow: scroll;
  padding: 20px;
  resize: none;
  font-size: 14px;
}
.mail-message-template{
  border: 1px solid var(--border-color);
  border-radius: var(--radius-s);
}
.mail-attachment{
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.attachment-box{
  display: flex;
  background: var(--light-4);
  padding: 7px;
  margin-top: 5px;
  border-radius: 7px;
  cursor: pointer;
  margin-right: 5px;
  align-items: center;
  width: fit-content;
}
.attachment-box-invoice{
  background: var(--light-3) !important;
  width: 300px;
}
.attachment-box-invoice i{
  color: var(--red);
  font-weight: 900;
  margin-right: 5px;
}
.attachment-box-invoice a{
  font-size: 13px;
  display: flex;
  width: 100%;
}
.attachment-box-invoice .offer-booked{
  background-color: var(--light-4);
  margin-left: auto;
}
.attachment-box:hover{
  background: var(--light-3);
}
.attachment-box-invoice:hover{
  background: var(--light-2) !important;
}
.attachment-box .fa-file-pdf, .attachment-box .fa-solid{
  color: var(--red);
}
.mail-attachment-name{
  font-size: 13px;
}

.attachment-box.extra {
  display: inline-flex; align-items: center; gap: 8px;
}
.attachment-box.extra .remove-attachment {
  cursor: pointer; font-weight: 600; opacity: .7;
}
.attachment-add { margin-left: auto; display: inline-flex; align-items: center; height: 32px; padding: 7px; margin-top: 5px;}


.all-mail{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
} 
span.email-ids {
  float: left;
  border: 1px solid #ccc;
  padding: 3px 5px 0px 8px;
  margin-right: 5px;
  background: var(--light-3);
  border-radius: 50px;
  font-size: 12px;
  line-height: 16px;
  margin: 2px;
}
span.cancel-email {
  width: 10px;
  display: block;
  float: right;
  text-align: center;
  margin-left: 5px;
  border-radius: 49%;
  height: 18px;
  line-height: 12px;
  margin-top: 1px;
  cursor: pointer;
  font-size: 14px;
}
.enter-mail-id {
  /*height: auto;
  margin: 0;*/

  width: 0;
  height: 0;
  padding: 0;
}
.invalid-email {
  color: var(--red) !important;
  background: rgba(255, 99, 132, 0.1) !important;
  border-color: rgba(255, 99, 132, 0.2) !important;
}
.dynamic-width-input {
  width: auto;
  display: inline-block;
}
.col-sm-12.email-id-row {
  border: 1px solid var(--border-color);
  padding-left: 5px;
  border-radius: var(--radius-s);
  background-color: var(--white);
  width: 100%;
  height: 100%;
  min-height: 36px;
  cursor: text;
  display: flex;
  align-items: center;
  padding: 2px;
  flex: 1;
}
.col-sm-12.email-id-row input {
  border: 0px;
  outline:0px;
  flex: 1; /* Allows the input to fill available space within the div */
  min-width: 0; /* Prevent overflow */
}

.temp-input {
  display: inline-block; /* Ensure it stays inline with the rest of the content */
  padding: 5px;
  font-size: 12px;
  background-color: transparent;
  min-width: 20px; /* Always maintain some width */
  white-space: nowrap; /* Prevent breaking into a new line */
  vertical-align: middle; /* Align with text */
  order: 1;
}

.blinking-cursor {
  position: relative;
}

.blinking-cursor::after {
  content: '|'; /* Blinking cursor */
/*  position: absolute;*/
  animation: blink 1.2s step-start infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}



.pdf-box{
  display: inline-block;
  background: var(--light-3);
  padding: 7px;
  border-radius: 7px;
  margin-top: 20px;
  cursor: pointer;
}
.pdf-box:hover{
  background: var(--light-2);
}
.pdf-box .fa-file-pdf{
  color: var(--red);
}
.pdf-box-name{
  font-size: 13px;
}


.error{color:#E8423B;color:rgba(255, 99, 132, 1);}
.validate-green{color:#2FCC71; font-size:18px;} 
.error-red{color:#F66969; font-size:18px}
.contact-layout{
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-column-gap: 20px;
  margin-top: 20px;
}
.contact-layout a{
  color:var(--primary);
  font-weight: 500;
}
.contact-layout a:hover{
  text-decoration: underline;
}
.contact-layout-left{
  display: flex;
  align-content: center;
  flex-direction: column;
  text-align: center;
  padding-bottom: 20px;
}
.padding-top-reset{padding-top:0;}
.header-pic{
  overflow:hidden;
  margin: 0 auto;
  border-radius: 50%;
  transition: var(--transition)
  width: 100%;
  height: 100%;
  max-width: 40px;
  max-height: 40px;
}
.header-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.grid-pic{
  overflow: hidden;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.grid-pic-micro{
  overflow:hidden;
  border-radius: 50%;
  width: 25px;
  height: 25px;
}
.grid-pic img, .grid-pic-micro img {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* of 'contain' als je liever volledige afbeelding ziet met randen */
  object-position: center;
  display: block;
}
.grid-pic-bank{
  border-radius: var(--radius-m) !important;
}
.contact-grid-detail {
  display:grid;
  /*grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );*/
  /*grid-template-columns: 1fr 1fr 1fr 1fr;*/
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap:16px;
}
.business-entities-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
}
.website-favicon-container {
  display: flex;
  align-items: center;
}
.website-favicon {
  border-radius: 3px;
  width: 15px;
  height: 15px;
  margin-right: 5px;
}
@media only screen and (max-width: 1440px) {
  .contact-grid-detail{
    grid-template-columns: 1fr 1fr 1fr;}
}
@media only screen and (max-width: 1100px) {
  .contact-grid-detail{
    grid-template-columns: 1fr 1fr;}
}
@media only screen and (max-width: 480px) {
  .contact-grid-detail{
    grid-template-columns: 1fr;}
}
.contact-block{
  padding:12px;
  display:flex;
  grid-gap:12px;
  flex-direction: row;
  box-shadow:0px 4px 10px 0px rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.12);
  border-radius:8px;
  justify-content: space-between;
  align-items: center;
}
.peppol-registration-block{
  box-shadow:0px 4px 10px 0px rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.12);
  border-radius:8px;
}
.contact-block:hover{box-shadow:0px 4px 6px 0px rgba(0,0,0,0.08);}
.contact-info{display:flex;flex-direction:column;grid-gap:4px;}
.contact-block h4{margin-bottom:2px;}
.contact-left, .peppol-registration-left {
    display: flex;
    align-items: center;
    grid-gap: 12px;
}
.contact-info .contact-role{opacity:0.6;font-size:0.9em;}
.contact-pic{
  width: 48px;
  height: 48px;
  overflow: hidden;
  margin: 0 auto;
  border-radius: 50%;
  transition: var(--transition);
  display: flex;
  justify-content: center;
  align-items: center;
}
.contact-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* of 'contain' om de hele afbeelding zichtbaar te houden */
  object-position: center;
  display: block;
  border-radius: 50%;      /* zorgt dat hoeken niet uitsteken */
}
.contact-actions, .peppol-registration-actions{display:flex;flex-direction:row;align-items: center;}
.contact-actions form{margin:0;}
.profile-pic, .product-pic{
  width: 140px;
  height: 140px;
  overflow: hidden;
  margin: 0 auto;
  border-radius: 16px;
  transition: var(--transition-l);
  display: flex;
  justify-content: center;
  align-items: center;
}
.contact-layout-left h3{
  margin-bottom: 8px;
}
.contact-layout-left span{
  font-size: 0.85em;
}
.contact-layout-right, .product-layout-right{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-row-gap: 20px;
  grid-column-gap: 20px;
  height: fit-content;
}
.contact-layout-right > div, .product-layout-right > div{
  background:var(--button-bg);
  color:var(--text-color-light);
  padding: 20px 24px 24px 24px;
  box-sizing: border-box;
  border-radius: 8px;
}

.primary-account{
  color:#2a3b4d;
  border:0.1px solid;
  border-radius: 20px;
  overflow: hidden;
  display:inline-flex;
  border-color:var(--light-2);
  background-color:var(--light-3);
  padding: 2px 6px;
  margin: 0px;
  font-size:11px;
}
.entity-inactive{
  color:#2a3b4d;
  border:0.1px solid;
  border-radius: 20px;
  overflow: hidden;
  display:inline-flex;
  border-color:var(--light-2);
  background-color:var(--light-3);
  padding: 2px 6px;
  margin: 0px;
  font-size:11px;
}
.user-invited{
  color: var(--primary);
  background: rgba(var(--primary-rgb),0.08);
  border-color: rgba(var(--primary-rgb),0.08);
}

.basic-table{
  text-align:left;
  border-radius:8px;
  overflow:hidden;
  overflow-y:scroll;
  width:100%;
  max-width:100%;
  border-collapse:collapse;
  border-top: 1px solid var(--light-2);}
.basic-table th{background:var(--primary-light); font-size: 0.85em; color: var(--mid-1);}
.basic-table td{
  font-size:0.9em;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 300px;
  font-weight: 350
}
.basic-table-flex{
  display: flex;
  align-items: center;
  justify-content: center;
}
.peppol-transactions-table tr td:first-of-type{
  display: flex;
  align-items: center;
  justify-content: center;
}
.peppol-transactions-table tr td:first-of-type > img{
  height: 18px;
}

/*.basic-table tr:nth-of-type(even){
    background:var(--light-4);
  }*/
.basic-table tr:not(:first-of-type), .basic-table tbody tr:first-of-type{
    border-top: 1px solid var(--light-2);
  }
  /*.basic-table td:not(:last-of-type),.basic-table td:not(:last-of-type){
      border-right: 1px solid var(--light-3);
    }*/
    .basic-table tr:hover{background:var(--light-4);}

.basic-table td,.basic-table th{padding:8px 10px;}
/*.basic-table td, .basic-table th {
    border: 1px solid rgba(0,0,0,0.12);
}*/

.basic-table td input, .basic-table td select {
    margin-bottom: 0px;
}

.basic-table-align-right th:last-child, .basic-table-align-right td:last-child{
  text-align: right;
}

.mail-variables tr {
    font-size: 13px;
}
.mail-variables td {
    padding: 4px 10px;
}
.mail-variables tr td:first-child {
    font-weight: bold;
}

.nutrition-table td, .nutrition-table th {
    border: 1px solid rgba(0,0,0,0.12);
}
.production-process{margin-bottom:12px;}
.box.production-step{display:flex;flex-direction:row;grid-gap:24px;background:var(--white);padding:12px;padding-right:24px;}
.box.production-step:hover{box-shadow:0px 6px 8px 0px rgba(0,0,0,0.04);}
.production-actions{display:flex;flex-direction:column;grid-gap:8px;padding-right:12px;border-right:1px solid var(--light-2);}
.production-actions h3{width:100%;text-align:center;}
.production-action i{color:var(--light-2);font-size:24px;cursor:pointer;}
.box.production-step:hover .production-action i{color:var(--primary);}
.production-action i:nth-child(2){display:none;}
.production-action:hover i:nth-child(1){display:none;}
.production-action:hover i:nth-child(2){display:block;}
.production-step-title{display:flex;flex-direction:column;justify-content: center;width:100%;}
.production-step-title h3{margin-bottom: 6px;}
.production-step-title span{opacity:0.6;}
.box.production-step .itemOptions{grid-gap:16px;}
.itemOptions{
  grid-gap: 10px;
  font-size: 17px;
}
.itemOptions label{
  cursor: pointer;
}
.itemOptions .invoice-item-option-active{
  color: var(--primary);
}
.production-column-footer{display:flex;flex-direction: row;padding: 0px 20px 20px;position: relative;transition: var(--transition);}

.production-process-table td{padding:10px 12px;}
.production-process-table {border-collapse: collapse;}
.production-process-table td, .production-process-table th {border: 1px solid rgba(0,0,0,0.16);}

.selectedTaskUsers{
  padding: 5px 0px;

}

.user-avatar{
  color:#2a3b4d;
  height: 24px;
  display: inline-flex;
  box-shadow: inset 0 0 0 1px hsla(240,4%,53%,.12);
  border-radius: 12px;
  border-color:gray;
  background-color:#f8f8ff;
  margin: 2px;
}

.task-user-name{
  padding: 3px 10px;
}

.delete-task-user{
  border-radius: 50%;
  background-color: transparent;
  border:0;
  width: 24px;
  height: 24px;
  padding: 3px 4px;
}

.delete-task-user:hover{
  background-color: #e8e8e8;
  transition: background-color .35s cubic-bezier(.4,0,.2,1),border-color .35s cubic-bezier(.4,0,.2,1),color .35s cubic-bezier(.4,0,.2,1),opacity .35s cubic-bezier(.4,0,.2,1);
}




/*DRAG AND DROP EXPENSES*/
.expenses-drop-zone {
  border: 2px dashed #ccc;
  border-radius: 14px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  height: 400px;
  min-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--white);
}
.expenses-drop-zone:hover {
  border-color: var(--primary);
  background-color: var(--light-4);
}
.expenses-drop-zone > i {
  font-size: 40px;
  color: var(--primary);
  margin-bottom: 32px;
}
.expenses-upload-box {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
}
.upload-file-name {
  font-weight: bold;
}
.upload-status {
  display: flex;
  justify-content: space-between;
}
.upload-file-size {
  font-weight: 200;
  font-size: 12px;
}
.upload-file-status {
  text-transform: uppercase;
  font-size: 12px;
}
.upload-file-status .ri-upload-line {
  color: var(--primary);
}
.upload-file-status .ri-check-line {
  color: var(--green);
}
.expenses-progress {
  width: 100%;
  height: 7px;
  margin-top: 2px;
  border: none;
  border-radius: 5px;
  background-color: #fff;
  color: var(--primary);
  overflow: hidden;
}
.expense-actions {
  flex-grow: 1;
  display: flex !important;
  flex-direction: row;
  margin: auto !important;
  width: 100%;
  align-items: end;
}
.expense-actions .box {
  margin-bottom: 0px;
}
progress::-webkit-progress-value {
  background-color: var(--primary);
}
progress::-moz-progress-bar {
  background-color: var(--primary);
}
.expenses-drop-zone.expenses-highlight {
  border-color: var(--primary);
}
.expenses-file-list {
  list-style-type: none;
  padding-right: 20px;
  min-width: 50%;
  max-height: 400px;
  overflow: scroll;
}
.expenses-file {
  margin-bottom: 20px;
}
.expense-status {
  height: 36px;
}



.toggle-button{
  background:none;
  color:var(--text-color);
  padding:0;
  font-size:24px;
  margin: 0;
  height:40px;
  width:40px;
  display: flex;
  align-items: center;
}
.toggle-button:hover{
  background:none;
  color:var(--text-color);
  padding:0;
}



.controls{position:;}
/* KANBAN */
.boards {
    /*display: inline-flex;*/
    flex: 1;
    height: 100%;
    width: 100%;
    /*display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 15px;*/
    grid-gap:15px;
    display: flex;
}
.board .block-heading{
  background:var(--block-bg);
}
.board {
  background:var(--body-bg);
    /*background: #F5F5F5;
    margin: 0 .5rem;*/
    width:calc(100% / 3);
    padding: 0px;
    display: flex;
    flex-direction: column;
}
/*.board:hover{width:50%;}*/
.board:not(:first-child) .block-actions{display:none;}

.board h2 {
    /*padding: 16px!important;
    min-width: 300px;
    width: 100%;
    margin: 0;
    background-color: #FFFF;
    font-weight: bold;
    font-size: 18px;
    color: #1C1C2E;*/
    text-transform: none;
}

.dropzone {
    padding: 12px;
    height:100%;
    width: 100%;
    justify-content: center;
    overflow-y: scroll;
}

.kanbanCard {
    background:var(--block-bg);
    border:none;
    box-shadow: 2px 0px 16px 0 rgba(0,0,0,0.05);
    padding: 16px;
    width: 100%;
    margin: auto;
    margin-bottom: 12px;
    /*margin-bottom: 2rem;*/
    border-radius: 3px 5px 5px 3px;
    cursor: move;
}
.kanbanCard:hover{
  box-shadow: 2px 0px 24px 0 rgba(0,0,0,0.1);
  transform: scale(1.015);
}
.kanbanCard form{
  opacity:0;
  user-select: none;
  pointer-events: none;
  transition: var(--transition);
}
.kanbanCard:hover form{
  opacity:1;
  user-select:auto;
  pointer-events:auto;
}

.description{
  font-weight: normal;
  font-size: 14px;
}

/*.red{
    border-left: 5px solid #E2163B;
}
.purple{
    border-left: 5px solid #4515CF;
}
.blue {
    border-left: 5px solid #158CCF;
}*/
.default-kb{
    border-left-width:3px;
    border-left-style: solid;
    border-color:rgba(124, 70, 230,1);
}
.yellow-kb{
  /*color:rgba(255, 159, 64, 1);*/
  border-left-width:3px;
  border-left-style: solid;
  border-color:rgba(255, 159, 64, 1);
}
.green-kb{
  /*color:rgba(75, 192, 192, 1);*/
  border-left-width:3px;
  border-left-style: solid;
  border-color:rgba(75, 192, 192, 1);
}

.highlight{
    background-color: rgba(95, 39, 205,0.1);
}
.kanbanCard, .dropzone{
    transition:var(--transition);
}
.is-dragging{
    cursor: move!important;
    cursor: -webkit-grabbing;
    opacity: .5;
}
.over{
    background: var(--body-bg);
}

.form-inline{
    display: flex;
    align-items: center;
    justify-content: center;
}

.priority{
    cursor: pointer;
    color:#989898;
}
.is-priority, .darkmode .is-priority{
    cursor: pointer;
    color:#FF7A00;
}
.red-theme{
    color: #E2163B !important;
    cursor: pointer;
    background: #ff000008 !important;
}
.red-theme:hover{
  background: #ff000014;
}
.green-theme{
  color:var(--green) !important;
  background:rgba(75, 192, 192, 0.1) !important;
}

/*.invisibleBtn:focus, #theme-btn:focus{
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    box-shadow: none!important;
}
.invisibleBtn{
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    cursor: pointer;
}*/

/* loading */
/*.loader {
    border: 16px solid white;
    border-top: 16px solid #1d1f20;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
    background-color: transparent;
}

@keyframes spin {
    100% { transform: rotate(360deg); }
    0% { transform: rotate(0deg); }
}
#loadingScreen{
    position: absolute;
    z-index: 30;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}*/
.projects-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  width:100%;
  grid-gap:2vw;
}
.project{
  border-radius:var(--radius-m);
  height:auto;
  width: 100%;
  display: flex;
  flex-direction:column;
  align-items: center;
  align-content: center;
  justify-content: center;
  padding:20px;
  position: relative;
  transition: var(--transition);
  border:1px solid var(--border-color);
}
.project.item,.project.group{
  background:var(--block-bg);
  /*box-shadow:var(--shadow-s);*/
  position:relative;
}
.project.item:hover{
  /*box-shadow:var(--shadow-m);*/
  /*transform: scale(1.015);*/
}
.project.group{
}
.project.group:hover{
}
.project.group:before, .project.group:after{
  content:'';
  background:var(--block-bg);
  border:1px solid var(--border-color);
  border-radius:var(--radius-m);
  position:absolute;
  height:100%;
  width:100%;
  transition: 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition:var(--transition-out);
}
.project.group:before{
  z-index:-10;
  left:4px;
  top:4px;
  transform: scale(1.01);
  border-radius:12px;
  filter:brightness(98%);
  transition-delay: 50ms;
}
.project.group:after{
  z-index: -20;
  left:8px;
  top:8px;
  transform: scale(1.02);
  border-radius:15px;
  filter:brightness(96%);
}
.project.group:hover:before{
  left:5px;
  top:5px;
  transform: scale(1.015);
  border-radius:14px;
}
.project.group:hover:after{
  left:10px;
  top:10px;
  transform: scale(1.035);
  border-radius:20px;
}
.project.item .button{
  background:var(--button-bg);
  color:var(--text-color-light);
  transition: var(--transition);
}
.project.item:hover .button{
  background:var(--primary);
  color:var(--white);
}
.new-projects-group{
  display:flex;
  flex-direction: column;
  grid-gap:1vw;
}
.new-projects-group .project{
  display:flex;
  height:auto;
}
.new-projects-group .project:first-child{
  flex-grow:1;
}
.new-projects-group .project:last-child{
  flex-direction: row;
}
.new-projects-group .project:last-child i{
  font-size: 1.6em;
  margin-right: 8px;
  margin-bottom: 0;
}
.new-projects-group .project:last-child h3{
  margin-bottom: 0;
}

.new-projects-group .project{
  flex-grow:1;
}
.new-projects-group .project{
  flex-direction: row;
}
.new-projects-group .project i{
  font-size: 1.6em;
  margin-right: 8px;
  margin-bottom: 0;
}
.new-projects-group .project h3{
  margin-bottom: 0;
}

.project.new{
  background:none;
  border:3px solid var(--border-color);
  color:var(--text-color-light);
}
.project.new:hover{
  border-color:var(--button-bg-hover);
  color:var(--text-color);
}
.project > i{
  font-size:3.2em;
  line-height:1em;
  color:var(--button-bg-hover);
  margin-bottom: 10px;
  transition: var(--transition);
}
.project:hover > i{
  color:var(--primary);
}
.project > img{
  width:72px;
  margin: 0 auto;
  margin-bottom: 24px;
  border-radius: var(--radius-m);
  transition: var(--transition);
}
.project h3{margin-bottom:10px;}
.project span{
  color:var(--text-color-light);
  font-size:0.9em;
}
.project span:last-child{
  margin-bottom:24px;
}
.project-wrapper{
  height:100%;
  width:100%;
  display:flex;
  flex-direction:column;
  flex-grow:1;
}
/*.project-wrapper .block-content{
  flex-grow:1;
}*/
.project-tab-bar.flex-nav{
  background: var(--border-color);
  width:auto;
  max-width:none;
  flex-grow: 0;
  height:auto;
  margin-right: 0px;
  list-style:none;
  padding:60px 8px 8px 8px;
  display:block;
  border-right:1px solid var(--border-color);
  position:relative;
  overflow: unset;
}
.project-tab-bar.flex-nav .nav-link button{
  font-size:16px;
  line-height:16px;
  min-width:40px;
  height:auto;
  width:100%;
  font-size:16px;
  line-height:16px;
  padding:14px 24px 14px 14px;
  border-radius: var(--radius-s);
  margin-bottom: 0px;
  display: flex;
  align-items: center;
  /*border:1px solid var(--border-color);*/
  /*border-left: 4px solid transparent;*/
}
.project-tab-bar.flex-nav .nav-link button span{
  margin-left:8px;
}
.project-tab-bar.flex-nav .nav-link button:hover{
  border-color:var(--block-bg);
  box-shadow: var(--shadow-s);
  background:var(--block-bg);
}
.project-tab-bar.flex-nav .nav-link button.nav-link-active{
  background:none;
  color:var(--text-color);
  border-color:var(--primary);
}
.project-tab-bar.flex-nav .nav-link button.nav-link-active i{
  color:var(--primary);
}
.project-tab-bar.flex-nav .nav-link button.nav-link-active:hover{
  box-shadow: none;
}


[data-tab-content] {
  display: none;
}

.active[data-tab-content] {
/*  display: block;*/
  display: grid;
}

.project-main{
  display:flex;
  flex-direction:row;
  /*overflow: unset;
  height: auto;*/
}
.project-nav{
  width:100%;
  height:60px;
  background:var(--border-color);
  border-bottom:1px solid var(--border-color);
}


#status-bar{
  background:rgba(var(--orange-rgb),0.08);
  color:var(--orange);
  padding:16px;
  border-radius: 8px;
  display: none;
  margin-bottom: 16px;
}
#status-bar-testmodus{
  background:rgba(255, 99, 132, 0.1) !important;
  color:var(--red);
  padding:16px;
  border-radius: 8px;
  display: none;
  margin-bottom: 16px;
}
#status-bar-small{
  background:rgba(255, 99, 132, 0.1);
  color:var(--red);
  padding:10px;
  border-radius: 8px;
}
.project.selected{border:2px solid rgba(0,0,0,0.16);background:var(--light-4);/*box-shadow: inset 0 0 8px rgba(0,0,0,0.12);*/}
.project .avatar-header{margin-bottom:12px;}
.project h3{margin-bottom:4px;}








.choice-button-grid{
  display:flex;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  width:100%;
  grid-gap:2vw;
  align-items: center;
  justify-content: center;
  align-items: stretch;
}
.choice-button{
  border-radius:var(--radius-m);
  height:auto;
  width: 100%;
  display: flex;
  flex-direction:column;
  align-items: center;
  align-content: center;
  justify-content: center;
  padding:20px;
  position: relative;
  transition: var(--transition);
  border:1px solid var(--border-color);
  background: var(--light-4);
  cursor: pointer;
  min-width: 300px;
  max-width: 300px;
}
.choice-button > i{
  font-size:3.2em;
  line-height:1em;
  color:var(--button-bg-hover);
  margin-bottom: 10px;
  transition: var(--transition);
}
.choice-button:hover > i{
  color:var(--primary);
}
.choice-button > svg{
  color:var(--button-bg-hover);
  margin-bottom: 10px;
  transition: var(--transition);
  height: 48px;
}
.choice-button:hover > svg{
  color:var(--primary);
}
.choice-button > img{
  width:72px;
  margin: 0 auto;
  margin-bottom: 24px;
  border-radius: var(--radius-m);
  transition: var(--transition);
}
.choice-button h3{margin-bottom:10px;}
.choice-button span{
  color:var(--text-color-light);
  font-size:0.9em;
}
.choice-button span:last-child{
  margin-bottom: 15px;
  text-align: center;
}
.sendpeppol-loader{
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}

.paid-progress-wrapper {
  position: relative;
}
.paid-progress-bar {
  display: block;
  justify-content: space-between;
  align-items: center;
  padding-top: 30px;
}
#paid-progress {
  width: 100%;
  background-color: var(--light-2);
  height: 15px;
  border-radius: 12px;
}
#paid-bar {
  height: 20px;
  background-color: var(--green);
  height: 15px;
  border-radius: 12px;
}
.paid-amounts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-bottom: 5px;
  text-transform: uppercase;
  font-size: 14px;
}
.paid-amount-topay {
  justify-self: end;
}


/*SETTINGS*/
.settings-small-block{
  width: calc(50% - 15px);
}

.settings-preferences{
  padding: 10px;
}

.settings-content{
  display: grid;
  grid-template-columns: 1fr 4fr;
  grid-column-gap: 30px;
}
.settings-content .tabs{
  flex-direction: column !important;
  height: fit-content;
  background: var(--block-bg);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-s);
  border: 1px solid var(--border-color);
  overflow: hidden;
  padding: 10px;
}


/* PRINT LABELS */

.select-printer{
  width: auto;
}

.labels-settings-grid{
  display:grid;
  grid-template-columns: 3fr 1fr;
  grid-column-gap: 30px;
}

.scale-weight-container {
  display: grid;
  justify-content: center;
  position: relative; /* Set position to absolute */
  top: 50%; /* Position from the top at 50% */
  left: 50%; /* Position from the left at 50% */
  transform: translate(-50%, -50%); /* Adjust to center the container */
  padding: 10px;
}

.scale-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
}

.scale-weight {
  font-family: "Seven Segment", "Dot Matrix", "LCD", sans-serif;
  font-size: 80px;
  line-height: 1;
}

.scale-session {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid black;
  margin: 0 auto;
  margin-top: 5px;
  padding: 10px;
  border-radius: 4px;
  font-size: 18px;
  font-weight: bold;
  --height: 35px;
  min-width: var(--height);
  height: var(--height);
  width: fit-content;
}

.scale-session-span {
  display: grid;
  justify-content: center; /* Horizontally centers content */
  align-items: center; /* Vertically centers content */
}



/* KANBAN */
.kanban-section{
  flex-grow:1;
  position: relative;
  display: block;
  height: 100%;
}
.kanban-wrapper{
  height:100%;
}
.kanban-section container{
  height:100%;
  width:auto;
  min-width: inherit;
  max-width: none;
  overflow: auto;
  clear: both;
}
.kanban-section container table{
  height:100%;
  max-width: none;
  min-width: inherit;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.kanban-section container table tbody{
  min-height:100%;
  display:flex;
  flex-direction: row;
}

.kanban-board {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 15px;
  overflow-x: auto;
  padding-bottom: 10px;
}

.kanban-row{
  width:auto;
  min-height:100%;
  max-height: 100%;
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  padding-bottom: 24px;
  margin-right: 30px;
  gap: 10px;
}
.kanban-row:last-child{
  margin-right: 45px;
}
.kanban-column{
  display:flex;
  flex-direction:column;
  min-width: 290px;
  max-width: 340px;
  flex-grow: 1;
  vertical-align:top;
  position: relative;
  max-height: 100%;
  /*margin-right: 20px;*/
}
.column{
  width:100%;
  max-height:100%;
  height:auto;
  min-height: 120px;
  padding:16px 0 4px 0;
  padding:8px;
  overflow:visible;
  overflow-y: auto;
  flex-grow:0;
  background: var(--block-bg);
  border:1px solid var(--border-color);
  border-radius:var(--radius-m);
  scrollbar-width: none;  /* Firefox */
}
  .kanban-column-head{
    display:flex;
    flex-direction: row;
    padding-bottom: 16px;
    /*border-bottom:1px solid var(--border-color);*/
    position: relative;
  }
  .column-title{
    width:auto;
    display:flex;
    flex-direction: row;
    align-items: center;
    padding: 0 10px;
    border-radius: var(--radius-s);
    position: relative;
    transition: var(--transition-bounce);
    height:30px;
  }
  .column-title h4{
    color:var(--white);
    font-stretch: condensed;
    padding:0;
    margin: 0;
  }
  .column-title .action.action-icon{
    color:var(--white);
    background:rgba(0,0,0,0.12);
    position:absolute;
    right:-48px;
    opacity: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    /*border-left: 1px solid var(--body-bg);*/
    transition: none;
    transition-property: opacity;
  }
  .kanban-column-head:hover .column-title{
    padding-right:40px;
  }
  .kanban-column-head:hover .action.action-icon{
    right:0;
    opacity:1;
    transition-delay: 80ms;
  }
  .kanban-column-head .block-actions button{
    background:none;
    transition: var(--transition-bounce);
  }
  .kanban-column-head .block-actions{
    opacity:0;
    transition: var(--transition);
  }
  .kanban-column-head:hover .block-actions{
    opacity: 1;
  }






  .grey{
    background:var(--dark-1);
  }
  .red{
    background:var(--red);
  }
  .darkred{
    background:var(--darkred);
  }
  .orange{
    background:var(--orange);
  }
  .green{
    background:var(--green);
  }
  .lightgreen{
    background:var(--lightgreen);
  }
  .cyan{
    background:var(--cyan);
  }
  .blue{
    background:var(--blue);
  }
  .darkblue{
    background:var(--darkblue);
  }
  .purple{
    background:var(--purple);
  }
  .magenta{
    background:var(--magenta);
  }
  .pink{
    background:var(--pink);
  }
  .yellow{
    background:var(--yellow);
  }
  .gold{
    background:var(--gold);
  }


  .yellow h4{color:var(--dark-4);}


  .kanban-column-footer{
    display:flex;
    flex-direction: row;
    padding-top: 16px;
    /*border-top:1px solid var(--border-color);*/
    position: relative;
    transition: var(--transition);
  }
  .kanban-column-footer input::placeholder{
    transition: var(--transition);
  }
  /*.kanban-column-footer:hover input::placeholder{
    filter:grayscale(0%);
  }*/
  .kanban-column > .button{
    font-size: 24px;
    line-height:24px;
    width:100%;
    /*width:48px;
    height:48px;*/
    display:flex;
    padding:12px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-s);

    /*left: 50%;
    transform: translateX(-50%);*/
    transition: var(--transition-bounce);
  }
  .kanban-column > .button:hover{
    transform:scale(1.05);
  }
  .task-box {
    border-radius: var(--radius-s);
    background: var(--body-bg);
    color:var(--text-color);
    border:1px solid var(--border-color);
    margin-bottom: 8px;
    height: 107px;
    transition: transform var(--transition-bounce), border-color var(--transition-bounce);
  }
  .task-box:last-child{
    margin-bottom: 0;
  }
  .task-box > a{
    width:100%;
    padding:12px;
    display:flex;
    flex-direction: column;
    height: inherit;
  }
  .task-box:hover{
    transform: scale(1.02);
  }
  .task-box.default{

  }
  .task-box.red{}
  .task-box-header {}
  .task-box-header .ui-icon {}
  .ui-sortable-placeholder {
    border: 2px dotted var(--text-color-light);
    background:var(--button-bg-hover);
    box-shadow:none;
    visibility: visible !important;
    height: auto;
  }
  .ui-sortable-placeholder * { visibility: hidden;}
  .task-box-heading{
    display: flex;
    flex-direction: row;
    width: 100%;
    margin-bottom: 8px;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .task-box-content{
    font-size: 0.8em;
    color:var(--text-color-light);
    margin-bottom:12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .task-box-footer{
    margin: auto 0px 0px;
  }



  /* SCALE */
  #checking-scale, #scale-online, #scale-offline{
    display: inline-block;
    border-radius: 60px;
    padding: 0.5em 0.6em;
    display: none;
    background: var(--light-3);
  }

  #checking-scale{background: var(--light-3);}
  #scale-online{background: #2ecc71;}
  #scale-offline{background: var(--red);}
  #scale-reconnect{display:none;}

  .scale-online, .scale-offline{color:white;}

  .ri-signal-wifi-error-line{vertical-align: text-top;}
  .ri-wifi-line, .ri-wifi-off-line{color:white; vertical-align: text-top;}




  /* SAVE DATA ICONS */
  #saving, #saved{
    display: inline-block;
    border-radius: 60px;
    padding: 0.5em 0.6em;
    display: none;
    background: var(--light-3);
  }

  #saving{background: var(--light-3);}
  #saved{background: #2ecc71;}

  #saved > span{color:white;}

  .saving-icon{vertical-align: text-top;}
  .saved-icon{color:white; vertical-align: text-top;}



  /* SIGNED ICON */
  #signed{
    display: inline-block;
    border-radius: 60px;
    padding: 0.5em 0.6em;
    display: none;
    background: #2ecc71;
    margin-left: 10px;
  }

  #signed > span{
    color:white;
    font-size: 12px;
    line-height: 8px;
  }


    /* CNAME VERIFIED */
  .cnamestatus, .invoice-status-small{
    display: inline-block;
    border-radius: 60px;
    padding: 0.5em 0.6em;
    margin-left: 10px;
    font-size: 12px;
    line-height: 8px;
  }
  .cnameverified, .invoice-status-small-paid{
    background: rgba(75, 192, 192, 0.1);
    color: var(--green);
    border: 1px solid rgba(75, 192, 192, 0.2);
  }
  .cnamepending, .invoice-status-small-unpaid{
    background: rgba(255, 205, 86, 0.1);
    color: var(--orange);
    border: 1px solid rgba(255, 205, 86, 0.2);
  }
  .cnamedenied, .invoice-status-small-late{
    background: rgba(255, 99, 132, 0.1);
    color: var(--red);
    border: 1px solid rgba(255, 99, 132, 0.2);
  }


  /* TASKS */

  .task-users-grid{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    width:100%;
    grid-gap:1vw;
  }
  .task-done{
    background: rgba(var(--green-rgb),0.08);
    border: 1px solid var(--green);
    color:var(--darkgreen);
  }
  .task-late{
    background:rgba(var(--red-rgb),0.08);
    border: 1px solid var(--red);
    color:var(--darkred);
  }
  .task-default{
    background:var(--light-4);
    border: 1px solid var(--light-2);
    color:var(--black);
  }
  .task-done,.task-late,.task-default{padding:8px;}
  .task-user{
    border-radius:var(--radius-m);
    height:auto;
    width: auto;
    display: flex;
    flex-direction:row;
    align-items: center;
    align-content: center;
    justify-content: left;
    padding:8px;
    position: relative;
    transition: var(--transition);
    border:1px solid var(--border-color);
  }
  .task-user-text{margin-left:8px;}
  .task-user.item{
    background:var(--block-bg);
    position:relative;
  }
  /*.task-user.item:hover{
    transform: scale(1.015);
  }*/
  .task-user > img, .task-user .avatar-task{
    width:40px;
    height:40px;
    margin:0;
    border-radius: var(--radius-m);
    transition: var(--transition);
  }
  .task-user.item .button, .button.btn-success{
    background:var(--green);
    color:var(--white);
    transition: var(--transition);
  }
  .button.btn-error{
    background:var(--red);
    color:var(--white);
    transition: var(--transition);
  }
  .button.btn-info{
    background:var(--mid-1);
    color:var(--white);
    transition: var(--transition);
  }
  .task-user.item:hover .button{
    background:var(--primary);
    color:var(--white);
  }
  .task-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-gap:16px;
  }
  #taskbox .box-comments{font-size:13px;line-height:20px;}
  #taskbox i{margin-right:4px;}
  #taskbox .ri-information-line{margin-right:0px !important;}
  #taskbox button{margin-top:8px;}



  .team-member{
/*    height:36px;*/
    display: flex;
    flex-direction:row;
    justify-content: flex-end;
    align-items: center;
  }
  .team-member > *{
    margin-left: -9px;
    border: 1px solid var(--body-bg);
    border-radius: 50%;
    position: relative;
    width: 35px;
    height: 35px;
    line-height: 30px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
  }
  .team-member > *:not(:first-child) {
    transform:none;
  }

  .team-member > *:first-child {
    margin-left: 0;
    z-index: 10;
  }

  .team-member > *:nth-child(1) { z-index: 5; }
  .team-member > *:nth-child(2) { z-index: 4; }
  .team-member > *:nth-child(3) { z-index: 3; }
  .team-member > *:nth-child(4) { z-index: 2; }
  .team-member > *:nth-child(5) { z-index: 1; }

  .team-member > .more {
    background: var(--light-2);
    color: #111;
    border: 1px solid #fff;
    font-weight: 700;
  }

  .team-search-results {
    background: var(--block-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    max-height: 180px;
    overflow-y: auto;
    margin-top: 4px;
    display: none;
    position: relative;
    z-index: 10;
  }

  .team-search-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    cursor: pointer;
    transition: background 0.15s;
  }
  .team-search-item:hover {
    background: var(--hover-bg);
  }

  .team-list {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    width: 400px;
    flex-wrap: wrap;
    align-items: center;
  }
  .team-member-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 24px;
    padding: 4px 8px;
    background: var(--lightgrey);
    width: fit-content;
  }
  .team-member-name{
    font-size: 13px;
  }
  .remove-member:hover{transform:scale(1.2); transition: var(--transition);}
  .team-member-chip img,
  .team-member-chip .avatar-micro {
    width: 25px;
    height: 25px;
    border-radius: 50%;
  }
  .team-member-chip button {
    background: none;
    border: none;
    color: var(--danger);
    font-size: 16px;
    cursor: pointer;
  }

/*.project-section{
  display:flex;
  flex-direction:column;
  height:100%;
}
.project-section .block{
  flex-grow:1;
}*/
.section-heading{
  padding-bottom:30px;
}

.addition-text{margin-bottom: 16px;display: block;}








/* STOCKMANAGER */
.slidecontainer {
  max-width: 70%; /* Width of the outside container */
  margin: auto;
  width: 100%;
}

/* The slider itself */
.slidercount {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  position: relative;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

/* Mouse-over effects */
.slidercount:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slidercount::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.slidercount::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.product-stock-header {
  text-align: center;
  padding: 30px 0;
}

.product-stock-slider{
  padding: 30px 0;
}

.product-stock-footer{
  padding: 30px 0;
  margin: auto;
  width: 100%;
}






/* AVATAR */
.avatar-task {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-m);
  line-height: 72px;
  font-size: 1.4em;
  text-align: center;
  margin-bottom: 24px;
}

.avatar-micro {
  color: #fff;
  width: 25px;
  height: 25px;
  line-height: 25px;
  font-size: 0.8em;
  text-align: center;
}

.avatar-mini {
  color: #fff;
  width: 35px;
  height: 35px;
  line-height: 35px;
  font-size: 0.9em;
  text-align: center;
}

.avatar-header {
  color: #fff;
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 1.1em;
  text-align: center;
  border-radius: var(--radius-m);
}

.avatar-small {
  color: #fff;
  width: 48px;
  height: 48px;
  line-height: 48px;
  font-size: 1.4em;
  text-align: center;
}

.avatar-big {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* of 'contain' als je liever volledige afbeelding toont */
  object-position: center;
  display: block;
  border-radius: 16px; 

  color: #fff;
  line-height: 140px;
  font-size: 3em;
  text-align: center;
}

.avatar-sidenav {
  background: white;
  object-fit: cover !important;
  max-width: 54px;
  max-height: 54px;
  width: 100%;
  height: 100%;
}







/* DROPDOWN */
.dropbtn {
  padding: 12px;
  border: none;
  cursor: pointer;
}
.dropdown{position:relative;}
.dropdown-content {
  border-radius:8px;
  background:#fff;
  border:1px solid rgba(0,0,0,0.12);
  display: none;
  color:var(--grey);
  position: absolute;
  overflow:hidden;
  right: 0px;
  padding:4px;
  top: 100%;
  width:max-content;
  min-width: 220px;
  box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.2);
/*  z-index: -1;*/
  z-index: 999999;
  height:auto;
}
.dropdown-content form{margin:0px;}
.dropdown-content div {
  border-radius:4px;
    color:var(--dark-1);
  padding: 12px 16px;
  display: block;
  letter-spacing: .6px;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 12px;
}
.dropdown-content a {
  border-radius:4px;
    color:var(--dark-1);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown-content a:hover {background:var(--light-3);color:#000;}

.dropdown:hover .dropdown-content {
  display: block;
}





/* TOOLTIP */
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  font-size:0.85em;
  width: 220px;
  background-color: black;
  opacity: 60%;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 10px;
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 20px;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}





/* WARNING MESSAGE */
.warningbar {
  padding: 10px;
  margin-bottom: 10px;
}

.warningmessage {
  border-radius: var(--radius-m);
  border: 1px solid #fc6;
  font-size: 12px;
  color: #8f3c00;
  background: #fff6e5;
  width: 100%;
  text-align: center;
}
.warningmessage-vatrules {
  margin: 0px 20px 0px 20px;
  width: auto;
}

#invoice-warningbar, #addInvoiceStartnumberSpan, #creditnote-warningbar, #addCreditnoteStartnumberSpan{
  display: none;
}

#accountemail-exists {
  display: none;
}

.warningoverwrite {
  border-radius: var(--radius-m);
  border: 1px solid var(--yellow);
  font-size: 13px;
  width: 100%;
}

.popup-inner .warningoverwrite {
  width: 100%;
  box-sizing: border-box; 
  border-radius: var(--radius-m);
  border: 1px solid var(--yellow);
  font-size: 13px;
}

#entrepreneur-check-result {
  display: none;
}

.warninggreen {
  color: var(--green);
  border: 1px solid rgba(75, 192, 192, 0.2);
  background: rgba(75, 192, 192, 0.1);
}

.warningoverwrite-text{
  display: block;
  margin-bottom: 10px;
}

.vatexists, .data-overwrite {
  display: none;
}

.editTemplateContent {
  padding: 8px;
  resize: none;
  font-size: 14px;
}





/* OFFER STATUS STEPS */
#timeline-wrap{
  margin: 50px 30px;
  position:relative;
}

#timeline-wrap-cheese{
  margin:5% 5%;
  /*top:100;*/
  position:relative;
}

#timeline{
  height:2px;
  width: 100%;
  background-color: var(--light-2);
  position:relative;
}

.marker{
  z-index:0;
  color: #fff;
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 1.4em;
  text-align: center;
  position: absolute;
  margin-left: -20px;
  background-color: #999999;
  border-radius: 50%;

  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);

  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
}

.marker:hover{
  -moz-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  -o-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);

  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
}

.timeline-icon.one {
  background-color: var(--primary) !important;
}

.timeline-icon.two {
  background-color: var(--primary) !important;
}

.timeline-icon.three{
  background-color: #7c44d6 !important;
}

.timeline-icon.four {
  background-color: #9961de !important;
}

.timeline-icon.five {
  background-color: #b67fe5 !important;
}

.timeline-icon.active {
  background-color: var(--cyan) !important;
}
.timeline-icon.denied {
  background-color: var(--red) !important;
}

.mfirst{
  top:-20px;
}

.m2{
  top:-20px;
  left:25%
}

.m3{
  top:-20px;
  left:50%
}

.m4{
  top:-20px;
  left:75%
}

.mlast{
  top:-20px;
  left:100%
}

.timeline-panel {
  margin-top: 20%;
  width: 500px;
  height: 200px;
  background-color: #cbd0df;
  border-radius:2px;
  position:relative;
  text-align:left;
  padding:10px;
  font-size:20px;
  font-weight:bold;
  line-height:20px;
  float:left;
}

.timeline-panel:after {
  content:'';
  position:absolute;
  margin-top: -12%;
  left:10%;
  width:0;
  height:0;
  border:12px solid transparent;
  border-bottom: 15px solid #cbd0df;
}


#offer-linked-invoices{
  display: grid;
  line-height: 20px;
}
.offer-linked-invoice{
  margin-bottom: 5px;
}
.offer-booked{
  color:#2a3b4d;
  border:0.1px solid;
  border-radius: 20px;
  overflow: hidden;
  display:inline-flex;
  border-color:var(--light-2);
  background-color:var(--light-3);
  padding: 0px 6px 0px 6px;
  margin: 0px;
  font-size:11px;
}
.invoiceoffer-total{
  margin-top: 15px;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 14px;
}


p{margin-top:0px;}
.empty-block{
  padding:48px;
  display:flex;
  flex-direction:column;
  text-align:center;
  border-radius: 8px;
  height: 100%;
  justify-content: center;
}
.empty-block i{font-size:40px;color:var(--primary);margin-bottom:32px;}
.empty-block h3{margin-bottom: 4px;}

/* TO DO */

checklist_header { /* customise the header background */
    background-color: #0af2a5;
    padding: 20px 20px 5px 20px
}

.checklist p {
    padding-bottom: 0;
    font-size: 20px;
    color: #1d0d6f;
    padding: 20px 20px 5px 20px
}

.checklist ul {
    list-style: none!important; /* Remove the list style */
    padding: 15px 0 0 0!important
}

.checklist ul label {
    font-size: 16px;
    line-height: 1.4;
    padding: 13px 24px 13px 64px;
    display: block;
    position: relative;
    z-index: 100;
    cursor: pointer
}

.checklist ul input,
.checklist ul li.focus:before {
    left: 0;
    top: 0;
    position: absolute
}

.checklist li {
    position: relative
}

.checklist ul li.focus:before {
    left: 0;
    top: 0;
    position: absolute
}

.checklist ul input {
    opacity: 0
}

.checklist ul li.focus:before,
.checklist ul span.input:before {
    content: ""
}

.checklist ul span.input {
    background-image: linear-gradient(90deg, #1d0d6f 0, #5430ce 100%);
    background-color: #1d0d6f;
    width: 26px;
    height: 26px;
    left: 24px;
    top: 10px
}

.checklist ul span.input:before {
    width: 22px;
    height: 22px;
    top: 2px;
    left: 2px
}

.checklist ul span,
.checklist ul span:after,
.checklist ul span:before {
    display: block;
    position: absolute;
    background: #fff;
    border-radius: 50%
}

.checklist ul li.checked span.input { /* CSS to make the background green when checked - we add the class checked using javascript */
    background: #3CB371;
}

.checklist ul li.checked span.input:before {
    background: #3CB371;
}

.checklist ul li.checked label { /* when checked, make the text have a line through */
    text-decoration: line-through
}

.checklist ul li.checked.focus:before {
    background: #888
}

.checklist ul li.focus {
    background: #fafafa
}

.checklist ul li.checked {
    background: #f1f1f1
}





/*settings - invoice preview*/
.invoice-preview{
  display: inline-flex;
  gap: 50px;
}
.invoice-preview-document{
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Aligns items at the beginning and end of the container */
  height: 427px; /* Set height to maintain the container height */
  width: 300px;
  border: 1px solid grey;
  border-radius: 5px;
}
.invoice-preview-logo{
  margin: 30px;
  margin-top: 40px;
}
.invoice-preview-logo > i{
  font-size: 30px;
  color: var(--grey);
}
.invoice-preview-heading{
  padding: 0px 30px;
  display: flex;
  justify-content: space-between;
}
.invoice-preview-heading-left{
  display: inline-grid;
  gap: 3px;
}
.invoice-preview-heading-right{
  display: inline-grid;
  gap: 1px;
}
.invoice-preview-heading-info{
  width: 100%;
  margin-top: 5px;
  display: flex;
  justify-content: space-between;
}
.invoice-preview-heading-info-title, .invoice-preview-heading-text{
  height: 2px;
  width: 40px;
  display: inline-block;
  background-color: #444;
  border-radius: var(--radius-m);
}
.invoice-preview-heading-title{
  height: 5px;
  width: 70px;
  margin-top: 20px;
  display: inline-block;
  background-color: #FCB643;
  border-radius: var(--radius-m);
}
.invoice-preview-heading-subtitle{
  height: 2px;
  width: 80px;
  display: inline-block;
  background-color: #444;
  border-radius: var(--radius-m);
}
.invoice-preview-table{
  margin-top: 30px;
  padding: 0px 30px;
}
.invoice-preview-table-wide{
  margin-top: 30px;
  padding: 0px;
}
.invoice-preview-table-heading{
  height: 10px;
  background-color: #000138;
  display: flex;
  align-items: center;
  padding: 0 3px;
}
.invoice-preview-table-heading .invoice-preview-heading-info{
  margin-top: 0 !important;
}
.invoice-preview-table-row{
  height: 10px;
  border-top: 0.5px solid #000138;
  display: block;
}
.invoice-preview-table-row-last{
  height: 10px;
  border-top: 0.5px solid #000138;
  border-bottom: 0.5px solid #000138;
  display: block;
}
.row-background{
  background-color: #e4f3ff;
}
.invoice-preview-table-totalsdiv{
  width: 120px;
  margin-left: auto;
}
.invoice-preview-table-totals{
  height: 20px;
  border-bottom: 0.5px solid #000138;
  display: block;
}
.invoice-preview-table-total{
  height: 10px;
  background-color: #e4f3ff;
  border-bottom: 0.5px solid #000138;
  display: block;
}
.invoice-preview-footer{
  display: inline-grid;
  gap: 3px;
  width: 100%;
  margin-top: auto;
  margin-bottom: 10px;
}
.invoice-preview-footer-subtitle{
  height: 2px;
  width: 80px;
  display: inline-block;
  background-color: #000138;
  border-radius: var(--radius-m);
  margin: 0 auto;
}
.subtitle-small{
  width: 60px;
}
.invoice-preview-controls h3{
  color: var(--text-color);
  margin-bottom: 16px;
}
.invoice-preview-controls .grid-1col, .invoice-preview-controls .grid-3col{
  margin-bottom: 10px;
}
.invoice-preview-theme-button{
  background-color: var(--light-4);
  padding: 20px;
  margin-right: 10px;
  border: 1px solid var(--light-2);
  border-radius: var(--radius-m);
}
.invoice-preview-theme-button:hover{
  background-color: var(--light-3);
}




/* Media Queries */
/* Media query for smaller screens */
@media screen and (max-width: 768px) {
  .invoice-information-grid {
    grid-template-columns: 1fr; /* Set to a single column layout */
  }
}

@media screen and (min-width: 1000px) {
  .product:hover{
    box-shadow: 0px 20px 80px 0px rgba(0,0,0,0.1);
    /*transform: translateY(-4px);*/
  }
  .product:hover .product-img{
  height:245px;
  }
  .product:hover .btn{
    bottom:0;
    opacity:1;
  }
  .product:hover .price{
    background:none;
  }
  .product .btn{
    position: absolute;
    width:100%;
    bottom:-40px;
    left:0;
    right:0;
    opacity:0;
  }
  /*.navigation{
    position: absolute;
    width: 100vw;
    left: 0;
    right:0;
    top:0;
    bottom:0;

    transform-origin: 0% 0%;
    transform: translate(-10%,0);

    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  }
  .mobile-nav input:checked ~ .navigation
  {
    transform: scale(1.0, 1.0);
    transform: translate(0,0);
    opacity: 1;
    background:red;
  }*/
}
@media screen and (max-width: 1440px) {
  .contact-layout-right, .product-layout-right{
    grid-template-columns: 1fr 1fr 1fr;
  }
  .payment-status-grid{
    grid-template-columns: 1fr 1fr;
  }
  .payment-status-amount-grid{
    grid-template-columns: 1fr 1fr;
  }
  .payment-status-amount-grid div:first-child{
    grid-column: span 2;
  }
}
@media screen and (max-width: 1300px) {
  container{
    padding: 30px;
  }

  .login-grid{
    grid-template-columns: 1fr 1fr;
  }
  .img-holder{
    width:50%;
  }
  h1{
    font-size: 2.7em;
  }
  .form-grid{
    display:block;
  }
  .contact-layout{
    grid-template-columns: 220px 1fr;
  }
  .contact-layout-right, .product-layout-right{
    grid-template-columns: 1fr 1fr;
  }
  .payment-status-grid{
    grid-template-columns: 1fr 1fr;
  }
  .payment-status-amount-grid{
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 1000px) {
  .login-grid{
    grid-template-columns: 1fr;
  }
  .login-grid h1{
    text-align: center;
  }
  .img-holder{
    display: none;
  }
  .main-logo{
    height: 32px;
    display: block;
    top: 32px;
    left:0;
    right: 0;
    margin-bottom: 32px;
  }
  h1{
    font-size: 2.5em;
  }
  .products{
    grid-template-columns: 1fr 1fr;
    grid-column-gap:20px;
    grid-row-gap:20px;
  }
  .ww-grid{
    grid-template-columns: 1fr 1fr;
  }
  .payment-status-grid{
    grid-template-columns: 1fr;
  }
  .payment-status-amount-grid{
    grid-template-columns: 1fr;
  }
  .payment-status-amount-grid div:first-child{
    grid-column: span 1;
  }
  container{
    padding: 15px;
  }
  .contact-layout{
    grid-template-columns: 1fr;
    grid-row-gap: 30px;
  }

  /*.topbar{
    height:60px;
  }
  .topbar-flex{
    padding:0 15px;
  }
  .navigation{
    width:auto;
    position: relative;
    border:none;
  }
  body > main{
    padding-left: 0;
  }*/
  .block-heading{
    padding:0 15px;
    min-height:65px;
  }
  .block-content{
    padding: 15px !important;
  }
@media screen and (max-width: 768px) {
  h1{
    font-size: 2em;
  }
  .img-holder {
    display: none; /* Hides the image on mobile */
  }
  .login-grid {
    display: flex;
  }
  .login-wrapper, .resetpassword-wrapper {
    width: 100%; /* Full width on mobile */
    height: auto; /* Adjust height automatically based on content */
    padding: 20px; /* Keep some padding for better mobile spacing */
  }

  .products{
    grid-template-columns: 1fr;
    grid-column-gap:20px;
    grid-row-gap:20px;
  }
  .ww-grid{
    grid-template-columns: 1fr;
  }
  .login-wrapper, .resetpassword-wrapper{
    max-width:100%;
  }
  .cart-text{
    display: none;
  }
  #cart-items-count{
    margin-left: 0px;
  }
  .contact-layout-right, .product-layout-right{
    grid-template-columns: 1fr;
  }
}

/*.orientation-message{
  display:none;
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  align-items: center;
  align-content: center;
  background:rgba(17, 20, 28,0.7);
  color:#fff;
  text-align: center;
}
.orientation-message h3{
  width:60%;
  margin: auto;
}*/
/*@media only screen and (max-width: 667px) {
  main{
    max-width:100%;
    height:calc(100vh - 60px);
    transform:translateX(0);
    border-top-left-radius:none;
    width: 100%;
  }
  main.show{
    max-width:inherit;
    transform:translateX(0);
  }

}*/

/*@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
  nav,body > main {
    overflow:hidden;
  }
  body{overflow:hidden;}
  .orientation-message{display:flex;z-index:1000;}
}*/