{
    -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 */
    }
}


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

[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]{
    background: #ff7600;
    box-shadow: none !important;
    height:30px;
}
[controlid=pnlMainMenu]{
    padding:0px;
}
[controlid=lblCarosal]{
    float:right;
    padding:0px;
}
.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;
}


/*.space-style-1{
    height:5px;
}*/

/*--------------------------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--------------------------------*/


/*--------------------------Collection Css Start--------------------------------------*/
.collection-heading{
    font-size: 16px;
    font-weight: lighter;
    outline: 0px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    padding: 0px;
    margin: 0px;
    font-family: inherit !important;
    line-height:24px;
}
.collection-item{
    border-top: 1px solid #c7c2c2;
    padding-top: 20px;
    padding-bottom: 20px;
}
.collection-button{
    font-size:20px;
    margin-left:10px;
    float:right;
}
.collection-button > a{
    font-size:14px;
    float:right;
}
.owl-carousel{
    margin-top: 5px;
    padding-left: 0px;
    text-align:center;
}
.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;
    max-height: 100px;
    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;
}
/*--------------------------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-----------------------------------------*/

/*--------------------Home Screen CSS Start------------------------------------------*/
.top-panel{
    background-image:url(../image/meterial-background.jpg);
    background-repeat:no-repeat;
    background-size: 100% 100%;
}
.top-panel > h5{
    text-align:center;
    font-size:22px;
    padding:15px;
    color:white;
}
.top-panel > div{
    text-align: center;
    margin-top: 10px;
}
.home-first-panel{
    margin-top: 2%;/*-30px;*/
}
.home-first-panel > h4{
    font-size: 26px;
    color: #ff7600;
    text-align: center;
    font-weight: bold;
}
.heading-panel > h4{
    font-size: 22px;
    color: #ff7600;
    text-align: center;
    font-weight: bold;
}
.first-card{
    border: 1px solid gray;
    text-align: center;
    padding: 0px;
    padding-top: 5px;
    padding-bottom: 5px;
    width:42.5%;
    margin-left:5%;
    float:left;
    background:white;
}
.second-card{
    border: 1px solid gray;
    text-align: center;
    padding: 0px;
    padding-top: 5px;
    padding-bottom: 5px;
    width:42.5%;
    margin-right:5%;
    float:right;
    background:white;
}
.first-card > h5, .second-card > h5{
    font-size: 40px;
    color: #ff7600;
}
.first-card > h6, .second-card > h6{
    font-size: 16px;
    line-height: 20px;
    font-weight: bold;
}
/*--------------------Home Screen CSS End------------------------------------------*/

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 650px) {
    [controlid=pnlManufacture],[controlid=ddlCoreProductType],[controlid=btnSearch],[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=btnSearch],[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---------------*/