@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: "Montserrat", sans-serif; }
@supports (font-variation-settings: normal) {
  html { font-family: "Montserrat", sans-serif; }
}
:root{
    /*--blue:#55F;*/
    --primary:#542DFC;
    --primary-rgb:84,45,252;
    --primary:#4444ff;
    --primary:#5757ff;
    --primary:#5552F4;
    --primary:#796EFF;
    /*--primary:#827EF6;*/
    --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;
    --red:#F66969;
    --orange:#F68844;
    --green:#3CB371;
    --blue:#5552F4;
    --purple:#aa3Edd;
    --pink:#CC3E9C;
    --pink-rgb:;
    --yellow:rgba(255, 205, 86, 1);
    --mid-1:#8990A3;
    --mid-rgb:137,144,163;
    --white:#ffffff;
    --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);
    --nav-w:90px;
    --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;
}*/
.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-m);
  /*background:var(--light-3);*/
  border-top-left-radius:var(--radius-xl);
  transition:var(--transition-nav);
}
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%;
max-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%;
/*border-radius:var(--radius-m);*/
/*box-shadow:0 5px 30px 0 rgba(0,0,0,0.2);*/
/*border:1px solid var(--light-2);*/
}
.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);
  border-color:var(--primary);
  font-weight:500;
  display:block;
  cursor:pointer;
  width:auto;
  height:auto;
  padding:16px 20px;
  border-radius: var(--radius-s);
  text-align: center;
}
.button.secondary{
  background:var(--button-bg);
  color:var(--button-color);
}
.button.secondary.invert{
  background:var(--button-bg-invert);
}
.button:hover{
  background:var(--primary);
}
.button.secondary.invert:hover{
  color:var(--white);
}
.button.small{
  padding:10px 12px;
  font-size:0.85em;
}
::-moz-selection {
  color: #5f27cd;
  background: rgba(95, 39, 205,0.1);
}
::selection {
  color: #5f27cd;
  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;
}
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;}
.star{
  color:#ffaa33;
}
.product .btn{
  width:100%;
  bottom:0;
  left:0;
  right:0;
}
.disabled-btn, .disabled-btn:hover{
  opacity:0.5;
  pointer-events: none;
}
.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);
}
.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);
}
.green label:after{
  background:var(--green);
}
.green [type="radio"]:checked + label:before{
  border: 2px solid var(--green);
}
.blue label:after{
  background:var(--blue);
}
.blue [type="radio"]:checked + label:before{
  border: 2px solid var(--blue);
}
.purple label:after{
  background:var(--purple);
}
.purple [type="radio"]:checked + label:before{
  border: 2px solid var(--purple);
}
.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{
  min-height:100vh;
  width:100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.login-wrapper .block{
  width:540px;
  max-width: 90%;
  padding:30px;
  margin: 30px;
}
.logo{
  width:200px;
  margin-bottom: 30px;
}
.login-form{
  display:flex;
  flex-direction: column;
}
.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);
/*  background:var(--button-bg);*/
  color:var(--text-color);
  margin-bottom: 16px;
  width: 100%;
  /*border:none;*/
  border-radius:var(--radius-s);
  font-size: 13px;
  line-height:16px;
  /*background:#f7fbff;*/
  box-sizing:border-box;
  /*transition: var(--transition);*/
}
input::placeholder{color:var(--text-color-light);font-weight:400;}
input{padding:8px;}
select{padding:6px;}
.date-input{padding:6px;}
.upload-input{
  padding:10px;
}
/*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-wrapper{
  min-height:100vh;
  display:flex;
  flex-direction: column;
  justify-content: center;
  max-width:70%;
  margin:0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  position: relative;
}*/
.login-grid{
  display:grid;
  grid-template-columns: 2fr 3fr;
  padding: 0;
  position: relative;
  background:#c8d6e5;
  color:#222f3e;
}
.login-grid .input-label{
  color:var(--mid-1);
}
/*.img-holder{
  position: absolute;
  right: 0;
  top: 0;
  width: 60%;
  height:100%;
  background: url('assets/deskbackground.jpg') no-repeat center center;
  background-size: cover;
}
.img-holder svg{
  height:100%;
  position: absolute;
  left: 0;
  top:0;
}*/
.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:50%;
  overflow:hidden;
  position:relative;
  border:8px solid var(--block-bg);
  margin-bottom:12px;}
