@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700&subset=latin-ext");
@import url("https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700&subset=latin-ext");
@import url("https://fonts.googleapis.com/css2?family=Lobster&display=swap");
*:active,
*:focus {
  outline: none !important;
}

body {
  font-family: "Open Sans", sans-serif;
  background: #fff;
  overflow-x: hidden;
  padding-bottom: 40px;
}

header {
  position: sticky;
  top: 0;
  width: 100%;
  padding: 0 0 0 290px;
  z-index: 200;
}
header a.logo-link {
  position: absolute;
  left: 0;
  top: 0;
  width: 290px;
  height: 80px;
  display: block;
  z-index: 999;
}
header > section {
  background: #FFF;
  box-shadow: 5px -1px 6px #DDD;
  height: 70px;
  position: relative;
}
header ul.menu {
  margin: 0;
  padding: 0;
  list-style: none;
}
header ul.menu > li {
  float: left;
  position: relative;
  border-right: 1px solid #CCCCCC;
}
header ul.menu > li:first-child {
  border-left: 1px solid #CCCCCC;
}
header ul.menu > li.new-products:hover a {
  background: #DDDDDD;
}
header ul.menu > li.b2b a {
  font: 700 20px/40px "Titillium Web", sans-serif;
}
header ul.menu > li.b2b a i {
  color: #ec1c24;
  font-style: normal;
}
header ul.menu > li > a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70px;
  text-align: center;
  padding: 15px 20px;
  color: #313131;
  font: 600 13px/20px "Titillium Web", sans-serif;
}
header ul.menu > li:hover > a {
  text-decoration: none;
  background: #ddd;
}
header ul.menu > li:hover > ul {
  display: block;
}
header ul.menu > li.active > a {
  text-decoration: none;
  background: #ddd;
}
header ul.menu > li > ul {
  position: absolute;
  left: 0;
  top: 70px;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 200px;
  z-index: 999;
  display: none;
}
header ul.menu > li > ul li {
  margin: 5px 0 0;
}
header ul.menu > li > ul li a {
  display: block;
  padding: 10px !important;
  color: #313131;
  background: #fff;
  font: 600 14px/20px "Titillium Web", sans-serif;
}
header ul.menu > li > ul li a:hover {
  text-decoration: none;
  color: #ec1c24;
}
header .right-links {
  position: absolute;
  right: 0;
  top: 0;
}
header .right-links .languages {
  float: left;
  padding: 0;
}
header .right-links .languages a {
  display: block;
  text-align: center;
  font: 600 14px/15px "Titillium Web", sans-serif;
  padding: 1px 15px;
  height: 66px;
  margin: 2px;
  border: 1px solid #DDD;
  border-radius: 4px;
  color: #313131;
}
header .right-links .languages a .choice {
  font-size: 14px;
}
header .right-links .languages a:last-child {
  border-bottom: 0 !important;
}
header .right-links .languages a.active {
  color: #ec1c24;
}
header .right-links .languages a:hover {
  color: #000;
  text-decoration: none;
}
header .right-links .logo-list {
  float: left;
  width: 119px;
  padding: 0 5px 0 0;
}
header .right-links a.logo {
  height: 32px;
  border: 1px solid #DDD;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 15px;
  margin: 2px;
  border-radius: 4px;
}
header .right-links a.logo:first-child {
  border-bottom: 1px solid #DDD;
}
header .right-links a.logo img {
  max-height: 25px;
}

ul.new-menu {
  padding: 0;
  margin: 0;
  list-style: none;
}
ul.new-menu > li {
  float: left;
  position: relative;
}
ul.new-menu > li.catalogue > a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 66px;
  text-align: center;
  padding: 10px 10px;
  color: #424242;
  font: 600 13px/20px "Open Sans", sans-serif;
  background: #FFF;
  border: 1px solid #CCC;
  margin: 2px;
  border-radius: 4px;
}
ul.new-menu > li.catalogue > a > div {
  margin-bottom: 5px;
}
ul.new-menu > li.single > a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 66px;
  text-align: center;
  padding: 15px;
  color: #424242;
  font: 700 11px/20px "Open Sans", sans-serif;
  background: #FFF;
  border: 1px solid #ccc;
  margin: 2px;
  border-radius: 4px;
}
ul.new-menu > li.pos > a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 66px;
  text-align: center;
  padding: 10px 10px;
  color: #424242;
  font: 600 13px/20px "Open Sans", sans-serif;
  background: #FFF;
  border: 1px solid #CCC;
  margin: 2px;
  border-radius: 4px;
}
ul.new-menu > li.b2b > a.b2b-link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  text-align: center;
  padding: 15px 10px;
  color: #424242;
  font: 700 20px/66px "Open Sans", sans-serif;
  background: #FFF;
  border: 1px solid #ccc;
  margin: 2px;
  border-radius: 4px;
}
ul.new-menu > li.b2b > a.b2b-link i {
  color: #ec1c24;
  font-style: normal;
}
ul.new-menu > li.b2b > a.download-link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  text-align: center;
  padding: 2px 10px !important;
  color: #424242;
  font: 700 12px/16px "Open Sans", sans-serif;
  background: #fff;
  border: 1px solid #ddd;
  margin: 2px;
  border-radius: 4px;
}
ul.new-menu > li.b2b > a.download-link i {
  color: #ec1c24;
  font-style: normal;
}
ul.new-menu > li.double > ul {
  padding: 0;
  margin: 2px 0 0 0;
  list-style: none;
}
ul.new-menu > li.double > ul > li {
  position: relative;
  margin-right: 2px;
}
ul.new-menu > li.double > ul > li > a {
  display: block;
  text-align: center;
  color: #333;
  white-space: nowrap;
  padding: 0 10px;
  font: 600 13px/30px "Open Sans", sans-serif;
  border: 1px solid #CCC;
  box-sizing: border-box;
  border-radius: 4px;
  margin: 2px 0;
}
ul.new-menu > li.double > ul > li > a:last-child {
  margin-top: 0;
}
ul.new-menu > li.double > ul > li > ul {
  position: absolute;
  left: 0;
  top: 30px;
  margin: 0;
  padding: 2px 0 0;
  list-style: none;
  width: 180px;
  z-index: 999;
  display: none;
}
ul.new-menu > li.double > ul > li > ul li {
  border: 1px solid #CCC;
}
ul.new-menu > li.double > ul > li > ul li a {
  display: block;
  padding: 5px !important;
  color: #313131;
  background: #fff;
  font: 600 13px/16px "Open Sans", sans-serif;
  border-radius: 4px;
}
ul.new-menu > li.double > ul > li > ul li a:hover {
  text-decoration: none;
  color: #ec1c24;
}
ul.new-menu > li.double > ul > li:hover > ul {
  display: block;
}
ul.new-menu > li.double > a {
  display: block;
  text-align: center;
  border-bottom: 1px solid #CCC;
}
ul.new-menu > li.double > a:last-child {
  border-bottom: none;
}
ul.new-menu a:hover {
  background: #AAA !important;
  color: #000 !important;
  text-decoration: none;
}
ul.new-menu a:active,
ul.new-menu a:focus {
  text-decoration: none !important;
}
ul.new-menu li.active > a {
  color: #ec1c24 !important;
}

nav {
  background: #FFF;
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 290px;
  height: 100%;
}
nav section.logo {
  position: relative;
  z-index: 600;
}
nav section.logo a {
  display: block;
  padding: 20px;
}
nav section.logo a img {
  width: 100%;
}
nav section.news {
  margin: 15px 0 0;
  padding: 0 10px;
}
nav section.footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 0 10px;
  text-align: center;
}
nav section.footer a {
  display: block;
  align-items: center;
  justify-content: center;
  background: #e8e8e8;
  padding: 10px 12px;
  margin: 0 0 10px;
  text-align: left;
  color: #333;
  font: 600 14px/20px "Open Sans", sans-serif;
  border-radius: 5px;
}
nav section.footer a i {
  font-size: 14px;
  line-height: 18px;
  margin-right: 6px;
  float: right;
}

*:active,
*:focus,
a:active {
  outline: none;
}

section.search {
  position: relative;
  z-index: 300;
  padding: 0 15px;
}

.input {
  margin: 0 0 5px;
}
.input input {
  width: 100%;
  height: 35px;
  background: #231f20;
  border-color: #231f20;
  color: #FFFFFF;
  font: 600 13px/32px "Open Sans", sans-serif;
  border-radius: 4px;
  padding: 0 10px;
  border: 0;
}
.input input::placeholder {
  color: #FFFFFF;
}
.input input.general-input-color {
  background: #FFF !important;
  border: 2px solid #000 !important;
  color: #000 !important;
  font-weight: bold;
}
.input input.general-input-color::placeholder {
  color: #000 !important;
  font-weight: bold;
}

