@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');


:root {
    --el-color-primary: #4CAF50;
    --el-color-primary-light-3: #6FCF70;
    --el-color-primary-light-5: #8FEF90;
    --el-color-primary-light-7: #B0FFB0;
    --el-color-primary-light-8: #C8FFC8;
    --el-color-primary-light-9: #E0FFE0;
    --el-color-primary-dark-2: #3B8C3F;
    --el-color-success: #409EFF;
    --el-color-info: #868686;
    --el-font-size-base: 17px;
    --el-font-size-extra-small: 14px
}

.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
    background-color: transparent;
}
@media (max-width: 768px) {
    :root {
        --el-font-size-base: 16px;
        --el-font-size-extra-small: 13px
    }
}

[v-cloak] {
  display: none;
}
  
body {
    margin: 0;
    padding: 0;
    font-family: Quicksand, Helvetica, sans-serif
}

body.busy {
    visibility: hidden

}

.el-menu a, .el-card a, a.nounderline, .el-form a {
    text-decoration: none
}
.bkg a {
    text-decoration-color: #fff !important;
    text-decoration-line: underline;
    font-weight: 400
}


h1, h2, h3, h4, .bold {
    font-weight: 600
}

h2.table-header {
    background-color: #f2f4fe;
    padding: 5px 10px
}

ul, li {
    margin: 0;
    padding: 0;
    margin-bottom: 5px
}

p {
    line-height: 24px;
}

li { list-style: none }

a {
    text-underline-offset: 4px;
}

div.layout {
    width: 1400px;
    margin: 0 auto;
}

@media (max-width: 1480px) {
    div.layout {
        width: 100%;
        padding: 20px;
        box-sizing: border-box
    }
}

.bkg {
    background-color: #4CAF50;
    color: #fff;
}

.primary {
    color: #4CAF50;
}

.el-divider--horizontal {
    margin: 10px !important
}

.el-header.main {
    height: 90px; 
    background: #fff; 
    box-sizing: content-box; 
    border-bottom: 1px solid #dcdfe6
}

.logo, .logo-menu {
    width: 150px;
    min-width: 130px;
    margin-left: 15px
    /* todo: align center */
}


@media (max-width: 767px) {
    .el-header.main {
        height: auto;
        --el-header-padding: 0px
    }
    .logo {
        width: 130px;
        margin-left: 0px;
    }
    .el-row.carousel {
        flex-direction: column-reverse;
    }
    .sm-center {
        text-align: center
    }
 
}

.el-aside.main {
    background: #fff;
    position: absolute;
    top: 0;
    height: 100%;
    z-index: 200;
    overflow: hidden;
    border-right: 1px solid #dcdfe6; 
    opacity: 0.92
}
.el-menu.main {
    border-right: 0px
}

ul.el-menu li.el-menu-item, div.el-sub-menu__title {
    font-weight: 600;
    color:  #4CAF50 !important;
}

ul.el-menu--horizontal li.el-menu-item {
    padding: 0 !important
}

.el-main {
    padding: 0 !important
}

.el-col.head, div.head {
    border-bottom: 1px solid #dcdfe6; padding: 80px 10px
}

.el-col.head2, div.head2 {
    padding: 60px 10px 30px 10px
}

.el-menu--vertical {
    border: none
}

.full-width { width: 100% }
.flex { display: flex }
.flex-wrap { flex-wrap: wrap }
.flex-column { flex-direction: column }
.space-between { justify-content: space-between }
.align-left { text-align: left; align-self: unset !important }
.align-start { align-items: flex-start }
.align-center { align-items: center }

.lh10 { line-height: 1em }
.xs { font-size: 0.7em }
.s { font-size: 0.9em }
.base { font-size: 1em }
.l { font-size: 1.2em }
.xl { font-size: 1.4em }
.xxl { font-size: 1.6em }
.xxxl { font-size: 2.3em }
.light { font-weight: normal }
.small-caps { font-variant: small-caps }

