/* Import stuff */
@import url('https://fonts.googleapis.com/css?family=Montserrat:200,400,500&display=swap&subset=latin-ext');

/* HTML DEFAULT CLASSES */

* {
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  transition: all cubic-bezier(.17,.84,.44,1) 0.4s;
  cursor: default;
  box-sizing: border-box;
}

:root {
  /* COLORS BEGIN */
  --white: white;
  --lightGreen:#daf1d6;
  --darkGreen:#52a543;
  --darkBlue: #152d63;
  --lightBlue: #4873ff;
  --lighterBlue: #aad2ff;
  --darkGray: #222222;
  --semiDarkGray: #4e4e4e;
  --semiLightGray: #a0a0a0;
  --lightGray: #eeeeee;
  --redBright: #ff0000;
  --redLight: #ff7373;
  --redLighter: #f9c8c7;
  --transparent: #ffffff00;
  /* COLORS END */

  /* MARGINS BEGIN */
  --hugeMargin: 2em;
  --bigMargin: 1em;
  --smallMargin: 0.5em;
  --smallerMargin: 0.1em;
  /* MARGINS END */

  /* PADDINGS BEGIN */
  --hugePadding: 2em;
  --bigPadding: 1em;
  --smallPadding: 0.5em;
  --smallerPadding: 0.1em;
  /* PADDINGS END */

  /* FONT SIZES BEGIN */
  --fontHeaderOne: 32px;
  --fontHeaderTwo: 28px;
  --fontHeaderThree: 22px;
  --fontHeaderFour: 18px;
  --fontHeaderFive: 16px;
  --fontParagraph: 15px;
  --fontLink: 14px;
  --fontLabel: 12px;
  --fontInput: 14px;
  /* FONT SIZES END */

  /* FONT WEIGHT BEGIN */
  --fontWeightLight: 200;
  --fontWeightRegular: 400;
  --fontWeightBold: 500;
  /* FONT WEIGHT END */

  /* LINE HEIGHT BEGIN */
  --bigLineHeight: 2.5;
  --smallLineHeight: 1.5;
  /* LINE HEIGHT END */

  /* BORDERS BEGIN */
  --borderRadiusSmall: 5px;
  --borderRadiusBig: 100px;
  /* BORDERS END */

  /* SHADOWS BEGIN */
  --shadowBig: 0px 11px 14px 0px #74747459;
  --shadowSmall: 0px 6px 20px 0px #58585852;
  /* SHADOWS END */
}

body {
  background-color: var(--white);

}

input, select, textarea {
  display: inline-block;
  padding: var(--smallPadding);
  border-radius: var(--borderRadiusSmall);
  border: 1px solid var(--lightGray);
  font-weight: 500;
}

textarea {
  resize: none;
}

input:hover, select:hover,
textarea:hover {
  cursor: pointer;
}

input:focus:hover, textarea:focus:hover {
  cursor: text;
}

input:focus, select:focus,
textarea:focus {
  border: 1px var(--lightBlue) solid;
  box-shadow: var(--shadowSmall);
}
select:disabled
{
  background-color: rgb(235, 235, 228);
  color:#a0a0a0;
}
input:disabled
{
  color:#a0a0a0;
}
select:disabled:hover
{
  transform: scale(1.0);
  cursor:no-drop;
}
input:disabled:hover
{
  transform: scale(1.0);
  cursor:no-drop;
}
i {
  margin-right: var(--smallMargin);
  color: var(--semiDarkGray);
}

label {
  display: block;
 color: var(--semiDarkGray);
  margin-bottom: var(--smallMargin);
  margin-left: var(--smallMargin);
  font-size: var(--fontInput);
  font-weight:500;
}

[type="button"], [type="submit"] {
  background-color: var(--white);
  padding: var(--bigPadding);
  border-radius: var(--borderRadiusBig);
  font-weight: var(--fontWeightBold);
  color: var(--lightBlue);
  border: 1px solid var(--lighterBlue);
}

[type="checkbox"]:hover {
  cursor: pointer;
}

hr {
  margin: 1em 0;
  border: none;
  border-style: solid;
  border-color: var(--lightGray);
  border-width: 1px;
}

h1, h2, h3, h4, h5, .headerMain {
  color: var(--darkBlue);
  line-height: var(--bigLineHeight);
  font-weight: var(--fontWeightBold);
}

h1, .headerMain {
  font-size: var(--fontHeaderOne);
}

h2 {
  font-size: var(--fontHeaderTwo);
}

h3 {
  font-size: var(--fontHeaderThree);
}

