﻿.product-records {
  table-layout: fixed;
  text-align: left;
  width: 98%;
  margin: 0 auto;
  color: #333;
  border-collapse:collapse;
}

.product-records th,
td {
  padding: 10px 10px 10px 5px !important;

}

.product-records th {
  font-weight: bold !important;
  font-size  : 14px !important;
}

.product-details {
  cursor       : pointer;
  overflow     : hidden;
  text-overflow: ellipsis;
  white-space  : nowrap;
}

.source_head ul li {
  background-color: #e5e5e5;
  margin          : 0 5px;
  width           : 33%;
  overflow        : hidden;
}

.head_banner {
  padding: 0;

  background-repeat: no-repeat;
  background-size  : contain;

  /* background-image: url(/Themes/Starter/Content/images/customizeService/mobile_banner_bg.png); */
  font-size       : 16px;
  color           : #373330;
  line-height     : 25px;
  margin-bottom   : 20px;
  background-color: #f6f5f3;
}

/* .source_head.de .head_banner {
  background-repeat: no-repeat;

  background-size : contain;
  background-image: url(/Themes/Starter/Content/images/customizeService/de-mobile_banner_bg.png);
}

.source_head.ru .head_banner {

  background-image: url(/Themes/Starter/Content/images/customizeService/ru-mobile_banner_bg.png);
}

.source_head.france .head_banner {

  background-image: url(/Themes/Starter/Content/images/customizeService/fr-mobile_banner_bg.png);
} */



.head_banner b,
.head_banner strong {
  font-size : 18px;
  color     : #d08117;
  font-style: italic;
}

ul,
ol {
  list-style-type: none;
}

.topic-block .source_head ul {
  list-style: none;
  display   : flex;
  padding   : 0;
}

.head_banner p {
  text-align: left !important;
  padding   : 10px;
}

.source_head ul li {
  background-color: #e5e5e5;
  margin          : 0 5px;
}

.source_head ul li a {
  font-size  : 14px;
  font-weight: bold;
  color      : #5d6370;
  text-align : center;
  line-height: 14px;
  display    : block;
}

.source_head ul li p {
  margin-top: 7px;
  text-align: center;
  color     : #777;
}

.source_head ul li a img {
  width: 90%;
}

.topic-block-body {
  line-height: 14px;
  font-size  : 14px;
}

.source_head ul li.selected a,
.source_head ul li.selected p {
  color: #fff;
}

.source_head ul li.selected {
  background-image : url(/Themes/Starter/Content/images/customizeService/mobile-hover_bg.png);
  background-repeat: no-repeat;
  background-size  : 100% 100%;
  min-height       : 150px
}

@media (max-width: 640px) {
  .source_head ul li.selected {
    background-image : url(/Themes/Starter/Content/images/customizeService/mobile-hover_bg.png);
    background-repeat: no-repeat;
    background-size  : 100% 100%;
    min-height       : 120px
  }
}

.inputs {
  white-space: normal !important;
}

.inputs label {
  text-align    : left;
  padding-bottom: 10px;
}

.service_detail {
  margin    : -10px;
  background: #f9f9f9;

}

.service_detail .service_info {
  margin: 20px 0 10px 0;
}

.service_detail h3 {
  margin-bottom: 20px;
  text-align   : left;
  line-height  : 15px;
}

.service_detail h3 {
  display    : inline-block;
  height     : 41px;
  background : #a8d5e6 url(/Themes/Starter/Content/images/customizeService/title_bg.jpg) no-repeat right 0;
  line-height: 41px;
  padding    : 0 20px 0 10px;
  color      : #fff;
  font-size  : 16px;
  font-weight: bold;

}

.service_detail .service_info p {
  padding    : 5px 10px;
  text-align : left;
  font-size  : 14px;
  line-height: 24px;
}

.service_detail .service_info p.fred {
  text-align: right;
}

.btn_p30 {
  display    : inline-block;
  height     : 28px;
  line-height: 28px;
  padding    : 0 30px;
}

