/* ================================================================*/
/* ================================================================*/
/* ================================================================*/
/* ===================    css for common_ui     ===================*/
/* ================================================================*/
/* ================================================================*/
/* ================================================================*/


/* =================== Category Menu Related ======================*/
.bread-crumb{
  margin-top: 0rem;
  margin-left: 8%;
  padding-top: 0rem;
  padding-left: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  /*color: #BEBEBE;*/
  color: grey;
}
/* id to define positioning and dimension of category-bar*/
#dropdown_00{
  z-index: 1;
  margin-top: -0.1rem;
  height: 5rem;
  overflow-y:hidden;
}
/* class to define positioning of page icon*/
.icon-pos{
  margin-top:-1.7rem;
  text-align:center;
}

/* =================== Global Menu Related   ======================*/
/*class to define total specific height of nabvar*/
.navbar{
    height: 5rem;
}

/* navbar class内に制定したclass部品 navbarをページ上端に位置づけ*/
.navbar.scrolling-navbar {
  margin-top:0;
  padding-top: 0px;
  padding-bottom: 0px;
  margin-bottom:0;
}

/*Sanwa logo shown at navbar*/
.logoatmenu1{
  width: 200px; /*250px*/
}

/*class to control navbar display at scrolling-up action*/
.smart-scroll{
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}

/*class to define scrolling-down status of page, dynamically adding/removing by javascropt*/
.scrolled-down{
   transform:translateY(-100%); transition: all 0.3s ease-in-out;
}
/*class to define scrolling-up status of page, dynamically adding/removing by javascropt*/
.scrolled-up{
   transform:translateY(0); transition: all 0.3s ease-in-out;
}
/*class to define when top-nav is collapsed*/
.top-nav-collapse {
  background-color: #ffffff!important;
}
/*class to control nav-link area at global navbar*/
.nav-link{
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  /*padding-bottom: -5;*/
}

/*set bottom margin at surfer-link menu area*/
.mb-8{
  margin-bottom: 8rem;
}

/* scroll bar made not displayed */
#navbarSupportedContent1{
  /*for firefox*/
  scrollbar-width: none;
  /*for IE/edge*/
  overflow: scroll;
  -ms-overflow-style: none;
}
/* scroll bar made not displayed */
#navbarSupportedContent1::-webkit-scrollbar {
  /* for chrome/safari*/
  display:none;
}

.dropdown-menu.display {
  display: block;
  width: 100%;
}


/*id to identify navbar collapsed spacing in 5 kinds*/
#dropdown_01, #dropdown_02, #dropdown_03, #dropdown_04, #dropdown_05 {
  margin-top: -0.1rem;
  z-index:999999; /* changed from 10 */ 
}
/*class to define display of navbar when not collapse*/
.navbar:not(.top-nav-collapse) {
  background: #ffffff!important;
  opacity: 1;
}
/* class to define dimension of ICON at global menu*/
.fa-2x{
  font-size: 1.6em;
}

/*class to define display of navbar when not collapse*/
#navbar-top:hover {
  background: #ffffff!important;
  opacity: 1;
  transition: opacity 1.0s;
}
/*class to define height of nav-link spacing*/
.full-height{
  height: 5.0rem;
}

.btn-layout-sm {
  padding-top: 1rem;
  padding-left: 2.5rem;
}


.btn-layout {
  padding-top: 2rem;
  padding-left: 2.5rem;
}

a.hide-menu {
  position: relative;
  display: inline-block;
  padding: 0.25em 0.5em;          
}

a.hide-menu:link{
  color:orange;
  text-decoration: none;
}

a.hide-menu:hover {
  text-decoration: underline;
}

a.hide-menu:visited{
  color:orange;
  text-decoration-style: none;
}


/*class to regulate listing-up of menu icon in navbar collapsed spacing*/
.menu-row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: 10%;
    margin-left:  10%;
}

/*class to regulate behavior of menu icons of PARTNERS*/
.menuicon-4-1 {
    margin-top:0px;
    width:90%;
    text-align:center;
    background-size: 150% 75%;
    animation: gradient-ex 12s ease infinite;
    box-shadow:0 5px 5px 0 rgba(0, 0, 0, 0.7), 0 5px 5px 0 rgba(0, 0, 0, 0.7);
}