h4 {
  font-size: var(--fontHeaderFive);
}

h5 {
  font-size: var(--fontHeaderFour);
}

p {
  font-size: var(--fontParagraph);
  line-height: var(--smallLineHeight);
  font-weight:500;
}

a {
  font-size: var(--fontLink);
}

@media screen and (max-width:1200px) {

  h1, h2, h3, h4, .headerMain {
    line-height: var(--smallLineHeight);
  }

  h1, .headerMain {
    font-size: var(--fontHeaderThree);
  }


  .page-header {
    margin-top: var(--bigPadding);
  }

}

a:hover {
  cursor: pointer;
  color: var(--lightBlue);
}

/* Mini classes */
.smallText {  font-size: var(--fontLabel);}
.bold { font-weight: bold;}
.heading {  margin-bottom: var(--bigMargin);}
.hidden { display: none; }
.col2 { grid-column: 2;}
.marginAuto { margin: 0 auto;}
.send_error{	box-shadow:inset 0 -1px 0px #ff0000aa !important;}
.data_correct{	box-shadow:inset 0 -1px 0px #00ff00aa !important;}
/* Flexbox */
.flex {  display: flex;}
.wrap {  flex-wrap: wrap;}
.left {  justify-content: left;}
.right {  justify-content: right;}
.flexEnd {  justify-content: flex-end;}
.centerJustify {  justify-content: center;}
.spaceBetweenJustify {  justify-content: space-between;}
.spaceAroundJustify {  justify-content: space-around;}
.centerAlign {  align-content: center;}
.centerAlignItems { align-items: center;}
.bottomAlignItems { align-items: baseline;}
.selfCenter{ justify-self: center;}
.selfEnd{  justify-self: flex-end;}


/* Grid */
.grid
{
    display: grid;
}

@media only screen and (min-width: 1200px) {
    .grid-invoice
    {
        display: grid;
    }
}
@media only screen and (max-width: 1200px) {
    .productAction {
        color: var(--redBright);
    }
}



.alertBox
{
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 15px;
  margin: auto;
  max-width: 50vw;
  position:fixed;
  display:none;
  margin:auto;
  top:80px;
  right: 0;
  left: 0;
  z-index:120;
  opacity:0;
  grid-template-columns: 32px auto 16px;
  grid-template-rows: auto;
}
.slide-in {
    animation: slide-in 0.2s forwards;
    -webkit-animation: slide-in 0.2s forwards;
    display:grid ;
}
@keyframes slide-in {
    100% { display:grid; opacity:1;}
}
@-webkit-keyframes slide-in {
    100% { display:grid; opacity:1;}
}


.alertBox > i
{
  grid-row-start: 1;
  grid-row-end: 3;
  justify-self:center;
  align-self: center;
}
.errorBox
{
  background-color: var(--redLighter);
  border:1px solid var(--redBright);
  color:var(--redBright);
}
.errorBox > i { color: var(--redBright)}
.infoBox > i { color: var(--lightBlue)}
.successBox > i { color: var(--darkGreen)}
.infoBox
{
  background-color: var(--lighterBlue);
  border:1px solid var(--lightBlue);
  color:var(--lightBlue);
}
.successBox
{
  background-color: var(--lightGreen);
  border:1px solid var(--darkGreen);
  color:var(--darkGreen);
}
.closebtn
{
  font-weight: bold;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer; transition: 0.3s;
  justify-self:center;
  align-self: center;
}
.closebtn:hover {
   color: black;
 }
/* Login window */
.loginWrapper
{
  width:auto;
  height:100vh;
}
form[name="frmLogowanie"] div
{
  margin-bottom:var(--smallMargin);
  text-align: center;
}
/* Navbar classes */
.navBar {
  height: 70px;
  background-color: var(--white);
  box-shadow: var(--shadowBig);
  max-width: 100%;
  z-index: 9;
}

.menuLight {
  width: auto;
  margin-right: 2.5%;
}
.menuItem a ,.mobileMenuItem a{
  color: var(--darkBlue);
  text-decoration: none;
  font-size: var(--fontParagraph);
  font-weight: var(--fontWeightBold);
  margin-right: var(--bigMargin);
}
.menuItem-active a
{
  color: var(--lightBlue);
}
.menuItem .logoutLink
{
  text-decoration: none;
  font-size: var(--fontLabel);
  color: var(--darkBlue);
}
.menuItem a:hover {
  color: var(--lightBlue);
}

.menu-logo {
  margin-left: 2.5%;
}

.menu-logo img {
  max-width: 250px;
  cursor:pointer;
}

@media screen and (max-width:1200px) {

  .menuLight {
    display: none;
  }
  .alertBox {
    max-width:80vw;
  }
  .menu-logo img {
    max-width: 200px;
  }

  .navBar {
    box-shadow: var(--shadowSmall);
  }
  .menuItem
  {
    border-bottom:1px solid var(--lightBlue);
    padding:10px;
  }
  .mobileMenuContainer
  {
    display:none;
    position:absolute;
    top:50px;
    right:10px;
    background-color:white;
    border:1px solid var(--lightBlue);
    border-bottom:0;
    box-shadow: var(--shadowSmall);
    border-radius:5px;
  }
  .mobileMenuLabel {
    cursor:pointer;
    user-select:none;
  }

}

.logoutLink {
  text-decoration: none;
  font-size: var(--fontLabel);
  color: var(--darkBlue);
}

/* Page container classes */
.pageBody {
  width: 100%;
  z-index: 99;
}
#info-box {
    display:block;
    position:absolute;
    margin:auto;
    width:500px;
    height:150px;
    background:#f29719;
    top:-150px;
    right: 0;
    left: 0;
    border-radius:10px;
    font-family: Tahoma,'Signika',Verdana,sans-serif;
    font-size:14px;
    padding-top: 40px;
    line-height:30px;
    color:#000;
    z-index:120;
    transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    opacity: 0.8;
    filter: alpha(opacity=80);
}
#info-box > div {
    margin-top: 30px;
}
#file-preview-box-bg {
    display:none;
    position: absolute;
    z-index: 1000;
    width:100%;
    height:100%;
    background:#ddd;
    opacity:0.6;
    filter: alpha(opacity=60);
}
#file-preview-box {
    display:none;
    position:absolute;
    width:1000px;
    height:950px;
    margin: 0 auto;
    top: 0 !important;
    right: 0;
    bottom: 0;
    left: 0;
    z-index:1001;
}
.close-div-action {
    display: inline-block;
    width: 25px;
    height: 25px;
    background-image: url(/pix/iconsGhost.png);
    background-repeat: no-repeat;
    background-position: -9px -1006px;
    margin: 10px;

}
#file-preview-top {
    width:100%;
    height:50px;
    background:#000;
    z-index: 1002;
    text-align: right;
}
#file-preview-content {
    width:100%;
    height: 100%;
    background:#fff;
    z-index: 1002;
}
.rotator
{
  width: 120px;
  height: 120px;
  background-image: url(/pix/rotator2.gif);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  align-self: center;
}
.pageContainer {
  display: block;
  margin: 2em auto;
  width: 95%;
  max-width: 1920px;
  padding: var(--bigPadding);
  padding-top: 0;
  padding-bottom: var(--hugePadding);
  border: 1px solid;
  border-color: var(--lightGray);
  border-radius: var(--borderRadiusSmall);
  box-shadow: var(--shadowSmall);
}