.btn_orange {
  color            : #444;
  border           : #df9f26 1px solid;
  cursor           : pointer;
  font-weight      : bold;
  cursor           : pointer;
  background       : #ffbc2c;
  background-image : -moz-linear-gradient(top, #ffd953, #ffbc2c);
  background-image : -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffd953), color-stop(1, #ffbc2c));
  filter           : progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd953', endColorstr='#ffbc2c', GradientType='0');
  background-image : -o-linear-gradient(top, #ffd953, #ffbc2c);
  background-image : -ms-linear-gradient(top, #ffd953, #ffbc2c);
  background-repeat: repeat-x;
}

.customize-service-page .topic-block-title{
  display: none;
}

.customize-service-page .sourcing_detail .pro_info {
  background-color: #fff;
  border          : 1px solid #ccc;
  border-top-color: #999;
  padding-top     : 10px;
  line-height     : 20px;
  position        : relative;
  height          : 300px;
}

.set-left {
  text-align: left;
  margin    : 10px 0;
}

.set-left-set-bottom {
  padding-bottom: 120px !important;
}

.customize-service-page .packed strong {
  color     : #e7a647;
  font-style: italic;
}

.customize-service-page .sourcing_detail .pro_info .textarea {
  width      : 100%;
  height     : 250px;
  border     : none;
  overflow-y : auto;
  font-family: Arial, Helvetica, sans-serif;
  font-size  : 13px;
  color      : #333;
  resize     : none;
  line-height: 20px;
}

.fred {
  color: #f00;
}

.form-fields {
  padding: 30px 60px !important;
}

.form-fields .inputs input {
  width: 100%;
}

.form-fields .be-center {
  justify-content: center;
}

.sourcing_example span {
  display         : inline-block;
  margin          : 20px 0 20px 0;
  padding         : 5px 10px;
  background-color: #e8e8e8;
}


.customize-service-page .detail_info {
  margin          : -20px -8px 0 -8px;
  background-color: #f9f9f9;
  padding-bottom  : 1px;
}

.customize-service-page .topic-block{
  margin-bottom:0;
}

.detail_info ol {
  padding-right  : 15px;
  list-style-type: square;
}

.customize-service-page .detail_info p {
  color      : #373330;
  font-size  : 14px;
  line-height: 20px;
  text-align : left;
  padding    : 5px 10px 0px 10px;
}

.detail_requirement h5 {
  color      : #555;
  font-size  : 14px;
  line-height: 20px;
  text-align : center;
}

.detail_requirement p {
  text-align : left;
  padding    : 0px 10px;
  margin     : 10px 0px;
  line-height: 20px;
  font-size  : 14px;
}

.fblue {
  color          : #06c;
  text-decoration: underline;
}

.sourcing_detail {
  background-color: #f9f9f9;
  margin          : 0 -8px;
}

.sourcing_example {
  text-align: center;
}

.page {
  text-align: center;
}

.service_info img {
  width : 100%;
  height: 100px
}

.service_detail span {
  display    : inline-block;
  height     : 41px;
  line-height: 21px;
  padding    : 0 20px 0 10px;
  color      : #fff;
  font-size  : 16px;
  font-weight: bold;
  background: unset;
  color: #111;
}

.testimo_txt .avatar img {
  width: 50px !important;

  height: 50px !important;
}

.testimo_txt table td:nth-child(2) img {
  width: 15px !important;

  height: 12px !important;
}

.sourcing_example ul {
  overflow  : auto;
  list-style: none;
}

.sourcing_example ul li {
  float        : left;
  margin-left  : 10px;
  margin-bottom: 10px;
}

.file-view-list {
  width: 100%;
  font-size:14px;
}

.file-view-list .file-item {
  display        : flex;
  width          : 100%;
  border         : 1px solid #dcdcdc;
  justify-content: space-between;
  padding        : 5px;
  margin-bottom  : 3px;
}

.file-del {
  cursor: pointer;
  color : red;
}

.fileAdd {
  margin-left: 20px;
  cursor     : pointer;
  height:min-content;
}

.trend-swiper-panel {
  position: relative;
}

.trend-swiper-panel .swiper-container {
  position : static;
  width    : 90%;
  max-width: 600px;
  display: inherit;
}

.trend-swiper-panel .swiper-container .swiper-slide>div>img {
  max-width: 100%;
  height: fit-content;
  width: fit-content;
}

.trend-swiper-panel .swiper-button-prev,
.trend-swiper-panel .swiper-button-next {
  padding: 145px 0;
  top: 30%;
}

.trend-swiper-panel .swiper-button-prev{
  left:0;
}

.trend-swiper-panel .swiper-button-next{
  right:0;
}

.trend-swiper-panel .swiper-button-next:after,
.trend-swiper-panel .swiper-container-rtl .swiper-button-next:after {
  content   : " ";
  width     : 21px;
  height    : 39px;
  background: url(/Themes/Starter/Content/images/orange_arrow.png) no-repeat;
}



.trend-swiper-panel .swiper-button-prev:after,
.trend-swiper-panel .swiper-container-rtl .swiper-button-prev:after {
  content   : " ";
  width     : 21px;
  height    : 39px;
  background: url(/Themes/Starter/Content/images/orange_arrow.png) no-repeat;
  transform : rotateY(180deg);
}



.trend-swiper-panel .swiper-container .swiper-slide>div {
  position  : relative;
  height: 45vw;
  max-height:288px;
  overflow: hidden;
  vertical-align: middle;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dcdcdc;
  box-sizing: border-box;
}

.trend_like {
  position        : absolute;
  top             : 5px;
  right           : 5px;
  background-color: #fff;
  padding         : 5px;
  border-radius   : 3px;
  text-align      : center;
  cursor          : pointer;
}

.trend_like i {
  display: block;
  width  : 26px;
  height : 31px;
  margin : 0 auto;
}

.trend_like.like i {
  background: url(/Themes/Starter/Content/images/icon_love_selected.png) no-repeat;
}

.trend_like.unlike i {
  background: url(/Themes/Starter/Content/images/icon_love.png) no-repeat;
}

.customize-service-mb .language-pc {
  display: none;
}

.jq_trending a img {
  padding-top: 5px;
  width      : inherit !important;
}

.example-panel{
  display: flex;
  text-align: left;
  margin-bottom:10px;
}

.example-panel label{
  white-space: nowrap;
}

.jq_show_trending .sourcing_example{
  text-align: left;
}

.sourcing_detail .inputs textarea{
  width: 100%;
}

.trend-swiper-panel .swiper-service-prev,
.trend-swiper-panel .swiper-service-next,
.trend-swiper-panel .swiper-trend-prev,
.trend-swiper-panel .swiper-trend-next{
  display: none;
}

.jq_show_trending{
  display: none;
}

.file-name{
  display: flex;
  align-items: baseline;
  width: 95%;
}

.file-name > span:nth-child(1){
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.success_info h2 span.type_1_show,
.success_info h2 span.type_3_show{
  display:none;
}

@media screen and (max-width: 420px) {
  .trend-swiper-panel .swiper-button-prev,
  .trend-swiper-panel .swiper-button-next{
    padding:95px 0;
  }

}

