<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@charset "utf-8";
/* 
CSS Document 
Klik-MALL Presentations - framework
*/


.css-manuals .far,
.css-manuals .fas {
    font-size: 20px;
    line-height: 1em;
    color: inherit;
    outline: 0px solid green;
    margin: 0;
    padding: 0;
}

.css-manuals {
  padding: 2em;
 width: 100%;
 text-align: center;
 outline: 0px solid #dfdfdf;
 background-color: #fff; 
 background-color: #dbdedf; /* */
}

.css-manuals .erp-frame {
 outline: 0px solid #dfdfdf;
 background-color: #fff; 
 /* background-color: #006277; */
 padding: 2em;
 max-width: 1200px;
 margin: 0 auto;
}


.bgcolor-erp-box {
 background-color: #f9f9f9;
 
  background: linear-gradient(45deg, rgba(204,204,204,0.05) 0%, rgba(204,204,204, 0.15) 100%); 
  border: 1px solid #ededed;
 padding: 1.5em;
 min-height: 300px;
}

.css-manuals a.line,
.css-manuals hr.line {
/* .erp-frame .erp-list-items  */
 display: block;
 height: 12px;
 width: auto;
 max-width: 100%;
 margin-top: 5px;
 margin-right: 0;
 margin-bottom: 5px;
 margin-left: 0;
 padding: 0;
 background-color: var(--hr-line-bgcolor);
 border: 0px;
 border: none;

 -webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;

transition: all 0.3s ease;
}


.css-manuals a.line:hover {
    background-color: var(--hr-line-bgcolor-hover);
}

.css-manuals .erp-list-items-50 hr.line {
    --margin-right: 20px;
    width: calc(50% - 0.5 * var(--margin-right));
    max-width: calc(50% - 0.5 * var(--margin-right));
    margin-right: var(--margin-right);
    float: left;
    margin-right: var(--margin-right);
}


/* .css-manuals .erp-list-items-50 hr:nth-child(2) { */
.css-manuals .erp-list-items-50 hr:nth-child(even) {
 margin-right: 0px!important;
 /* background-color: #ccc; */
}

.css-manuals hr.active {
 background-color: var(--hr-line-active);
}

.hr-line-label-leftside,
.hr-line-label-rightside {

position: absolute; 
outline: 0px solid green; 
width: 120px;
margin-top: -8px;
z-index: 10;
}

.hr-line-label-leftside {
margin-left: -130px; 
}

.hr-line-label-rightside {
margin-left: calc(100% + 10px); 
}


.hr-line-label-leftside.fadein,
.hr-line-label-rightside.fadein {
    opacity: 0.3;
    transition: opacity 0.3s ease-in-out;
} 

.fadein:hover,
.fadein:hover {
    opacity: 1;
} 



.triangle-pointer-to-left,
.triangle-pointer-to-right {
    position: absolute; 
    width: 0;
    height: 0;
    border-style: solid;
    top: 8px; 
}

.triangle-pointer-to-left {
 left: -5px; 
    border-width: 5px 6px 5px 0;
    border-color: transparent var(--hr-line-label-bgcolor) transparent transparent;
}

.triangle-pointer-to-right {
    right: -6px; 
    border-width: 5px 0 5px 6px;
    border-color: transparent transparent transparent  var(--hr-line-label-bgcolor);
      
}


.hr-line-label {
    display:inline-block; 
    width: auto; 
    min-width: 60px; 
    padding: 6px 8px; 
    color: #fff; 
    background: var(--hr-line-label-bgcolor);
    font-size: 0.75em; 
    line-height: 1.05em; text-align: center;
}
 
.hr-line-label-leftside .hr-line-label {
 float: right; /* wrapper width ~120px, but this one can be shorter, so just auto-width, max-width: 120px + float right */
}







.css-manuals .erp-edit-item {
 max-width: 500px;
 display: grid;

 grid-template-columns: 30% 30% 1fr;
 grid-template-rows: 1fr;

 grid-column-gap: 18px;
 grid-row-gap: 18px;

 justify-items: stretch;
 align-items: flex-end;
}