/*class to regulate behavior of icon of the page in viewing*/
.menuicon-4-2 {
    padding-top: -0.8rem;
    padding-bottom:0rem;
    max-width: 350px;
    min-width: 130px;
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.7), 0 5px 5px 0 rgba(0, 0, 0, 0.7);
}

/*class to regulate behavior of menu icons of about us/why sanwa pump category*/
.menuicon-4 {
    padding-left:0.35rem;
    padding-right:0.35rem;
    padding-top: 0.25rem;
    padding-bottom:0.05rem;
    width:100%;
    min-width: 150px;
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.7), 0 5px 5px 0 rgba(0, 0, 0, 0.7);
}


/*class to regulate menu icon of pump-model*/
.menuicon-2 {
    padding-left:3px;
    padding-right:1px;
    padding-top: 10px;
    padding-bottom:0px;
    width:100%;
    max-width:200px;
    min-width: 180px;
    background-size: 100% 70%;
    box-shadow:0 5px 5px 0 rgba(0, 0, 0, 0.7), 0 5px 5px 0 rgba(0, 0, 0, 0.7);
}

/*class to regulate menu icon of pump-family*/
.menuicon-6 {
    margin-top: 0px;
    width:100%;
    text-align:center;
    box-shadow:0 5px 5px 0 rgba(0, 0, 0, 0.7), 0 5px 5px 0 rgba(0, 0, 0, 0.7);
}
/*class to regulate responsive listing of menu icons by 100% = 1 row*/
.menu-col-100{
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}
/*class to regulate responsive listing of menu icons by 50% = 2 rows*/
.menu-col-50{
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}
/*class to regulate responsive listing of menu icons by 33% = 3 rows*/
.menu-col-33{
  -ms-flex: 0 0 33.333%;
  flex: 0 0 33.333%;
  max-width: 33.333%;
}
/*class to regulate responsive listing of menu icons by 16% = 6 rows*/
.menu-col-16{
  -ms-flex: 0 0 16.666%;
  flex: 0 0 16.666%;
  max-width: 16.666%;
}

.special-menu-backcolor {
    background-color: #000000;
}
/* class to regulate distance from top of menu text/icons and background framed area*/
.PT-5{
    padding-top: 1.8rem !important;
}
.icon-color {
    color:  #566573;
}
/* class to regulate hovering text at icon displays at global menu*/
#envelopeText,#exchangeText,#aboutText,#homeText,#pollText,#newsText,#english,#japanese,#chinese {
    visibility: hidden;
}
/* class to regulate hovering text at icon displays at global menu*/
.fa-home:hover ~ #homeText {
    visibility: visible;
}
/* class to regulate hovering text at icon displays at global menu*/
.fa-newspaper:hover ~ #newsText {
    visibility: visible;
}
/* class to regulate hovering text at icon displays at global menu*/
.fa-building:hover ~ #aboutText {
    visibility: visible;
}
/* class to regulate hovering text at icon displays at global menu*/
.fa-envelope:hover ~ #envelopeText {
    visibility: visible;
}
/* class to regulate hovering text at icon displays at global menu*/
.fa-exchange-alt:hover ~ #exchangeText {
    visibility: visible;
}
/* class to regulate hovering text at icon displays at global menu*/
.fa-poll:hover ~ #pollText {
    visibility: visible;
}
/* class to regulate hovering text at icon displays at global menu*/
.english:hover ~ #english {
visibility: visible;
}
/* class to regulate hovering text at icon displays at global menu*/
.japanese:hover ~ #japanese {
visibility: visible;
}
/* class to regulate hovering text at icon displays at global menu*/
.chinese:hover ~ #chinese {
visibility: visible;
}