.button button {
  width: 100%;
  height: 40px;
  background: #ec1c24;
  border-color: #ec1c24;
  color: #FFFFFF;
  border-radius: 4px;
  text-align: center;
  font: 600 15px/36px "Open Sans", sans-serif;
  cursor: pointer;
}
.button button i {
  margin-right: 8px;
  font-style: 19px;
}

.selectbox {
  margin: 0 0 5px;
}
.selectbox .select2-container {
  width: 100% !important;
}
.selectbox .select2-container .select2-selection {
  height: 40px;
  background: #231f20;
  border-color: #231f20;
  color: #FFFFFF;
  font: 600 14px/36px "Open Sans", sans-serif;
}
.selectbox li.search {
  background: #fff;
  padding: 5px 10px;
}
.selectbox li.search input {
  background: #F4F4F4;
  padding: 4px 10px;
  border: 1px solid #4c4c4c;
  width: 100%;
  height: 32px;
  font: 600 13px/24px "Open Sans", sans-serif;
  color: #000;
}
.selectbox .dropdown-menu {
  max-height: 558px;
  min-width: 250px;
  overflow-y: auto !important;
  left: 275px;
  top: -2px;
  border: 4px solid #221f20;
  border-radius: 0;
  padding: 0;
}
.selectbox .dropdown-menu > li {
  border-bottom: 1px solid #CCC;
}
.selectbox .dropdown-menu.motors-dropdown, .selectbox .dropdown-menu.models-dropdown {
  max-width: 1200px;
  min-width: 300px;
  padding-top: 0;
}
.selectbox .dropdown-menu > li:nth-child(even) {
  background: #F2F2F2;
}
.selectbox .loading {
  padding: 40px;
  font: 600 24px/30px "Open Sans", sans-serif;
  color: #313131;
  text-align: center;
}
.selectbox .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #FFFFFF !important;
}
.selectbox .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 34px;
  right: 10px;
}
.selectbox .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: #FFFFFF transparent transparent transparent;
}
.selectbox .btn-select {
  width: 100%;
  height: 35px;
  text-align: left;
  background: #231f20;
  border-color: #231f20;
  color: #FFFFFF;
  font: 600 13px/31px "Open Sans", sans-serif;
  padding: 0 10px;
  position: relative;
}
.selectbox .btn-select span.caret {
  position: absolute;
  right: 15px;
  top: 16px;
  color: #FFFFFF;
}
.selectbox .dropdown.marked .btn-select {
  background: #417646;
  border: 2px solid #417646;
  color: #f0f0f0;
}
.selectbox .dropdown.marked .btn-select span.caret {
  color: #FFF;
}
.selectbox li.model-name {
  color: #FFF;
  padding: 0 10px;
  margin: 5px 0 0;
}
.selectbox li.model-name span {
  background: #585858;
  font: 600 15px/20px "Titillium Web", sans-serif;
  padding: 5px;
  color: #FFF;
  border-radius: 0;
  display: block;
}
.selectbox label.model-label {
  display: flex;
  align-items: center;
  padding: 4px 10px;
  margin: 0;
  cursor: pointer;
  position: relative;
  font-weight: 600;
}
.selectbox label.model-label input {
  display: none;
}
.selectbox label.model-label input:checked + .check i {
  color: #333;
}
.selectbox label.model-label h2 {
  font: 600 12px/17px "Open Sans", sans-serif;
  margin: 0;
}
.selectbox label.model-label .right {
  position: absolute;
  right: 5px;
  font-style: normal;
}
.selectbox label.model-label .check {
  width: 14px;
  height: 14px;
  border: 1px solid #4c4c4c;
  margin-right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.selectbox label.model-label .check i {
  color: transparent;
}
.selectbox label.model-label:hover, .selectbox label.model-label.highlited {
  background: #f9a4a4;
  color: #000;
}
.selectbox label.model-label:hover .check, .selectbox label.model-label.highlited .check {
  border-color: #161616;
}

.highlited label.model-label {
  background: #f9a4a4;
  color: #000;
}
.highlited label.model-label .check {
  border-color: #4c4c4c;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: #f9a4a4 !important;
  color: #333;
}

section.stage {
  padding: 0 0 0 290px;
}
section.stage .content {
  padding: 10px 0 0 0;
}

.title-bar {
  border-bottom: 1px solid #CCC;
  padding: 0 0 10px;
  margin: 0 0 10px;
  position: relative;
  display: flex;
  align-items: center;
}
.title-bar .left {
  float: left;
  flex: auto;
}
.title-bar .right {
  float: right;
}
.title-bar .right i {
  float: right;
}
.title-bar h1 {
  margin: 0;
  font: 600 16px/30px "Titillium Web", sans-serif;
}
.title-bar h1 i {
  margin-right: 6px;
  font-size: 22px;
  color: #ec1c24;
}
.title-bar h2 {
  display: flex;
  align-items: center;
  margin: 0;
  font: 600 16px/30px "Titillium Web", sans-serif;
}
.title-bar h2 i {
  margin-right: 6px;
  font-size: 22px;
  color: #231f20;
}
.title-bar h2 strong {
  margin-right: 6px;
  font-size: 18px;
}
.title-bar .buttons {
  position: absolute;
  right: 0;
  top: 6px;
}
.title-bar .buttons a {
  width: 30px;
  height: 30px;
  display: block;
  float: left;
  padding: 5px;
  text-align: center;
  font-size: 20px;
  line-height: 20px;
  background: #231f20;
  color: #FFF;
}
.title-bar .buttons a:last-child {
  border-left: 1px solid #666;
}

.news-products {
  background: #FFF;
  padding: 15px;
}
.news-products .slick-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.news-products .slick-dots li {
  margin: 0 2px;
}
.news-products .slick-dots li button {
  font-size: 0;
  border: 0;
  background: #231f20;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  padding: 0;
}
.news-products .slick-dots li.slick-active button {
  background: #ec1c24;
}

.product-detail {
  display: flex;
  position: relative;
}
.product-detail .image {
  flex-basis: 400px;
  flex-shrink: 0;
  flex-grow: 0;
  position: relative;
  margin: 0 0 30px;
}
.product-detail .image img {
  width: 100%;
  border: 1px solid #CCC;
}
.product-detail .information {
  flex: auto;
  padding: 0 0 0 15px;
}

table.product-info {
  width: 100%;
  border-collapse: collapse;
  color: #313131;
}
table.product-info th,
table.product-info td {
  border: 1px solid #CCC;
  padding: 5px;
  font: 600 13px/15px "Open Sans", sans-serif;
}
table.product-info th h1,
table.product-info th h2,
table.product-info th h3,
table.product-info td h1,
table.product-info td h2,
table.product-info td h3 {
  font: 700 13px/15px "Open Sans", sans-serif;
  margin: 0;
}
table.product-info th {
  font: 600 13px/18px "Open Sans", sans-serif !important;
  color: #fff;
  background: #d93831 !important;
}
table.product-info > tbody > tr > td:first-child {
  font-weight: 600;
}
table.product-info > tbody > tr:nth-child(even) td {
  background: #f2f2f2;
}

table.product-info.primary > tbody > tr > td:first-child {
  color: #000;
}

.ptc {
  color: #ec1c24 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}
.ptc strong {
  border-right: 1px solid #CCC;
  padding: 0 15px;
  display: inline-block;
}

.ptc2 {
  color: #ec1c24 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 0 !important;
}
.ptc2 strong {
  border-right: 1px solid #CCC;
  padding: 0 7px;
  display: inline-block;
}
.ptc2 strong:first-child {
  padding-left: 5px;
}

td.ptc {
  padding: 5px !important;
}

.select2-container--default .select2-results > .select2-results__options {
  max-height: 340px !important;
}

.new-warning,
.title-text {
  font: 600 16px "Titillium Web", sans-serif;
  vertical-align: middle;
  text-align: center;
}

.new-band {
  position: absolute;
  bottom: -30px;
  left: -8px;
  color: #313131;
  display: flex;
  align-items: center;
  font: 600 12px/20px "Titillium Web", sans-serif;
  white-space: nowrap;
  padding: 5px 10px;
}
.new-band i {
  font-size: 14px;
  color: #ec1c24;
  margin-right: 5px;
}

.tecdoc-band {
  position: absolute;
  bottom: -30px;
  right: -5px;
}
.tecdoc-band img {
  height: 24px;
  width: auto !important;
  border: 0 !important;
}

table.motors-list-table {
  width: 100%;
  border-collapse: collapse;
  color: #000;
  user-select: none;

}
table.motors-list-table th,
table.motors-list-table td {
  padding: 5px;
  font: 600 12px/16px "Open Sans", sans-serif;
  border: 1px solid #CCC;
}
table.motors-list-table th {
  font: 600 12px/14px "Titillium Web", sans-serif;
  background: #d93831 !important;
  color: #fff !important;
  position: sticky;
  top: -2px;
}
table.motors-list-table tr:hover td {
  background: #CCC !important;
}
table.motors-list-table tr:nth-child(even) td {
  background: #F2F2F2;
}

.brand-box-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-gap: 10px;
}

.brand-header {
  display: flex;
  align-items: center;
  margin: 0 0 5px;
}
.brand-header .logo {
  flex: 1 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 5px 0 0 !important;
  border: 0 !important;
  height: 122px;
}
.brand-header .logo img {
  height: 100px;
}
.brand-header .buttons {
  margin-bottom: 0 !important;
}
.brand-header .download {
  flex: 1;
  margin: 0 0 0 5px !important;
}
.brand-header .top-download {
  background: #FFF;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  color: #000;
  border: 1px solid #FFF !important;
  height: 122px;
  position: relative;
}
.brand-header .top-download .toplam,
.brand-header .top-download .esdeger {
  font: 600 14px/18px "Open Sans", sans-serif;
  color: #000;
  padding: 10px;
}
.brand-header .top-download .toplam {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: bold;
}
.brand-header .top-download .esdeger {
  position: absolute;
  right: 0;
  top: 0;
}
.brand-header .top-download img {
  height: 40px;
  margin: 0 0 8px;
}
.brand-header .top-download span {
  display: block;
}
.brand-header .top-download:hover {
  text-decoration: none;
  background: #F2F2F2;
  border: 1px solid #000 !important;
}

a:active,
a:focus {
  text-decoration: underline;
}

.brand-box {
  border: 1px solid #CCC;
  background: #FFF;
  padding: 15px;
  display: block;
  text-align: center;
  position: relative;
}
.brand-box .product-total {
  position: absolute;
  right: 10px;
  bottom: 10px;
  color: #333;
  font: 600 14px "Open Sans", sans-serif;
}
.brand-box .download {
  position: absolute;
  right: 10px;
  bottom: 10px;
  color: #E30813;
  font-size: 28px;
}
.brand-box > img {
  height: 90px;
  object-fit: contain;
}
.brand-box:hover {
  box-shadow: 0 0 10px #AAA;
}

.brands-modal {
  padding: 15px;
}
.brands-modal .logo {
  position: relative;
  text-align: center;
  margin: 0 auto 15px auto;
  width: 200px;
  background: #FFF;
  border: 1px solid #DDD;
  padding: 10px 5px;
}
.brands-modal .logo .count {
  position: absolute;
  right: 10px;
  bottom: 10px;
  font: 600 14px "Open Sans", sans-serif;
}
.brands-modal .alert {
  color: #ec1c24 !important;
}
.brands-modal .buttons {
  text-align: center;
  margin: 0 0 30px;
}
.brands-modal .buttons a {
  background: #3087a1;
  border: 0;
}

.models-list a.model-link {
  display: flex;
  -ms-align-items: center;
  align-items: center;
  text-align: left;
  font: 600 13px "Open Sans", sans-serif;
  background: #FFF;
  color: #333;
  font-size: 13px;
  line-height: 14px;
  margin: 0 0 5px;
}
.models-list a.model-link.catalog {
  position: relative;
}
.models-list a.model-link.catalog strong {
  margin-right: 10px;
  font-weight: 600 !important;
}
.models-list a.model-link.catalog span {
  font: 12px/14px "Open Sans", sans-serif;
  display: flex;
  align-items: center;
  background: #ed1c25;
  color: #ffffff;
  padding: 1px 6px;
  border-radius: 3px;
}
.models-list a.model-link.catalog span i {
  margin-right: 5px;
}
.models-list a.model-link.catalog:hover {
  text-decoration: none;
}
.models-list a.model-link .title {
  flex: auto;
}
.models-list a.model-link .title .sn {
  width: 25px;
  display: inline-block;
  margin-right: 5px;
  border-right: 4px solid #DCAE96;
  padding: 3px;
  text-align: center;
}
.models-list a.model-link .right {
  float: right;
  border-left: 1px solid #333;
  width: 35px;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  padding-left: 5px;
}
.models-list a.model-link .right .download {
  margin-left: 15px;
  font: 15px/15px "Open Sans", sans-serif;
  display: flex;
  border: 0;
  align-items: center;
  background: transparent;
  color: #198038;
  padding: 2px 6px;
  border-radius: 3px;
  float: right;
}
.models-list a.model-link:hover {
  background: #CCC;
  text-decoration: none;
}

#brands-modal .modal-dialog {
  width: 640px !important;
}