.css-manuals .tpl-erp-title,
.css-manuals .erp-list-rows {
 max-width: 500px;
 display: grid;

 grid-template-columns: 22px 1fr 35% 25px;

 grid-template-rows: 100px 50px 33px;
 grid-template-rows: 1fr;

 grid-column-gap: 18px;
 grid-row-gap: 12px;

justify-items: stretch;
align-items: center;
/* align-items: flex-end; ... not good for fa-icons etc.*/

/*
align-items: center; ... this one will SHRINK &gt; div rows to auto-height, vertically aligned to middle
justify-content: center puts the columns in the horizontal center.
align-items: center aligns the items vertically.
*/
}

.css-manuals .tpl-erp-title {
 grid-template-columns: 40px 1fr;
 align-items: start; /* so they are vertically aligned &gt; middle */
 text-align: left;
}



.css-manuals .tpl-erp-title &gt; div,
.css-manuals .erp-list-rows &gt; div,
.css-manuals .erp-edit-item &gt; div {
 color: var(--hr-line-title);
 padding: 0;
 margin: 0;
 min-height: auto;

 background-color: #eee;
 background-color: transparent;

 outline: 0px solid #999;
 position: relative;
}


.css-manuals .erp-edit-item &gt; div {
 align-self: start;
}



.css-manuals .erp-list-rows &gt; div:nth-child(2n) .line {
  background-color:var(--accent);
  background-color: var(--hr-line-title); 
}

.css-manuals .erp-list-rows &gt; div:nth-child(4n) .line {
 background-color: var(--hr-line-edit);
}

.tpl-orders .bgcolor-accent { background-color: var(--hex-orders)!important; }
.tpl-customers .bgcolor-accent { background-color: var(--hex-customers)!important; }

.erp-list-rows.tpl-orders &gt; div:nth-child(4n+1) hr.line { background-color: var(--hex-orders)!important; }
.erp-list-rows.tpl-customers &gt; div:nth-child(4n+1) hr.line { background-color: var(--hex-customers)!important; }




.tpl-erp-title &gt; div:nth-child(1) {
 border: 0px solid red;
 padding-right: 6px;
 display: flex;
 justify-content: flex-start;     
 width: 100%;
}

.tpl-erp-title .erp-icon {
 min-height: 32px; 
 background-repeat: no-repeat;
 background-position: center center;
 background-size: 65%;

 flex-grow:1;
 flex-shrink: 1;
 border: 0px solid green;
}