/* =================== Contents Field  ======================*/
/*class to regulate page title letter to display at top of page contents*/
.page-title{
  padding-left:0;
  padding-right:0;
  padding-top: 2rem;/* changed to 2rem 23/06/02, related to breadcrumb image cancellation*/ 
  font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
  color: #000000; /*Sanwa Pump Logo violet*/
  /* -webkit-text-stroke-color: #ffffff;
  -webkit-text-stroke-width: 2px;
  text-stroke: 2px #fff; */
  font-size: calc(20px + (80 - 20) * (100vw - 280px)/1500);
  font-weight:700;
  text-align: center;
  text-shadow: 2px 2px 0 #fff,-2px 2px 0 #fff,2px -2px 0 #fff,-2px -2px 0 #fff, 4px 4px 4px black;
  letter-spacing: 0px;
}
/*not in use yet, considering for keyword listing-up*/
#info-finder{
    width: 80%;
    font-size: 1.0rem;
}
/*class to regulate dimension of page-wide content*/
.article-size{
    display: block;
    width: 100%;
    /*height: calc(100vw*0.45);*/
    text-align:center;
    overflow:hidden;
}
/* class to regulate iframe setting*/
.embed-responsive{
    /*width: 100%; to prevent the pdf-viewer streched width-wide*/
    height: 80%;
    padding-top: 10px;
    padding-bottom:5px;
    padding-left: 15px;
}

#world-map{
    height: 85vh;
}

.dist-name{
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
}

.product-menu.show{

    position: inherit;
    display: block;
    width: auto;
}

.product-menu a:hover{
  background-color:cyan;
  color: black;
  font-weight: bold;
  box-shadow:1px 3px;
}