#brands-modal .modal-content {
  background-color: #DCAE96;
}

.model-list-item {
  display: flex;
  -ms-align-items: center;
  align-items: center;
  padding: 5px;
  border-radius: 0;
  margin-bottom: 0;
}
.model-list-item:nth-child(odd) {
  background: #F2F2F2;
}
.model-list-item .check {
  float: left;
  width: 16px;
  height: 16px;
  background: #FFF;
  border: 1px solid #DDD;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 10px 0 0;
}
.model-list-item .check i {
  color: #424242;
  opacity: 0;
}
.model-list-item .check input {
  display: none;
}
.model-list-item .check input:checked + i {
  opacity: 1 !important;
}
.model-list-item .title {
  flex: auto;
  font-family: "Titillium Web", sans-serif;
}
.model-list-item .right {
  float: right;
  display: flex;
  align-items: center;
}
.model-list-item .right strong {
  margin-right: 5px;
}
.model-list-item .right span {
  font: 12px/18px "Open Sans", sans-serif;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  align-items: center;
  background: #ed1c25;
  color: #ffffff;
  padding: 1px 6px;
  border-radius: 3px;
}
.model-list-item .right span a {
  color: #FFF;
}
.model-list-item .right span i {
  margin-right: 5px;
}

.catalog-create-button {
  width: 100%;
  height: 38px;
  background: #ec1b24;
  border-radius: 4px;
  color: #fff;
  text-align: center;
  border: 0;
}

.create-catalog-download {
  margin: 15px 0 0;
  display: block;
  width: 100%;
  height: 38px;
  line-height: 38px;
  background: #337ab7;
  border-radius: 4px;
  color: #fff;
  text-align: center;
  border: 0;
}

.create-catalog-download:hover {
  text-decoration: none;
  color: #fff;
}

.tcp {
  color: #ec1c24;
}

.selected-motor-code {
  background: #ffbb8e;
}

.products-table {
  width: 100%;
  border-collapse: collapse;
}
.products-table th,
.products-table td {
  padding: 8px;
  border: 1px solid #CCC;
  font: 600 12px/17px "Open Sans", sans-serif;
  color: #414141;
}
.products-table th a,
.products-table td a {
  color: #414141;
}
.products-table th {
  font: 600 12px/18px "Titillium Web", sans-serif;
  color: #FFF;
  padding: 5px 8px;
  height: 39px;
  vertical-align: middle;
  position: sticky;
  top: -2px;
  border-top: 1px solid #DDD;
  background: #d93831;
}
.products-table td.narin-no {
  text-align: center;
  color: #ec1c24;
}
.products-table td.oems {
  padding: 0;
}
.products-table td.oems .oem-item {
  width: 100%;
  padding: 5px;
  border-bottom: 1px solid #DDD;
}
.products-table td.oems .oem-item:last-child {
  border-bottom: 0 !important;
}

.white-stage {
  padding: 15px;
  background: #FFF;
}

#preview {
  position: absolute;
  border: 1px solid #DDD;
  background: #FFF;
  padding: 5px;
  display: none;
  color: #fff;
  z-index: 999;
}
#preview img {
  width: 250px;
}

.bg-title {
  background: #585858;
  padding: 5px 10px;
  position: relative;
  margin: 15px 0;
  display: flex;
  justify-content: space-between;
}
.bg-title .left {
  float: left;
}
.bg-title .left h2 {
  float: left;
}
.bg-title .left .nrn-btn {
  float: left;
  margin-left: 15px;
}
.bg-title h2 {
  font: 600 13px/30px "Open Sans", sans-serif;
  margin: 0;
  color: #FFF;
}
.bg-title span {
  color: #FFF !important;
}
.bg-title .buttons {
  float: right;
  display: flex;
}
.bg-title .warning-text {
  color: #FFF;
  font: 600 13px/30px "Open Sans";
}

a.nrn-btn {
  display: flex;
  margin-left: 10px;
  align-items: center;
  height: 30px;
  padding: 0 5px;
  border: 1px solid #DDD;
}
a.nrn-btn.l {
  padding: 5px 10px;
  margin: 0 10px 10px 0;
  float: left;
}
a.nrn-btn i {
  color: #ec1c24;
  margin: 0 6px 0 0;
  font-size: 15px;
}
a.nrn-btn span {
  font: 600 14px/20px "Open Sans", sans-serif;
  color: #313131;
}
a.nrn-btn:hover {
  background: #DDD;
  text-decoration: none;
}