.link-popup-box-editprofilepicture i{
  opacity:0;
  position: absolute;
  z-index:10;
  font-size:32px;
  left:50%;
  top:50%;
  color:var(--white);
  transform:translate(-50%,-50%);
  transition:var(--transition);
}
.link-popup-box-editprofilepicture:hover i{
  opacity:1;
}
.link-popup-box-editprofilepicture:hover .contact-pic{
  filter:brightness(70%) blur(2px);
  transform:scale(1.2);
}

.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;
}
.block{
  width: 100%;
  max-height:100%;
  background: var(--block-bg);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow-x:hidden;
  border-radius:var(--radius-l);
  /*box-shadow:var(--shadow-l);*/
  border:2px solid var(--border-color);
}
.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-right{
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.flex-center{
  width: 100%;
  display: flex;
  justify-content: center;
}
.flex-right button{
  margin-left: 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(--button-bg);
  border-color:var(--border-color);
  position: sticky;
  top:0;
  z-index:1;
  padding:0 20px;
}
.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;
}
span.check-span{
  display: flex;
  align-items: center;
  height:48px;
  width:48px;
  margin: 0;
  overflow: visible;
  padding: 12px;
  padding-left: 0;
  z-index: 1000;
}
.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-linecap: round;
  stroke-linejoin: round;*/
  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-span{border-radius: 5px;}
.status-span div{
  width:100%;
  text-align: center;
  border-radius: 50px;
  padding: 6px 12px 6px 12px;
  /*background:rgba(5, 171, 91,0.1);
  color: #05ab5b;*/
}
.stripped, .action.stripped{
  background:none;
  border:none;
}
.green, .action.green{
  /* GREEN */
  background:rgba(75, 192, 192, 0.1);
  /* color:rgba(75, 192, 192, 1); */
  color:rgba(255, 255, 255, 1);
  border:1px solid rgba(75, 192, 192, 0.2);
}
.red, .action.red{
  /* RED */
  background:rgba(255, 99, 132, 0.1);
  /* color:rgba(255, 99, 132, 1); */
  color:rgba(255, 255, 255, 1);
  border:1px solid rgba(255, 99, 132, 0.2);
}
.yellow, .action.yellow{
  /* YELLOW */
  background:rgba(255, 205, 86, 0.1);
  /* color:rgba(255, 205, 86, 1); */
  color:rgba(255, 255, 255, 1);
  border:1px solid rgba(255, 205, 86, 0.2);

  background:rgba(255, 159, 64, 0.1);
  border:1px solid rgba(255, 159, 64, 0.2);
}
.status-span span{
  margin-right: 4px;
}
.table-pagination{
  border-top:1px solid #d9e8f4;
  border-color:var(--border-color);
  width:100%;
  display: flex;
  align-content: space-between;
  align-items: center;
  padding:20px;
  font-weight: 500;
}
.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;
}
.table-pagination button{
  color:var(--text-color);
  padding:8px;
  margin: 0;
  background: none;
}
button.active-num, .table-pagination button:hover{
  background:var(--button-bg);
}
.invoice-grid{
  grid-template-columns: 48px 15% 1fr 12% 15% 15% 1fr;
  1fr 1fr 15% 15% 15%
}
.creditnote-grid{
  grid-template-columns: 1fr 1fr 15% 15% 15%
}
.company-grid{
  grid-template-columns: 1fr 1fr 1.5fr 15% 1fr;
}
.product-grid{
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 0.3fr;
}
.contact-grid{
  grid-template-columns: 1fr 1fr 1.5fr 15% 1fr;
}
.invoiceitem-grid{
  display: grid;
  text-align: left;
  grid-template-columns: 5% 2fr 1fr 10% 15% 10%;
}
.invoiceitem-grid span{
  flex-grow: 1;
}
.invoiceitem-grid button{
  margin:0;
  padding: 0;
  font-size: 1.1em;
}
.invoiceitem-grid-edit{
  display: grid;
  text-align: left;
  padding: 12px;
  grid-template-columns: 20px 2fr 15% 10% 10% 0.75fr 20px;
  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;
}
/*section.section-scroll{
  overflow-y: scroll;
}*/
.dashboard-flex{
  height:auto;
  display: flex;
  flex-direction: column;
  margin-bottom: 90px;
}
.payment-status-grid{
  display: grid;
  grid-template-columns: 6fr 3fr;
  grid-gap: 20px;
}
.payment-status-amount-grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
}
.payment-status{
  padding: 20px;
  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;
}
.payment-amount{
  font-size:2.4em;
  line-height:1.5em;
  font-weight: 600;
  color:var(--text-color);
  /*margin-bottom: 12px;*/
}
.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: 2fr 1fr;
  grid-gap: 30px;
  flex-grow:1;
  max-height:100%;
  margin-top: 50px;
}
.dashboard-stats-grid{
  order:2;
  display: grid;
  grid-gap:30px;
}
.dashboard-stats-grid div{
  height:100%;
}
.dashboard-heading{
  margin-bottom: 50px;
}
.dashboard-heading p{
  font-size: 1.1em;
  color:var(--mid-1);
  margin: 0;
}
.block-content canvas{
  max-height: 100%;
  max-width: 100%;
}
.search-results-list{
  background:var(--block-bg);
  font-size: 0.9em;
  padding:0 4px;
  z-index: 0;
  overflow-y:scroll;
  flex-grow: 1;
  height:100%;
}
/*.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;
}
.search-results-list a:first-child{border:none;}
.search-results-list a: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 #d9e8f4;
  border-color:var(--border-color);
  padding:0 20px;
  min-height:74px;
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index:2;
}
.block-content{
  padding:20px;
  flex-grow:1;
  /* overflow-y: scroll; */
}
.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;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;
  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-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-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-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);}
