﻿


#header-total-container {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 1;
}


#whitemenu-container {
    background-color: white;
}


#main-menu-nav {
    padding: 0;
    margin: 0;
    height: 80px;
    transition: 0.2s;   /* When scrolling, the header gets smaller and this transition should be smooth */
}

    #main-menu-nav .main-menu-nav-item-link {
        color: inherit;
    }

    #main-menu-nav li {
        font-weight: 500;
        display: flex;
        align-items: center;
        float: left;
        padding: 0 14px 0 14px;
        margin: 0;
        height: 100%;
    }

#main-menu-nav li:hover {
    cursor: pointer;
    color: black;
    background-color: #f7f7f7;
}

#main-menu-nav li i {
    margin-left: 7px;
    font-size: 18px;
}

.search-container input, .search-container .btn {
    border-radius: 0 !important;
}

.search-container .btn {
    border: none;
    background-color: #0b4464;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

    .search-container .btn:hover {
        background-color: black;
    }

.search-container input:focus {
    border: 1px solid #0b4464;
}

.search-container input:focus, .search-container .btn:focus {
    outline: none;
    box-shadow: none;
}


.account-shopping-container i {
    color: #0b4464;
    padding-left: 15px;
    padding-right: 15px;
}

.account-shopping-container i:hover {
    cursor: pointer;
    color: black;
}


.log-off-button i {
    color: #9e3636;
}




#bluemenu-container {
    background-color: #0b4464;
    color: white;
    font-size: 13px;
}

.language-currency-container {
    display: inline-block;
}

#LanguageDropdownContainer, #CurrencyDropdownContainer, #UnitDropdownContainer {
    margin-right: 7px;
}

#LanguageDropdownContainer, #CurrencyDropdownContainer, #UnitDropdownContainer, #VATDropdownContainer {
    display: inline-block;
    background-color: #18597D !important;
}

.languagecombobox {
}

    .languagecombobox .rcbInner, .currencycombobox .rcbInner, .unitcombobox .rcbInner, .vatcombobox .rcbInner {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        background-color: #18597D !important;
        border: none !important;
        height: 100%;
        font-size: 13px;
        color: white !important;
        font-weight: 400;
    }

        .languagecombobox .rcbInner:hover, .languagecombobox .rcbInput:hover, .RadComboBox .rcbActionButton .p-icon,
        .currencycombobox .rcbInner:hover, .currencycombobox .rcbInput:hover,
        .unitcombobox .rcbInner:hover, .unitcombobox .rcbInput:hover,
        .vatcombobox .rcbInner:hover, .vatcombobox .rcbInput:hover {
            cursor: pointer !important;
        }

/*    .language-currency-container .RadComboBox .rcbActionButton {
        top: 9px !important;
    }*/

/*    .language-currency-container .RadComboBox .rcbActionButton .p-icon {
        color: white;
    }*/

.languagecombobox .rcbInput, .currencycombobox .rcbInput, .unitcombobox .rcbInput {
    /*
    background-position: left center !important;
    padding-left: 60px !important;
    */
}


.RadComboBoxDropDown {
    border: none !important;
}

.rcbList li {
    font-weight: 400;
    font-size: 13px;
    color: white;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    background-color: #18597D;
}

    .rcbList li:hover, .rcbList .rcbHovered {
        color: white !important;
        background-color: #0b4464 !important;
        cursor: pointer !important;
    }

#UnitDropdownContainer {
    max-width: 90px;
}

#UnitDropdownContainer .RadComboBox {
    width: 100%;
}

#VATDropdownContainer {
    max-width: 130px;
}

#VATDropdownContainer .RadComboBox {
        width: 100%;
}


.office-info-container {
    color: #b9c5cc;
    height: 100%;
    padding-left: 30px;
}

.office-info-container i {
    font-size: 18px;
    padding-right: 5px;
}




.productmenu-invisible {
    display: none;
}

#productmenu-container {
    position: relative;
    background-color: #f7f7f7;
    padding: 20px 14px 30px 14px;
    z-index: 0;
}

    #productmenu-container::after {
        /* 
        content: "";
        background-image: url("/images/Design/tech-bg.jpg");
        opacity: 0.1;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        */
    }

    #productmenu-container a {
        font-size: 16px;
        color: #333;
        font-weight: 300;
    }

#productmenu-container li {
    width: 100%;
    padding: 7px 10px 7px 10px;
    border-left: 2px solid transparent; /* Transparent border - to avoid moving text when adding colored border on hover */
}

    #productmenu-container li:hover {
        cursor: pointer;
        background-color: #fff;
        border-left: 2px solid #d4731c;
    }

    #productmenu-container .product-menus li:hover::after {
        content: '\276F';
        color: #d4731c;
        float: right;
    }

    #productmenu-container h3 {
        color: #d4731c;
        font-size: 17px;
        font-weight: 400;
        padding: 25px 0 5px 0;
        margin: 0;
        border-bottom: 1px dotted #c7c7c7;
    }


#products-arrow {
    transform-origin: center;
    -moz-transform-origin: center;  /* Firefox */
    -ms-transform-origin: center;   /* IE 9 */
    -o-transform-origin: center;    /* Opera */
    -webkit-transform-origin: center;   /* Safari and Chrome */
    transition: 0.3s;
}


.info-mail {
    color: inherit;
}

.info-mail:hover {
    color: inherit;
    text-decoration: underline;
}



