.material-symbols-outlined {
  font-variation-settings:
    'FILL' 0,
    'wght' 300,
    'GRAD' 0,
    'opsz' 24
}

.vendor_banner {
  margin-bottom: 120px;
  margin-top: 40px;
  display: block;
}

.vendor_banner img {
  width: 220px;
  height: auto;
  border-radius: 3px;
  border-color: #007CC7;
  border-width: 1px;
  border-style: solid;
}

.bg-forcast {
  background-color: #018301;
}

.bg-onpro {
  background-color: #007CC7;
}

.bg-histor {
  background-color: #D4EEF7;
  color: #007CC7;
}

.bg-histor span {
  color: #007CC7 !important;
}

div.table-mleft>span {

  padding-top: 12px;
  padding-left: 18px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.03rem;
}

.h-slide {
  margin-bottom: 25px;
}

.h-slide img {
  width: 720px;
  height: 250px;
  border-radius: 5px;
}

.procure-tablepro {
  background-color: #D4EEF7;
  padding: 15px;
  border-radius: 5px;
  display: flex;
  margin-bottom: 15px;
}

.procure-tablepro div {
  color: #007CC7;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 600;
  margin-right: 30px;
}

.tablepro-subject {
  width: 215px;

}

.tablepro-forecast {
  width: 180px;
}

.tablepro-duration {
  width: 150px;
}

.tablepro-forecast-contact {
  width: 185px;
}

.tablepro-contact {
  width: 215px;
}


/* -------------------------begain form search select ------------------------- */

#tor-duration {}

/* Style the input container */
.input-container-search,
.input-container-dura {
  display: flex;
  width: 100%;
  background-color: #ffffff;
  border-radius: 3px;
  border-color: #CDCDCD;
  border-style: solid;
  border-width: 1px;
  margin-top: 10px;
  margin-right: 10px;

}

/* Style the form icons */
.input-container-search .material-symbols-outlined {
  align-content: center;
  padding: 5px;
  color: #222222;
}

/* Style the input fields */
.input-field-search,
#tor-duration {
  width: 97%;
  padding: 8px;
  outline: none;
  font-size: 15px;
  color: #222222;
  border: none;
}

.input-field-search:focus {
  border: none;

}

/* Set a style for the submit button */
.btn- {
  background-color: white;
  color: #222222;
  padding: 15px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}

.btn-:hover {
  opacity: 1;
}

.material-symbols-outlined {
  font-size: 20px;
}

/* ------------------------- end form search subject ------------------------- */

#procure_list {
  margin-bottom: 120px;
}

#procure_list p {
  font-size: 13px;
  line-height: 1.5rem;
  padding-right: 15px;
}

.subject-accor {
  font-weight: 600;
  width: 213px;
}

.accordion-pro {
  background-color: #ffffff;
  color: #666;
  cursor: pointer;
  padding: 15px;
  width: 100%;
  border: none;
  outline: none;
  font-size: 13px;
  line-height: 1.5em;
  transition: 0.4s;
}

.accordion-pro div {
  margin-right: 15px;
  text-align: left;
  float: inline-start;
}

.subject-accor {
  width: 230px;
}

.forecast-accor {
  width: 165px;
}

.contact-accor {
  width: 215px;
}

.active,
.accordion:hover {
  background-color: #F8F8F8;
  border-top-width: 5px;
  border-top-style: solid;
  border-top-color: #F2F2F2;
}

.accordion-pro:after {
  content: url(../img/download-icon.png);
  float: right;
  width: 22px;
  height: 22px;
  display: block;
  margin-left: 5px;
  padding: 0px;
  margin: 0px;
}

.active:after {
  content: url(../img/upward-icon.png);
}

.panel-pro {
  background-color: #F8F8F8;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.prolist-line {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #C6D9E1;
}

.attfile-list {
  padding: 0px 20px 20px 20px;
}

.attfile-list a {
  font-size: 13px;
  line-height: 1.5em;
  background-color: #ffffff;
  border-radius: 100px;
  color: #0070ba;
  padding: 5px 10px 5px 10px;
  margin-top: 3px;
  margin-bottom: 3px;
  ;
  display: inline-block;
}

.panel-pro a:hover {
  color: #0070ba !important;
}

.attfile-pro {
  padding: 20px 20px 10px 20px;
  display: block;
  width: 100px;
}

/* ------------------------- Vendor Register ------------------------- */

.regiscontainer {
  width: 100%;
  overflow: auto;
}

.regiscontainer div {
  width: 50%;
  float: left;
}

.colright {
  display: flex;
  direction: rtl;
}

.label-att {
  margin-top: 30px;
}

.download-ven {
  border-color: #CDCDCD;
  border-width: 1px;
  border-style: solid;
  border-radius: 5px;
  text-align: center;
  padding: 15px;
  line-height: 1.5em;
  margin-left: 160px;
}

#procse .txtred {
  color: red;
  padding-left: 5px;
}

