/* COMMON STYLES
-------------------------------------------------- */
/*
* EPSON FONT BUTTON CLASSES
* SATHI
* MARCH 2023
*/
/* LOCAL FONT */
font-face {
  font-family: 'Helvetica Neue';  
  src: url("../../assets/fonts/HelveticaNeue-Regular.eot");
  src: local('Cabin Regular'), local('Cabin-Regular'), url("../../assets/fonts/HelveticaNeue-Regular.eot?open#iefix") format("embedded-opentype"), url("../../assets/fonts/HelveticaNeue-Regular.woff") format("woff"), url("../../assets/fonts/HelveticaNeue-Regular.ttf") format("truetype"), url("../../assets/fonts/HelveticaNeue-Regular.svg") format("svg");
  font-weight: 400;
  font-style: normal; }

/* Primary Text Color */
.color-primary{ color: #000000; }
.color-epson{ color: #164194; }
.text-white{ color: #FFFFFF; }
.text-grey{ color: #595959; }
.text-secondary-red{ color: #F00; }
.text-grey{ color: #A9A9A9; }
.text-medium-grey{ color: #484545; }
/* Typography Style */
/* Typography Mobile */
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{ margin-bottom: 0; }
h1, .h1{ font-family: 'Helvetica Neue',Helvetica; font-style: normal; font-weight: 700; font-size: 36px;line-height: 38px; }
h1.small, .h1.small{ font-family: 'Helvetica Neue',Helvetica; font-style: normal; font-weight: 700; font-size: 34px; line-height: 38px; }
h2, .h2{ font-family: 'Helvetica Neue',Helvetica; font-style: normal; font-weight: 700; font-size: 32px; line-height: 34px; }
h3, .h3{ font-family: 'Helvetica Neue',Helvetica; font-style: normal; font-weight: 400; font-size: 22px; line-height: 24px; }
h4, .h4{ font-family: 'Helvetica Neue',Helvetica; font-style: normal; font-weight: 500; font-size: 20px; line-height: 22px; }
h5, .h5{ font-family: 'Helvetica Neue',Helvetica; font-style: normal; font-weight: 500; font-size: 18px; line-height: 20px; }
/*h6, .h6{ font-family: 'Helvetica Neue',Helvetica;font-style: normal;font-weight: 500; font-size: 16px;line-height: 18px; }*/
h6, .h6{ font-family: 'Helvetica Neue',Helvetica; font-style: normal; font-weight: 500; font-size: 24px; line-height: 27px; }

body{ font-family: 'Helvetica Neue',Helvetica; font-style: normal; font-weight: 400;font-size: 16px; line-height: 18px; color: #000000; }
.medium{ font-family: 'Helvetica Neue',Helvetica; font-style: normal; font-weight: 500;font-size: 14px; line-height: 16px; }
.small{ font-family: 'Helvetica Neue',Helvetica; font-style: normal; font-weight: 400;font-size: 14px; line-height: 16px; }
.small.bold{ font-family: 'Helvetica Neue',Helvetica; font-style: normal; font-weight: 700; line-height: 14px; }
.extrasmall{ font-family: 'Helvetica Neue',Helvetica; font-style: normal; font-weight: 500; font-size: 12px; line-height: 16px; }
.body-bold{ font-family: 'Helvetica Neue',Helvetica; font-size: 16px; font-style: normal; font-weight: 700; line-height: 24px; }

a{ text-decoration: none; }
/* Typography Dektop */
@media (min-width: 992px) {
  h1, .h1{ font-weight: 700; font-size: 42px; line-height: 50px; }
  h1.small, .h1.small{ font-weight: 700; font-size: 45px; line-height: 48px; }
  h2, .h2{ font-weight: 700; font-size: 40px; line-height: 48px; }
  h3, .h3{ font-weight: 700; font-size: 36px; line-height: 48px; }
  h4, .h4{ font-weight: 500; font-size: 30px; line-height: 32px; }
  h5, .h5{ font-weight: 700; font-size: 26px; line-height: 30px; }
  h6, .h6{ font-weight: 700; font-size: 22px; line-height: 28px; }

  body{ font-weight: 400; font-size: 16px; line-height: 24px; }
  .medium{ font-weight: 500; font-size: 16px; line-height: 24px; }
  .small{ font-weight: 500; font-size: 14px; line-height: 20px; }
  .small.bold{ font-weight: 700; font-size: 14px; line-height: 20px; }
  .extrasmall{ font-weight: 500; font-size: 12px; line-height: 18px; }
  .body-bold{ font-weight: 700; font-size: 18px;  line-height: 24px; }
}

@media (min-width: 1260px) {
  h1, .h1{ font-weight: 700; font-size: 55px; line-height: 64px; }  
  h2, .h2{ font-weight: 700; font-size: 45px; line-height: 48px; }
}

/* BUTTON STYLES */
.btn-primary-epson{ display: flex; flex-direction: row; justify-content: left; align-items: center; gap: 6px; padding: 7px 15px 7px 20px; height: 35px; border-radius: 5px; color: #000000; font-weight: 500; font-size: 16px; line-height: 20px; text-align: left; border: none; }
.btn-primary-epson{ position: relative; background: rgba(255, 255, 255, 0.8); }
.btn-primary-epson::after{ content: url('data:image/svg+xml,<svg width="9" height="12" viewBox="0 0 9 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.12117 5.19078L2.69101 0.338513C2.57195 0.231249 2.43031 0.146112 2.27424 0.0880123C2.11818 0.0299124 1.95078 0 1.78171 0C1.61265 0 1.44525 0.0299124 1.28919 0.0880123C1.13312 0.146112 0.991475 0.231249 0.872418 0.338513C0.633886 0.552931 0.5 0.842982 0.5 1.14532C0.5 1.44765 0.633886 1.7377 0.872418 1.95212L5.40609 6.00331L0.872418 10.0545C0.633886 10.2689 0.5 10.559 0.5 10.8613C0.5 11.1636 0.633886 11.4537 0.872418 11.6681C0.992086 11.7742 1.13401 11.8581 1.29005 11.915C1.44608 11.972 1.61317 12.0009 1.78171 12C1.95026 12.0009 2.11734 11.972 2.27338 11.915C2.42942 11.8581 2.57134 11.7742 2.69101 11.6681L8.12117 6.81583C8.24121 6.70945 8.33649 6.58288 8.40151 6.44342C8.46652 6.30396 8.5 6.15438 8.5 6.00331C8.5 5.85223 8.46652 5.70265 8.40151 5.5632C8.33649 5.42374 8.24121 5.29717 8.12117 5.19078Z" fill="%2340B8EB"/></svg>'); margin-top: 2px; }
.btn-primary-epson:hover{ background: rgba(22, 65, 148, 0.8); color: #FFFFFF; }
.btn-primary-epson.selected{ background: rgba(22, 65, 148, 0.8); color: #FFFFFF; }
.btn-primary-epson.disabled{ background: rgba(22, 65, 148, 0.8); color: #FFFFFF; }

.btn-secondary-epson{ display: flex; flex-direction: row; justify-content: start; align-items: center; gap: 6px; padding: 5px 0; height: 24px; border-radius: 5px; color: #FFFFFF; font-weight: 500; font-size: 14px; line-height: 20px; text-align: center; border: none; background: transparent; }
.btn-secondary-epson::after{ content: url('data:image/svg+xml,<svg width="9" height="12" viewBox="0 0 9 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.12117 5.19078L2.69101 0.338513C2.57195 0.231249 2.43031 0.146112 2.27424 0.0880123C2.11818 0.0299124 1.95078 0 1.78171 0C1.61265 0 1.44525 0.0299124 1.28919 0.0880123C1.13312 0.146112 0.991475 0.231249 0.872418 0.338513C0.633886 0.552931 0.5 0.842982 0.5 1.14532C0.5 1.44765 0.633886 1.7377 0.872418 1.95212L5.40609 6.00331L0.872418 10.0545C0.633886 10.2689 0.5 10.559 0.5 10.8613C0.5 11.1636 0.633886 11.4537 0.872418 11.6681C0.992086 11.7742 1.13401 11.8581 1.29005 11.915C1.44608 11.972 1.61317 12.0009 1.78171 12C1.95026 12.0009 2.11734 11.972 2.27338 11.915C2.42942 11.8581 2.57134 11.7742 2.69101 11.6681L8.12117 6.81583C8.24121 6.70945 8.33649 6.58288 8.40151 6.44342C8.46652 6.30396 8.5 6.15438 8.5 6.00331C8.5 5.85223 8.46652 5.70265 8.40151 5.5632C8.33649 5.42374 8.24121 5.29717 8.12117 5.19078Z" fill="%2340B8EB"/></svg>'); margin-top: 2px; }
.btn-secondary-epson:hover{ background: transparent; color: #40B8EB; /*text-decoration: underline;*/ }
.btn-secondary-epson.selected{ background: transparent; }
.btn-secondary-epson.disabled{ background: transparent; }
.btn-secondary-epson.black{ color: #000000; }
.btn-secondary-epson.black:hover{ color: #40B8EB; }

.btn-secondary-epson.bg-shadow{ padding: 5px 25px; height: 31px; background: #FFFFFF; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15); border-radius: 9px; color: #000000; }
.btn-secondary-epson.bg-shadow:hover{ background: rgba(64, 184, 235, 0.83); color: #FFFFFF; text-decoration: none; }
.btn-secondary-epson.bg-shadow:hover::after, .btn-secondary-epson.bg-shadow.selected::after{ content: url('data:image/svg+xml,<svg width="9" height="12" viewBox="0 0 9 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.12117 5.19078L2.69101 0.338513C2.57195 0.231249 2.43031 0.146112 2.27424 0.0880123C2.11818 0.0299124 1.95078 0 1.78171 0C1.61265 0 1.44525 0.0299124 1.28919 0.0880123C1.13312 0.146112 0.991475 0.231249 0.872418 0.338513C0.633886 0.552931 0.5 0.842982 0.5 1.14532C0.5 1.44765 0.633886 1.7377 0.872418 1.95212L5.40609 6.00331L0.872418 10.0545C0.633886 10.2689 0.5 10.559 0.5 10.8613C0.5 11.1636 0.633886 11.4537 0.872418 11.6681C0.992086 11.7742 1.13401 11.8581 1.29005 11.915C1.44608 11.972 1.61317 12.0009 1.78171 12C1.95026 12.0009 2.11734 11.972 2.27338 11.915C2.42942 11.8581 2.57134 11.7742 2.69101 11.6681L8.12117 6.81583C8.24121 6.70945 8.33649 6.58288 8.40151 6.44342C8.46652 6.30396 8.5 6.15438 8.5 6.00331C8.5 5.85223 8.46652 5.70265 8.40151 5.5632C8.33649 5.42374 8.24121 5.29717 8.12117 5.19078Z" fill="%23FFFFFF"/></svg>'); margin-top: 2px; }
.btn-secondary-epson.bg-shadow.selected{ background: rgba(64, 184, 235, 0.83); }
.btn-secondary-epson.bg-shadow.disabled{ background: transparent; }


.btn-primary-epson.action{ background: transparent; color: #FFFFFF; /*width: 113px;*/ }
.btn-primary-epson.action:hover{ background: transparent; color: #40B8EB; text-decoration: underline; }
.btn-primary-epson.action.selected{ background: transparent; }
.btn-primary-epson.action.disabled{ background: transparent; }

.btn-login-epson{ display: flex; flex-direction: row; justify-content: start; align-items: center; gap: 5px; padding: 5px 0; height: 32px; 
   border-radius: 5px; color: #164194; font-weight: 500; font-size: 12px; line-height: 18px; text-align: center; border: none; background: transparent; }
.btn-login-epson::after{ content: url('data:image/svg+xml,<svg width="6" height="11" viewBox="0 0 6 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.62394 0.319018L5.67488 4.36996C5.76015 4.45228 5.82797 4.55094 5.87429 4.66005C5.92061 4.76915 5.94448 4.88646 5.94448 5.00499C5.94448 5.12352 5.92061 5.24083 5.87429 5.34994C5.82797 5.45904 5.76015 5.5577 5.67488 5.64002L1.62394 9.69196C1.55143 9.78221 1.46086 9.85632 1.35804 9.90954C1.25522 9.96276 1.14242 9.99392 1.02686 10.001C0.911297 10.0081 0.79553 9.99096 0.686976 9.95071C0.578422 9.91045 0.479475 9.84797 0.396475 9.76725L0.243909 9.62063C0.171805 9.56097 0.113111 9.48675 0.0716667 9.40284C0.0302227 9.31894 0.00696285 9.22722 0.00340915 9.1337C-0.000144539 9.04018 0.016088 8.94697 0.0510446 8.86016C0.0860013 8.77335 0.138894 8.69489 0.206262 8.62993C1.19828 7.63198 2.19425 6.63369 3.19419 5.63507C3.27845 5.55268 3.34541 5.45428 3.39112 5.34566C3.43683 5.23703 3.46038 5.12037 3.46038 5.00251C3.46038 4.88466 3.43683 4.768 3.39112 4.65937C3.34541 4.55075 3.27845 4.45235 3.19419 4.36996L0.206262 1.38698C0.138894 1.32202 0.0860013 1.24357 0.0510446 1.15676C0.016088 1.06995 -0.000144539 0.976732 0.00340915 0.883214C0.00696285 0.789696 0.0302227 0.697982 0.0716667 0.614073C0.113111 0.530164 0.171805 0.455952 0.243909 0.396292L0.396475 0.23679C0.479643 0.1559 0.578895 0.0934088 0.687786 0.0533746C0.796677 0.0133404 0.912772 -0.00334111 1.02853 0.00441346C1.14429 0.012168 1.25712 0.0441852 1.3597 0.0983857C1.46228 0.152586 1.55231 0.227758 1.62394 0.319018Z" fill="%2340B8EB"/></svg>'); margin-top: 3px;  }
.btn-login-epson:hover{ background: transparent; color: #40B8EB; }

.btn-search-epson{ position: relative; display: flex; flex-direction: row; justify-content: start; align-items: center; padding: 5px 0; height: 32px; 
   border-radius: 5px; color: #164194; font-weight: 500; font-size: 12px; line-height: 18px; text-align: center; border: none; background: transparent;     
   margin-left: 20px; }
.btn-search-epson:hover{ background: #E6E6E6; color: #40B8EB; }

.btn-download-epson{ position: relative; display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 16px 6px; height: 40px; 
   color: #164194; font-weight: 500; font-size: 16px; line-height: 24px; text-align: center; border-radius: 8px; border: 1px solid #40B8EB; background: #FFF; margin-bottom: 8px; gap: 8px; max-width: 240px; }
.btn-download-epson:hover{ border: 1px solid #40B8EB; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15); }

footer .quick-links li, footer .quick-links a{ font-weight: 400; font-size: 18px; line-height: 26px; }

.form-control:focus { border-color: #FFFFFF;  box-shadow: none; }
input[type="search"]::-webkit-search-cancel-button {  display: none; }

/* Menu */
/* Main menu styling */
/* Show dropdown on hover */

/* Main Menu Items */
.nav-item {
    position: relative;
}

/* Dropdown Menu */
.dropdown-menu {
    display: none; /* Hidden by default, shown on hover or click */
    position: absolute;
    background-color: darkgrey; /* Dark grey background for dropdowns */
    min-width: 160px; /* Set minimum width or adjust as needed */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.3); /* Optional: Adds a shadow for 3D effect */
    z-index: 1000; /* Ensures dropdown is on top of other content */
}

/* Dropdown Menu Links */
.dropdown-menu a {
    color: #788088; /* Light color text for contrast */
    padding: 12px 16px; /* Padding for links, adjust as needed */
    text-decoration: none; /* No underline on links */
    display: block; /* Makes the whole area clickable */
 
}

/* Hover state for dropdown menu links */
.dropdown-menu a:hover {
    /* background-color: #555;  Darker grey on hover for better interaction */
}
.sub-menu {
    background: transparent;
    box-shadow: none !important;
    border:none
}
.sub-menu a.nav-link {
    color: #222
}

/* Show the dropdown menu when hovering over .dropdown */
.nav-item.dropdown:hover .dropdown-menu {
    display: block;
}
ul.sub-menu.dropdown-menu.show {
    border-radius: 0;
    background-color: #c9d1d8;
    padding: 20px; 
    margin-top:20px;
}

/* Responsive adjustment for smaller screens */
@media (max-width: 768px) { /* Adjust according to your mobile breakpoint */
    .main-menu {
        width: 100% !important; /* Full width for the main menu */
        justify-content: center; /* Center the items if necessary */
    }
    .justify-content-end {
        justify-content:center !important;
    }
    .navbar-nav {
        text-align: center; /* Center text for all nav items on mobile */
    }
    .sub-menu a.nav-link {
        color: #999
    }
    .dropdown-menu {
        position: static; /* Dropdowns should not be absolutely positioned on mobile */
        width: 100%; /* Full width dropdowns */
        box-shadow: none; /* Optional: remove shadow for a cleaner look */
    }

    .dropdown-menu a {
        padding: 8px 16px; /* Adjust padding for smaller screens */
    }

    /* Center align dropdown toggles and links, set font size */
    .nav-link {
        text-align: center; /* Center-align text within the links */
        width: 100%; /* Full width links for easier touch targets */
        font-size: 16px; /* Set font size to 16px on mobile */
    }
    ul.sub-menu.dropdown-menu.show {
        border-radius: 0;
        background-color: transparent;
        padding: 10px;    
    }    
}