@media (max-width: 1200px) {
    .xl   { font-size: 1.2em; }
     .l    { font-size: 0.9em; }
      .s   { font-size: 0.7em; }
}

@media (max-width: 820px) {
    .s { font-size: 0.9em }
    .l { font-size: 1.2em }
    .xl { font-size: 1.4em }
}

.white { color: #fff !important }

.mb0 { margin-bottom: 0 !important}
.mb1 { margin-bottom: 5px !important}
.mb2 { margin-bottom: 10px !important}
.mb3 { margin-bottom: 20px !important}
.mb4 { margin-bottom: 30px !important}
.mb5 { margin-bottom: 50px !important}
.mb6 { margin-bottom: 60px !important}
.mb7 { margin-bottom: 80px !important}
.mb8 { margin-bottom: 100px !important}

.mt0 { margin-top: 0 !important}
.mt1 { margin-top: 5px !important}
.mt2 { margin-top: 10px !important}
.mt3 { margin-top: 20px !important}
.mt4 { margin-top: 30px !important}
.mt5 { margin-top: 50px !important}
.mt6 { margin-top: 60px !important}

.mr0 { margin-right: 0 !important}
.mr1 { margin-right: 5px !important}
.mr2 { margin-right: 10px !important}
.mr3 { margin-right: 20px !important}
.mr4 { margin-right: 30px !important}
.mr5 { margin-right: 40px !important}
.mr6 { margin-right: 50px !important}

.ml0 { margin-left: 0 !important }
.ml1 { margin-left: 5px !important }
.ml2 { margin-left: 10px !important }
.ml3 { margin-left: 20px !important }
.ml4 { margin-left: 30px !important }
.ml5 { margin-left: 40px !important }
.ml6 { margin-left: 50px !important }

.pt6 { padding-top: 50px !important }
.pt7 { padding-top: 80px !important }
.pb0 { padding-bottom: 0px !important }
.pb2 { padding-bottom: 10px !important }
.pb3 { padding-bottom: 20px !important }
.pb4 { padding-bottom: 30px !important }
.pb5 { padding-bottom: 40px !important }
.pb6 { padding-bottom: 50px !important }
.pb7 { padding-bottom: 80px !important }

.bd0 { border: none !important }

.el-menu--horizontal {
    --el-menu-horizontal-height: 90px;
}

.el-menu--horizontal.el-menu {
    border-bottom: none
}

div.bpf p {
    line-height: 1.4em;
    margin: 0;
    padding: 0
}

.row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px
}

.el-card {
    --el-card-border-radius: 8px
}

.el-card.contact {
    padding: 20px 30px;
    width: 80%;
    max-width: 550px
}

.row .el-card {
    flex: 1 1 30%
}

.row .el-card.productlist {
    flex: 1 1 20%;
    min-width: 330px;
    max-width: 340px
}

.row .el-card.model {
    flex: 1 0 calc(20% - 20px);
    min-width: 120px;
     max-width: 210px;
     
}

.row .el-card.brand {
    flex: 1 1 20%; 
    min-width: 320px;
    background-color: #f2f4fe;
    border: none
}

@media (max-width: 768px) {
    .row .el-card.brand {
       flex: 1 1 100%;
       min-width: unset;
       max-width: unset;
    }   
    .row .el-card.model {
        flex: 1 0 calc(25% - 20px);
        max-width: calc(50% - 20px)
    }
}

.row .el-card.family {
    flex: 1 1 30%; 
    min-width: 250px; 
    background-color: #f2f4fe
}

.row .el-card.bpf {
    flex: 1 1 20%; 
    background-color: #f2f4fe
}

.row .el-card:hover {
    cursor: pointer
}

.el-card.family.active {
    border: 1px dashed var(--el-color-primary-dark-2);
}

.el-card.brand.disabled {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(100%)
}

div.services .el-card {
    background:  #f2f4fe;
    border: none
}

div.services .el-card .el-card__body{
   padding: 0 !important
}