@media only screen and (max-width: 1600px){
    #main-menu-nav {
        font-size: 12px;
    }

    #main-menu-nav li i {
        font-size: 14px;
    }
    .account-shopping-container {
        font-size: 12px !important; 
    }


}




/* MOBILE VERSION */

#mobile-header-container {
    position: fixed;
    top: 0;
    z-index: 3;
    width: 100%;
}

#mobile-navbar-container {
    width: 100%;
    background-color: #0b4464;
    color: white;
}

.mobile-navbar {
    height: 60px;
}

.mobile-navbar img {
    display: block;
    width: 100%;
}


#mobile-menu-container, #mobile-menu-products-container, #mobile-acgearmotors-container,
#mobile-brushless-container, #mobile-dcmotors-container, #mobile-steppingmotors-container,
#mobile-linact-container, #mobile-solenoids-container, #mobile-powersup-container,
#mobile-language-container, #mobile-currency-container, #mobile-unit-container, #mobile-vat-container {
    position: fixed;
    top: 0;
    background-color: white;
    width: 0;
    transition: 0.2s;
    overflow-x: hidden;
    overflow-y: scroll;
    font-weight: 300;
    height: 100%;
    z-index: 20;
}

    #mobile-menu-container .row, #mobile-menu-products-container .row,
    #mobile-language-container .row, #mobile-currency-container .row,
    #mobile-unit-container .row, #mobile-vat-container .row {
        height: 60px; /* Same as the blue navbar height */
        margin: auto;
        border-bottom: 1px solid #c8c8c8;
    }

    #mobile-menu-container .col-10, #mobile-menu-products-container .col-10,
    #mobile-acgearmotors-container .col-10, #mobile-brushless-container .col-10,
    #mobile-dcmotors-container .col-10, #mobile-steppingmotors-container .col-10,
    #mobile-linact-container .col-10, #mobile-solenoids-container .col-10,
    #mobile-powersup-container .col-10,
    #mobile-language-container .col-12, #mobile-language-container .col-10, #mobile-language-container .col-8,
    #mobile-currency-container .col-12, #mobile-currency-container .col-10, #mobile-currency-container .col-8,
    #mobile-unit-container .col-12, #mobile-unit-container .col-10, #mobile-unit-container .col-8,
    #mobile-vat-container .col-12, #mobile-vat-container .col-10, #mobile-vat-container .col-8, .log-off-col {
        padding-left: 10px !important;
    }

#mobile-menu-inner-container, #mobile-menu-products-inner-container,
#mobile-acgearmotors-inner-container, #mobile-brushless-inner-container,
#mobile-dcmotors-inner-container, #mobile-steppingmotors-inner-container,
#mobile-linact-inner-container, #mobile-solenoids-inner-container, #mobile-powersup-inner-container,
#mobile-language-inner-container, #mobile-currency-inner-container, #mobile-unit-inner-container, #mobile-vat-inner-container {
    /* Fixed width of inner container simply to avoid stacking of text etc. when transforming width of parent container */
    width: 90vw; /* 90vw represents 90% of the viewport width, should be the same as in the JS script transformations in the ascx file! */
}

#mobile-acgearmotors-container .row,
#mobile-brushless-container .row,
#mobile-dcmotors-container .row,
#mobile-steppingmotors-container .row,
#mobile-linact-container .row,
#mobile-solenoids-container .row,
#mobile-powersup-container .row {
    min-height: 60px;
    margin: auto;
    border-bottom: 1px solid #c8c8c8;
}

.close-menu {
    padding: 0;
    //background-color: #f9f9f9;
}

.close-menu img {
    height: 15px;
}

.mobile-search-row {
    background-color: #eee;
}

#mobile-menu-container a, #mobile-acgearmotors-container a, #mobile-brushless-container a,
#mobile-dcmotors-container a, #mobile-steppingmotors-container a, #mobile-linact-container a,
#mobile-solenoids-container a, #mobile-powersup-container a {
    color: inherit;
}

.mobile-search-row input::-webkit-input-placeholder { font-size: 16px; color: #a1a1a1; }
.mobile-search-row input::-moz-placeholder { font-size: 16px; color: #a1a1a1; }
.mobile-search-row input:-ms-input-placeholder { font-size: 16px; color: #a1a1a1; }
.mobile-search-row input:-moz-placeholder { font-size: 16px; color: #a1a1a1; }

.mobile-search-textbox {
    padding: 0;
    margin: 0;
    background-color: transparent;
    border: none;
    height: 100%;
    width: 100%;
    color: #333;
    font-weight: 300;
}

.mobile-search-textbox:focus {
    border: none;
    outline: none;
    box-shadow: none;
}

.mobile-search-icon {
    height: 20px;
}

.mobile-right-arrow-icon {
    height: 15px;
}

.mobile-user-icon {
    height: 30px;
}

.mobile-shopping-cart-icon {
    height: 30px;
}

.mobile-back-arrow-icon {
    height: 20px;
}

.row-spacer {
    background-color: #f9f9f9;
}

.disableScroll {
    overflow-y: hidden;
    overflow-x: hidden;
}

.mobile-log-off-row {
    background-color: #ffeded;
}

.mobile-log-off-button {
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
}


.mobile-product-menu-subtitle {
    background-color: #eee;
    font-weight: 400;
}

.mobile-language-button, .mobile-currency-button, .mobile-unit-button, .mobile-vat-button, .mobile-search-button {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    color: inherit;
}