@media screen and (max-width:1200px) {

  .pageContainer {
    width: 98%;
    padding: var(--smallPadding);
    margin-top: var(--bigMargin);
  }

}

.headerMain i {
  color: var(--lightBlue);
}

/* Tables */
.productsTableHeader, .productsTable,
.contractorsTableHeader, .contractorsTable,
.invoicesTableHeader, .invoicesTable,
.bankAccountsHeader, .bankAccounts,
.invoiceProductsTableHeader,
.latestLoginsTableHeader, .latestLoginsTable, .latestPaymentsTableHeader, .latestPaymentsTable{
  width: 100%;
  margin: 0 auto;
  font-size: var(--fontLabel);
  color: var(--darkBlue);
  font-weight: var(--fontWeightBold);
  grid-row-gap: var(--smallPadding);
}

.productsTableHeader,
.contractorsTableHeader,
.invoicesTableHeader,
.bankAccountsHeader,
.invoiceProductsTableHeader,
.latestLoginsTableHeader,
.latestPaymentsTableHeader {
  margin-bottom: var(--bigMargin);
}

.productsTableHeader i:hover,
.contractorsTableHeader i:hover,
.invoicesTableHeader i:hover {
  cursor: pointer;
}

.productsTable,
.contractorsTable,
.invoicesTable,
.bankAccounts,
.latestLoginsTable,
.latestPaymentsTable {
  color: var(--darkGray);
  font-weight: 500;
  padding: var(--bigPadding) 0;
}
.latestLoginsTable,
.latestPaymentsTable,
.latestLoginsTableHeader,
.latestPaymentsTableHeader {
  padding: var(--smallPadding);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

}
@media screen and (max-width:1200px) {

  .productsTable,
  .contractorsTable,
  .invoicesTable,
  .bankAccounts,
  .latestLoginsTable,
  .latestPaymentsTable,
  .latestLoginsTableHeader,
  .latestPaymentsTableHeader {
    padding: var(--smallPadding);
  }
}