.tpl-erp-title.tpl-orders .erp-icon {
    background-image: url(https://www.klik-mall.com/docs/documents/6f/a1/1626463058-AH6l-iconmonstr-shopping-cart-2-basic-48-w.png);
    background-color: #109a27;

}

.tpl-erp-title.tpl-customers .erp-icon {
 background-image: url(https://www.klik-mall.com/docs/documents/9e/28/1588579706-zn05-iconmonstr-user-icon-50px-w.png);
 background-color: #a202ac;
}

.tpl-erp-title.tpl-customers b {
 color: #a202ac; 
}


.erp-edit-item &gt; div &gt; .line {
  margin-bottom: 18px;
}

.erp-edit-item &gt; .sidebar-menu .line {
  display: inline-block; 
  float: left; 
  width: 30%;
  margin: 0 5% 5% 0;
  background-color: rgba(0,0,0, 0.2);

  background: linear-gradient(45deg, rgba(204,204,204,0.25) 0%, rgba(204,204,204, 0.45) 100%);

  height: 40px;
}

.erp-edit-item &gt; .sidebar-menu hr.line:nth-of-type(3n) {
 margin: 0 0% 5% 0;
 /* background-color: rgba(0,0,0, 0.3); */
}

.erp-edit-item &gt; .sidebar-menu .invoice-preview {
  width: 100%;
  margin: 0 0 5% 0;
  background-color: rgba(0,0,0, 0.2);

 background: rgb(247,131,87);
 background: linear-gradient(45deg, rgba(247,131,87,0.15) 0%, rgba(170,78,43, 0.35) 100%);

 background: rgb(16,154,39);
 background: linear-gradient(45deg, rgba(16,154,39,0.1) 0%, rgba(16,154,39, 0.25) 100%);

 height: 140px;
 font-size: 0.65em;
 color: rgba(255,255,255, 0.75);
 padding: 3px; 
 text-align: center;
}



.css-manuals .icon-orders {
    background-image: url(https://www.klik-mall.com/docs/documents/6f/a1/1626463058-AH6l-iconmonstr-shopping-cart-2-basic-48-w.png);
    background-color: #109a27;
}
.css-manuals .icon-coupons {
    background-image: url(https://www.klik-mall.com/docs/documents/08/33/1626463165-B32C-iconmonstr-cut-4-48-w.png);
    background-color: #109a27;
}

.css-manuals .icon-catalog {
    background-image: url(https://www.klik-mall.com/docs/documents/9e/28/1588579706-dlU2-iconmonstr-barcode-8-icon-50px-w.png);
    background-color: #FF5B3B;
}

.css-manuals .icon-customers {
    background-image: url(https://www.klik-mall.com/docs/documents/9e/28/1588579706-zn05-iconmonstr-user-icon-50px-w.png);
    background-color: #a202ac;
}
.css-manuals .icon-suppliers {
    background-image: url(https://www.klik-mall.com/docs/documents/9e/28/1588579706-zn05-iconmonstr-user-icon-50px-w.png);
    background-color: #3f51b4;
}
.css-manuals .icon-users {
    background-image: url(https://www.klik-mall.com/docs/documents/9e/28/1588579706-zn05-iconmonstr-user-icon-50px-w.png);
    background-color: #e81e63;
}
.css-manuals .icon-webshop {
    background-image: url(https://www.klik-mall.com/docs/documents/9e/28/1588579706-265G-iconmonstr-shopping-cart-22-icon-50px-w.png);
    background-color: #b01a40;
}
.css-manuals .icon-docs {
    background-image: url(https://www.klik-mall.com/docs/documents/9e/28/1588579706-ofUz-iconmonstr-inbox-8-icon-50px-w.png);
    background-color: #005B9A;
}
.css-manuals .icon-reports {
    background-image: url(https://www.klik-mall.com/docs/documents/9e/28/1588579706-b98g-iconmonstr-bar-chart-4-icon-50px-w.png);
    background-color: #009dae;
}
.css-manuals .icon-settings {
    background-image: url(https://www.klik-mall.com/docs/documents/9e/28/1588579706-bvl0-iconmonstr-gear-9-icon-50px-w.png);
    background-color: #cd4e2e;
}
.css-manuals .icon-company {
    background-image: url(https://www.klik-mall.com/docs/documents/9e/28/1588579706-OQ5G-iconmonstr-shop-icon-50px-w.png);
    background-color: #2b2f2d;
}

.css-manuals .icon-employees {
    background-image: url(https://www.klik-mall.com/docs/documents/9e/28/1588579706-zn05-iconmonstr-user-icon-50px-w.png);
    background-color: #666666;
}

/* Main packages */
.css-manuals .icon-register {
    background-image: url(https://www.klik-mall.com/docs/documents/9e/28/1588579706-OQ5G-iconmonstr-shop-icon-50px-w.png);
    background-image: url(https://www.klik-mall.com/docs/documents/9e/28/1588579706-sxRC-iconmonstr-checkout-icon-50px-w.png);
    background-color: #109a27;
}
.css-manuals .icon-store {
    background-image: url(https://www.klik-mall.com/docs/documents/9e/28/1588579706-OQ5G-iconmonstr-shop-icon-50px-w.png);
    background-color: #904848;
}
.css-manuals .icon-b2b-store {
    background-image: url(https://www.klik-mall.com/docs/documents/9e/28/1588579706-OQ5G-iconmonstr-shop-icon-50px-w.png);
    background-color: #1b4085;
}
.css-manuals .icon-www-pos {
    background-image: url(https://www.klik-mall.com/docs/documents/9e/28/1588579706-OQ5G-iconmonstr-shop-icon-50px-w.png);
    background-color: #0c946c;
}
.css-manuals .icon-www-pos-pro {
    background-image: url(https://www.klik-mall.com/docs/documents/9e/28/1588579706-OQ5G-iconmonstr-shop-icon-50px-w.png);
    background-color: #0c141c;
}
.css-manuals .icon-website {
    background-image: url(https://www.klik-mall.com/docs/documents/9e/28/1588579706-OQ5G-iconmonstr-shop-icon-50px-w.png);
    background-color: #efc152;
}


</pre></body></html>