/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
* {
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}


body {
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
    background-color:#E4E4E4;
    background-image:linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
    font-family: hp-simplified-regular !important;
    font-size:12px;
    font-weight:500;
    height:100vh;
    margin:0px;
    padding:0px;
    /* Padding to avoid the "unsafe" areas behind notches in the screen */
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-right, 0px);
    /*text-transform:uppercase;*/
    width:100%;
}

/* Portrait layout (default) */
.app {
    /*background:url(../img/logo.png) no-repeat center top; /* 170px x 200px */
    /*position:absolute;             /* position in the center of the screen */
    /*left:50%;
    top:50%;
    height:50px;                   /* text area height */
    /*width:225px;                   /* text area width */
    /*text-align:center;
    padding:180px 0px 0px 0px;     /* image height is 200px (bottom 20px are overlapped with text) */
    /*margin:-115px 0px 0px -112px;  /* offset vertical: half of image height and text area height */
                                   /* offset horizontal: half of text area width */
}

/* Landscape layout (with min-width) */
@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
    .app {
        /*background-position:left center;
        padding:75px 0px 75px 170px;  /* padding-top + padding-bottom + text area = image height */
        /*margin:-90px 0px 0px -198px;  /* offset vertical: half of image height */
                                      /* offset horizontal: half of image width and text area width */
    }
}

/*h1 {
    font-size:24px;
    font-weight:normal;
    margin:0px;
    overflow:visible;
    padding:0px;
    text-align:center;
}

.event {
    border-radius:4px;
    -webkit-border-radius:4px;
    color:#FFFFFF;
    font-size:12px;
    margin:0px 30px;
    padding:2px 0px;
}

.event.listening {
    background-color:#333333;
    display:none;
}

.event.received {
    background-color:#4B946A;
    display:none;
}

@keyframes fade {
    from { opacity: 1.0; }
    50% { opacity: 0.4; }
    to { opacity: 1.0; }
}
 
@-webkit-keyframes fade {
    from { opacity: 1.0; }
    50% { opacity: 0.4; }
    to { opacity: 1.0; }
}
 
.blink {
    animation:fade 3000ms infinite;
    -webkit-animation:fade 3000ms infinite;
}*/





body {
    font-family:hp-simplified-regular;
}