.block-heading input{
  width:150px;
  min-width: 150px;
  /*max-width: 350px;*/
  margin-bottom: 0;
  box-sizing: border-box;
  transition: var(--transition);
}
.block-heading input:focus{
  width:100%;
  /*box-shadow:0 5px 20px 0 rgba(0,0,0,0.1);*/
}
.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);
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
}
.input-suffix {
  position: relative;
}
.suffix{
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
}
.autocomplete-items div {
  background-color: var(--block-bg);
  border-bottom: 1px solid var(--border-color);
  box-shadow: var(--shadow-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(--body-bg);
}
.autocomplete-items div:hover i{
  color:var(--primary);
}
/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
  background-color: DodgerBlue !important;
  color: #ffffff;
}
.popup-box{
  display: none;
  background:none;
  width:100%;
  height:100%;
  max-height: 100%;
  position:absolute;
  /*top:0px;
  left:0px;
  bottom:0px;
  right: 0px;*/
  z-index:1000;
  overflow: auto;
}
/*.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;
  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;
  min-width:60%;
  min-height:100%;
  max-height: none;
  max-width: 90%;
  margin:0 auto;
  padding:60px;
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content:flex-start;
  /*position: absolute;
  left: 50%;
  top:50%;
  transform: translate(-50%, -50%);*/
  /*border:1px solid var(--border-color);
  box-shadow:var(--shadow-m);*/
  position: absolute;
  right:0;
  transition:var(--transition-bounce);
  background:var(--block-bg);
  border:1px solid var(--border-color);
}
.popup-form-wrapper{
  background:var(--block-bg);
  border:1px solid var(--border-color);
  pointer-events: all;
  padding:30px;
  height:auto;
  border-radius: var(--radius-m);
  position: relative;
}
.popup-inner form{
  overflow: visible;
  width:100%;
  /*min-width:30%;*/
}
.form-group{
  margin-bottom: 30px;
}
.form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 45px;
  position: relative;
}
/*.link-popup-box {
  display: block;
  width: auto;
  background:#5f27cd;
  padding: 12px 16px 12px 16px;
  color:#fff;
  margin-left: 8px;
  font-weight: 500;
}
.link-popup-box:hover{
  background:#7c4af0;
  background:#481aa3;
}*/
#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;
  padding-bottom: 25px;
  margin-bottom: 30px;
  z-index: 1001;
  pointer-events: none;
}
.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(--white);
  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-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;
  box-sizing:border-box;
}
.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;
}
.switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 28px;
}
/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
/* 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:before {
  background-color: var(--white);
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  transition: var(--transition);
}
input:checked + .slider {
  background: var(--green);
}
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%;
}
.logout{
  display: flex;
  justify-content: center;
  margin-top: 150px;
  margin-bottom: 100px;
}
#myProgress {
  width: 100%;
  background-color: lightgrey;
}
#myBar {
  height: 20px;
  background-color: #5f27cd;
}

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

/* Loader icon */
.lds-ring {
  display: inline-block;
  position: relative;
  width: 16px;
  height: 16px;
}
.lds-ring div {
  border: 3px solid var(--primary);
  border-color: var(--dark-1) transparent transparent transparent;
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  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);
  }
}

