body {
    background-color: #ffffff; 
    font-size: 15px;
    line-height: 1.7;
    font-family: "Barlow", sans-serif !important
}

h1, h2, h3, h4, h5, h6, h7 {
    font-family: "Barlow Condensed", sans-serif !important;
    font-weight: 600 !important;
}
strong {font-weight: 600 !important;}

.badge {padding: 0.25em 0.6em;}

.grey-navbar {background-color: #f0f0f0 !important;}


input, select {
    background-color: rgb(255 255 255);
    color: #000000 !important;
    /* font-weight: bold !important; */
    border: 1px solid #dddddd!important;
    font-size: 13px !important;
}
select option:disabled {background-color: #eee;}
select optgroup {background-color: #eae8e1;}
select optgroup option {background-color: #fff;}

h7 {color: #000;font-weight: 500;}

.loginDiv {
    background-color: #ffffff;
    padding: 2rem;
    box-shadow: 0 0 100px rgba(0,0,0,0.5);
    border-radius: 10px;
}

.loginError {
    background-color: #a21515;
    color: #ffffff;
    padding: 1rem;
    margin-bottom: 1rem;
}

.loginSucess {
    background-color: aliceblue;
    padding: 1rem;
    margin-bottom: 1rem;
    color: #000000;
}

#planering_submenu {}
#planering_submenu div.orderUnconfirmedList {
    font-size: smaller;
    color: #000000;
    padding: 2px 4px;
    cursor: pointer;
    display: none;
    border-bottom: 1px solid #c3c3c3
}
span.unconfirmedDatum {float:right; color: #ffffff !important; background-color :#007aca !important; font-weight: normal; font-size: smaller; margin-top: 3px;}
#planering_submenu strong.manad {    display: block;
    color: #000;
    background-color: #efefef;
    border-bottom: 2px solid #fff;
    padding: 0.5rem;
    cursor: pointer;
    font-weight: normal;
    border-radius: 3px;}
#planering_submenu div.orderUnconfirmedList:hover {background-color: #454d55; color: #ffffff;}
#planering_submenu .manadShort {display: inline-block; width: 50px;}

nav.navbar-psplanering {background-color: #007aca !important}
a.nav-link {color: #ffffff !important;}
a.nav-link.dropdown-toggle {padding-right: 1em !important;}

div.dropdown button {padding-right: 30px;}
div.dropdown button::after {right: 12px;}
div.dropdownDiv ul {padding:0px; min-width: 300px;}
button.dropdown-item {font-size: small;}
button.dropdown-item:hover {background-color: #eae8e1;}


button.redButton {background-color: red; color: #fff;}
input#goToDate {
    border: 0px !important;
    text-align: center;
    padding: 10px 0px !important;
    color: #000000 !important;
    background: none !important;
    border-top: 1px solid #454d55 !important;
}
.ps_day {position: relative;  border:1px solid #ffffff; padding:0;}
.ps_day_top {
    padding: 10px 0px;
    background-color:#454d55;
}
.ps_day_top h5 {
    color: #ffffff;
    text-align: center;
}

.ps_day_top h6 {
    color: #ffffff;
    text-align: center;
}

span.daySetting {
    position: absolute;
    right: 5px;
    top: 8px;
    font-size: 1.3rem;
    cursor: pointer;
    color: #c8c8c8;
}
span.daySetting:hover {color: #ffffff; }

span.unconfirmedTitle {
    display: block;
    padding: 5px 5px 0px 5px;
    color: #ffffff;
    font-size: smaller;
    background-color: #4e4e4e;
}
div.minimerade span.unconfirmedTitle {cursor:pointer;}

.timmar_container {position: relative;}
.timmar_container.today div.timme {background-color: #ffffff;}
.timmar_container div.timme {
    position: relative; 
    border-bottom: 1px solid #adadad;
    width: 100%;
}
div#day_saturday div.timme {
    background-color: #dfdfdf;
}
.timme {background-color: #efefef;}

div.orderBlock {
    position: absolute;
    top: 0px;
    width:  100%;
    background-color:#18A218;
    padding: 5px;
    border: 2px solid #ffffff;
    border-radius: 3px;
    color: #ffffff;
    font-size: smaller;
    cursor: pointer;
    opacity: 0.8;
    overflow: hidden;
}
div.lockedOrder {
    background-color: cadetblue !important;
    opacity: 0.6;
}

div.orderBlock strong {color: #ffff00;}
div.orderBlock:hover {opacity: 1.0;}
.orderBlockMove {box-shadow:  0px 0px 20px rgba(0,0,0,0.5) !important;}
i.moveOrderBlock {
    padding: 5px 5px;
    color: #000000;
    border-radius: 3px;
    float: right;
    font-size: small;
    cursor: move;
}
.resizeOrderBlock {width: 100%; height: 10px; cursor: s-resize;    position: absolute;    bottom: 0px;}
.klockslag {position: absolute; top: 5px; left: 8px; font-size: small; color: #4d4d4d;}
.blockedTime {background-color: #d06868 !important;}
div.ps_day_top.today {background-color: #007aca;}

div.orderMinimerade {
    font-size: smaller;
    color: #4e4e4e;
    background-color: #ffffff;
    padding: 1px 5px;
    cursor: pointer;
    border-bottom: 1px solid #adadad;
}
.minimeradeOrderList {display:none;}
div.unconfirmed {background-color: #fafafa; position: relative; padding-bottom: 5px;}
div.unconfirmed span.klockslag {color: #ffffff !important;}
div.orderUnconfirmed, div.orderHold  {
    background-color: #ffffff;
    padding: 2px 5px;
    margin: 1px 0px;
    color: #4e4e4e;
    border-bottom: 1px solid #adadad;
    font-size: small;
    display: block;
    cursor: pointer;
    border-left:10px solid #007aca;
}
div.orderNewDate {border-left-color: orange !important;}
div.orderDateMoved span.newdate {
    background-color: darkgreen;
}
span.newdate {
    font-size: 9px;
    padding: 2px 6px;
    background-color: orange;
    color: #fff;
    border-radius: 5px;
    margin-right: 5px;
}
div.orderHold {border-left:10px solid #d06868;}
div.orderUnconfirmed:hover, div.orderHold:hover  {background-color: #4e4e4e; color:#ffffff;}

div.orderParkerad {font-size: xx-large; font-weight: bold; background-color: #ff0000; color: #ffffff; padding: 0 1rem; margin-bottom: 1rem;}

div.quoteListDiv {
    overflow-y: auto;
    max-height: 400px;
    min-height: 400px;
}

.quoteListDiv table tbody tr td {
    font-size: small;
    padding: 0;
}

div#modal-quotelist-loader {
    position: absolute;
    top: 40%;
    left: 40%;
    text-align: center;
}

.typ-spabad {background-color: #0034dd !important;}
.typ-gardenpool {background-color: #1c633b !important;}
.typ-produkter {background-color: cornflowerblue !important;}
.typ-pooltak {background-color: #fda836 !important;}

.modal-dialog-scrollable {
    height: initial !important;
}
.modal-header {background-color:#fff; }
.modal-title {color: #000; }
.modal-body .table .thead-dark th {
    color: #fff;
    background-color: #007aca;
    color: #ffffff;
    border: 0px !important; 
}
.modal-body input, .modal-body select {
    padding: 0.5em 1em;
    width: 100%;
}

.modal label {font-weight: 500; margin-bottom: 0; margin-top: 1em;} 



.ps-select-withoutarrow {
    background-image: initial;
    padding: 0.375rem;
    border: 0 !important;
}






table#spalista tr th {cursor: pointer; border: 1px solid #d5d5d5;}
table#spalista tr td {vertical-align: middle !important;}
#spaNote {
    border: 1px solid #dee2e6;
    height: 100px !important;
}
tr.soldRow {
    border-left: 5px solid red;
    color: red !important;
    font-weight: bold;
}

tr.prelRow {
    border-left: 5px solid #303086;
    color: #303086;
    font-weight: bold;
}

table tr th.colSort {background-color: #a0a0a0 !important;}
th i {float:right;} 

tr.no-records-found {
    display: none;
}
tr.spaPavag {
    background-color: #f0f0f0;
    color: #808080;
}

tr.spaOrdered {
    border-left: 5px solid #00bc0075;
}

tr.spaOrderedDone {
    border-left: 5px solid indianred;
    color: #adadad;
    font-weight: 200 !important;
}

table.ps-table-lines tbody tr td {border-right: 1px solid #f0f0f0;}

.wireframe {
    padding: 1em !important; 
  }
  
.wireframe-topnav {
    background-color: white;
    padding: 0.5em;
    border: 2px solid #fff;
    color: #000;
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 10px;
}

  .tableCompact tbody tr td,   .tableCompact tbody tr th {padding: 0px;}
  .tableCompact tbody tr th[scope=row] {min-width: 100px}
  table.compressed-table tr td {
    font-size: 0.9em;
    padding: 0.4rem;
}

  .quoteInfo {display: none;} 
  .quoteGroup {margin-bottom: 25px;}
  .quoteText {font-size: 1em; line-height: 1.4em; color: #000000; padding-left: 30px;}
  .quoteIcon {
    max-height: 1.5em;
    height: 1.5em;
    max-width: 1.5em;
    width: 1.5em;
    margin-right: 20px;
  }
  


  .quoteCard.active {
  border-left: 10px solid orange !important;
  background-color: #f9f9f9;
  color: #000;
  border-color: orange;
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
    }
  .quoteCard {
    margin-bottom:0px; 
    font-size: smaller;
    padding: 10px;
    }


    div#webquote_message_div {
        margin:15px;
    }

    #webqoute_imgframe {
        border: 1px solid #e0e0e0;
        background-color:#fff;
        padding: 1em;
    }

    td.quotelist_date {
        font-weight: bold;
        padding: 0.5em;
        color: #fff;
        background-color: #007aca;
    }

    .quoteCustomerIcon {margin-right: 20px;}
    
.quoteSKU-rubrik {
    font-weight: bold;
    padding-top: 1.5em !important;
}

.quoteSKU-price {
    text-align: right;
}
  

.quoteSKU-summering {
    font-size: 1.5em;
    text-align: right;
    font-weight: bold;
}

.ps-navbar-col {
    padding-right: 2em; border-right: 1px solid #efefef;
    padding-top: 1em;
}

.ps-main-col {
    padding-left: 2em;
    padding-right: 1em;
    padding-top: 1em;
    background-color: #f9f9f9;
}

span#webquote_pricetag {
    font-size: 1.5em;
    color: #fff;
    position: absolute;
    background-color: #28a745;
    right: 0;
    bottom: 1em;
    padding: 5px 20px;
    line-height: initial;
    /* box-shadow: none; */
}

i.ps-icon {margin-right:10px; min-width:20px;}
i.ps-icon-attr {color: #62229a; margin-right: 0px;}


table tr.quoteOrderRubrik td {padding-top:20px;}

table .table-hover tbody tr:hover {
    color: #212529;
    background-color: rgba(0, 0, 0, 0.075) !important;
}

.quoteBadge {
    width: 70px;
}

.quoteDate {
    width: 220px;
}

.quoteDesc {
    width: auto ;
}

div.quoteMenu-container {background-color: #fff;}
li.quoteMenu {
    cursor: pointer;
    padding: 8px 14px;
    border:0;
    border-right: 1px solid #dee2e6;
}
li.quoteMenu i.ps-icon {margin-right: 0 !important;}
.quoteMenuCheck {color: green;}

li.quoteMenu:hover {font-weight: initial;}
li.quoteMenuSelect {padding:0;}
li.quoteMenuSelect select {border:0 !important; padding: 10px 14px;}
li.quoteMeny i.ps-icon {
    margin-right: 7px;
    min-width: 13px;
}

li.quoteMenu strong.ps-badge{
    float: right;
    background-color: #778476;
    color: #fff;
    padding: 0px 4px;
    line-height: normal;
    border-radius: 2px;
    font-size: smaller;
}
div.quoteMenu-extra {
    margin-bottom: 1em;

}
div.quoteMenu-extra select {
    background-color: #fff !important;
    border: 0 !important;
    width: 100%;
    margin-bottom: 2px;
    padding: 0.375rem 5px;
}   

.quoteMenu-icon {
    font-size: 1.2em;
    padding: 6px 10px !important;  
}

.accordion-button:not(.collapsed) {
    color: #fff;
    padding: 0.7em 1em;
    background-color: #007aca;
}


button.accordion-button.collapsed {
    background-color: #fffff;
}

.quote-column {
    color: #000;
}

.webquote_img {
    cursor: pointer;
}

.webquote_img:hover {
    border: 1px solid #e0e0e0;
}


.projectStep {
    color: #ffffff;
    background-color: tan;
    padding: 4px 8px;
    font-size: 0.78em;
    margin-bottom: 1px;
    cursor: pointer;
    min-height: 20px;
}

.crmDate:hover {
    color: red;
    text-decoration: underline;
    cursor: pointer;
}


.list-group-item:hover {background-color: #ececec;}
/*.ps-table-light tr th {background-color: #f0f0f0 !important;}*/
.ps-table-light tbody tr:hover td{background-color: #ececec !important;}
.ps-table-light tbody tr.quoteOrderRubrik:hover td{background-color: initial !important;}

.ps-table-light tr td {vertical-align: middle;}

.accordion-button.showQuote {padding: 0.6em 1.8em; border-left: 10px solid #fff0;}

.searchButton, .searchButton i {cursor: pointer;}
.searchButton:hover {background-color: #dedede;}


.ps-tab-menu a.nav-link {color: #000 !important;}
.ps-tab-menu a.nav-link.active {color: #fff !important;}

table tbody tr td:first-of-type {padding-left: 15px;}
/*table tbody tr[data-leadtype='contact'], div.accordion-item[data-leadtype='contact'] {border-left: 5px solid #589858;}
table tbody tr[data-leadtype='quotesku'], div.accordion-item[data-leadtype='quotesku'] {border-left: 5px solid #007aca;}
table tbody tr[data-leadtype='poolconfig'], div.accordion-item[data-leadtype='poolconfig'] {border-left: 5px solid orange;}*/

div.accordion-item[data-leadtype='contact'] .accordion-button:not(.collapsed) {background-color: #589858;}
div.accordion-item[data-leadtype='quotesku'] .accordion-button:not(.collapsed) {background-color: #007aca;}
div.accordion-item[data-leadtype='poolconfig'] .accordion-button:not(.collapsed) {background-color: cadetblue;}

table tbody tr[data-leadtype='contact'] i.icon-leadtype {background-color: #589858;}
table tbody tr[data-leadtype='quotesku'] i.icon-leadtype {background-color: #007aca;}
table tbody tr[data-leadtype='poolconfig'] i.icon-leadtype {background-color: orange;}


.accordion-item {border-bottom:1px solid #efefef;}

/*
span.priceIncVAT {
    color:royalblue ;
    font-weight: bold;  
}
span.priceExclVAT {
    color: darkred;
    font-weight: bold;
}

span.priceIn {
    color: grey;
    font-weight: bold;
}
*/

.ps-div {color: #000 !important;}


.calc-img-selected {
    cursor: pointer;
    background-color: #007aca !important;
    padding:8px;
    color: #fff !important;
}

.calc-img {
    height: 35px;
    border-radius: 20px;
    cursor: zoom-in;
}

.calc-img-container:hover .calc-img-hover {  
    visibility: visible;
    opacity: 1;
}

.calc-img-hover {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.5s linear;
    position: absolute;
    z-index: 500;
    width: 250px;
    height:auto;
    left: 80px;
    border: 4px solid #efefef;
}


span.linerPriceBanner {
    text-align: center;
    font-weight: bold;
}

span[data-pricetype="prodDesc"] {
    padding: 5px 10px;
    display: block;
}


span[data-pricetype="copyDesc"] {
    padding: 5px 10px;
    display: block;
}

span[data-pricetype="priceExclVAT"] {
    background-color: #e0eee4;
    padding: 5px 10px;
    display: block;
}

span[data-pricetype="priceIncVAT"] {
    background-color: #ebe0ee;
    padding: 5px 10px;
    display: block;
}

span[data-pricetype="inprice"] {
    background-color: #eee0e0;
    padding: 5px 10px;
    display: block;;
}


#calcInput {
    margin-right: 10px;
    background-color: #f9f9f9;
    padding: 20px;
    z-index: 1000;
    border-bottom: 3px solid #bbbbbb;
}


table.table-price-calc {font-size: small;}
table.table-price-calc tr td:nth-of-type(1) {width: 80px; min-width: 80px; max-width: 80px;}
table.table-price-calc tr td:nth-of-type(2) {width: 250px; min-width: 250px; max-width: 250px;}
table.table-price-calc tr td:nth-of-type(4) {width: 130px; min-width: 130px; max-width: 130px;}
table.table-price-calc tr td:nth-of-type(5) {width: 130px; min-width: 130px; max-width: 130px;}
table.table-price-calc tr td:nth-of-type(6) {width: 130px; min-width: 130px; max-width: 130px;}


.fixed-table-loading.table.table-bordered.table-hover {
    display: none;
}

::placeholder {color: #868686 !important;}
div#createRMA h1 {line-height: 1.0;}
div#createRMA h1 span {font-size: 0.8em !important;}
div#createRMA h6 {
    padding-bottom: 0.1em;
    padding-top: 1em;
}

img.expandImage {cursor: pointer;}


div.createRMA-Div {    
    /*background-color: #5f9ea01c;*/
    background-color: #f0f0f0 ;
    padding: 1.5em;
    margin: 1em 0;
    box-shadow: 2px 2px 2px 0px rgb(0 0 0 / 15%);}
div.createRMA-Div label {font-weight: 600;margin-bottom: 0;
    margin-top: 0.5em;}

.RMA-navbarFilter {margin-bottom: 5px;}
.rmaFlexBox-NavBar{
    display: flex;
    align-items: center;
    justify-content: left;
    padding: 0.2rem 0rem;
}
.rmaLeadFilter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.2rem 0rem;
}

[data-infotext] {color: red; }

.ps-infoText {
    font-size: smaller;
    line-height: normal;
    font-style: italic;
    color: #565656;
    position: absolute;
    display: none;
    z-index:100;
    background: #fff;
    box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
    padding: 1em;
    bottom: 3.5em;
}

.attribute-desc:hover > div.ps-infoText {display: block;}


span.attrMandatory {
    color: red;
    ;
}

.attrRMACheckbox {
    font-size: initial !important;
    margin-top: 0.5em;}

.rmaAvstamningCheckbox {
    height: 1.2em;
    width: 1.2em;
    border: 2px solid #000 !important;
    cursor: pointer;
}

li.rma-list-filter {
    background: initial;
    border: 0;
    padding: 0.4em 1em;
}
li.rma-list-filter:hover {background-color: #fff;}

.divAttributes .form-label {font-weight: 600; margin-bottom: 0; margin-top: 1em;}

.crmStatusButtons {padding: 0.4em !important; color: #000;}
.crmStatusButtons:hover {background-color: #efefef;  cursor: pointer;}
.crmStatusTitle {font-weight: 500;}
.crmStatusButtonSelected {
    background-color: #f0f0f0;
    border: 1px solid #dee2e6;
}

.rmaLogg {
    background-color: #fff;
    border-radius: 5px;
    padding: 1em;
}

.rmaLogg-container {
    display: flex;
}

.rmaLogg-post {
    /*background-color: #2181c1; */
    background-color:antiquewhite;
    padding: 1em 1.2em;
    margin-bottom: 1em;
    display: inline-block;
    color: #000;
    box-shadow: 2px 2px 2px 0px rgb(0 0 0 / 15%);
    line-height: 1.5em;
    position: relative;
    min-width: 50%;
}



.rmaLogg-post-image {background-color: initial; box-shadow: none; min-width: initial;}
.rmaLogg-post-image img {border-radius: 0.75em;}
.rmaLogg-post-files {background-color: #f0f0f0; color: #000;} 
.crmHistory-logg {
    padding-top: 0.3em;
    padding-bottom: 0.3em;
    font-size: smaller;
    display:none;
    /*background-color: #f3f3f3; */
    background-color: initial !important;
    /*margin-left: 2em;*/
    margin-bottom: 0em !important;}
.crmHistory-logg span {display: initial !important; }

.crmHistory-logg .rmaLogg-post {background-color: #efefef;}
.crmHistory-logg .rmaLogg-arrow {background-color: #efefef;}


.rmaLogg-origin {background-color: #ccebff;}
.rmaLogg-origin .rmaLogg-arrow{background-color: #ccebff;}

.rmaLogg-salesperson {
    color: #727272;
    font-style: italic;
    font-size: smaller;
    margin-top: 0.5em;}

.rmaLogg-arrow {
    background: #faebd7;
    height: 14px;
    width: 14px;
    position: absolute;
    bottom: 1.5em;
    left: -7px;
    transform: rotate(45deg);
}

.loggHistoryImage {max-width: 300px; max-height: 300px;}

.avatar-container{
    height: 3em;
    width: 3em;
    overflow: hidden;
    border-radius: 200px;
    border: 1px solid #d5d5d5;
    display: inline-block;
    vertical-align: middle;
    margin-right: 2em;
    margin-bottom: 1.5em;
    flex: 0 0 3em;
    align-self: end;
}

.avatar-container img {
    width: 100%;
    min-width: 100%;
    min-height: 100%;
}

span.rmaTimestamp {
    display: block;
    font-size: smaller;
    font-weight: 700;
}

.rmaAdd-post-div {
    margin-bottom: 1em;
}

#rmaNew-post-div {
    margin-bottom: 1em;
}

div#extraFilter {
    padding: 1em 1em 1.5em 1em;
    margin: 0;
    background-color: #fff;
    border: 1px solid #d5d5d5;
    box-shadow: 2px 2px 2px 0px rgb(0 0 0 / 15%);
}

[data-deletefilter]:hover {color: red;}

.btn-light2 {
    color: #212529;
    background-color: #ededed;
    border-color: #ededed;
}

.btn-extrasmall i.ps-icon {
    font-size: 10px;
    margin: 0;
    
}
.btn-extrasmall {
    font-size: 12px;
    padding: 4px;
    margin-right: 4px;
}

.btn-extraextrasmall {
    font-size: 10px;
    margin: 2px;
    padding: 2px 5px;
}

.btn-angle {
    font-size: 10px;
    padding: 3px 0px;
    margin-right: 2px;
}

tr[data-configstatus="7"] td, tr[data-configstatus="7"] a {color: #b2b2b2;}

.calendarBox    {min-width: 14.285714285714285714285714285714% !important; 
    min-height: 160px; 
    padding: 0.8em;
    border-right: 1px solid #adadad; 
    border-bottom: 1px solid #adadad;
    background-color: #fff;
   }
.calendarWeekend { background-color: #007aca0f  !important;}
.calendarWrongMonth { background-color: #f0f0f0 !important;}
.calendarToday {border: 2px solid orange;
    box-shadow: 0px 0px 6px rgb(0 0 0 / 50%);
    z-index: 100;}
.calendarBox.crmDateCurr {
    
}
a.crmDate {
    color: #000 !important;
    font-weight: 600;
}

a.crmDate:hover {
    color: #ff0000 !important;
    font-weight: 600;
    text-decoration: underline !important;
}
.crmCalendarPost{    
    color: #2c2c2c;
    padding: 4px 8px;
    font-size: 0.85em;
    font-weight: 500;
    margin-bottom: 1px;
    cursor: pointer;
    min-height: 20px;
    background: linear-gradient(135deg, #8cef9c, #00dd65, #10a349,#8cef9c);
    background-size: 400% 400%;
    /*animation: gradient 30s ease infinite;*/
}
.crmCalendarPost:hover {background-color: #007aca; color: #fff;}
.crmCalendarPost-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.2rem 0rem;
}

.crmCalendarName {font-weight: bold;}
.crmCalendarTitle {font-style: italic;}
.crmCalendarSales {
    font-weight: bold;
    color: #000;
    margin-top: 1em;
}
.crmPost {color: #000; margin-bottom: 1em;}

.ps-icon-crm {font-size: larger; color:#cbcbcb;}
.ps-icon-yellow {color: yellow;}
.ps-icon-green {color: green;}
.ps-icon-red {color: orange;}
.ps-icon-status[data-status="1"] {color: #cbcbcb;}
.ps-icon-status[data-status="2"] {color: green;}
.ps-icon-status[data-status="3"] {color: #007aca;}
.ps-icon-status[data-status="4"] {color: red;}

.crmHistory {
    color: #000;
    /*border: 1px solid #adadad;
    border-left: 10px solid #007aca; */
    padding: 1em;
    margin: 0 0 1em 0em;
    background-color: #eeeeee;

}

.crmActionButton { margin-top:1em;}
.crmHistory.crmComplete {background-color: #e8f1f2; color: #bbbbbb; box-shadow: initial;margin-bottom: 0;}
.crmbutton-complete {color: #adadad;}

.crmTitle {
    border-bottom: 1px solid #adadad;
    margin-bottom: 0.5em;
    padding-bottom: 0.5em;
}

.crmOtherPostsContainer {
    clear: both;
    color: #000;
}
.crmOtherPostsList {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.2rem 0.5rem;
}
tr.crmTblCaption td {border-bottom: 2px solid #000; border-top: 2px solid #000; padding:1em !important; background-color: #f0f0f0 !important;}
tr.crmTblCaption td strong {font-size: larger; color: #000;}


tr.crmTblCustomer td {
    border-bottom: 0px !important;
    border-top: 0px !important;
    font-weight: 600;
}

tr.crmTblCustomer td:first-child {
    text-decoration: underline;
    color: #007aca;
}

tr td.crmTblNote {
    padding-bottom: 5em !important;
    border-top: 0px !important;
    font-style: italic;
}

.crmFlexBox{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.2rem 0rem;
}
.crmFlexBox-Rmalogg{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0rem 0rem;
}

.crmFlexWrap {flex-wrap: wrap;}

.crmOtherPostComplete{ text-decoration: line-through; color: #adadad;}
.crmOtherPostsCurrent{background-color: #ececec; font-weight: 500;}

.offcanvas-header {background-color: #007aca;}
.offcanvas-title {color: #fff;}
.crmCloseOffcanvas {display: none !important; color: #fff;}

.visualDivGroup {padding-left: 0 !important;}

.offcanvas-subHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.2rem 0rem;
    margin-bottom: 1em;
}

.ps-quickDate {
    margin: 0 0.8em 0 0;
    padding: 0.5rem 0.5rem;
    font-size: 0.7rem;
    line-height: 1;
}

.form-control {height: initial !important;}



.ps-checkbox {
    margin-left: 0;
    height:15px;
    width:15px;
}

.form-check-input.ps-medium {
    width: 3em;
    height: 1.5em;
    margin-left:0;
    cursor: pointer;
}

.form-check-input:checked {
    background-color: green !important;
}

.star {cursor: pointer; }
.star:hover {color:orange; }
.star-shine {color: orange;}

.dollar {cursor: pointer; }
.dollar:hover {color: blue; }
.dollar-shine {    color:  rgb(22 33 234 / 54%);}


.star-color {
    color: #fff;
    background: rgb(219,68,13);
    background: linear-gradient(-45deg,  #ff4100, #d8bf81, #dacc1e,  #cb4e18);
	background-size: 400% 400%;
	/*animation: gradient 15s ease infinite;*/
}

a.ps-iconbutton i, span.ps-iconbutton i {
    border-radius: 5px;
    color: #000;
     padding:5px; 
     margin-right: 5px;
}

a.ps-iconbutton:hover i, span.ps-iconbutton:hover i{
    background-color: #cfa4e0;
    border-radius: 5px;
    color: #fff;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}


.is-invalid {border-color: red !important;}

.showMobile {display: none;}


.ps-colorpicker {
    width: 33%;
    display: inline-block;
    padding: 6px 6px;
    text-align: center;
    box-sizing: border-box;
    border: 1px solid #efefef;
    font-weight: bold;
    vertical-align: initial;
    border-radius: 1em;
    cursor: pointer;
    color: #fff;
}

.ps-colorpicker:hover {
    box-shadow: inset 0 0 0 3px rgba(255,255,255,1);
    color: yellow;
}

.ps-colorpicker-chosen {
    width: 100%;
    padding: 6px 6px;
    text-align: center;
    box-sizing: border-box;
    border: 1px solid #efefef;
    font-weight: bold;
    vertical-align: initial;
    border-radius: 1em;
    cursor: pointer;
}
.ps-colorpicker-chosen[data-disabled] {cursor: default;}

.ps-colorpicker-header {
    font-size: 1.3em;
    text-transform: uppercase;
    margin-top: 1em;
}

.ps-missing-input {border:3px solid red !important;}


#contactCardContent  div.tab-pane {
    background-color: #e8f1f2 !important;
    min-height: 500px;
}

#contactCardTabs li button, ul.ps-tabs li button {
    font-size: 1.1em;
    color: #000;
    padding-left: 3em;
    padding-right: 3em;
    border-radius: 0;
    background-color: #d6e5e7;
    border-radius: 5px 5px 0px 0px;
    margin-right: 5px;
    border: 0px;
    font-weight: bold;
    font-size: small;
    text-transform: uppercase;
}
#contactCardTabs li button.active, ul.ps-tabs li button.active {background-color:#e8f1f2;  border-bottom: 0;}
div.accordion-collapse.show {
	border: 2px solid #fff;
    margin-bottom: 10px;
    overflow: hidden;    
}
.accordion-button:not(.collapsed) {margin-top: 10px;}

#contactCardContent  {   border-left: 1px solid #dee2e6;
    border-right: 1px solid #DEE3E6;
    border-bottom: 1px solid #DEE3E6;
}
#contactCardContent div.accordion {margin-bottom: 3em;}
#contactCardContent div.accordion-item {border-bottom: 1px solid #efefef !important; background-color: transparent;}
#contactCardTabs .nav-link, ul.ps-tabs button.nav-link {border-color: #e9ecef #e9ecef #e8f1f2;}

ul.ps-tabs { border-bottom: 0px; padding-left: 12px;}
ul.ps-tabs li button {background-color:#ffffff !important; color: #afafaf; border-top-left-radius: 5px !important; border-top-right-radius: 5px !important; border-right: 0px !important;}
ul.ps-tabs li button.nav-link:hover {background-color: #eeeeee !important; color: #0a58ca !important;}
ul.ps-tabs li button.active {background-color:#eeeeee !important; border-right: 1px solid #cbcbcb !important}

.drawingInfoDiv {
    max-height: 500px;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #dee2e6

}

.drawingInfoDivInner {

}

.drawingInfoDivInner img{width:100%;}


.drawingInfoInfoSquare {

}
.drawingInfoInfoSquare h5 {padding-top: 10px;}

.webquoteImageDiv {position: relative;width: 50%; padding: 5px;}
.webquoteImageDivInner {
    position: relative;
    border-radius: 0px;
    max-height: 280px;
    overflow: hidden;
    border: 1px solid #e6e6e6;
    min-height: 280px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    align-content: center;
    flex-direction: column;

}
.webquoteImageDivInner img {width: 100%; transition: transform 0.3s ease; cursor: pointer;}
.webquoteImageDivInner img:hover {transform: scale(1.1);}
.webquoteImageDivText {
    position: absolute;
    bottom: 0;
    background: #ffffff;
    width: 100%;
    padding: 0.5em;
}
.webquoteImageDivText h4 {font-size: x-small; font-weight: 600;}
.crmImagesDiv {width: 100%;display: flex;flex-wrap: wrap;}
.crmImagesDiv .webquoteImageDiv {padding: 5px; width:33%;} 
.crmImagesDiv .webquoteImageDivInner {min-height: 200px; max-height: 200px;} 
.crmImagesDiv .webquoteImageDivText {padding: 0;
    min-height: 30px;
    max-height: 30px;}
.crmImagesDiv .webquoteImageDivText h4 {    font-size: 12px;
    font-weight: 600;
    padding: 0px 12px;
    line-height: 30px;} 

div.tag-cloud-group {
    width: 31%;
    margin: 1%;
    display: inline-block;
    vertical-align: top;
}


div.tag-cloud-container {
    padding: 0.6em 0.6em;
    background-color: #efefef;
    border-radius: 5px;}

.tag-cloud {background-color: #efefef; color: #000; padding: 8px; margin: 2px; cursor: pointer;}
.tag-cloud:hover {background-color: #adadad;}
.tagSelected {background-color:#007aca; color:#fff;}
div.leadFlex{padding:0;}

.ps-keyvalues-flex {
    gap: 1em;
}

.ps-keyvalues {
    padding: 2em !important;
    color: #fff;
    background-color: #3F51B5;
    text-align: center;
    cursor: pointer;
    min-width: 220px;
}

.ps-keyvalues  span.keyname {
    display: block;
    color: #fff;
    font-size: 1.2em;
    font-weight: bold;
}

.ps-keyvalues span.keyvalue{
    display: block;
    font-size: 1.7em;
}

.keyvalue_small {
    display: block;
    font-size: 0.8em;
}


@media (min-width: 992px) {
    #calcInput {
        position: sticky;
        top: 0px;
    }
}

@media (max-width: 768px) { 
    .crmCloseOffcanvas {display: block !important;}
    .crmCardOffcanvas {display: none !important;}

    .rmaLogg-post {overflow-x: scroll;}
    .crmFlexBox { flex-direction: column; align-items: normal;}
    .crmFlexBox button {margin-top: 0.3em !important;}
    .crmFlexBox i {
        font-size: 1.3em;
        padding: 0.6em;
        margin: 0;
    }
    .hideMobile {display: none;}
    .showMobile {display: initial;}
    .createRMA-Div div[class^="col"] {padding: 0.2em 1em !important}

    .flexBoxIcon {flex-direction: row;}

    .noPaddingMobile {padding-left: 1rem !important; padding-right: 1rem !important;}
}




















nav.navbar-psplanering {background-color: #414141 !important;}
.navbar-dark .navbar-brand {color: #F8E08E;}
.grey-navbar {background-color: #EAE8E1  !important;}


.list-group-item:hover {background-color: #EAE8E1;font-weight: bold;}

/*.ps-table-light tr th {background-color: #EEE6F3 !important; color: #000;}*/
.ps-table-light tbody tr:hover td {background-color: #EAE8E1 !important; color: #000 !important;}
.ps-table-light tbody tr:hover td a {color: #000 !important; font-weight: bold !important;}

/*.ps-table-bglight tr th {background-color: #EEE6F3 !important; color: #000;}*/
.ps-table-border-right {border-right: 1px solid #dee2e6;}
.ps-table-right {text-align: right;}

.header-color {
    background: linear-gradient(15deg, #7d7c7c, #414141, #414141, #bababb);
    background-size: 400% 400%;
    /*animation: gradient 30s ease infinite;*/
    color: #fff !important;
}

.header-color th {border-bottom: 0px;}

div.accordion-item[data-leadtype='poolconfig'] .accordion-button:not(.collapsed) {background-color: #414141 !important; color: #fff !important;}

.accordion-item {border: 0px !important; box-shadow: initial !important;}
.accordion-item h3 button {font-size: 13px !important;}

.accordion h4{     padding: 0.2em 0.7em;
    font-size: 1.5em;
	margin-bottom: 0;
    border: 0px;
}
    
div.accordion-item.star-color button.showQuote {
    border-left: 10px solid #ffc107;
}
div.accordion-item.dollar-color button.showQuote {
    border-left: 10px solid #a7a4e0;
}
    
div.webquote_lead_pricebanner {
display: flex;
    justify-content: flex-start;
    gap: 1em;
    background-color: #FFF;
    padding: 0.5em 1em;
    padding-top: calc(0.5em + 5px);
}

div.webquote_lead_price {
    width: auto;
    position: relative;
    font-size: 1.75em;
    font-weight: 600;
    color: #308200;
    white-space: nowrap;
}

div.webquote_lead_price:before {
    font-size: 11px;
    position: absolute;
    top: -8px;
    color: #000;
}

div.webquote_lead_quotevalue:before {content: "OFFERERAT PRIS";}
div.webquote_lead_quotetotal:before {content: "ORDINARIE PRIS";}
div.webquote_lead_quotediscount:before {content: "RABATT";}


.lead-canceled div {color: #adadad;}

.btn-success {
    color: #fff;
    background-color: #a7a4e0;
    border-color: #a7a4e0;
}

.accordion-header {background-color: #414141; border-radius: 0.25rem;}

.crmComplete {background-color: initial !important; font-size: 0.9em;}
.crmComplete button, .crmComplete i {font-size: 0.9em !important;}
.crmFollowUp {
    /*background: linear-gradient(181deg, rgb(209 210 212) 0%, rgb(184 170 234) -7%, rgb(63 81 181 / 90%) 100%) !important;*/
    background: linear-gradient(-45deg, #ffffff, #1621ea, #3b408b, #6e75f3);
    background-size: 400% 400%;
    /*animation: gradient 15s ease infinite;*/
    color: #fff;    
}

#imageUploadDisplay {
    width: 100%;
    height: auto;
    border: 0px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
#imageUploadDisplay img {width: 100%;}

.crmFollowUp button {background-color: #fff; color: #000;}

.starSync-icon { cursor: pointer;}
.starSync-icon:hover {color: orangered;}

.ps-icon-leadlist {color: #ffffff;    font-size: 1.1em;}
button.collapsed i.ps-icon-leadlist {color: #414141;}
#quoteInfoDiv .accordion-body {padding: 0 0 2em 0;}

tr.ps-zettle-selectedrow td {background-color: #eae8e1  !important;}

tr.ps-zettle-detailrow {
    background-color: #eae8e1  !important;
    font-size: smaller;
    color: #000;
    display:none;
}

tr.ps-zettle-daterow td {vertical-align: middle;}
td.zettle-col-sum {background-color: #efefef;}
tr.ps-zettle-weekendrow td {background-color: #efefef;}
.table-zettle th, .table-zettle td {border-color: #FFF; font-size: smaller;}

.ps-crm-checklist {
    height: 17px;
    width: 17px;
    position: relative;
    background-color: #ededed;
}
.ps-crm-checklist:checked {background-color: #32ca32 !important;}
.table-crm-checklist {background-color: #fff; border-radius: 5px;}
.table-crm-checklist tr:first-child td {border-top: 0px;}

.crmFlexBox-FollowUp {justify-content: flex-start; color: #000; background-color: #fff; padding:0.5em; gap:10px; box-shadow: 1px 1px 0px rgb(199 199 199); border-radius: 5px; margin-bottom: 5px;}
.crmFlexBox-FollowUp .FollowUp-crmDate {max-width:135px; border: 0px! important; border-right: 1px solid #dee2e6 !important; border-radius: 0px !important;}
.FollowUp-passedDate input {color: red !important;}
.FollowUp-passedDate div {color: red !important;}
button.followupButton {font-size: xx-small; padding: 3px 5px; max-height: 21px;}
button.FollowUp-completed {background-color: #32ca32; color: #fff;}
.RowFollowUpCompleted select, .RowFollowUpCompleted div.FollowUp-crmTitle {text-decoration: line-through;}

.crmCaldenderPostComplete {
    background: #efefef !important;
    color: #9b9b9b;
    border: 0;
    font-size: 9px;
}

.crmCaldenderPostComplete:hover {
    background: #c8c8c8 !important;
    color: #000;
    
}


@media print {
    tr.crmTblCaption  td {border-bottom: 2px solid #000 !important;}
    tr.crmTblCaption  td strong {color: #000 !important;}
    a{text-decoration: none;}
 }