[controlid=pnlSearch]{
    padding-top:10px;
    padding-bottom:15px;
    background:rgb(51, 66, 90);
    border: none;
    border-radius: 0px;
}
[controlid=pnlSearch] > div > select{
    height: 35px;
    border: none;
    border-radius: 0px;
}
[controlid=pnlManufacture] > span{
    height: 35px;
    border: none;
    border-radius: 0px;
    background: white;
    font-size: 18px;
    padding: 5px 10px 0px 15px;
}
.fa-caret-down{
    font-size: 24px;
}
.dropdown-btn:hover, .dropdown-container:hover, .fa-caret-down:hover{
    color:black !important;
}
option{
    background:white;
    color:black;
}
[controlid=pnlSearch] > input{
    height: 40px;
    border: none;
    border-radius: 0px;
}
/*[controlid=btnSearch]{
    box-shadow: none !important;
    height: 30px;
    border-color: var(--theme-color3);
    padding-top: 1px;
    float:right;
    color: var(--theme-color4);
    background: var(--theme-color3);
    font-size: 20px;
    border:none;
}*/
/*[controlid=btnSearch] i{
    font-size:22px;
    margin:0px;
    padding:0px;
}*/
[controlid=pnlMainMenu]{
    padding:0px;
}
[controlid=lblCarosal]{
    float:right;
    padding:0px;
    padding-top:10px;
}
.home-carosal{
    height:600px !important;
}
.core_product_left_panel{
    line-height: 50px;
    background: whitesmoke;
    font-size: 20px;
    padding-left:10%;
}
.product_type_panel{
    width: 500px;
    position: absolute;
    left: 100%;
    z-index: 1000;
    top: 0px;
    background:white;
    height:300px;
    overflow-y:scroll;
}
.product_type_panel > h4{
    font-size:18px;
    font-weight:bold;
}
.product_type_panel > span{
    font-size:16px;
    padding-left:10%;
}
.menu-hover-color{
    color:#ff7600;
}
.index-title{
    /*margin:0px;
    padding:0px;*/
}
.index-title > div{
    text-align:center;
}
.collection-panel{
    background: white;
    /*padding-top: 10px;*/
    margin-bottom: 10px;
    padding:0px;
}
.collection-panel-style13{
    padding:0px;
    margin:0px;
    background: #ddf3fb;
}
.style13{
    background: #ddf3fb;
    padding: 15px 10px 15px 10px;
    margin-bottom: 10px;
}
.style13 > div{
    background: white;
    padding: 5px 0px 15px 0px !important;
    margin-top: 10px;
}
.style13 > div > div > span{
    font-size: 12px;
    color: var(--theme-color1);
    padding: 5px;
    border: 1px solid var(--theme-color1);
    margin-top: 5px;
    text-align: center;
}
[controlid=pnlCollection] h4{
    font-size: 14px;
    margin-top: 0px;
    letter-spacing: 1px;
}
[controlid=pnlCollection] h5{
    font-size: 14px;
    margin-top: 0px;
    letter-spacing: 1px;
    color:var(--theme-color7);
    font-weight:bold;
}
/*.space-style-1{
    height:5px;
}*/
.scrollmenu > label{
    width:45%;
    padding:5px;
    margin-right:5px;
}
.scrollmenu > label > span{
   word-break: break-all;
    word-wrap: break-word;
    max-height: 50px;
    text-overflow: ellipsis;
    white-space: pre-line;
    overflow: hidden;
    font-size:14px;
}
div.scrollmenu {
  background-color: var(--theme-color4);
  overflow: auto;
  white-space: nowrap;
  width:100%;
  padding-bottom:15px;
}

div.scrollmenu a {
  display: inline-block;
  color: var(--theme-color1);
  text-align: center;
  padding: 14px;
  text-decoration: none;
  font-weight:600;
  font-size: var(--font-size3);
  letter-spacing:1px;
}
div.scrollmenu .active{
    background:var(--theme-color5);
    color:var(--theme-color1);
}

div.scrollmenu a:hover {
  background-color: #777;
}
/* Hide scrollbar for Chrome, Safari and Opera */
div.scrollmenu::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
div.scrollmenu {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/*--------------------------Manufacturing Popup Css Start--------------------------------*/
/* The actual popup */
[controlid=pnlManufacture] .popuptext{
  /*visibility: hidden;*/
  background-color: whitesmoke;
  color: black;
  text-align: center;
  padding: 15px;
  position: absolute;
  z-index: 1;
  top:35px;
      height: 300px;
    overflow-y: scroll;
    display:none
}

/* Popup arrow */
[controlid=pnlManufacture] .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
  /*visibility: hidden;*/
  display:none
}

/* Toggle this class - hide and show the popup */
[controlid=pnlManufacture] .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

@-webkit-keyframes fadeOut {
  from {opacity: 1;} 
  to {opacity: 0;}
}

@keyframes fadeOut {
  from {opacity: 1;}
  to {opacity: 0;}
}
/*--------------------------Manufacturing Popup Css End--------------------------------*/