.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-2col span{
  width:100%;
}
.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;
}
.autocomplete input{
  width: 100% !important;
  padding-right: 25px;
}

/* TABS */
/*.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:#5f27cd;
  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: 360px 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-status{
  font-weight: 500;
  font-size: 0.9em;
}
.invoice-creditnote{
  font-weight: 500;
  font-size: 0.9em;
}
.invoice-actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap:8px;
  margin: 30px 0 12px 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;
}
.invoice-action:hover{
  background:var(--button-color);
  color:var(--primary);
}
.error{color:#E8423B;color:rgba(255, 99, 132, 1);}
.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;}
.contact-pic{
  border-radius: 50%;
  width:140px;
  height: 140px;
  overflow:hidden;
  margin: 0 auto;
  transition: var(--transition)
  /*margin-bottom: 25px;*/
}
.contact-layout-left h3{
  margin-bottom: 8px;
}
.contact-layout-left span{
  font-size: 0.85em;
}
.contact-layout-right{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}
.contact-layout-right > div{
  background:var(--button-bg);
  color:var(--text-color-light);
  padding: 20px 24px 24px 24px;
  box-sizing: border-box;
  border-radius: 8px;
}

.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;
    height: 100%;
    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: var(--text-color);
}
.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;
}
/*.delete{
    color: #E2163B;
    cursor: pointer;
}
.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;
  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;
}
.project-main{
  display:flex;
  flex-direction:row;
  overflow: unset;
}
.project-nav{
  width:100%;
  height:60px;
  background:var(--border-color);
  border-bottom:1px solid var(--border-color);
}









/* 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-row{
  width:auto;
  min-height:100%;
  max-height: 100%;
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  padding-bottom: 24px;
  margin-right: 30px;
}
.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 */
  }
  /*.column::-webkit-scrollbar {
        width: 4px;
    }
.column::-webkit-scrollbar-track {
        box-shadow: none;
        border-radius: 0px;
    }
.column::-webkit-scrollbar-thumb {
        background: var(--button-bg);
        border-radius: 0px;
    }
.column::-webkit-scrollbar-thumb:hover {
        background: var(--button-bg-hover);
    }*/
  /*.kanban-column-head:after, .kanban-column-footer:after{
    content:'';
    position:absolute;
    height:16px;
    width:100%;
    z-index:1;
    pointer-events:none;
  }
  .kanban-column-head:after{
    bottom:-17px;
    background:none;
    background:linear-gradient(0deg, transparent 0%, var(--body-bg) 100%);
  }
  .kanban-column-footer:after{
    top:-17px;
    background:none;
    background:linear-gradient(180deg, transparent 0%, var(--body-bg) 100%);
  }*/
  .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:36px;
  }
  .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:48px;
  }
  .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);
  }
  .orange{
    background:var(--orange);
  }
  .yellow{
    background:var(--yellow);
  }
  .green{
    background:var(--green);
  }
  .blue{
    background:var(--blue);
  }
  .purple{
    background:var(--purple);
  }
  .pink{
    background:var(--pink);
  }


  .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);
    color:var(--dark-1);
  }
  /*.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);
  }
  .box {
    border-radius: var(--radius-s);
    background: var(--body-bg);
    color:var(--text-color);
    border:2px solid var(--border-color);
    margin-bottom: 8px;
    /*height:150px;*/
    transition: transform var(--transition-bounce), border-color var(--transition-bounce);
  }
  .box:last-child{
    margin-bottom: 0;
  }
  .box > a{
    height:100%;
    width:100%;
    padding:12px;
    display:flex;
    flex-direction: column;
  }
  .box:hover{
    transform: scale(1.02);
    border-color:var(--dark-1);
  }
  .box.default{

  }
  .box.red{}
  .box-header {}
  .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;}
  .box-heading{
    display: flex;
    flex-direction: row;
    width: 100%;
    margin-bottom: 8px;
  }
  .box-content{
    font-size: 0.9em;
    color:var(--text-color-light);
    margin-bottom:12px;
  }
  .box-footer{

  }
  .team-member{
    height:36px;
    display: flex;
    flex-direction:row;
    justify-content: flex-end;
  }
  .team-member > *{
    height:36px;
    width: 36px;
    border-radius:50%;
    border:2px solid var(--body-bg);
    transform: translateX(12px);
  }
  .team-member > *:last-child{
    transform:none;
  }