.product-list-detail-item,
.product-list-motor-item {
  display: none;
}

.product-list-item {
  background: #FFF;
  border: 5px solid #FFF;
  padding: 5px;
  display: block;
}
.product-list-item .img {
  border: 1px solid #DDD;
  border-bottom: 0;
}
.product-list-item:hover, .product-list-item:active, .product-list-item:focus {
  text-decoration: none;
}
.product-list-item.active {
  border-color: #ec1c24;
}

.popup-stage {
  background: #FFF;
  padding: 15px;
}
.popup-stage .popup-title {
  background: #231f20;
  padding: 10px 15px;
  color: #fff;
  font: 600 17px/20px "Titillium Web", sans-serif;
  margin: 0 0 15px;
}

.btn-narin {
  background: #ec1c24;
  color: #FFF;
}
.btn-narin:hover {
  text-decoration: none;
  color: #FFF;
}

a.all-show {
  display: none;
}

a.oem-link {
  color: #313131;
  font-weight: 500 !important;
}

.back-to-top,
.back-to-down {
  background: rgba(0, 0, 0, 0.5);
  margin: 0;
  position: fixed;
  bottom: 54px;
  right: 15px;
  padding: 5px 15px;
  text-align: center;
  line-height: 25px;
  font-size: 20px;
  z-index: 100;
  text-decoration: none;
  color: #ffffff;
}

.back-to-down {
  bottom: 15px;
}

table.contact-table {
  width: 100%;
  border-collapse: collapse;
  font: 600 14px/20px "Open Sans", sans-serif;
}
table.contact-table.fixed {
  position: sticky;
  top: 70px;
  z-index: 333;
}
table.contact-table td {
  border: 1px solid #CCC;
  padding: 8px;
}
table.contact-table.peoples tr:nth-child(even) {
  background: #F2F2F2;
}

table.hr {
  background: #FFFFFF;
  font: 600 14px/24px "Open Sans", sans-serif;
}
table.hr h2 {
  margin: 5px 0;
  font: 700 18px/20px "Open Sans", sans-serif;
}
table.hr input,
table.hr select,
table.hr textarea {
  margin: 0 !important;
  border: 1px solid #CCCCCC !important;
}
table.hr input[type=text],
table.hr input[type=file],
table.hr select {
  padding: 5px 10px;
  width: 100%;
  height: 32px;
  border-radius: 5px;
}
table.hr label span {
  font: 13px/24px "Open Sans", sans-serif;
}
table.hr textarea {
  width: 100%;
  height: 100px;
  padding: 5px;
}
table.hr tr td {
  padding: 5px 5px;
  border-bottom: 1px solid #999;
}
table.hr p {
  margin: 0;
  border: 1px solid #CCC;
  padding: 10px;
  border-radius: 5px;
}
table.hr .radio-button {
  float: left;
  height: 32px;
  border: 1px solid #CCCCCC !important;
  padding: 2px 15px;
  border-radius: 5px;
  margin: 0 10px 0 0;
}
table.hr .radio-button input {
  margin: 0 10px 0 0 !important;
}
table.hr label.contract {
  display: flex;
  align-items: center;
  margin: 5px 0 !important;
  border: 1px solid #CCC;
  border-radius: 5px;
  padding: 10px;
}
table.hr label.contract input {
  float: left;
}
table.hr label.contract .contract-content {
  flex: auto;
  margin-left: 15px;
}
table.hr label.contract .contract-content div {
  margin-bottom: 10px;
  font: 600 13px/20px "Open Sans", sans-serif;
}
table.hr label.contract .contract-content div:last-child {
  margin-bottom: 0;
}

.hr-form-button {
  width: 100%;
  background: #666;
  color: #FFF;
  border-radius: 5px;
  border: 0;
  margin: 20px 0 0;
  padding: 10px 0;
  font: 600 18px/20px "Open Sans", sans-serif;
}

table.motor-dropdown-table tr > td {
  vertical-align: top;
}
table.motor-dropdown-table tr > td ul {
  border-left: 1px solid #000;
  max-height: 528px;
  min-height: 528px;
  overflow-y: scroll;
  padding: 0;
  margin: 0;
  list-style: none;
  width: 350px;
}

td.materials {
  padding: 0 !important;
}
td.materials table tr td {
  border: 0;
  border-right: 1px solid #DDD;
  border-bottom: 1px solid #DDD;
  font: 600 13px/24px "Open Sans", sans-serif;
  padding: 1px 5px !important;
  text-align: left;
}
td.materials table tr td:last-child {
  border-right: 0;
}
td.materials table tr:last-child td {
  border-bottom: 0;
}

.empty-result {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.empty-result .icon {
  font-size: 55px;
  margin: 0 0 15px;
  color: #ec1c24;
}
.empty-result h2 {
  margin: 0;
  font: 700 20px/30px "Titillium Web", sans-serif;
  color: #313131;
}
.empty-result h2 strong {
  color: #ec1c24;
}

.check-all-li {
  font-size: 12px;
}

table.motor-dropdown-table label.model-label {
  border-bottom: 1px solid #DDD;
}
table.motor-dropdown-table label.model-label td {
  font-size: 12px;
}

.information-label {
  font: 600 15px/24px "Titillium Web", sans-serif;
  padding: 5px;
  text-align: center;
  border: 1px solid #DDD;
  color: #ec1c24;
  margin: 0 0 30px;
  border-radius: 4px;
}

.np-buttons {
  float: right;
  display: flex;
  align-items: space-between;
}
.np-buttons a {
  display: flex;
  align-items: center;
  background: #231f20;
  color: #FFF;
  padding: 8px 12px;
}
.np-buttons a.next {
  border-left: 1px solid #999;
}
.np-buttons a.next i {
  margin-left: 6px;
}
.np-buttons a.prev i {
  margin-right: 6px;
}
.np-buttons a:hover {
  text-decoration: none;
  background: #ec1c24;
}

h2.pl-text {
  font: 600 20px/38px "Titillium Web", sans-serif;
  margin: 10px 0 15px;
  text-align: center;
}

form.price-list {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
form.price-list h2 {
  font: 600 20px/38px "Titillium Web", sans-serif;
  margin: 10px 0 15px;
}
form.price-list .fields {
  display: flex;
  align-items: center;
  margin: 0 0 25px;
}
form.price-list .fields input {
  width: 300px;
  height: 40px;
  border: 1px solid #DDD;
  padding: 5px 14px;
  font: 600 15px "Titillium Web", sans-serif;
}
form.price-list .fields button {
  margin-left: 10px;
  background: #ec1c24;
  color: #FFF;
  padding: 5px 15px;
  font: 600 15px "Titillium Web", sans-serif;
  border: 0;
  height: 40px;
}

.price-list-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
}

a.price-list-btn {
  border: 1px solid #DDD;
  color: #313131;
  font: 600 14px "Titillium Web", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 15px;
  margin: 0 5px;
}
a.price-list-btn i {
  margin-right: 8px;
}
a.price-list-btn:hover {
  text-decoration: none;
  background: #ec1c24;
  color: #FFF;
}

a.download-excel {
  background: #ec1c24;
  padding: 10px;
  display: block;
  color: #fff;
  font: 600 15px "Titillium Web", sans-serif;
}

.dropdown-menu.motors-dropdown {
  overflow-y: auto !important;
}

body.media {
  margin: 0 !important;
}

a.photo-list-item {
  display: block;
  border: 1px solid #DDD;
  padding: 5px;
  margin: 0 0 30px;
}
a.photo-list-item span.title {
  display: block;
  font: 600 14px/24px "Titillium Web", sans-serif;
  color: #313131;
  margin: 0 0 8px;
  border-bottom: 1px solid #DDD;
}
a.photo-list-item:hover {
  text-decoration: none;
}

.spinner {
  margin: 100px auto;
  width: 60px;
  height: 40px;
  text-align: center;
  font-size: 10px;
}
.spinner > div {
  background-color: #ed1c23;
  height: 100%;
  width: 6px;
  margin: 0 2.5px;
  display: inline-block;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}
.spinner .rect2 {
  animation-delay: -1.1s;
}
.spinner .rect3 {
  animation-delay: -1s;
}
.spinner .rect4 {
  animation-delay: -0.9s;
}
.spinner .rect5 {
  animation-delay: -0.8s;
}

@keyframes sk-stretchdelay {
  0%, 40%, 100% {
    transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(1);
  }
}
.team-item {
  border: 1px solid #313131;
  padding: 40px 20px 0 20px;
  height: 194px;
  border-radius: 0 40px 0 0;
  margin: 0 30px 30px 0;
  font: 600 14px/20px "Open Sans", sans-serif;
  box-shadow: 5px 5px 0px #2f2f2f;
}
.team-item .name {
  font: 600 18px/24px "Open Sans", sans-serif;
}
.team-item .statu {
  margin: 0 0 10px;
}

.modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal .modal-header .modal-title {
  float: left;
  flex: auto;
  font: 600 15px "Open Sans", sans-serif;
}

.swal2-popup {
  padding: 2rem 1.5rem !important;
  font-size: 1.5rem !important;
}

.swal2-icon.swal2-info,
.swal2-icon.swal2-question,
.swal2-icon.swal2-warning {
  font-size: 1.75rem !important;
}

.swal2-popup .swal2-styled:focus {
  box-shadow: 0 0 0 transparent !important;
}

.loading-text {
  text-align: center;
}
.loading-text h2 {
  font: 600 20px/30px "Titillium Web", sans-serif;
  color: #313131;
  margin: 10px 0 15px;
}

.modal-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 45px 0;
}
.modal-inner .modal-languages {
  display: flex;
}
.modal-inner .modal-languages a {
  display: block;
  border: 1px solid #CCC;
  padding: 5px;
  text-align: center;
  color: #000;
  margin: 0 4px;
  font: 700 15px/20px "Open Sans", sans-serif;
  transition: all ease 0.5s;
}
.modal-inner .modal-languages a img {
  transition: all ease 0.5s;
}
.modal-inner .modal-languages a:hover {
  text-decoration: none;
  border-color: #333;
  background: #e2e2e2;
}