.hrpro {
  width: 100%;
  background-color: #b5d4df;
  height: 3px;
  clear: both;
  margin-top: 45px;
  margin-bottom: 45px;
}

#procse,
#procsecheck {
  border: none;
}

#procse td,
#procsecheck td {
  border: none;
  width: 350px;
  padding-bottom: 5px;
  padding-left: 0px;
  padding-right: 0px;

}

#procse input,
#procse textarea {
  width: 270px;
  border-color: #CDCDCD;
  border-style: solid;
  border-width: 1px;
  font-size: 15px;
  padding: 8px;
  border-radius: 3px;

}

#procse label {
  width: 100%;
  display: block;
  margin-bottom: 10px;
  margin-top: 10px;
  font-size: 14px;
}

#checkbox-brand {
  vertical-align: top;
  font-size: 14px;
}

#checkbox-brand span {
  width: 100%;
  margin-bottom: 10px;
  margin-top: 10px;
  display: block;
}

#checkbox-brand input {
  border-color: #CDCDCD;
  border-style: solid;
  border-width: 1px;
  font-size: 15px;
  border-radius: 3px;
  padding: 8px;
}

.label-att {
  margin-top: 40px;
  margin-bottom: 30px;
  color: #007CC7;
  font-weight: 600;
}

.label-att .txtred {
  display: inline;
}

input#is-brand-owner,
input#authorized,
input#general-supply {
  width: 20px;
  height: 20px;
  border-color: #CDCDCD !important;
  border-style: solid;
  border-width: 1px;
  margin-right: 10px;
  vertical-align: middle;
}

.procsubmit {
  height: 50px;
  width: 180px;
  border: none;
  background-color: #0565A9;
  /* For browsers that do not support gradients */
  background-image: linear-gradient(#3196D9, #0565A9);
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
  font-variant: all-petite-caps;
  border-radius: 5px;
  margin-left: auto;
  margin-right: auto;
  cursor: pointer;
}

.procusubmit-div {
  display: block;
  text-align: center;
  margin-bottom: 70px;
  margin-top: 45px;
}

.procuploaddiv {
  font-size: 11px;
  color: #999999;
  display: flex;
}

#btnupload, .spanupload {
   margin-right: 15px;
}

#btnupload {
  border-width: 5px;
  border-radius: 8px;
  border-style: solid;
  border-color: #D4EEF7;
  background-color: #0565A9;   /* For browsers that do not support gradients */
  background-image: linear-gradient(#3196D9, #0565A9);
  font-size: 12px;
  color: #ffffff;
  width: 140px;
  height: 50px;
  cursor: pointer;
}

.thankproc {
  margin-top: 50px;
  font-size: 25px;
  line-height: 40px;
  color: #007CC7;
  font-family: Arial, Helvetica, sans-serif;
  width: 440px;
  text-align: center;
  vertical-align: middle;
  display: block;
}

#slideBanner * {margin:0;padding:0;}
#slideBanner{position:relative;width:720px;height:250px;margin-bottom:20px;}
#slideBanner .content{overflow:hidden;width:100%;height:100%;}
#slideBanner .content ul li{width:720px;height:250px;}
#slideBanner .content ul li a{display:block;width:100%;height:100%;}
#slideBanner .tag{position:absolute;left:0;bottom:0;z-index:2;width:100%;font-size:0;letter-spacing:-8px;text-align:right;filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#7F000000', endColorstr='#7F000000');}
#slideBanner .tag ul{height:10px;padding:5px 10px;}
#slideBanner .tag li{display:inline-block;*zoom:1;*display:inline;overflow:hidden;width:25px;height:10px;margin:0 3px;font-size:0;line-height:0;letter-spacing:normal;background-color:#fff;opacity:0.4;filter:alpha(opacity=40);cursor:pointer;}
#slideBanner .tag li.current{opacity:1;filter:alpha(opacity=100);}
#slideBanner .pos{position:absolute;left:10px;bottom:0;height:20px;line-height:20px;color:#fff;}
#slideBanner .btn a{position:absolute;top:50%;z-index:2;width:45px;height:100px;margin-top:-50px;background:url(images/slide_arrow2.png) no-repeat 0 0;opacity:0.2;filter:alpha(opacity=20);-webkit-transition:all .3s linear;transition:all .3s linear;cursor:pointer;outline:none;}
#slideBanner .btn a:hover{opacity:0.5;filter:alpha(opacity=50);}
#slideBanner .btn a.disabled{opacity:0.1;filter:alpha(opacity=10);}
#slideBanner .btn .btnPrev{left:0;}
#slideBanner .btn .btnNext{right:0;background-position:right top;}

#slideBanner .tag li {
  width: 10px;
  height: 10px;
  border-radius: 100%;
}

#slideBanner .tag {
  text-align: center;

}
#slideBanner .tag ul {
  height: 10px;
  padding: 15px 10px;
}

#slideBanner .tag {
  background-color: rgba(0, 0, 0, 0);
}

#slideBanner .pos {
  margin-bottom: 10px;
}

#slideBanner .content ul li img {
  border-radius: 5px;
}