.productsTable .table-cell:first-of-type,
.contractorsTable .table-cell:first-of-type,
.invoicesTable .table-cell:first-of-type,
.bankAccounts .table-cell:first-of-type {
  padding-left: var(--smallPadding);
}
.productsTable:hover, .productsTable:nth-child(odd):hover,
.contractorsTable:hover, .contractorsTable:nth-child(odd):hover,
.invoicesTable:hover, .invoicesTable:nth-child(odd):hover,
.bankAccounts:hover, .bankAccounts:nth-child(odd):hover,
.latestLoginsTable:hover, .latestLoginsTable:nth-child(odd):hover,
.latestPaymentsTable:hover, .latestPaymentsTable:nth-child(odd):hover,
.invoice-grid-main .invoiceProductsTable:hover, .invoice-grid-main .invoiceProductsTable:nth-child(odd):hover {
  background-color: var(--lighterBlue);
}

.productsTable:nth-child(odd),
.contractorsTable:nth-child(odd),
.invoicesTable:nth-child(odd),
.bankAccounts:nth-child(odd),
.latestLoginsTable:nth-child(odd),
.latestPaymentsTable:nth-child(odd),
.invoice-grid-main .invoiceProductsTable:nth-child(odd) {
  background-color: #5897fb17;
}

/* Table headers */
.table-header-tag {
  margin-right: var(--smallMargin);
}

.table-cell input, .table-cell select {
  width: 80%;
  /* max-width: 7vw; */
}
.range
{
    width: 40% !important;
}

/* Products table */
@media screen and (min-width:1201px){
    .productsTableHeader, .productsTable {
  grid-template-columns: 5% 5% 25% 20% 20% 15% 15%;
}
}

@media screen and (max-width:1200px) {

  .productsLp {
    display: none;
  }

}

@media screen and (min-width: 1200px){
.wrap-2
{
    word-wrap: break-word;
}
}

.capital-letter
{
    text-transform: capitalize;
}

/* Contractors table */
.contractorsTableHeader, .contractorsTable {
  grid-template-columns: 5% 20% 15% 15% 10% 10% 15% 10%;
}

.action-delete i {
  color: var(--redLight);
}
.action-edit i {
  color: var(--lightBlue);
}
.action-delete i:hover {
  color: var(--redBright);

  transform: scale(1.3);
}
.action-edit i:hover {
  color: var(--darkBlue);
  transform: scale(1.3);
}
@media screen and (max-width:1200px) {

  .contractorsLp {
    display: none;
  }

}


/* Invoices table */
@media only screen and (min-width: 801px){
.invoicesTableHeader, .invoicesTable {
    grid-template-columns: 5% 5% 15% 15% 10% 10% 10% 10% 10% 10%;
}
}

.invoicesMenu {
  border: none;
  font-weight: var(--fontWeightBold);
  color: var(--darkBlue);
  background-color: var(--transparent);
}

.invoicesMenu:hover {
  cursor: pointer;
}

.invoicesTable select {
  padding: 0;
}

@media screen and (max-width:1200px) {

  .contractorsLp {
    display: none;
  }

}

@media screen and (max-width:1200px) and (min-width:540px) {

  .checkToggles, .checkLabel, .download-zip
  {
    display:none;
  }

}

@media screen and (max-width:1200px) {
  .checkToggles, .checkLabel, .download-zip
  {
    display:none;
  }
    .invoiceCheckbox
    {
        display:none;
    }
    .invoiceLp
    {
        display:none;
    }
    .invoiceNumber
    {
        grid-column: auto;
        grid-row:1;
    }
    .invoiceCompany
    {
        grid-column:auto;
        grid-row:1;
    }
    .invoiceBegindate
    {
        grid-column:auto;
        grid-row:1;
    }
    .invoiceEndDate
    {
        grid-column:auto;
        grid-row:1;
    }
    .invoiceStatus
    {
        grid-column:auto;
        grid-row:1;
    }
    .invoiceValue
    {
        grid-column:auto;
        grid-row:1;
    }
    .invoiceValueGross
    {
        grid-column:auto;
        grid-row:1;
    }
    .invoiceAction
    {
        grid-column:auto;
        grid-row:1;
    }
}