.in-list {
  margin: -8px;
}
.in-list .in-list-item {
  border-bottom: 1px solid #ccc;
  padding: 0 8px;
  height: 30px;
  font: 600 12px/30px "Open Sans", sans-serif;
}
.in-list .in-list-item:last-child {
  border-bottom: 0;
}

.tooltip-table {
  border-collapse: collapse;
}
.tooltip-table th {
  background: #E8E8E8;
  color: #F00;
  padding: 5px;
  border: 1px solid #DDD;
  font: 600 12px/14px "Open Sans", sans-serif;
}
.tooltip-table tr {
  background: #FFF;
}
.tooltip-table tr td {
  padding: 5px;
  border: 1px solid #DDD;
  color: #333;
}
.tooltip-table tr:hover {
  background: #EEE;
}

.table-radius {
  border: 2px solid #000;
  border-radius: 5px;
}

table.table-credit-card {
  width: 100%;
}
table.table-credit-card td {
  border-bottom: 2px solid #000;
  padding: 5px 10px;
  text-align: center !important;
  vertical-align: middle;
  font: 600 15px "Open Sans", sans-serif;
  border-radius: 5px;
  color: #333;
}
table.table-credit-card td img {
  margin: 0 auto;
}
table.table-credit-card tr td:first-child {
  border-right: 2px solid #000;
}
table.table-credit-card tr td:last-child {
  border-right: 0 solid #000;
}
table.table-credit-card tr:last-child td {
  border-bottom: 0;
}

.visible-xs {
  display: none;
}

.mt-15 {
  margin-top: 15px;
}

.mt-3 {
  margin-top: 30px;
}

.mb-3 {
  margin-bottom: 30px;
}

.categories-select .dropdown-menu {
  min-width: 400px;
}

.in-buttons {
  margin: 10px 0 0;
  display: flex;
  align-items: center;
}
.in-buttons a {
  margin: 0 10px 0 0;
}

table.bands {
  margin: 10px 0 0;
  width: 100%;
  border-collapse: collapse;
}
table.bands td {
  border: 1px solid #CCC;
  padding: 5px;
}
table.bands td img {
  border: 0 !important;
  height: 30px;
  width: auto !important;
}
table.bands.p0 td {
  padding: 0;
}
table.bands span.sa {
  font: 600 13px/15px "Open Sans", sans-serif;
  color: #000;
  display: block;
  border-bottom: 1px solid #CCC;
  padding: 4px;
}
table.bands span.sc {
  font: 600 13px/15px "Open Sans", sans-serif;
  display: block;
  padding: 4px;
}

.table-new-band {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font: 600 14px/20px "Open Sans", sans-serif;
}
.table-new-band i {
  color: #F00;
  margin-right: 8px;
}

.oem-cross-list {
  display: flex;
}
.oem-cross-list table tbody tr:nth-child(even) td {
  background: #f2f2f2;
}

.hide-oem {
  display: none;
}

.show-oem-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
}
.show-oem-link i.fa-plus {
  margin-right: 3px;
  font-size: 10px;
  padding: 0 0 0;
}
.show-oem-link i.fa-angle-down {
  font-size: 16px;
  margin-left: 6px;
  margin-top: 1px;
}
.show-oem-link:active, .show-oem-link:focus, .show-oem-link:hover {
  text-decoration: none;
  color: #fff;
}
.show-oem-link.opened i {
  transform: rotate(-180deg);
}

.hide-cross {
  display: none;
}

.show-cross-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
}
.show-cross-link i.fa-plus {
  margin-right: 3px;
  font-size: 10px;
  padding: 0 0 0;
}
.show-cross-link i.fa-angle-down {
  font-size: 16px;
  margin-left: 6px;
  margin-top: 1px;
}
.show-cross-link:active, .show-cross-link:focus, .show-cross-link:hover {
  text-decoration: none;
  color: #fff;
}
.show-cross-link.opened i {
  transform: rotate(-180deg);
}

#site-modal .modal-dialog {
  margin-top: 80px;
  width: 700px;
}

.social-media h2 {
  font: 700 15px/20px "Open Sans", sans-serif;
  margin: 0 0 15px;
}
.social-media a {
  display: flex;
  align-items: center;
  color: #FFF;
  border-radius: 5px;
  margin: 4px 0;
  padding: 5px 10px;
}
.social-media a i {
  font-size: 18px;
  margin-right: 8px;
}

.warning-text-mobile {
  display: none;
  font: 600 12px/17px "Open Sans", sans-serif;
}

.cookie-information {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.75);
  text-align: center;
  padding: 10px 5px;
  z-index: 921393;
  display: none;
}
.cookie-information .cookie-interior {
  text-align: center;
  font-size: 11px;
  color: #FFF;
}
.cookie-information .cookie-interior a {
  color: #55E5CD;
}
.cookie-information .cookie-close {
  position: absolute;
  right: 5px;
  top: 5px;
  color: #55E5CD;
  font-size: 12px;
}

.nifea-logo {
  display: block;
  text-align: center;
  padding: 10px 0 !important;
  margin: 15px;
}

.product-detailed-information {
  margin: 30px 0 0;
  font: 400 13px/16px "Open Sans", sans-serif;
  color: #555;
}

tr#focus-oem td {
  background: #ffbb8e !important;
}

body.iframe1 .news-wrapper {
  padding: 30px !important;
}

body.iframe1 .title-bar {
  display: none;
}

.focus .op7 {
  color: #FFF;
}

.cc-copy {
  white-space: nowrap;
  display: flex;
  justify-content: space-between;
}
.cc-copy i {
  margin-left: 8px;
  display: block;
  width: 15px;
  text-align: center;
  transition: all ease 0.2s;
  font-size: 14px;
  color: #242c9f;
  cursor: pointer;
}
.cc-copy i:hover {
  color: #242c9f;
}
.cc-copy i.copied {
  color: #090;
  transform: scale(1.2);
}

.passive-information {
  color: #F00;
  font-size: 16px;
  position: absolute;
  right: 10px;
  top: 10px;
  font-weight: bold;
  font-family: Arial;
  animation: blink 5s linear infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
li.check-all {
  font-weight: bold;
  color: #000;
}
li.check-all h2 {
  font-weight: 900 !important;
}

.inner-list li:nth-child(even) {
  background: #f2f2f2;
}

.pr {
  position: relative;
}

.show-hide-price {
  position: absolute;
  right: 0;
  top: 0;
  padding: 5px;
}
.show-hide-price i {
  color: #313131;
}

.news-form .form-line {
  margin: 0 0 10px;
  display: flex;
  align-items: flex-start;
}
.news-form .form-line div {
  flex: 0 0 160px;
  font: 600 13px/32px "Open Sans", sans-serif;
  padding: 0 10px;
  margin: 0 0 2px;
  border: 1px solid #666;
  margin-right: 10px;
  height: 32px;
}
.news-form input,
.news-form textarea {
  width: 100%;
  height: 32px;
  padding: 5px 10px;
  border: 1px solid #000 !important;
  border-radius: 0;
}
.news-form input::placeholder,
.news-form textarea::placeholder {
  color: #fff;
}
.news-form textarea {
  height: 100px;
  padding: 10px;
}

.google-recaptcha {
  padding: 10px 0 20px;
  text-align: center;
  display: flex;
  justify-content: center;
}
.google-recaptcha.pb0 {
  padding: 20px 0 0;
}

.urun-olculeri-ara {
  display: block;
  margin: 0 0 5px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 0 10px;
  background: #231f20;
  border-radius: 5px;
  color: #FFF;
  font: 600 13px/31px "Open Sans", sans-serif;
}
.urun-olculeri-ara:hover, .urun-olculeri-ara:active, .urun-olculeri-ara:focus {
  text-decoration: none;
  background: #231f20;
  color: #FFF;
}

#urun-olculeri .input-new {
  border: 2px solid #000;
  border-radius: 5px;
  background: #FFF;
  height: 35px;
  padding: 0 10px 0 120px;
  margin: 0 0 5px;
  position: relative;
}
#urun-olculeri .input-new span {
  width: 120px;
  position: absolute;
  left: 0;
  top: 0;
  padding: 0 10px;
  font: 600 13px/31px "Open Sans", sans-serif;
  border-right: 1px solid #000;
}
#urun-olculeri .input-new input {
  height: 31px;
  font: 600 13px/31px "Open Sans", sans-serif;
  padding: 0 10px;
  border: 0;
  width: 132px;
}
#urun-olculeri .input-new input::placeholder {
  color: #000;
}
#urun-olculeri input {
  background: #FFF;
  border: 1px solid #000;
  color: #000;
}
#urun-olculeri input::placeholder {
  color: #000;
}