/*.project-section{
  display:flex;
  flex-direction:column;
  height:100%;
}
.project-section .block{
  flex-grow:1;
}*/
.section-heading{
  padding-bottom:30px;
}








/* STOCKMANAGER */
.slidecontainer {
  width: 100%; /* Width of the outside container */
}

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







/* AVATAR */
.avatar-mini {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ccc;
  border-radius: 50%;
  font-family: sans-serif;
  color: #fff;
  font-size: 12px;
}

.avatar-small {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ccc;
  border-radius: 50%;
  font-family: sans-serif;
  color: #fff;
  font-size: 16px;
}

.avatar-big {
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ccc;
  border-radius: 50%;
  font-family: sans-serif;
  color: #fff;
  font-size: 16px;
}





/* DROPDOWN */
.dropbtn {
  padding: 12px;
  border: none;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  border-radius:3px;
  display: none;
  position: absolute;
  right: -5px;
  top: 38px;
  background-color: #f9f9f9;
  min-width: 170px;
  box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.2);
  z-index: -1;
}

.dropdown-content a {
  border-radius:3px;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.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: 5px 0;
  position: absolute;
  z-index: 1;
  top: -100%;
  left: 110%;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 50%;
  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: 10px;
}

.warningmessage {
  border-radius: 3px;
  font-size: 12px;
  color: #756e15;
  background: #FAB7179C;
}





/* OFFER STATUS STEPS */
.offer-status-container {
    width: 100%;
    margin: auto;
    display: inline-block;
}
.offer-status-progressbar {
    counter-reset: step;
}
.offer-status-progressbar li {
    list-style-type: none;
    width: 20%;
    float: left;
    font-size: 12px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    color: #7d7d7d;
}
.offer-status-progressbar li:before {
    width: 30px;
    height: 30px;
    content: counter(step);
    counter-increment: step;
    line-height: 30px;
    border: 2px solid #7d7d7d;
    display: block;
    text-align: center;
    margin: 0 auto 10px auto;
    border-radius: 50%;
    background-color: white;
}
.offer-status-progressbar li:after {
    width: 100%;
    height: 2px;
    content: '';
    position: absolute;
    background-color: #7d7d7d;
    top: 15px;
    left: -50%;
    z-index: -1;
}
.offer-status-progressbar li:first-child:after {
    content: none;
}
.offer-status-progressbar li.active {
    color: green;
}
.offer-status-progressbar li.active:before {
    border-color: #55b776;
}
.offer-status-progressbar li.active + li:after {
    background-color: #55b776;
}










/* Media Queries */
@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{
    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{
    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:60px;
  }
  .block-content{
    padding:15px;
  }
@media screen and (max-width: 768px) {
  h1{
    font-size: 2em;
  }
  .products{
    grid-template-columns: 1fr;
    grid-column-gap:20px;
    grid-row-gap:20px;
  }
  .ww-grid{
    grid-template-columns: 1fr;
  }
  .login-wrapper{
    max-width:100%;
  }
  .cart-text{
    display: none;
  }
  #cart-items-count{
    margin-left: 0px;
  }
  .contact-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;
  }
  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;}
}*/