/* Pagination */
.paginationBar {
  margin: var(--hugeMargin) 0 var(--smallMargin);
  font-size: var(--fontParagraph);
}

    /*@media only screen and (min-width: 801) {*/
    /*    .pageLink {*/
    /*        margin: 0 var(--bigMargin);*/
    /*    }*/
    /*}*/
.pageLink {
  margin: 0 var(--bigMargin);
  text-decoration: none;
  color: var(--darkBlue);
  font-weight: var(--fontWeightBold);
  font-size: var(--fontLabel);
  border-bottom: 1px var(--darkBlue) solid;
  padding-bottom: var(--smallerPadding);
  opacity: 0.6;
}
@media only screen and (max-width: 800px)
{
    .pageLink {
        margin: 0.4em !important;
    }
}

.pageLinkActive {
  opacity: 1;
}

.pageLink:hover {
  padding-bottom: var(--smallPadding);
  opacity: 1;
  cursor: pointer;
}

.enumeration input {
  width: 50px;
}


/* Buttons */
.buttonSearch, .checkToggles,
.buttonClear, .buttonRemove{
  padding: var(--smallPadding);
  border: none;
  margin: 0;
  padding-left: 0;
  color: var(--lightBlue);
  background: var(--transparent);
}

.table-cell .buttonSearch,
.table-cell .checkToggles,
.table-cell .buttonClear,
.table-cell .buttonRemove{
  width: auto;
  border: none;
}

.buttonSearch:focus,
.checkToggles:focus,
.buttonClear, .buttonRemove:focus {
  border: none;
}

.primaryButton:hover, .secondaryButton:hover {
  cursor: pointer;
  transform: scale(1.2);
}

.checkToggles:hover, .secondaryButton:hover,
.buttonClear:hover, .buttonSearch:hover {
  cursor: pointer;
}

.buttonClear {
  color: var(--darkGray);
}
.buttonRemove
{
    color: var(--redBright)
}

.primaryButton {
  background: var(--lightBlue);
  color: white;
  border: none;
  box-shadow: var(--shadowSmall);
  margin-left: var(--bigMargin);
}

.secondaryButton {
  box-shadow: var(--shadowSmall);
}

.tertiaryButton {
  padding: var(--smallPadding) var(--bigPadding);
  margin-right: var(--bigMargin);
}

.checkToggles {
  font-size: var(--fontLabel);
  margin: var(--smallMargin);
  padding: 0;
}
@media screen and (min-width= 1200px){
.invoiceButtons input:last-of-type {
  margin-left: var(--hugeMargin);
}
}
.buttonsRow {
  margin-bottom: var(--bigMargin);
}

/* Accountant's ZIP */
.accountantBox {
  grid-template-columns: 3fr 1fr;
  grid-column-gap: var(--bigMargin);
}
@media screen and (max-width: 800px){
  .accountantBox {
    display: flex;
    flex-direction: column;

  }
  .accountantBox p{
    font-size:var(--fontLabel);

  }
}
.accountantModal {
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows:auto;
  grid-column-gap: var(--smallMargin);
}
.accountantButtons input:first-of-type {
  margin:0;
}
.accountantButtons input{
  margin-left:var(--smallMargin);
}
/* Settings section */
.settingsContainer input {
  font-size: var(--fontParagraph);
}

.settingsContainer label {
  margin-top: var(--bigMargin);
}

.settingsInput {
  width: 50%;
  margin-bottom: var(--bigMargin);
  padding: var(--smallPadding) var(--bigPadding);
  border: 1px solid var(--semiLightGray);
}

.bankAccountsHeader, .bankAccounts {
  grid-template-columns: repeat(4, 25%);
}

.bankAccountsButton {
  margin-top: var(--smallMargin);
  margin-bottom: var(--bigMargin);
}

.accountantsRemindersCheckbox {
  margin-bottom: var(--bigMargin);
}
.cols3 span
{
  font-weight:500;
}
.personalizationBox, .paymentBox {
  grid-template-columns: repeat(2, 1fr);
}
.personalizationBox img
{
  width:300px;
}
.paymentBox > img
{
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: row1-start;
  grid-row-end: 3;
  width:100%;
}
.paymentBox > div
{
  text-align: center;
  padding: var(--smallPadding) var(--bigPadding);
}
.paymentBox > .option_select
{
  border: 1px solid var(--semiLightGray);
  border-radius:10px;
  cursor:pointer;
}
.paymentBox
{
  grid-gap:var(--bigPadding);
  grid-template-rows:auto;
}

