/* global */

:root{
    --primary:#EBEBEB;
    --secondary:#1A1A1A; 
    --grey1:#BABABA;
    --grey2:#404040;
    --grey3:#707070;
    --grey4:#BABABA;
    --excel-green:#99CC33;
    --light-green:#E4EBE2;
    --dark-green:#5D8B00;
    --label-popular:#0080B9;
    --label-endoflife:#FF7F00;
    --label-promotion:#8C4AC4;
    --label-new:#2FAF00;
    --border-radius-small:10px;
    --border-radius-large:12px;
    --border:thin solid var(--grey1);
}

html {
  scroll-behavior: smooth;
}

.exc-button-white, .exc-button-dark:hover{
    border-radius:var(--border-radius-small);
    background: white;
    padding:3px 14px;
    border:var(--border);
    font-weight: 300;
    text-align: center;
    color: var(--secondary);
    transition: all 0.2s ease-in-out;
}
.exc-button-dark, .exc-button-white:hover, .exc-button-grey:hover{
    border-radius:var(--border-radius-small);
    background: var(--grey2);
    padding:3px 14px;
    border:var(--border);
    font-weight: 300;
    text-align: center;
    color: var(--primary);
    transition: all 0.2s ease-in-out;
}

.exc-button-grey{
    border-radius:var(--border-radius-small);
    background: var(--primary);
    padding:3px 14px;
    border:var(--border);
    font-weight: 300;
    text-align: center;
    color: var(--secondary);
    transition: all 0.2s ease-in-out;
}

.exc-icon-bs{
    margin-right:10px;
    color:var(--grey2);
    width:16px;
    height:auto;
}

.exc-button-bg{
    border-radius:var(--border-radius-small);
    background: black;
    padding:6px 30px 12px 14px;
    font-weight: 300;
    color: white;
    transition: opacity 0.2s ease-in-out;
    line-height: initial;
    width:100%;
    text-align: left;
}

.exc-button-bg i{
    font-size:22px;
    margin-right:18px;
    margin-left: 8px;
    position:relative;
    top:2px;
}

.exc-round-corners-small{
    border-radius:var(--border-radius-small);
    overflow: hidden;
}