.slogan-text {
  font: 400 18px/26px "Lobster", cursive;
  color: #000;
  text-align: center;
}
.slogan-text h2 {
  margin: 0;
}

.preview-pp {
  position: absolute;
  right: 0;
  top: 0;
  background: #FFF;
  color: #F00;
  padding: 10px;
  animation: blink 3s linear infinite;
}
.preview-pp img {
  width: 13px !important;
  height: auto !important;
}

.home-slide {
  width: 100%;
  height: calc(100vh - 90px);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.popup-input-td select {
  border-radius: 0;
}

.main-timeline {
  font-family: "Roboto", sans-serif;
  padding: 20px 0;
  position: relative;
}

.main-timeline:before,
.main-timeline:after {
  content: "";
  height: 40px;
  width: 40px;
  background-color: #e7e7e7;
  border-radius: 50%;
  border: 10px solid #303334;
  transform: translateX(-50%);
  position: absolute;
  left: 50%;
  top: -15px;
  z-index: 2;
}

.main-timeline:after {
  top: auto;
  bottom: 15px;
}

.main-timeline .timeline {
  padding: 35px 0;
  margin-top: -30px;
  position: relative;
  z-index: 1;
}

.main-timeline .timeline:before,
.main-timeline .timeline:after {
  content: "";
  height: 100%;
  width: 50%;
  border-radius: 100px 0 0 100px;
  border: 15px solid #ec1c24;
  border-right: none;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}

.main-timeline .timeline:after {
  height: calc(100% - 30px);
  width: calc(50% - 12px);
  border-color: #ec1c24;
  left: 12px;
  top: 15px;
}

.main-timeline .timeline-content {
  display: flex;
  align-items: center;
}

.main-timeline .timeline-content:hover {
  text-decoration: none;
}

.main-timeline .timeline-year {
  color: #ec1c24;
  font: 700 50px "Titillium Web", sans-serif;
  float: left;
  margin-left: 80px;
}

.main-timeline .timeline-icon {
  color: #ec1c24;
  font-size: 80px;
  display: inline-block;
  transform: translateY(-50%);
  position: absolute;
  left: 34%;
  top: 50%;
}

.main-timeline .content {
  color: #313131;
  flex: auto;
  padding: 20px;
  display: inline-block;
  float: right;
}

.main-timeline .title {
  color: #ec1c24;
  font-size: 22px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 5px 0;
}

.main-timeline .description {
  font: 16px/24px "Open Sans", sans-serif;
  margin: 0;
}

.main-timeline .timeline:nth-child(even):before {
  left: auto;
  right: 0;
  border-radius: 0 100px 100px 0;
  border: 15px solid #313131;
  border-left: none;
}

.main-timeline .timeline:nth-child(even):after {
  left: auto;
  right: 12px;
  border: 15px solid #313131;
  border-left: none;
  border-radius: 0 100px 100px 0;
}

.main-timeline .timeline:nth-child(even) .content {
  float: left;
}

.main-timeline .timeline:nth-child(even) .timeline-year {
  left: auto;
  right: 10%;
}

.main-timeline .timeline:nth-child(even) .timeline-icon {
  left: auto;
  right: 32%;
}

@media screen and (max-width: 1200px) {
  .main-timeline .timeline:after {
    border-radius: 88px 0 0 88px;
  }
  .main-timeline .timeline:nth-child(even):after {
    border-radius: 0 88px 88px 0;
  }
}
@media screen and (max-width: 767px) {
  .main-timeline .timeline {
    margin-top: -19px;
  }
  .main-timeline .timeline:before {
    border-radius: 50px 0 0 50px;
    border-width: 10px;
  }
  .main-timeline .timeline:after {
    height: calc(100% - 18px);
    width: calc(50% - 9px);
    border-radius: 43px 0 0 43px;
    border-width: 10px;
    top: 9px;
    left: 9px;
  }
  .main-timeline .timeline:nth-child(even):before {
    border-radius: 0 50px 50px 0;
    border-width: 10px;
  }
  .main-timeline .timeline:nth-child(even):after {
    height: calc(100% - 18px);
    width: calc(50% - 9px);
    border-radius: 0 43px 43px 0;
    border-width: 10px;
    top: 9px;
    right: 9px;
  }
  .main-timeline .timeline-icon {
    font-size: 60px;
  }
  .main-timeline .timeline-year {
    font-size: 40px;
  }
}
@media screen and (max-width: 479px) {
  .main-timeline .timeline-icon {
    font-size: 50px;
    transform: translateY(0);
    top: 25%;
    left: 10%;
  }
  .main-timeline .timeline-year {
    font-size: 25px;
    transform: translateY(0);
    top: 65%;
    left: 9%;
  }
  .main-timeline .content {
    width: 68%;
    padding: 10px;
  }
  .main-timeline .title {
    font-size: 18px;
  }
  .main-timeline .timeline:nth-child(even) .timeline-icon {
    right: 10%;
  }
  .main-timeline .timeline:nth-child(even) .timeline-year {
    right: 9%;
  }
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1478px) and (orientation: landscape) {
  header {
    padding-left: 260px !important;
  }
  header ul.menu li a {
    padding: 15px 10px !important;
    font-size: 12px !important;
  }
  header .right-links .languages {
    padding: 5px 0 0;
  }
  header .right-links .languages a {
    font-size: 12px !important;
  }
  header .right-links .languages a:last-child {
    border-bottom: 0;
  }
  header .right-links a.logo img {
    max-height: 20px !important;
  }
  nav {
    width: 260px !important;
  }
  nav .footer {
    position: relative !important;
    margin: 15px 0 0 !important;
  }
  section.stage {
    padding-left: 260px !important;
  }
  .selectbox .select2-selection__rendered, .selectbox .btn-select {
    font-size: 12px;
  }
  .input input {
    font-size: 12px;
  }
  .button button {
    font-size: 13px;
  }
  .new-warning, .title-text {
    font-size: 14px !important;
  }
  .brand-box {
    padding: 15px 0 !important;
    height: 152px;
  }
  .brand-box > img {
    max-width: 100% !important;
  }
  .brand-box .download img {
    height: 30px !important;
  }
  .selectbox .dropdown-menu {
    left: 226px !important;
  }
  table.hr {
    background: #FFFFFF;
    font: 400 13px/24px "Open Sans", sans-serif;
  }
  .product-detail .image {
    flex-basis: 250px;
  }
  .product-detail .information .row {
    margin: 0;
  }
  .product-detail .information .col-sm-10, .product-detail .information .col-sm-14 {
    width: 100%;
    padding: 0 30px 0 0;
  }
  .product-detail .information table.product-info {
    margin: 0 0 30px;
  }
  .product-detail .information .in-buttons {
    margin: -15px 0 15px 0;
  }
  table.bands td img {
    height: 20px !important;
  }
  .special-bands {
    margin: -15px 0 30px !important;
    max-width: 400px !important;
  }
  .team-item {
    margin-right: 0 !important;
    font-size: 12px !important;
  }
  .team-item .name {
    font-size: 16px !important;
  }
}
.mobile-header {
  background: #FFF;
}
.mobile-header .top-bar {
  position: relative;
  padding: 20px;
  border-bottom: 1px solid #DDD;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mobile-header .top-bar .logo {
  display: block;
}
.mobile-header .top-bar .logo img {
  width: 200px;
}
.mobile-header .top-bar .menu-show {
  color: #333;
  font-size: 20px;
}
.mobile-header .top-bar .search-show {
  color: #000;
  font-size: 20px;
}
.mobile-header .search {
  padding: 20px;
  border-bottom: 1px solid #DDD;
}
.mobile-header .search .selectbox .dropdown-menu {
  left: 5%;
  top: 100%;
  width: 90% !important;
  min-width: 90% !important;
  max-width: 90% !important;
  overflow-x: scroll;
}
.mobile-header .news {
  padding: 0 20px 0 20px;
  text-align: center;
}
.mobile-header .news .img-responsive {
  margin: 0 auto;
}
.mobile-header .selectbox .btn-select, .mobile-header .input input {
  font-size: 13px;
}

.mobile-content {
  padding: 15px;
}

.mobile-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.mobile-menu ul li {
  border-bottom: 1px solid #DDD;
}
.mobile-menu ul li a {
  display: block;
  background: #F2F2F2;
  color: #333;
  font: 600 13px/20px "Open Sans", sans-serif;
  padding: 6px 20px;
  position: relative;
}
.mobile-menu ul li a i.fas.fa-angle-right {
  position: absolute;
  right: 20px;
  line-height: 26px;
}
.mobile-menu ul li a strong {
  color: #F00;
}
.mobile-menu .sp-icons {
  display: flex;
  align-items: center;
  position: absolute;
  right: 50px;
  top: 2px;
}

.mobile-languages {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-top: 1px solid #DDD;
  border-bottom: 1px solid #DDD;
}
.mobile-languages a {
  text-align: center;
}
.mobile-languages a img {
  width: 24px;
}
.mobile-languages a div {
  font: 600 10px "Open Sans", sans-serif;
  color: #333;
}

.mobile-footer {
  padding: 20px;
}
.mobile-footer a {
  display: block;
  align-items: center;
  justify-content: center;
  background: #e8e8e8;
  padding: 10px 12px;
  margin: 0 0 10px;
  text-align: left;
  color: #333;
  font: 600 14px/20px "Open Sans", sans-serif;
  border-radius: 5px;
}
.mobile-footer a i {
  font-size: 14px;
  line-height: 18px;
  margin-right: 6px;
  float: right;
}

.brands-view-button {
  background: #CCC;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #000;
  padding: 5px 15px;
  font: 600 13px/22px "Open Sans", sans-serif;
}
.brands-view-button:active, .brands-view-button:focus, .brands-view-button:hover {
  text-decoration: none;
  color: #000;
}

@media only screen and (max-width: 600px) {
  .product-detail {
    display: block !important;
  }
  .product-detail .information {
    padding: 15px 0 0 !important;
  }
  .product-detail .information .col-sm-14 > div {
    display: block !important;
  }
  .product-detail .information .col-sm-14 > div .product-info {
    margin: 15px 0 0 !important;
    width: 100% !important;
  }
  .product-detail .information .row-x {
    margin: 0 -15px !important;
  }
  .mobile-table-responsive {
    overflow-x: auto;
  }
  .oem-cross-list {
    display: block !important;
  }
  .oem-cross-list table {
    margin: 15px 0 0 !important;
    width: 100% !important;
  }
  table.materials-table td {
    display: block;
    border: 0 !important;
    line-height: 16px !important;
  }
  .bg-title {
    display: block !important;
  }
  .bg-title .left, .bg-title .buttons {
    float: none !important;
  }
  .bg-title .left h2, .bg-title .buttons h2 {
    float: none !important;
  }
  .brand-box {
    height: 158px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .modal .modal-content {
    max-width: 90% !important;
  }
  .contact-table {
    position: relative !important;
    top: auto !important;
  }
  .contact-table td {
    display: block !important;
    width: 100% !important;
  }
  .title-bar {
    display: block !important;
  }
  .title-bar .left, .title-bar .right {
    float: none !important;
  }
  .hidden-xs {
    display: none !important;
  }
  .visible-xsxx {
    display: inline-block;
  }
  .new-item {
    margin: 15px 0 0;
  }
  #brands-modal .modal-dialog {
    width: 100% !important;
  }
  form.price-list .fields {
    display: block !important;
  }
  form.price-list .fields button {
    width: 100% !important;
    margin: 10px 0 0 !important;
  }
  .warning-text {
    display: none !important;
  }
  .warning-text-mobile {
    display: block !important;
  }
}
.slogan-mobile {
  margin: -10px 0 0 0;
}


/* =====================================================
   HEADER – FINAL DÜZEN (TEK KAYNAK, ÇAKIŞMASIZ)
   ===================================================== */

/* ana menü satırı */
ul.new-menu {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 66px;
}

/* home */
ul.new-menu > li.home.single > a {
  width: 66px;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2px;
}

/* double menü wrapper */
ul.new-menu > li.double {
  margin: 0;
  padding: 0;
}

/* inner ul yan yana */
ul.new-menu > li.double > ul {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 0 0;
  padding: 0;
}

/* BUTONLAR – tek standart */
ul.new-menu > li.double > ul > li > a {
  height: 66px;
  min-width: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  margin: 0;
  border: 1px solid #CCC;
  border-radius: 4px;
  background: #FFF;
  font: 600 13px/20px "Open Sans", sans-serif;
  box-sizing: border-box;
  transition: background .2s ease;
}

/* hover */
ul.new-menu > li.double > ul > li > a:hover,
ul.new-menu > li.home.single > a:hover {
  background: #F2F2F2 !important;
  color: #000 !important;
}

/* === HEADER BUTON GENİŞLİK OPTİMİZASYONU === */

ul.new-menu > li.double > ul > li > a {
  min-width: 110px;     /* 140 → 110 */
  padding: 0 12px;      /* 18 → 12 */
  font-size: 13px;      /* okunaklı kalsın */
}

/* === HEADER BUTONLAR ARASI BOŞLUK AYARI === */

/* ana menü satırı boşluğu */
ul.new-menu {
  gap: 2px;   /* 6px → 4px */
}

/* double içindeki butonlar arası */
ul.new-menu > li.double > ul {
  gap: 2px;   /* 6px → 4px */
}

/* home ile ilk buton arası */
ul.new-menu > li.home.single {
  margin-right: 2px;   /* 6px → 4px */
}

/* ===============================
   PREMIUM HEADER ACTIONS
================================ */

.header-actions-premium,
.action-account,
.action-icon {
  height: 100%;
  display: flex;
  align-items: center;
}
/* Hesabım */
.action-account {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: #222;
  transition: background .2s ease;
}

.action-account:hover {
  background: #F4F6F8;
}

.action-account i {
  font-size: 28px;
  color: #444;
}

.action-account .text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.action-account .title {
  font-size: 12px;
  color: #777;
}

.action-account .name {
  font-size: 14px;
  font-weight: 600;
  color: #111;
}

/* Favori / Sepet ikonları */
.action-icon {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #F4F6F8;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #222;
  transition: all .2s ease;
}

.action-icon:hover {
  background: #EDEFF2;
}

.action-icon i {
  font-size: 18px;
}

/* Sepet biraz daha vurgulu */
.action-icon.cart {
  background: #EEF3FF;
}

.action-icon.cart:hover {
  background: #E2EBFF;
}

/* Badge */
.action-icon .badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #E53935;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* ===============================
   HEADER STABILIZATION FIX
   =============================== */

header > section {
  display: flex;
  align-items: center;
  height: 70px; /* SENDE ZATEN 70 */
}

/* menü sola */
header > section > ul.new-menu {
  display: flex;
  align-items: center;
  height: 100%;
}

/* sağ aksiyonlar SAĞA SABİTLENİR */
header .right-links {
  position: static;       /* absolute İPTAL */
  margin-left: auto;      /* sağa it */
  height: 100%;
  display: flex;
  align-items: center;
}

/* ===============================
   HEADER RIGHT – FINAL FIX
   =============================== */

/* sağ blok TAM sağa + sıfır boşluk */
.header-actions-premium {
  margin-left: auto;
  display: flex;
  align-items: stretch; /* YÜKSEKLİĞİ DOLDUR */
  gap: 0;               /* BOŞLUK YOK */
  height: 100%;
}

/* GENEL BUTON HİSSİ */
.header-actions-premium > a {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-left: 1px solid #EEE;
  text-decoration: none;
  background: #FFF;
  transition: background .15s ease;
}

.header-actions-premium > a:hover {
  background: #F2F2F2;
}

/* === HESABIM (BUTON GİBİ) === */
.action-account {
  border-left: 1px solid #EEE;
  padding: 0 16px;
  gap: 10px;
  background: #FFF;
}

.action-account:hover {
  background: #F4F6F8;
}

.action-account i {
  font-size: 26px;
}

/* HESABIM YAZI DÜZENİ */
.action-account .text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.action-account .title {
  font-size: 11px;
  color: #777;
}

.action-account .name {
  font-size: 14px;
  font-weight: 600;
  color: #111;
}

/* === FAVORİ & SEPET === */
.action-icon {
  width: 52px;
  height: 100%;
  border-radius: 0;          /* kare */
  background: #FFF;
  border-left: 1px solid #EEE;
}

.action-icon:hover {
  background: #F2F2F2;
}

/* Sepeti biraz vurgula */
.action-icon.cart {
  background: #EEF3FF;
}
.action-icon.cart:hover {
  background: #E2EBFF;
}

/* Badge */
.action-icon .badge {
  top: 10px;
  right: 10px;
}

/* ===============================
   HEADER RIGHT – WIDTH + SHARP
   =============================== */

/* sağ alan biraz genişlesin */
.header-actions-premium {
  padding-right: 6px;     /* sağ nefes */
}

/* tüm butonlar daha geniş */
.header-actions-premium > a {
  padding: 0 22px;        /* 14 → 22 */
  border-radius: 0 !important; /* KESKİN */
}

/* Hesabım özel */
.action-account {
  padding: 0 24px;        /* daha geniş */
  border-radius: 0 !important;
}

/* Favori & Sepet */
.action-icon {
  width: 60px;            /* 52 → 60 */
  border-radius: 0 !important;
}

/* badge biraz içeri gelsin */
.action-icon .badge {
  top: 8px;
  right: 8px;
}

.site-logo{
  display:block;
  max-height:48px;
  width:auto;
}

.btn-add-cart{
  height:36px;
  padding:0 14px;
  background:#d60000;
  border:1px solid #c40000;
  color:#fff;
  font-size:13px;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  transition:all .15s ease;
}

.btn-add-cart:hover{
  background:#b80000;
}



.qty-box{
  display:flex;
  align-items:center;
  border:1px solid #ddd;
  width:100px;
  height:34px;
}

.qty-box button{
  width:30px;
  border:0;
  background:#f5f5f5;
  cursor:pointer;
}

.qty-box input{
  width:40px;
  text-align:center;
  border:0;
  outline:none;
  font-size:13px;
}


.motors-list-table{
  border-collapse:separate;
  border-spacing:0 6px; /* satırlar arası nefes */
}

.motors-list-table thead th{
  background:#f6f7f9;
  font-weight:600;
  font-size:13px;
  color:#444;
  padding:10px;
  border-bottom:1px solid #e5e5e5;
}

.motors-list-table tbody tr{
  background:#fff;
  transition:all .15s ease;
}

.motors-list-table tbody tr:hover{
  box-shadow:0 4px 14px rgba(0,0,0,.08);
}

.motors-list-table td{
  padding:10px;
  vertical-align:middle;
  font-size:13px;
}

.motors-list-table td img{
  width:48px;
  height:48px;
  object-fit:contain;
  background:#fafafa;
  border:1px solid #eee;
  padding:4px;
}

.qty-box{
  display:flex;
  align-items:center;
  border:1px solid #ddd;
  height:34px;
  width:110px;
  background:#fff;
}

.qty-box button{
  width:32px;
  height:32px;
  background:#f3f3f3;
  border:0;
  font-size:16px;
  cursor:pointer;
  transition:background .15s;
}

.qty-box button:hover{
  background:#e6e6e6;
}

.qty-box input{
  width:46px;
  text-align:center;
  border:0;
  font-weight:600;
  font-size:13px;
}


.btn-fav{
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid #eee;
  background:#fff;
  cursor:pointer;
  transition:all .15s ease;
}

.btn-fav i{
  color:#bbb;
  font-size:15px;
}

.btn-fav:hover{
  border-color:#e40000;
  background:#fff5f5;
}

.btn-fav:hover i{
  color:#e40000;
}

/* kategori badge */
.badge-category{
  display:inline-block;
  margin-left:6px;
  padding:2px 6px;
  font-size:11px;
  background:#f1f3f5;
  color:#555;
  border-radius:4px;
  font-weight:500;
}

/* stok + adet hizası */
.stock-qty-wrap{
  display:flex;
  align-items:center;
  gap:8px;
}

/* stok badge */
.badge-stock{
  font-size:11px;
  padding:3px 7px;
  border-radius:4px;
  font-weight:600;
  white-space:nowrap;
}
.badge-stock.in{
  background:#e6f4ea;
  color:#1e7e34;
}
.badge-stock.out{
  background:#fdecea;
  color:#c82333;
}

/* adet pasif */
.qty-box.disabled{
  opacity:.5;
  pointer-events:none;
}

/* sepet disabled */
.btn-add-cart.disabled{
  background:#e0e0e0 !important;
  color:#888 !important;
  cursor:not-allowed;
  box-shadow:none !important;
}

/* stok yok satırı */
.out-of-stock td{
  background:#fafafa;
}

.product-thumb {
  width: 46px;
  height: 46px;
  cursor: pointer;
  object-fit: contain;
  border: 1px solid #ccc;
  background: #fff;
}

/* MODAL */
#imageModal {
  position: fixed;
  inset: 0;
  z-index: 999999;
}

#imageBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.75);
}

#imageBox {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 420px;
  height: 420px;
  background: #fff;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

#imageBox img {
  max-width: 400px;
  max-height: 400px;
  object-fit: contain;
}


/* SEPET DRAWER */
.cart-drawer {
  position: fixed;
  top: 0;
  right: -420px;
  width: 400px;
  height: 100%;
  background: #fff;
  z-index: 9999;
  box-shadow: -8px 0 25px rgba(0,0,0,.15);
  display: flex;
  flex-direction: column;
  transition: right .35s ease;
}

.cart-drawer.open {
  right: 0;
}

.cart-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 9998;
  display: none;
}

.cart-backdrop.show {
  display: block;
}

/* HEADER */
.cart-header {
  padding: 16px;
  font-size: 18px;
  font-weight: 600;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart-close {
  background: none;
  border: none;
  font-size: 26px;
  cursor: pointer;
}

/* BODY */
.cart-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
}

.cart-item {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.cart-item img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  border: 1px solid #eee;
}

.cart-item .info {
  flex: 1;
}

.cart-item small {
  color: #777;
  display: block;
  margin: 3px 0;
}

.cart-item .remove {
  cursor: pointer;
  font-size: 18px;
  color: #999;
}

/* FOOTER */
.cart-footer {
  padding: 12px;
  border-top: 1px solid #eee;
}