.paymentBox > .option_select:hover
{
  transform: scale(1.1);
}
.option_select h1, .option_select h3
{
  cursor:pointer;
}
/* Invoice form */
.search-menu
{
  border:0;
  display:none;
  border-radius:0 0 3px 3px;
  background-color:white;
  height:200px;
  width:400px;
  position: absolute;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  padding:2.5px;
  align-self: normal;
}
.search-product
{
  width:245px;
  margin-top:45px;
  border-left: 1px solid var(--semiLightGray);
  border-top:0;
}
.search-row
{
  border-bottom: 1px solid #a0a0a0;
  padding: var(--smallPadding);
  cursor:pointer;
}
.search-row:hover{
  background-color:#f1f0f0;
}
.invoice-container-2cols, .invoice-grid-4-cols
{
  margin-bottom:var(--bigMargin);
}
.invoiceGeneralInfo {
  grid-template-columns: repeat(4, 25%);
  grid-row-gap: var(--bigMargin);
  margin-bottom: var(--hugeMargin);
}

.invoiceGeneralInfo input, .invoiceGeneralInfo select {
  width: 95%;
}

.gusButton, .sellerData {
  margin-left: var(--hugeMargin);
}
.modal_background,.loader-background,.confirm_background{
  position:fixed;
  width:100vw;
  height:100vh;
  top:0;
  left:0;
  background-color:rgba(210, 213, 214, 0.397);
  z-index:100;
  display:flex;
  align-items: center;
  justify-content: center;
}
.loader-background,.confirm_background{
  display:none;
}
.modal_container,.confirmBox
{
  width:50vw;
  height:40vh;
  background:white;
  padding:10px;
  display: flex;
  box-shadow:var(--shadowSmall);
}
.modal_container
{
  z-index:1000;
}
.confirmBox
{
  width:30vw;
  height:20vh;
  display:grid;
  z-index: 1001;
}
.confirmBox *
{
  justify-self:center;
  align-self:center;
  box-sizing: content-box;
}
.confirmBox input
{
  width:5vw;
}
.invoices_container{
  height:8vh;
  overflow-y:scroll;
}
.modal_loader{
  z-index: 100000;
    display: flex;
    position: fixed;
    width:100vw;
    height:100vh;
    top:0;
    left:0;
    background:rgba(210, 213, 214, 0.397);
}
#canvas{
  margin:auto;
  margin-top:30vh;
}

.data_modal input[type="text"], .data_modal select
{
  width:100%;
  margin-bottom:var(--smallMargin);
}
.data_modal input[type="button"]
{
  display:block;
}
.data_modal input[name="inputNIP"] {
    width: calc(100% - 30px);
    margin-right: var(--smallMargin);
}
.gus_modal{
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 35% 15% 50%;
  width:100%;
}
.gus_modal input[type="text"]{
    width:calc(100% - 30px);
    margin:10px;
}
.modal{
  width:50vw;
  height:50vh;
  background:white;
  margin-top:25vh;
  margin-left:25vw;
}
.checkbox-empty
{
	background-image: url(/pix/check-box-empty.svg);
	background-size:cover;
}
.checkbox-full
{
	background-image: url(/pix/check-box-full.svg);
	background-size:cover;
}
.table-icon
{
    min-width: 18px;
    height: 18px;
    width:18px;
    background-repeat: no-repeat;
    vertical-align: middle;
}
.clientInput {
  width: 50%;
}
.bankAccount
{
  width:25%;
}
.invoice-container .invoiceInput, .clientInput,
.invoiceProductsTable input, .invoiceProductsTable select, .darkInput {
  font-size: var(--fontParagraph);
  padding: var(--smallPadding) var(--bigPadding);
  border: 1px solid var(--semiLightGray);
}

.invoiceProductsTableHeader, .invoiceProductsTable {
  width: 100%;
  grid-template-columns: 3% 20% 5% 7% 10% 10% 10% 5% 10% 10% 10%;
  font-size: var(--fontInput)
}
@media screen and (max-width: 800px){
.invoiceProductsTableHeader
{
    font-size: initial !important;

}
}
.invoiceProductsTable input, .invoiceProductsTable select  {
  width: 90%;
  padding: var(--smallPadding);
  margin: var(--smallMargin) 0;
  /* grid-column-gap: var(--smallMargin); */
}

.rebates .rebateInput {
  width: 40%;
  margin-left: var(--smallerMargin);
}

.rebates [type="checkbox"] {
  width: auto;
}