.dusty-grass-gradient{
  background:linear-gradient(120deg,#d4fc79 0,#96e6a1 100%); /*dusty-grass-gradient*/
}

.info-link{
  padding-left: unset;
  padding-top:  unset;
}

.info-item:hover{
  /*background: white; winter-neva-gradient*/
  background: linear-gradient(120deg,#a1c4fd 0,#c2e9fb 100%); /*winter-neva-gradient*/
}

.info-item{
  /*style="height:3rem;background-color:white;margin: 0 0 0 auto;border-radius:25px;border:3px solid black;"*/
  height: 3rem;
  background-color:white;
  margin: 0 0 0 auto;
  border-radius: 25px;
  border:3px solid black;
}



/* =================== Always Box            ======================*/
.alwaysbox-right {
    position: fixed;
    bottom: 20px;
    right: 10px;
    width: 3rem;
    height: 3rem;
    background-color: unset;
    color: #00ffff;
    z-index: 10000;
}

.alwaysbox-left {
    position: fixed;
    bottom: 20px;
    left: 10px;
    width: 3rem;
    height: 3rem;
    background-color: unset;
    color: #00ffff;
    z-index: 10000;
}

.btnat_alwaysbox {
    margin:0px 0px 0px 0px;
    width: 3rem;
    height: 3rem;
}

.back-black{
    /*box-shadow: 2px 4px 6px black;*/
    border:0.3px solid blue ;
    background-color: black;
    transition: opacity 1s 1s;
}

.btnat_alwaysbox:hover {
    cursor: pointer;
}

.btnat_alwaysbox:active {
    background-color: transparent;
}
/* =================== Font Setup Related    ======================*/

.slide-display-4{
  font-size: 3.5rem;
  font-weight: 300;
  line-height: 1.2;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
}
.slide-h1 {
  font-size: 2.5rem;
  margin-bottom:0.5rem;
  line-height:1.2;
}
.slide-h2 {
  font-size: 2.0rem;
  margin-bottom:0.5rem;
  line-height:1.2;
}
.slide-h4 {
  font-size: 1.5rem;
  margin-bottom:0.5rem;
  line-height:1.2;
}

/* =================== Modal                 ======================*/

/* controlling modal height in resposive manner trying not to show overflow white*/

/*@media (min-width: 250px) and (max-width: 484px){ .modal-body{max-height:50vh;}}
@media (min-width: 485px) and (max-width: 767px){ .modal-body{max-height:45vh}}*/
/*@media (min-width: 768px) and (max-width: 991px){ .modal-body{max-height:40vh}}*/
/*@media (min-width: 992px) and (max-width: 1200px){ .modal-body{max-height:65vh}}*/

.btn-rounded {
  border-radius: 10em;
}

.modal-open .modal{
    overflow-y: hidden;
    overflow-x: hidden;
}

.modal-content{
    overflow-x:hidden;
}

.description{
    width: 100%;
    height: 50vh;
    margin-bottom: 4rem;
    padding-top: 10px;
    padding-bottom:10px;
    padding-left: 15px;
}

/* class to regulate modal footer spacer*/
.modal-footer{
    padding:0rem;
}
/* class to regulate modal body content overflow*/
.modal-body{
    overflow-y:hidden;
}

.modal-header{
  /*height: 2px; /*22/12/20 revised in line with Video-display issue*/
  /* To solve the issue, placing the same footer button in the header area*/
  padding:0rem; /* 22/12/20 revised to make the header same as the footer*/
  background-color: #000;
  align-items: center; /* added tp make the header same as the footer*/
}

.modal-header-chemical{
  height: 40px;
  background-color: #000;
}

.modal-footer{
  background-color:#000;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.modal-dialog{
  max-width: unset;
  
}

.btn.btn-sm{
  padding: 0.2rem 0.8rem;
  font-size: 0.50rem;
}

.close{
  position: absolute;
  right: 10px; /* To place the x mark at right side */
  line-height:0;
  color:#fff;
  opacity: 1;
}

.close-chemical{
  margin-top:-10px;
  color:#fff;
  opacity: 1;
}

/*==========added the source below to launch new modal function=========*/
/*==========Moving Modal | Size-change Modal | Help message=========*/
.modal-msg-top{
  cursor: move;
  font-size: 1.2rem;
  position: absolute;
  color: lightblue;
  top:7px;
  left: 10px;
 }
 .modal-msg-top-left{
  cursor: help;
  font-size: 1.2rem;
  position: absolute;
  color: lightblue;
  top:7px;
  right: 35px;
 }
 .modal-msg-bottom{
  cursor: help;
  font-size: 1.2rem;
  position: absolute;
  color: lightblue;
  bottom:7px;
  right: 10px;
 } 

 .modal-content {
  resize: both;
  overflow:auto;
 }

 .flag {
  width: 45px;
 }
 
 /* Contents inside modal will also follow and change its contents size when modal */
 /* is changed its size */
 /* height=65vh setup is appropriate when Smart-phone or tablet used*/
 /* and modal size can be prolonged virtically according to media size */
 .modal-body{
  position: relative;
  width: 100%;
  height: 65vh;
 }
 
 .modal-body .embed-responsive {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: 0;
 }


/* =================== Others                ======================*/
.newsweek{
  width: 150px;
}

/* footer spacing background setup*/
.page-footer {
  background-color: #000;
}
.hover-link:hover {
  color:indigo;
  font-weight: bold;
}

.page-now{
  color:red;
  font-weight:bold;
}

/* Jingle message line under the page title */
hr.style-eight {

  width: 60%;
  margin-top: 0.5rem;
  padding: 0;
  border: solid white 1px;
  border-top: medium double #333;
  color: #333;
  text-align: center;
}
/* Jingle message line under the page title */
hr.style-eight:after {
  font-family: "Arial", "Helvetica","HelveticaNeue","Verdana",sans-sans-serif;
  content: "with All-Inclusive Safety";
  border: solid white 2px;
  display: inline-block;
  position: relative;
  color: cyan;
  font-size: -webkit-calc(10px + (25 - 10) * (100vw - 250px)/1100);
  font-size: calc(10px + (25 - 10) * (100vw - 250px)/1100);
  font-weight: 900;
  padding: 0 0.25em;
  background: black;
}
.wp-oct-article{
  text-align:center;
}
.wp-allinclusive{
  width: 50%;
}



/*======================<Table Coding>        =======================*/

.dataTables_scrollBody thead tr[role="row"]{
    visibility: collapse !important;
}

.table-responsive-sm {
    max-width: 1300px;
    margin: 0 auto;
    background-color:white;
}
select.custom-select{
    /*background-color: orange;*/
    border: 3px solid black;
}
input.form-control{
    /*background-color: #D1F2EB;*/
    border: 3px solid black;
}
@media (min-width: 0px) and (max-width: 450px) {
   .table-responsive-sm {
       width: 100%;
   }
}
@media (min-width: 451px) and (max-width: 959px) {
   .table-responsive-sm {
       width: 100%;
   }
}
@media (min-width: 960px) {
   .table-responsive-sm { width: 100%; }
}
@media (min-width: 1200px) {
   .table-responsive-sm { width: 100%; }
}

#dtBasicExample td{
    /*background: white;*/
    font-weight: bold;
    font-size: 0.8rem;
    color:black;
    border: solid #000 1px;
}
#dtBasicExample td.namer1{ /*#283593*/
    background: rgba(255, 217, 0, 1) ;
    font-size: 1.0rem;
    color: black;
    z-index:1000;
}
#dtBasicExample td.namer2{
    background: #ffffff;  /*#33b5e5*/
    font-size: 1.0rem;
    color: black;
}