/*#slider1{
    height:200px !important;
}*/
.slider-item-ratio .slider-container>*>*{
    object-fit:fill !important;
}
/*--------------------------Collection Css Start--------------------------------------*/
.collection-heading{
    font-size: 16px;
    font-weight: lighter;
    outline: 0px;
    letter-spacing: 1px;
    text-decoration: none;
    margin: 0px;
    font-family: var(--font-text-family) !important;
    line-height:35px;
    padding-top:5px;
}
.collection-item{
    border-top: 1px solid #c7c2c2;
    padding-top: 20px;
    padding-bottom: 0px;
}
.collection-button{
    font-size: 12px !important;
    margin-left: 5px;
    float: right;
    margin-right: 10px;
    margin-top: 15px;
    color: var(--theme-color1);
}
.collection-button > a{
    font-size:14px;
    float:right;
}
.owl-carousel{
    margin-top: 5px;
    padding-left: 0px;
    text-align:center;
    /*height:300px !important;*/
}
.discount-style-1{
    color: green;
    font-size: 12px;
}
.discount-style-2{
    font-size: 12px;
    text-decoration: line-through;
    text-decoration-line: line-through;
}
.discount-style-3{
    font-size: 14px;
    text-decoration: line-through;
    text-decoration-line: line-through;
}
.discount-style-4{
    color: green;
    font-size: 14px;
}
.item-details-image{
    overflow: hidden;
    min-height: 100px;
    overflow-y: hidden;
}
.zero{
    margin:0px;
    padding:0px;
}
.clamp-two{
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
[controlid=pnlCollection] h3{
    font-size:14px;
    margin-top:5px;
    margin-bottom:25px;
    letter-spacing:1px;
}
/*--------------------------Collection Css End--------------------------------------*/

/*--------------------------Font CSS Start-----------------------------------------*/
.font-style-1{
    font-size:16px;
    margin-top:10px;
}
.font-style-2{
    font-size:18px;
}
.font-style-3{
    font-size:14px;
}
.font-style-4{
    font-size:14px;
}
.font-style-5{
    font-size:12px;
}
.font-style-6{
    font-size:18px;
}
/*--------------------------Font CSS End-----------------------------------------*/

/*-------------------Image Style CSS Start----------------------*/
.image-card-style-1{
    height: 100px;
    background-size: cover;
    background-repeat: no-repeat;
}
.image-card-style-2{
    height: 125px;
    background-size: cover;
    background-repeat: no-repeat;
}
/*-------------------Image Style CSS End----------------------*/

/*-------------Color CSS Start-------------------------*/
.text-white{
    color:white !important;
}
/*-------------Color CSS End-------------------------*/


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 650px) {
    [controlid=pnlManufacture],[controlid=ddlCoreProductType],[controlid=pnlMainMenu]{
        display:none;
    }
    .carousel-inner{
        height:200px;
    }
    .home-carosal{
        height:200px !important;
    }
}

/* Small devices (portrait and landscape tablets) */
@media only screen 
  and (min-device-width: 650px) 
  and (max-device-width: 1020px) 
  and (-webkit-min-device-pixel-ratio: 1) {
    [controlid=pnlManufacture],[controlid=ddlCoreProductType],[controlid=pnlMainMenu]{
        display:none;
    }
    .carousel-inner{
        height:200px;
    }
    .home-carosal{
        height:200px !important;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
/*@media only screen and (min-width: 768px) {
   .home-carosal{
        height:200px !important;
    }
}*/

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .carousel-inner, .carousel{
        height:400px;
    }
    .home-carosal{
        height:400px !important;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .carousel-inner, .carousel{
        height:400px;
    }
    .home-carosal{
        height:400px !important;
    }
}

/*------------Master Page CSS Stop---------------*/



/*--------------Home Page CSS Start-----------------*/
body{
    background: #f5f5f5;
}
.owl-item{
    width:8% !important;
}
.owl-dots, .owl-nav{
    display:none;
}
/*.collection-item{
    padding:0px;
}*/
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 650px) {
    .owl-item{
        width:8% !important;
    }
}

/* Small devices (portrait and landscape tablets) */
@media only screen 
    and (min-device-width: 650px) 
    and (max-device-width: 1020px) 
    and (-webkit-min-device-pixel-ratio: 1) {
    .owl-item{
        width:8% !important;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
/*@media only screen and (min-width: 768px) {
    .home-carosal{
        height:200px !important;
    }
}*/

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .owl-item{
        width:8% !important;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .owl-item{
        width:10% !important;
    }
}
/*-------------------Home Page CSS End---------------------------*/