.invoiceProductsTable .flex:first-of-type {
  padding-left: var(--smallPadding);
}

.productsButton {
  margin-left: var(--hugeMargin);
}

.productsBar {
  margin-bottom: var(--bigMargin);
}

.invoiceTextArea {
  width: 50%;
}

.invoiceTextArea textarea {
  width: 95%;
  min-height: 100px;
  margin-bottom: var(--bigMargin);
}

.actionsGrid {
  grid-template-columns: 1fr 2fr 1fr;
  align-items: end;
}

.summaryInvoice div {
  margin-right: var(--hugeMargin);
  margin-bottom: var(--bigMargin);
}
@media screen and (max-width:1200px) {

  .invoiceGeneralInfo
  {
    grid-template-columns: 100%;
  }
  .invoiceGeneralInfo input, .invoiceGeneralInfo select
  {
    width:100%;
  }
  .invoiceGeneralInfo .invoice-grid-4-cols
  {
    margin-bottom: 0;
  }
  h4
  {
    align-self:center;
  }
  .invoice-grid-main .bankAccount
  {
    width:100%;
  }
  .invoice-grid-main .clientInput
  {
    width:100%
  }
  .productsBar
  {
    flex-wrap:nowrap;
  }
  .summaryInvoice
  {
    font-size:12px;
  }
  .invoice-grid-main .invoiceTextArea
  {
    width: 100%;
  }
  .actionsGrid
  {
    grid-template-columns: 100%;
    grid-gap:1em;
  }
  .actionsGrid .flexEnd
  {
    justify-content:space-between;
  }

  .invoiceProductsTableHeader, .invoiceProductsTable
  {
    grid-template-columns: 50px 300px 100px 100px 100px 200px 100px 100px 100px 100px 60px;
    grid-template-rows: 25px;
  }
  .invoiceProductsTable
  {
    grid-template-rows:80px;
  }

  .productLp
  {
    grid-column:auto;
    grid-row:1;

  }
  .productName
  {
    grid-column:auto;
    grid-row:1;
  }
  .productNumber
  {
    grid-column:auto;
    grid-row:1;
  }
  .productMeasure
  {
    grid-column:auto;
    grid-row:1;
  }
  .productPriceNet
  {
    grid-column:auto;
    grid-row:1;
  }
  .productRebate
  {
    grid-column:auto;
    grid-row:1;
      justify-self: center;

  }
  .productValue
  {
    grid-column:auto;
    grid-row:1;
  }
  .productVat
  {
    grid-column:auto;
    grid-row:1;
  }
  .productVatValue
  {
    grid-column:auto;
    grid-row:1;
  }
  .productGross
  {
    grid-column:auto;
    grid-row:1;
  }
  .productAction
  {
    grid-column:auto;
    grid-row:1;
  }
}
/* my account */


.accountSettingsSection {
  margin-bottom: var(--hugeMargin);
}
@media screen and (max-width:1200px) {

  .modal_container
  {
    height:auto !important;
    width:auto !important;
  }
  .confirmBox
  {
    width:auto;
  }
  .confirmBox input
  {
    width:auto;
  }
  .accountSettingsSection .clientInput{
    width:100%;
  }
  .accountSettingsSection .flexEnd
  {
    justify-content: space-between;
  }
  .settingsInput, .clientInput
  {
    width:100%;
    margin-bottom:0;
  }


  .bankAccounts .table-cell:first-of-type
  {
    padding:0;
  }
  .bankAccounts, .bankAccountsHeader
  {
    grid-template-columns: 200px 100px 200px 100px;
    grid-template-rows: 20px 20px;
  }
  .bankAccountsHeader p
  {
    font-size:13px;
    font-weight: 600;
  }
  .accountName
  {
    grid-column:auto;
    grid-row:1;
  }
  .accountCurrency
  {
    grid-column:auto;
    grid-row:1;
  }
  .accountNumber
  {
    grid-column:auto;
    grid-row:1;
  }
  .accountAction
  {
    grid-column:auto;
    grid-row:1;
  }
  .personalizationBox
  {
    grid-template-columns: 100%;
  }
  .darkInput
  {
    width:100%;
  }
  .invoiceTextArea textarea
  {
    width:100%;
  }
}


/* Mobile general */
@media screen and (max-width:540px) {

  .header-address {
    display: none;
  }

  .headerMain i {
    margin: 0;
  }

  .page-header {
    margin: var(--smallMargin);
  }

  .mobileMenu {
    display: flex;
    align-items: center;
    margin-right: 2.5%;
  }

  hr {
    margin-bottom: var(--smallMargin);
  }

}