#dtBasicExample th, td {
  white-space: normal;
}

.dataTables_filter{
  text-align: right;
  font-size: 1.5rem;
  font-weight: 600;
}
.dataTables_info{
  margin-top: 0.5rem;
  font-size: 1.5rem;
  font-weight:bold;
}
.dataTables_paginate{
  margin-top: 0.5rem;
}
ul li .page-link{
  font-size: 1.5rem;
  font-weight: bold;
}
  table.dataTable thead>tr>td.sorting,
  table.dataTable thead>tr>td.sorting_asc,
  table.dataTable thead>tr>td.sorting_desc,
  table.dataTable thead>tr>th.sorting,
  table.dataTable thead>tr>th.sorting_asc,
  table.dataTable thead>tr>th.sorting_desc {
    padding-right: 30px
  }

  table.dataTable thead .sorting,
  table.dataTable thead .sorting_asc,
  table.dataTable thead .sorting_asc_disabled,
  table.dataTable thead .sorting_desc,
  table.dataTable thead .sorting_desc_disabled {
    cursor: pointer;
    position: relative
  }

  table.dataTable thead .sorting:after,
  table.dataTable thead .sorting:before,
  table.dataTable thead .sorting_asc:after,
  table.dataTable thead .sorting_asc:before,
  table.dataTable thead .sorting_asc_disabled:after,
  table.dataTable thead .sorting_asc_disabled:before,
  table.dataTable thead .sorting_desc:after,
  table.dataTable thead .sorting_desc:before,
  table.dataTable thead .sorting_desc_disabled:after,
  table.dataTable thead .sorting_desc_disabled:before {
    position: absolute;
    top : 0.5rem;
    bottom: 0rem;
    display: block;
    opacity: .3
  }

  table.dataTable thead .sorting:before,
  table.dataTable thead .sorting_asc:before,
  table.dataTable thead .sorting_asc_disabled:before,
  table.dataTable thead .sorting_desc:before,
  table.dataTable thead .sorting_desc_disabled:before {
    right: 1em;
    content: "\f0de";
    font-family: FontAwesome;
    font-size: 1rem
  }

  table.dataTable thead .sorting:after,
  table.dataTable thead .sorting_asc:after,
  table.dataTable thead .sorting_asc_disabled:after,
  table.dataTable thead .sorting_desc:after,
  table.dataTable thead .sorting_desc_disabled:after {
    content: "\f0dd";
    font-family: FontAwesome;
    right: 16px;
    font-size: 1rem
  }

  table.dataTable thead .sorting_asc:before,
  table.dataTable thead .sorting_desc:after {
    opacity: 1
  }

  table.dataTable thead .sorting_asc_disabled:before,
  table.dataTable thead .sorting_desc_disabled:after {
    opacity: 0
  } 


  /*th:first-child, td:first-child{
        position: sticky;
        left:0px;
        max-width:170px;
  }*/


.t-head {
  background-color:#000000;
  color: white;
  height: 10vh;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: white;
}

/*==============================*/