.btn-cart-primary {
  width: 100%;
  background: #e60000;
  color: #fff;
  border: 0;
  padding: 12px;
  font-weight: 600;
  cursor: pointer;
}

.btn-cart-secondary {
  width: 100%;
  background: #f5f5f5;
  border: 0;
  padding: 10px;
  margin-top: 8px;
  cursor: pointer;
}

.cart-item .price {
  font-weight: 600;
  white-space: nowrap;
  margin-left: 8px;
}

.cart-summary {
  padding: 12px;
  border-top: 1px solid #eee;
  background: #fafafa;
}

.cart-summary .row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 14px;
}

.cart-summary .row.total {
  font-size: 16px;
  font-weight: 700;
  border-top: 1px solid #ddd;
  margin-top: 6px;
  padding-top: 10px;
}

.cart-summary {
  margin: 16px;
  padding: 16px;
  background: linear-gradient(180deg, #fafafa, #ffffff);
  border-radius: 14px;
  border: 1px solid #e6e6e6;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

.cart-summary .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 14px;
  color: #444;
}

.cart-summary .row strong {
  font-weight: 600;
}

.cart-summary .row.total {
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px dashed #ddd;
  font-size: 17px;
  font-weight: 700;
  color: #000;
}

.cart-summary .row.total strong {
  color: #d90000; /* MRC kırmızısı */
  font-size: 18px;
}

#toast-container{
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.toast{
  min-width: 260px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #111;
  color: #fff;
  font-size: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  display: flex;
  align-items: center;
  gap: 10px;
  animation: toastIn .25s ease;
}

.toast.success{ background:#1e7e34 }
.toast.info{ background:#333 }
.toast.error{ background:#a71d2a }

@keyframes toastIn{
  from{ opacity:0; transform:translateY(10px) }
  to{ opacity:1; transform:none }
}
.btn-fav.active i{
  color:#e00000;
}

.cart-empty{
  text-align:center;
  padding:60px 20px;
  color:#999;
}
.cart-empty i{
  font-size:48px;
  margin-bottom:12px;
  opacity:.4;
}
.cart-empty p{
  margin:0;
  font-size:15px;
}

#toast-container{
  position:fixed;
  top:20px;
  right:20px;
  z-index:99999;
}
.toast-item{
  padding:14px 18px;
  border-radius:8px;
  color:#fff;
  font-weight:500;
  margin-bottom:10px;
  opacity:0;
  transform:translateY(-10px);
  transition:.3s;
  box-shadow:0 10px 30px rgba(0,0,0,.15);
}
.toast-item.show{
  opacity:1;
  transform:translateY(0);
}
/*# sourceMappingURL=styles.css.map */