.exc-button-bg-image-1{
    background-image: url("excel_web_images/exc_btn_bg1.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.exc-button-bg-image-2{
    background-image: url("excel_web_images/exc_btn_bg2.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.exc-button-bg-image-3{
    background-image: url("excel_web_images/exc_btn_bg3.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.exc-button-bg-image-4{
    background-image: url("excel_web_images/exc_btn_bg4.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.exc-button-bg-image-5{
    background-image: url("excel_web_images/exc_btn_bg5.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.exc-button-bg-image-6{
    background-image: url("excel_web_images/exc_btn_bg6.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.exc-button-bg-light{
    background-color: rgba(0,255,235,0.15);
    background-blend-mode: overlay;
}
.exc-button-bg-dark{
    background-color: rgba(0,255,235,0);
    background-blend-mode: normal;
}

.exc-link-arrow-icon-light-small::after{
    content:"";
    width:12px;
    height:12px;
    float:right;
    position: relative;
    right:-16px;
    background-image: url("excel_web_images/arrow_light.svg");
    background-repeat: no-repeat;
    background-size: contain;
}

.exc-link-arrow-icon-dark-small::after{
    content:"";
    width:12px;
    height:12px;
    float:right;
    position: relative;
    right:-16px;
    background-image: url("excel_web_images/arrow_dark.svg");
    background-repeat: no-repeat;
    background-size: contain;
}

.exc-link-arrow-icon-light-large::after{
    content:"";
    width:18px;
    height:18px;
    float:right;
    position: relative;
    right:-16px;
    background-image: url("excel_web_images/arrow_light.svg");
    background-repeat: no-repeat;
    background-size: contain;
}

.exc-link-arrow-icon-dark-large::after{
    content:"";
    width:18px;
    height:18px;
    float:right;
    position: relative;
    right:-16px;
    background-image: url("excel_web_images/arrow_dark.svg");
    background-repeat: no-repeat;
    background-size: contain;
}

.exc-card-link{
    border-top:4px solid transparent;
    border-bottom:4px solid transparent;
}
.exc-card-link:hover{
    border-top:4px solid transparent;
    border-bottom:4px solid var(--excel-green) !important;
}


@media screen and (max-width: 639px) {
    .exc-link-arrow-icon-dark-large::after, .exc-link-arrow-icon-light-large::after{
        display:none;
    }
}


/* elements 1 */
.exc-disabled{
    display:none;
}

/* product card */

.exc-product-card{
    border-radius: 12px;
    background:#ffffff;
    width:100%;
    padding:8px;
}

.exc-product-card .exc-prd-image, .exc-prd-image, .exc-white-frame{
    border:var(--border);
    border-radius: 12px;
    overflow:hidden;
    padding:15px;
    display:block;
    background: white;
}

.exc-product-card .exc-prd-image img{
    width:100%;
    height:auto;
}

.exc-product-card .exc-prd-label{
    display:block;
    width:22px;
    padding-top:12px !important;
}

.exc-product-card .exc-prd-label img{
    width:24px;
    height:auto;
}

.exc-product-card .exc-prd-icons-wrapper{
    text-align: right;
    display: block !important;
}

.exc-product-card .exc-tags-bar, .exc-product-card .exc-prd-name-bar, .exc-product-card .exc-prd-price-bar, .exc-product-card .exc-prd-card-desc, .exc-product-card .exc-prd-card-cibse, .exc-product-card .exc-prd-footer{
    padding:6px 14px;
}

.exc-product-card .exc-tags-bar a{
    color:var(--secondary);
    background:var(--light-green);
    padding:2px 6px;
    font-size:12px;
    font-weight:400;
    text-transform: uppercase;
    border:1px solid var(--light-green);
    border-radius:4px;
    transition: background 0.2s ease-in-out, border 0.2s ease-in-out;
    white-space: nowrap;
}

.exc-product-card .exc-tags-bar a:hover{
    background:white;
    border:1px solid var(--secondary);
}

.exc-product-card .exc-partno{
    color:var(--grey3) !important;
    font-size:14px;
    font-weight:400;
    padding-bottom:0px;
    margin-top:10px !important;
}

.exc-product-card .exc-partno::before{
    font-weight:300;
    content:"Part Code: ";
}

.exc-product-card .exc-partname{
    color:var(--secondary) !important;
    font-size:16px;
    font-weight:400;
    padding-top:4px;
    line-height:20px;
}

.exc-product-card .exc-prd-price-bar{
    display:flex;
}

.exc-product-card .exc-stock{
    color:var(--grey3) !important;
    font-size:14px;
    font-weight:300;
    padding-bottom:0px;
    text-align: right;
    widows: 100%;
}

.exc-product-card .exc-stock::before{
    content:"in stock: ";
}

.exc-product-card .exc-price{
    color:var(--secondary) !important;
    font-size:22px;
    font-weight:300;
    padding-top:4px;
    line-height:22px;
}

.exc-product-card .exc-prd-card-desc{
    padding-top:0px;
    margin-top:0px;
}

.exc-product-card .exc-prd-card-desc-body, .exc-product-card .el-content{
    color:var(--secondary) !important;
    font-size:12px;
    font-weight:300;
    padding-top:12px;
    margin-top:8px!important;
    line-height:18px;
    border-top:thin solid var(--grey1);
    column-gap:20px;
    *width:100%;
}

.exc-product-card .exc-prd-card-cibse-body{
    color:var(--secondary) !important;
    font-size:12px;
    font-weight:400;
}

.exc-product-card .exc-prd-card-cibse-body::before, .exc-feature::before, .exj-feature .el-title::before{
    content:"/";
    font-weight:700;
    color:var(--excel-green);
    margin-right:10px;
}

.exc-product-card .exc-prd-footer{
    color:var(--secondary);
    margin-top:14px !important;
}

.exc-product-card .exc-prd-footer-compare{
    position:absolute;
    right:-20px;
    bottom:-12px;
    text-align: right;
}

.exj-product-card{
    background:#ffffff;
}

.exj-product-card .el-content{
    color:var(--secondary) !important;
    font-size:12px;
    font-weight:300;
    padding-top:12px;
    line-height:18px;
    *border-top:thin solid var(--grey1);
    column-gap:20px;
    width:100%;
}

.exj-link-text, .exj-card-light .el-link{
    text-transform:uppercase;
    color:var(--secondary);
    font-weight:500;
    font-size:14px;
    padding-right:30px;
    background-image: url("../../../excel_web_images/generic/cta.svg"); /* catalog */
    background-repeat: no-repeat;
    background-position: calc(100% + 20px) center;
    transition: .2s ease-out;
    transition-property: background-position, color;
}

.exj-link-text:hover, .exj-card-light .el-link:hover{
    color:var(--grey3) !important;
    background-position: calc(100% + 30px) center;
}

.exj-card-dark .el-link, .exj-link{
    text-transform:uppercase;
    color:var(--primary) !important;
    font-weight:500;
    font-size:14px;
    padding-right:30px;
    background-image: url("../../../excel_web_images/generic/cta.svg"); /* catalog */
    background-repeat: no-repeat;
    background-position: calc(100% + 20px) center;
    transition: .2s ease-out;
    transition-property: background-position, color;
}

.exj-card-dark .el-link:hover, .exj-link:hover{
    background-position: calc(100% + 30px) center;
}

.uk-grid-divider::before{
    border-left:1px solid red !important;
}

.exc-prd-icons img{
    width:12px;
    height:24px;
}

.exc-prd-icons, .exc-prd-icons a{
    margin-top:12px;
    width:24px;
    height:24px;
    mask-size: 24px 24px;
    mask-repeat: no-repeat;
    mask-position:top right;
    opacity:1;
    transition: opacity .2s ease-out;
    justify-self: end;
}

.exc-prd-icons:hover, .exc-prd-icons a:hover{
    opacity:0.5;
}


.exc-prd-icons-light{
    background-color: var(--primary);
}

.exc-prd-icons-dark{
    background-color: var(--grey3);
    opacity:0.7;
}

.exc-icon-wishlist{
    -webkit-mask-image: url("../../../excel_web_images/generic/product_wishlist.svg");
    mask-image: url("../../../excel_web_images/generic/product_wishlist.svg");
}

.exc-icon-configurable{
    margin-right:2px;
    -webkit-mask-image: url("../../../excel_web_images/generic/product_configurable.svg");
    mask-image: url("../../../excel_web_images/generic/product_configurable.svg");
}

/* end of elements 1 */


/* elements 2 */

.exc-prd-image-thumb{
    padding:5px !important;
    width:100%;
    height:auto;
}

.exc-label{
    background:white;
    border-style: solid;
    border-width: thin;
    font-weight:400;
    text-transform: uppercase;
    border-radius: var(--border-radius-small);
    width:120px;
    text-align: center;
    letter-spacing: 1.4px;
    padding:3px;
}

.exc-label-popular{
    border-color: var(--label-popular);
    color: var(--label-popular);
}
.exc-label-endoflife{
    border-color: var(--label-endoflife);
    color: var(--label-endoflife);
}
.exc-label-promotion{
    border-color: var(--label-promotion);
    color: var(--label-promotion);
}
.exc-label-new{
    border-color: var(--label-new);
    color: var(--label-new);
}

.exc-features-frame{
    border:var(--border);
    border-radius:var(--border-radius-large);
}

.exc-bottom-line{
    border-bottom:var(--border);
}

.exc-feature{
    padding-left:20px;
}
.exc-feature::before{
    margin-left:-19px;
}

.exc-icon-info i{
    color:#003072;
    font-size:24px;
}

.exc-icon-info {
    width:24px;
    height:24px;
    position:relative;
    left:calc(100% - 18px);
}

.exc-tab{
    border-bottom-width: 4px;
    border-bottom-style: solid;
    border-bottom-color: transparent;
    padding-bottom:10px;
    margin-bottom:-9px;
}

.exc-tab-active{
    border-bottom-color: var(--excel-green) !important;
}

.exc-specs-tab-row{
    background:rgba(255,255,255,0.6);
    margin-top:6px;
}

.exc-tab-docs-cats a:hover, .exc-docs-cat-active{
    border-right:4px solid var(--excel-green);
}

.exc-tab-docs-files a:hover{
    background:rgba(255,255,255,0.4);
}

.exc-tab-docs-files a{
    line-height:initial;
    padding-top:18px;
    padding-left:65px;
}

.exc-pdf::before{
    content:" ";
    width:50px;
    height:32px;
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    background-image: url("excel_web_images/icon-pdf.svg");
    vertical-align: middle;
    margin-top:-6px;
    margin-left:-50px
}
.exc-cad::before{
    content:" ";
    width:50px;
    height:32px;
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    background-image: url("excel_web_images/icon-cad.svg");
    vertical-align: middle;
    margin-top:-6px;
    margin-left:-50px
}

.exc-tab-docs-lang a{
    text-decoration: none;
    opacity:1;
}

.exc-tab-docs-lang a:hover{
    text-decoration: none;
    opacity:0.6;
}

.exc-qr{
    border:var(--border);
    aspect-ratio:1/1;
    border-radius:var(--border-radius-small);
    overflow:hidden;
}

.exc-qr-download{
    text-transform: uppercase;
}

.exc-qr-download i{
    font-size:24px;
    margin-left:10px;
    font-weight:700;
    transform: scaleY(-1);
    display:inline-block;
}

.exc-prd-small{
    background: white;
    border-radius:var(--border-radius-small);
}

.exc-prd-small-img{
    padding:7px;
    border:var(--border);
    background: white;
    border-radius:var(--border-radius-small);
    aspect-ratio:1/1;
}


/* end of elements 2 */




/*  joomla only */
/*
.tm-page {
    border-bottom: 6px solid #ebebeb;
    border-image: linear-gradient(50deg, #185800 0%, #99CC33 100%) 1;
}
*/

.uk-dark .uk-card-default{
    background-color:white;
}

.uk-dark .exj-panel-inverse .el-content, .uk-dark .exj-panel-inverse svg{
    color:var(--primary) !important;
}

.exj-panel-inverse .uk-text-emphasis{
    color:var(--excel-green) !important;
}

.exj-panel-inverse .el-content, .exj-panel-inverse svg, .exj-panel-inverse .el-meta{
    color:var(--primary) !important;
}



.exj-card-dark-arrow-top .uk-icon{
    padding-top: 10px;
    padding-right: 10px;
}

.exj-meta-border .el-meta{
    font-weight: 500;
    text-transform: uppercase;
    font-size:9px;
    border:1px solid var(--grey3);
    display: inline-block;
    padding:3px 8px 4px 8px;
    border-radius:5px;
    margin-bottom:10px;
}

.uk-navbar-dropdown{
    background:var(--primary);
    color:var(--secondary);
    border-bottom-width: 4px;
}

.uk-navbar-dropdown .uk-tab a {
    color: var(--secondary);
    border-bottom: 4px solid transparent;
    padding-right:0px;
    padding-left:0px;
    margin-right:10px;
}

.uk-navbar-dropdown .uk-tab>.uk-active>a {
    border-color: var(--excel-green);
}


.uk-navbar-dropdown .fs-switcher-nav .fs-switcher-nav-tab .uk-tab{
    color:red !important;
}

.hr{
    border-top:thin solid var(--grey4);
}

.uk-navbar-dropdown .el-item .el-title a{
    color:var(--secondary);
    text-transform:uppercase;
    font-weight:500;
    font-size:14px;
    opacity:1;
}


.uk-navbar-nav {
    margin-left:30px;
}

.uk-navbar-nav li{
    height:30px;
}

.uk-navbar-nav li a {
    border-top:2px solid var(--excel-green);
    width:auto;
    min-height:0px !important;
    padding:0px;
    font-size:12px;
    margin-top:35px;

}

.uk-navbar-nav > li.uk-active > a::before{
    display:none;
}


.uk-navbar-dropdown .el-item .el-title a:hover{
    opacity:0.5;
}

.exj-arrow-small-light .uk-icon{
    position: absolute;
    right: 12px;
    top: 8px;
    color:var(--primary) !important;
    width:18px;
    height:18px;
}



.exj-for-before .el-title:before{
    content:"For";
    padding-right:5px;
    float:left;
    display:block;
    color:var(--primary);
    font-weight:300;
}

.uk-card-overlay{
    background: #707070;
    background: linear-gradient(50deg, rgba(64, 64, 64, 0.8) 0%, rgba(64, 64, 64, 0.7) 100%);
    backdrop-filter:blur(30px) opacity(1);
}



#footer{
    background:#000000 !important;
}

.exj-hero-margins{
    padding:init;
}

@media screen and (min-width: 1536px) {
    .exj-hero-margins{
        padding:0px 120px;
    }
}

.exj-text-small{
    padding-bottom:10px;
}

.uk-h3 p{
margin:0px 0px 0px 0px !important;
}

.exj-card-dark-arrow .uk-icon{
    margin-top: -2px;
    position: absolute;
    top: 0;
    right: 0;
}

.exj-card-block1{
    height:360px;
}

.exj-card-block1 .uk-text-meta, .exj-card-dark-arrow .uk-text-meta{
    max-width:250px;
}

.uk-card-default .uk-h3{
    font-weight:300;
}

.uk-card-default .uk-h1, .uk-card-default .uk-h2, .uk-card-default .uk-h3, .uk-card-default .uk-h4, .uk-card-default .uk-h5, .uk-card-default .uk-h6{
    color:var(--secondary);
}

.exj-footer-link-parent .el-link{
    color:var(--primary);
    margin-bottom:7px;
}

.exj-footer-link-parent .el-link:hover{
    color:var(--excel-green);
}


.exj-footer-link-child .el-link{
    color:var(--grey4);
    font-weight:300;
    font-size:14px;
}

.exj-inner-padding{
    padding:10px 10px 0px 10px !important;
}

.exj-inner-padding-all{
    padding:10px 10px 4px 10px !important;
}

.exj-grid-stats .uk-grid > *:nth-child(1) {
    padding:20px 30px 20px 0px;
    border-right:1px solid var(--grey3);
    border-bottom:1px solid var(--grey3);
}
.exj-grid-stats .uk-grid > *:nth-child(2) {
    padding:20px 30px 20px 30px;
    border-right:1px solid var(--grey3);
    border-bottom:1px solid var(--grey3);
}
.exj-grid-stats .uk-grid > *:nth-child(3) {
    padding:20px 30px 20px 30px;
    border-right:0px solid var(--grey3);
    border-bottom:1px solid var(--grey3);
}
.exj-grid-stats .uk-grid > *:nth-child(4) {
    padding:20px 30px 20px 0px;
    border-right:1px solid var(--grey3);
    border-bottom:0px solid var(--grey3);
}
.exj-grid-stats .uk-grid > *:nth-child(5) {
    padding:20px 30px 20px 30px;
    border-right:1px solid var(--grey3);
    border-bottom:0px solid var(--grey3);
}
.exj-grid-stats .uk-grid > *:nth-child(6) {
    padding:20px 30px 20px 30px;
    border-right:0px solid var(--grey3);
    border-bottom:0px solid var(--grey3);
}

.exj-element-scale .el-item, .exj-col-scale{
    transform: scale(1);
    transition: transform 0.2s ease-in-out;
}

.exj-element-scale .el-item:hover, .exj-col-scale:hover{
    transform: scale(1.015);
}


@media screen and (max-width: 639px) {
    .exj-card-block1{
        height:260px;
    }
    
    .exj-grid-stats .uk-grid > *:nth-child(1) {
        padding:20px 30px 20px 0px;
        border-right:1px solid var(--grey3);
        border-bottom:1px solid var(--grey3);
    }
    .exj-grid-stats .uk-grid > *:nth-child(2) {
        padding:20px 30px 20px 30px;
        border-right:0px solid var(--grey3);
        border-bottom:1px solid var(--grey3);
    }
    .exj-grid-stats .uk-grid > *:nth-child(3) {
        padding:20px 30px 20px 0px;
        border-right:1px solid var(--grey3);
        border-bottom:1px solid var(--grey3);
    }
    .exj-grid-stats .uk-grid > *:nth-child(4) {
        padding:20px 30px 20px 30px;
        border-right:0px solid var(--grey3);
        border-bottom:1px solid var(--grey3);
    }
    .exj-grid-stats .uk-grid > *:nth-child(5) {
        padding:20px 30px 20px 0px;
        border-right:1px solid var(--grey3);
        border-bottom:0px solid var(--grey3);
    }
    .exj-grid-stats .uk-grid > *:nth-child(6) {
        padding:20px 30px 20px 30px;
        border-right:0px solid var(--grey3);
        border-bottom:0px solid var(--grey3);
    }
    
}