/* Tablet general */
@media screen and (min-width: 540px) and (max-width:1200px) {

  .mobileMenu {
    display: flex;
    align-items: center;
    margin-right: 2.5%;
  }
}


/* Desktop general */
@media screen and (min-width:1200px) {

  .mobileMenu {
    display: none;
  }
  .mobileMenuLabel:hover + .mobileMenuContainer
  {
    display:block;
  }
}






/* Browser specific classes */
.invoicesMenu {
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 1px;
  text-overflow: '';
}



/* configurator połowa tego jest do wywalenia ale potem */
.configurator-wrapper {
    width:60%;
    margin:0 auto;
    text-align:center;
}
.configurator-wrapper h3,.configurator-wrapper p,.configurator-wrapper label,.text-wrapper
{
  text-align:left;
}
.configurator-wrapper label
{
  font-size:var(--fontInput);
  margin:10px 0;
}
.configurator-wrapper footer
{
  margin-top:var(--bigMargin);
  text-align:center;
}
.configurator-wrapper input[type="text"], .configurator-wrapper select
{
  width:100%;
}
.configurator-wrapper [type="file"]
{
  width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
  padding:0;
  margin:0;
}
.text-wrapper label
{
  display:inline-block;
}
.config-grid
{
  grid-template-columns: repeat(2,calc((100% - 10px)/2));
  grid-gap: 10px;
  margin:var(--smallMargin) 0;
  text-align:left;
}
.img-drop-box
{
  min-height:100px;
  width:100%;
  border:2px dashed #AAA;
  background-color: #03000005;
}
.img-drop-box label
{
  margin:var(--smallMargin);
}
.is-dragover
{
  background-color: #03000017 !important;
  border:2px solid #AAA;
  transition-duration:0.3s;
}
.rowLayout
{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.column
{
  display: flex;
  flex-direction: column;
}
.error-msg
{
  height:20px;
  color:#f00;
  font-size:10px;
  display:none;
}
/*********header*********/

.header-wrapper
{
  height:75px;
}
.logo-wrapper
{
  float: left;
  width: 250px;
  height: 100%;
  flex-wrap: nowrap;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor:pointer;
}
.logo
{
  height:60px;
  width:60px;
  background:url(../pix/favicon.png);
  margin:0 10px;
}
.page-label
{
  font-size:31px;
}
.login-wrapper
{
  float:right;
  width:150px;
  height:100%;
  flex-wrap: nowrap;
  display: flex;
  justify-content: center;
  align-items: center;
}
.button-label
{
  font-size:18px;
  cursor:pointer;
}
.body-configurator
{
  color: #444;
  margin:0px;
  text-align:center;
  font-family: Tahoma,'Signika',Verdana,sans-serif;
  font-size: 12px;
  height:100vh;
}
.body-configurator input
{
  cursor: pointer;
  display:inline-block ;
}
.body-configurator input[type='checkbox']
{
  width:13px;
  height:13px;
  margin:0;
}
.config-label label
{
  width:calc(100% - 18px);
  margin-left:5px;
}
.img-preview
{
  width:auto;
  height:100px;
  margin:10px 0;
}
#img-wrapper
{
  display:none;
}
.invoicesTable, .contractorsTable, .productsTable
{
  grid-template-rows: minmax(20px,auto);
  align-items: center;
}
@media only screen and (max-width: 1200px){
  .invoicesTableHeader, .invoicesTable
  {
      grid-template-columns: repeat(8, minmax(150px, calc(100% / 8)));
  }
  .invoicesTableHeader, .contractorsTableHeader, .productsTableHeader
  {
    grid-template-rows: auto auto;
  }
  .invoicesTable, .contractorsTable, .productsTable
  {
    grid-template-rows: minmax(40px,auto);
    align-items: center;
  }
  .contractorsTableHeader, .contractorsTable
  {
      grid-template-columns: 200px repeat(6, minmax(150px, calc((100% - 200px) / 6)));
  }
  .productsTableHeader, .productsTable
  {
      grid-template-columns: repeat(5, minmax(150px, calc(100% / 5)));
  }
  .latestLoginsTableHeader, .latestLoginsTable, .latestPaymentsTableHeader, .latestPaymentsTable {
    grid-template-columns: repeat(4, minmax(150px, calc(100% / 4)));
  }
  .invoice-mobile, .table-main
  {
    width:100%;
    overflow-y: hidden;
    overflow-x: auto;
  }
}