.el-card.model .el-card__body{
    padding: unset;
    padding-bottom: 10px
 }

/*div.services .el-card.half {
    height: 140px
}*/

.el-radio-group.filters {
    gap: 20px;
    justify-content: center
}

.el-radio-group.filters span.el-radio-button__inner {
    border-radius: 18px;
    border: 1px solid var(--el-border-color);
    padding: 10px 18px;
}
.el-radio-button__original-radio:not(:checked) + .el-radio-button__inner {
    background-color: #f2f4fe;
}

.el-radio-group.filters .el-radio-button__original-radio:checked+.el-radio-button__inner
{
    box-shadow: none !important
}
.el-segmented--large .el-segmented__item
{
    padding: 4px 18px
}

.colors .el-segmented {
    --el-border-radius-base: 16px;
    --el-segmented-item-selected-bg-color: unset;
    background: unset
}

.colors .el-segmented__group {
    align-items: center
}

.colors .el-segmented__item {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    padding: 0;
    margin: 0 10px;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center
  }

.colors .el-segmented__item-label {
    display: flex;
    justify-content: center
}

.colors .el-segmented__item.is-selected {
    border: 2px solid #4CAF50;
    box-shadow: 0 0 0 2px white
}

.el-image.family img {
    height: 70px;
}

@media (max-width: 768px) {
    .el-image.family img {
        max-height: 70px;
        height: auto;
    }
}

figure.color {
    position: relative;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    margin: 0;
    padding: 0
}

figure.color.small {
    width: 13px;
    height: 13px;
    margin-right: 4px;
    border: 1px solid #333
}

figure.color.wit
{
    border: 1px solid #333
}

span.unavailable, p.unavailable {
    color: var(--el-segmented-item-disabled-color);
}

figure.color.unavailable::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 2px;
        background-color: #fff; 
        transform: translate(-50%, -50%) rotate(-45deg);
        top: 50%;
        left: 50%;
        pointer-events: none
}

a.menu {
    width: 100%;
    height: 100%;
    color: inherit; 
    display: flex;
    align-items: center;
}

.el-menu--horizontal a.menu {
    padding: 0 20px
}
.el-menu--vertical a.vertical-right {
    justify-content: right
}   

.el-calendar-table .el-calendar-day { padding: 0px }
.el-calendar-table td p {
    box-sizing: border-box
}

.el-calendar-table td p.is-restricted, .is-past {
   
    color: var(--el-color-info-light-5) !important;
    background: var(--el-color-info-light-9);
    cursor: not-allowed;
    pointer-events: none;
}

div.el-calendar-day { height: auto !important }

.el-calendar-table td.is-selected {
    background-color: var(--el-color-primary-light-9);
    border: 1px dashed var(--el-color-primary);
}
.el-calendar-table td p.is-active {
    background-color: var(--el-color-primary-light-9);
    border: 1px dashed var(--el-color-primary);
    padding: 7px !important
}


.el-calendar-table td p.is-past {
    color: var(--el-color-info);
    background: var(--el-color-info-light-9)
}



@media only screen and (max-width:767px){.hidden-xs-only{display:none!important}}@media only screen and (min-width:768px){.hidden-sm-and-up{display:none!important}}@media only screen and (min-width:768px) and (max-width:991px){.hidden-sm-only{display:none!important}}@media only screen and (max-width:991px){.hidden-sm-and-down{display:none!important}}@media only screen and (min-width:992px){.hidden-md-and-up{display:none!important}}@media only screen and (min-width:992px) and (max-width:1199px){.hidden-md-only{display:none!important}}@media only screen and (max-width:1199px){.hidden-md-and-down{display:none!important}}@media only screen and (min-width:1200px){.hidden-lg-and-up{display:none!important}}@media only screen and (min-width:1200px) and (max-width:1919px){.hidden-lg-only{display:none!important}}@media only screen and (max-width:1919px){.hidden-lg-and-down{display:none!important}}@media only screen and (min-width:1920px){.hidden-xl-only{display:none!important}}