/* ========================================================== *
/*!
 * MobileUX v1.0.0
 * Copyright 2018 by maxartkiller.com - by maxartkiller
 * Licence must be purchased before use. Buy it before use in any project
*/

/*---------------------------------------------------------

[Table of contents]

1. base layout css
2. sidebar css
3. fullscreen menu
4. modal box
5. navigation menu
6. header css
7. color scheme css
8. button css
9. background css
10. dashboard swiper slider
11. swiper css
12. List group css
13. card css
14. media css
15. media css
16. sparkline  chart toolti
17. avatar css
18. footer
19. login page
20. form control
21. tabs
22. Footer
23. iphone x updates
24. Scrolbar webkit css
25. Media query css

---------------------------------------------------------*/

/* base layout css */
:root{
  --bord-rad-10: 10px !important;
  --bord-rad-10-0: 10px 10px 0 0 !important;
  --bg-color-pr: #f1f1f1;
}
html,
body {
  height: 100%;
  overflow: hidden;
}
body {
  font-size: 14px;
  color: #666666;
}
.wrapper {
  height: 100%;
  width: 100%;
  display: block;
  overflow: hidden;
}

/* .header-footer-bg{
  border-bottom: #43474e solid 1px; 
  background: #6c89bd ;
} */

/* .header-footer-color{
  color: #000 !important;
} */

.page {
  height: 100%;
  width: 100%;
  position: relative;
  z-index: 0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  overflow: hidden;
  -webkit-transition: all ease 0.4s;
  -moz-transition: all ease 0.4s;
  -ms-transition: all ease 0.4s;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
  -ms-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
}
.page-content {
  padding: 0;
  height: 100%;
  min-height: 100%;
  overflow-y: auto;
  position: relative;
}
header.fixed-header ~ .page-content {
  padding-top: 50px;
}
.content-sticky-footer {
  min-height: 100%;
  height: auto;
  position: relative;
  display: inline-block;
  clear: both;
  width: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #000000;
}
.theme-dark h1,
.theme-dark h2,
.theme-dark h3,
.theme-dark h4,
.theme-dark h5,
.theme-dark h6 {
  color: #ffffff;
}
.navbar-supported-contentx{
  background:transparent;
  color: #000000;
}
.no-bg {
  background: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -ms-box-shadow: none !important;
  -moz-box-shadow: none !important;
}
.no-bg:after {
  display: none;
}
.theme-dark .border-top,
.theme-dark .border-bottom,
.theme-dark .border-left,
.theme-dark .border-right,
.theme-dark .border,
.theme-dark hr {
  border-color: #333333 !important;
}
.md .z2 {
  -ms-box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12) !important;
  -moz-box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12) !important;
  -webkit-box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12) !important;
}
.text-normal {
  text-transform: none;
}
.bg-none {
  background: none !important;
}
.hljs {
  background: #f5f7ff;
  border: 1px dashed #8dacff;
}
.ios .max-demo-frame header {
  padding-top: 30px;
  height: 80px;
}
.ios .max-demo-frame .sidebar,
.ios .max-demo-frame .searchcontrol {
  padding-top: 30px;
}
.ios .max-demo-frame header.fixed-header ~ .page-content {
  padding-top: 80px;
}
.ios .max-demo-frame .login-logo {
  margin-top: 25%;
}
.no-shadow:after {
  display: none;
}
.loader {
  height: 100%;
  width: 100%;
  position: fixed;
  /*background: rgba(0, 0, 0, 0.3);*/
  z-index: 9999;
  display: flex;
}
.maxui-roller {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}
.maxui-roller div {
  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: 32px 32px;
}
.maxui-roller div:after {
  content: " ";
  display: block;
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  margin: -3px 0 0 -3px;
}
.maxui-roller div:nth-child(1) {
  animation-delay: -0.036s;
}
.maxui-roller div:nth-child(1):after {
  top: 50px;
  left: 50px;
}
.maxui-roller div:nth-child(2) {
  animation-delay: -0.072s;
}
.maxui-roller div:nth-child(2):after {
  top: 54px;
  left: 45px;
}
.maxui-roller div:nth-child(3) {
  animation-delay: -0.108s;
}
.maxui-roller div:nth-child(3):after {
  top: 57px;
  left: 39px;
}
.maxui-roller div:nth-child(4) {
  animation-delay: -0.144s;
}
.maxui-roller div:nth-child(4):after {
  top: 58px;
  left: 32px;
}
.maxui-roller div:nth-child(5) {
  animation-delay: -0.18s;
}
.maxui-roller div:nth-child(5):after {
  top: 57px;
  left: 25px;
}
.maxui-roller div:nth-child(6) {
  animation-delay: -0.216s;
}
.maxui-roller div:nth-child(6):after {
  top: 54px;
  left: 19px;
}
.maxui-roller div:nth-child(7) {
  animation-delay: -0.252s;
}
.maxui-roller div:nth-child(7):after {
  top: 50px;
  left: 14px;
}
.maxui-roller div:nth-child(8) {
  animation-delay: -0.288s;
}
.maxui-roller div:nth-child(8):after {
  top: 45px;
  left: 10px;
}
@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* sidebar css */
.filter_modal_right{
  padding: 15px;
  right:-300px;
}

.md .filter_modal_right {
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
  -ms-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
}

.filter_modal_right_open .filter_modal_right{
  right: 0;
}

.filter_modal_right_open .backdrop{
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 5;
}

.sidebar {
  height: 100%;
  width: 280px;
  position: fixed;
  top: 0;
  z-index: 9;
  transition: all ease 0.5s;
  -webkit-transition: all ease 0.5s;
  -moz-transition: all ease 0.5s;
  -ms-transition: all ease 0.5s;
}
.sidebar-left {
  left: -300px;
}
.md .sidebar-left {
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
  -ms-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
}
.sidebar-right {
  right: -300px;
}
.md .sidebar-right {
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
  -ms-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
}
.menu-left-open .sidebar-left {
  left: 0;
}
.menu-right-open .sidebar-right {
  right: 0;
}
.menu-left-open .backdrop,
.menu-right-open .backdrop-right {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 5;
}
.ios .menu-left-open .backdrop,
.ios .menu-right-open .backdrop-right {
  background: rgba(255, 255, 255, 0.5);
}
.push-content-right.menu-right-open .page {
  margin-left: -280px;
  -webkit-transition: all ease 0.6s;
  -moz-transition: all ease 0.6s;
  -ms-transition: all ease 0.6s;
  z-index: 10;
}
.push-content-right.menu-right-open .backdrop-right {
  background: none;
  z-index: 11;
  left: -280px;
}
.push-content-left.menu-left-open .page {
  margin-left: 280px;
  -webkit-transition: all ease 0.6s;
  -moz-transition: all ease 0.6s;
  -ms-transition: all ease 0.6s;
  z-index: 10;
}
.push-content-left.menu-left-open .backdrop {
  background: none;
  z-index: 11;
  left: 280px;
}
.profile-link {
  padding: 0 15px;
  color: #ffffff;
}
.profile-link .media .media-body h5 {
  color: #ffffff;
}
.profile-link .media .media-body p {
  color: rgba(255, 255, 255, 0.7);
}

/* fullscreen menu */

.fullscreen-menu {
  background: #fff !important;
  /*color: #fff;*/
  text-align: left !important;
}
.fullscreen-menu a {
  color: #fff;
}
.closebutton {
  position: absolute;
  right: 0;
  top: 0;
  height: 40px;
  width: 40px;
  display: block;
  line-height: 40px;
  vertical-align: middle;
  text-align: center;
}
.user-fullmenu figure {
  height: 80px;
  width: 80px;
  display: block;
  text-align: center;
  border-radius: 50%;
  overflow: hidden;
  margin: 0% auto 5px auto;
}
.user-fullmenu figure img {
  margin-bottom: 0;
  width: 100%;
}
.user-fullmenu .media-content {
  display: block;
  width: 100%;
}
.user-fullmenu .media-content h6 {
  margin: 0;
  color: #ffffff;
}
.user-fullmenu .media-content h6 small {
  font-size: 14px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.7);
}
.fullscreen-menu .menulist {
  padding: 0;
}
.fullscreen-menu .menulist ul {
  padding: 0;
  list-style: none;
  margin-bottom: 0;
}
.fullscreen-menu .menulist ul li {
  width: 31.33%;
  display: inline-block;
  margin-bottom: 15px;
}
.fullscreen-menu .menulist ul li a {
  width: 100%;
  display: block;
  text-transform: uppercase;
  font-size: 10px;
}
.fullscreen-menu .menulist ul li a .icon {
  background: rgba(255, 255, 255, 0.2);
  width: 70px;
  height: 70px;
  line-height: 70px;
  vertical-align: middle;
  border-radius: 50%;
  display: block;
  margin: 5px auto;
}
.button.autowidthbtn {
  width: auto;
  display: inline-block;
  padding: 0 30px;
}
.fullscreen-menu .menulist ul li a:hover .icon {
  background: rgba(255, 255, 255, 0.5);
}

/* modal box */

.modal-header {
  padding: 0.5em 1rem;
  border-bottom: 0;
}
.popup-fullmenu .modal-dialog {
  display: flex;
  height: 100%;
  margin: 0 auto;
  align-items: center;
}
.popup-fullmenu .modal-content {
  border-radius: 0;
  max-height: 100%;
  height: 100%;
  overflow-y: auto;
}
.ios .modal-content > .background {
  border-radius: 4px 4px 0 0;
}

/* navigation menu */

.navbar {
  width: 100%;
}
.navbar .navbar-nav {
  width: 100%;
  display: block;
}
.navbar .navbar-nav li {
  width: 100%;
  display: block;
  margin-bottom: -1px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.navbar .navbar-nav li:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.navbar .navbar-nav li .dropdown-menu {
  width: 100%;
  background: rgba(0, 0, 0, 0.1);
  border: 0;
  margin: 0;
  border-radius: 0;
  padding: 0;
}
.navbar .navbar-nav li a.dropdown-toggle::after {
  position: absolute;
  right: 15px;
  top: 24px;
}
.navbar .navbar-nav li a {
  width: 100%;
  display: block;
  line-height: 28px;
  padding: 10px 15px;
  font-size: 15px;
  color: #ffffff;
  vertical-align: middle;
}
.navbar .navbar-nav li .dropdown-menu a {
  padding-left: 48px;
  color: rgba(255, 255, 255, 0.8);
}
.navbar .navbar-nav li a:hover,
.navbar .navbar-nav li a:focus {
  color: #ffffff;
  background: rgba(0, 0, 0, 0.2);
}
.navbar .navbar-nav li a i {
  font-size: 20px;
  vertical-align: middle;
  width: 30px;
  text-align: left;
}

/* header css */

header {
  position: relative;
  width: 100%;
  /*height: 50px;*/
  height: 90px;
  z-index: 6;
  -webkit-transition: all ease 0.4s;
  -moz-transition: all ease 0.4s;
  -ms-transition: all ease 0.4s;
}
.ios header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
header > .right,
header > .left {
  width: auto;
  display: flex;
}
header > .right a,
header > .left a {
  width: 50px;
  height: 50px;
  line-height: 44px;
  display: block;
  text-align: center;
}
header > .right a:hover,
header > .left a:hover {
  background: rgba(0, 0, 0, 0.1);
}
header > .right a i,
header > .left a i {
  display: inline-block;
  vertical-align: middle;
}
header.fixed-header {
  position: absolute;
  top: 0;
  left: 0;
}
.md header:after {
  content: "";
  position: absolute;
  right: 0;
  width: 100%;
  top: 100%;
  bottom: auto;
  height: 10px;
  pointer-events: none;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(rgba(0, 0, 0, 0.3)),
    color-stop(40%, rgba(0, 0, 0, 0.1)),
    color-stop(50%, rgba(0, 0, 0, 0.05)),
    color-stop(80%, rgba(0, 0, 0, 0)),
    to(rgba(0, 0, 0, 0))
  );
  background: -webkit-linear-gradient(
    top,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.1) 40%,
    rgba(0, 0, 0, 0.05) 50%,
    rgba(0, 0, 0, 0) 80%,
    rgba(0, 0, 0, 0) 100%
  );
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.1) 40%,
    rgba(0, 0, 0, 0.05) 50%,
    rgba(0, 0, 0, 0) 80%,
    rgba(0, 0, 0, 0) 100%
  );
}
.logo {
  width: auto;
  display: flex;
  align-items: center;
  color: #ffffff;
  font-size: 18px;
  line-height: 50px;
  font-weight: 600;
  vertical-align: middle;
  max-height: 100%; 
  border-radius: 50px;
  padding: 3px 0 8px 12px !important;
}
.logo:hover {
  text-decoration: none;
}
.logo figure {
  width: auto;
  height: 50px;
  display: flex;
  align-items: center;
  margin-right: 5px;
  margin: 0 5px 0 0;
}
.logo figure img {
  max-height: 32px;
  vertical-align: middle;
  margin-top: 0;
  border-radius: 50px !important;
}

/* color scheme css */

header a {
  color: #ffffff;
}
.ios .btn.gradient,
.ios .color-theme-blue .btn.gradient,
.md .color-theme-blue .btn.gradient,
.btn.gradient-blue,
.gradient-blue {
  background-image: -moz-linear-gradient(
    63deg,
    rgb(18, 131, 246) 0%,
    rgb(136, 17, 211) 100%
  );
  background-image: -webkit-linear-gradient(
    63deg,
    rgb(18, 131, 246) 0%,
    rgb(136, 17, 211) 100%
  );
  background-image: -ms-linear-gradient(
    63deg,
    rgb(18, 131, 246) 0%,
    rgb(136, 17, 211) 100%
  );
  color: #ffffff;
}
.ios .color-theme-red .btn.gradient,
.btn.gradient-red,
.md .color-theme-red .btn.gradient,
.gradient-red {
  background-image: -moz-linear-gradient(
    63deg,
    rgb(244, 70, 94) 0%,
    rgb(244, 111, 70) 100%
  );
  background-image: -webkit-linear-gradient(
    63deg,
    rgb(244, 70, 94) 0%,
    rgb(244, 111, 70) 100%
  );
  background-image: -ms-linear-gradient(
    63deg,
    rgb(244, 70, 94) 0%,
    rgb(244, 111, 70) 100%
  );
  color: #ffffff;
}
.ios .color-theme-green .btn.gradient,
.btn.gradient-green,
.md .color-theme-green .btn.gradient,
.gradient-green {
  background-image: -moz-linear-gradient(
    63deg,
    rgb(0, 196, 115) 0%,
    rgb(29, 214, 111) 52%,
    rgb(58, 231, 107) 100%
  );
  background-image: -webkit-linear-gradient(
    63deg,
    rgb(0, 196, 115) 0%,
    rgb(29, 214, 111) 52%,
    rgb(58, 231, 107) 100%
  );
  background-image: -ms-linear-gradient(
    63deg,
    rgb(0, 196, 115) 0%,
    rgb(29, 214, 111) 52%,
    rgb(58, 231, 107) 100%
  );
  color: #ffffff;
}
.ios .color-theme-pink .btn.gradient,
.btn.gradient-pink,
.md .color-theme-pink .btn.gradient,
.gradient-pink {
  background-image: -moz-linear-gradient(
    63deg,
    rgb(227, 24, 172) 0%,
    rgb(239, 70, 194) 48%,
    rgb(251, 116, 215) 100%
  );
  background-image: -webkit-linear-gradient(
    63deg,
    rgb(227, 24, 172) 0%,
    rgb(239, 70, 194) 48%,
    rgb(251, 116, 215) 100%
  );
  background-image: -ms-linear-gradient(
    63deg,
    rgb(227, 24, 172) 0%,
    rgb(239, 70, 194) 48%,
    rgb(251, 116, 215) 100%
  );
  color: #ffffff;
}
.ios .color-theme-yellow .btn.gradient,
.btn.gradient-yellow,
.md .color-theme-yellow .btn.gradient,
.gradient-yellow {
  background-image: -moz-linear-gradient(
    63deg,
    rgb(247, 146, 47) 0%,
    rgb(251, 169, 24) 48%,
    rgb(255, 192, 0) 100%
  );
  background-image: -webkit-linear-gradient(
    63deg,
    rgb(247, 146, 47) 0%,
    rgb(251, 169, 24) 48%,
    rgb(255, 192, 0) 100%
  );
  background-image: -ms-linear-gradient(
    63deg,
    rgb(247, 146, 47) 0%,
    rgb(251, 169, 24) 48%,
    rgb(255, 192, 0) 100%
  );
  color: #ffffff;
}
.ios .color-theme-orange .btn.gradient,
.btn.gradient-orange,
.md .color-theme-orange .btn.gradient,
.gradient-orange {
  background-image: -moz-linear-gradient(
    63deg,
    rgb(255, 132, 0) 0%,
    rgb(255, 176, 62) 100%
  );
  background-image: -webkit-linear-gradient(
    63deg,
    rgb(255, 132, 0) 0%,
    rgb(255, 176, 62) 100%
  );
  background-image: -ms-linear-gradient(
    63deg,
    rgb(255, 132, 0) 0%,
    rgb(255, 176, 62) 100%
  );
  color: #ffffff;
}
.ios .color-theme-gray .btn.gradient,
.btn.gradient-gray,
.md .color-theme-gray .btn.gradient,
.gradient-gray {
  background-image: -moz-linear-gradient(
    63deg,
    rgb(165, 161, 170) 0%,
    rgb(207, 206, 207) 100%
  );
  background-image: -webkit-linear-gradient(
    63deg,
    rgb(165, 161, 170) 0%,
    rgb(207, 206, 207) 100%
  );
  background-image: -ms-linear-gradient(
    63deg,
    rgb(165, 161, 170) 0%,
    rgb(207, 206, 207) 100%
  );
  color: #ffffff;
}
.ios .color-theme-black .btn.gradient,
.btn.gradient-black,
.md .color-theme-black .btn.gradient,
.gradient-black {
  background-image: -moz-linear-gradient(
    63deg,
    rgb(27, 26, 26) 0%,
    rgb(0, 48, 79) 100%
  );
  background-image: -webkit-linear-gradient(
    63deg,
    rgb(27, 26, 26) 0%,
    rgb(0, 48, 79) 100%
  );
  background-image: -ms-linear-gradient(
    63deg,
    rgb(27, 26, 26) 0%,
    rgb(0, 48, 79) 100%
  );
  color: #ffffff;
}
.color-theme-red .background {
  background: #e2223c;
}
.ios .color-theme-red .sidebar,
.ios .color-theme-red .fullscreen-menu,
.md .color-theme-red .sidebar,
.md .color-theme-red .fullscreen-menu,
.md .color-theme-red header,
.color-theme-red .circle-background:before {
  background: #ce0707;
}
.ios .color-theme-red header {
  color: #f4465e;
  background: #ffffff;
}
.ios .color-theme-red header a,
.ios .color-theme-red header .logo,
.ios .color-theme-red .nav-tabs .nav-item .nav-link.active,
.color-theme-red .block-title,
.color-theme-red .tabber-bottom .nav-tabs .nav-link.active {
  color: #fff !important;
}
.color-theme-green .background {
  background: #009f5d;
}
.ios .color-theme-green .sidebar,
.ios .color-theme-green .fullscreen-menu,
.md .color-theme-green .sidebar,
.md .color-theme-green .fullscreen-menu,
.md .color-theme-green header,
.color-theme-green .circle-background:before {
  background: #00c473;
}
.ios .color-theme-green header {
  color: #00c473;
  background: #ffffff;
}
.ios .color-theme-green header a,
.ios .color-theme-green header .logo,
.ios .color-theme-green .nav-tabs .nav-item .nav-link.active,
.color-theme-green .block-title,
.color-theme-green .tabber-bottom .nav-tabs .nav-link.active {
  color: #fff !important;
}

.color-theme-blue .background {
  background: #0366cb;
}
.ios .color-theme-blue .sidebar,
.ios .color-theme-blue .fullscreen-menu,
.md .color-theme-blue .sidebar,
.md .color-theme-blue .fullscreen-menu,
.md .color-theme-blue header,
.color-theme-blue .circle-background:before {
  background: #1283f6;
}
.ios .color-theme-blue header {
  color: #1283f6;
  background: #ffffff;
}
.ios .color-theme-blue header a,
.ios .color-theme-blue header .logo,
.ios .color-theme-blue .nav-tabs .nav-item .nav-link.active,
.color-theme-blue .block-title,
.color-theme-blue .tabber-bottom .nav-tabs .nav-link.active {
  color: #fff !important;
}
.color-theme-pink .background {
  background: #de40b4;
}
.ios .color-theme-pink .sidebar,
.ios .color-theme-pink .fullscreen-menu,
.md .color-theme-pink .sidebar,
.md .color-theme-pink .fullscreen-menu,
.md .color-theme-pink header,
.color-theme-pink .circle-background:before {
  background: #fb74d7;
}
.ios .color-theme-pink header {
  color: #fb74d7;
  background: #ffffff;
}
.ios .color-theme-pink header a,
.ios .color-theme-pink header .logo,
.ios .color-theme-pink .nav-tabs .nav-item .nav-link.active,
.color-theme-pink .block-title,
.color-theme-pink .tabber-bottom .nav-tabs .nav-link.active {
  color: #fb74d7 !important;
}
.color-theme-yellow .background {
  background: #e28200;
}

.ios .color-theme-yellow .sidebar,
.ios .color-theme-yellow .fullscreen-menu,
.md .color-theme-yellow .sidebar,
.md .color-theme-yellow .fullscreen-menu,
.md .color-theme-yellow header,
.color-theme-yellow .circle-background:before {
  background: #ffc000;
}
.ios .color-theme-yellow header {
  color: #ffc000;
  background: #ffffff;
}
.ios .color-theme-yellow header a,
.ios .color-theme-yellow header .logo,
.ios .color-theme-yellow .nav-tabs .nav-item .nav-link.active,
.color-theme-yellow .block-title,
.color-theme-yellow .tabber-bottom .nav-tabs .nav-link.active {
  color: #ffc000 !important;
}
.color-theme-yellow .nav-web {
  background: #ffc000 !important;
}

.color-theme-orange .background {
  background: #e07400;
}
.ios .color-theme-orange .sidebar,
.ios .color-theme-orange .fullscreen-menu,
.md .color-theme-orange .sidebar,
.md .color-theme-orange .fullscreen-menu,
.md .color-theme-orange header,
.color-theme-orange .circle-background:before {
  background: #ff8400;
}
.ios .color-theme-orange header {
  color: #ff8400;
  background: #ffffff;
}
.ios .color-theme-orange header a,
.ios .color-theme-orange header .logo,
.ios .color-theme-orange .nav-tabs .nav-item .nav-link.active,
.color-theme-orange .block-title,
.color-theme-orange .tabber-bottom .nav-tabs .nav-link.active {
  color: #ff8400 !important;
}
.color-theme-orange .nav-web {
  background: #ff8400 !important;
}

.color-theme-gray .background {
  background: #7c7486;
}
.ios .color-theme-gray .sidebar,
.ios .color-theme-gray .fullscreen-menu,
.md .color-theme-gray .sidebar,
.md .color-theme-gray .fullscreen-menu,
.md .color-theme-gray header,
.color-theme-gray .circle-background:before {
  background: #a5a1aa;
}
.ios .color-theme-gray header {
  color: #a5a1aa;
  background: #ffffff;
}
.ios .color-theme-gray header a,
.ios .color-theme-gray header .logo,
.ios .color-theme-gray .nav-tabs .nav-item .nav-link.active,
.color-theme-gray .block-title,
.color-theme-gray .tabber-bottom .nav-tabs .nav-link.active {
  color: #a5a1aa !important;
}
.color-theme-gray .nav-web {
  background: #a5a1aa !important;
}

.color-theme-black .background {
  background: #000000;
}
.color-dark.background {
  background: #000000;
}
.color-dark.background img {
  opacity: 0.5;
}
.ios .color-theme-black .sidebar,
.ios .color-theme-black .fullscreen-menu,
.md .color-theme-black .sidebar,
.md .color-theme-black .fullscreen-menu,
.md .color-theme-black header,
.color-theme-black .circle-background:before {
  background: #000000;
}
.ios .color-theme-black header {
  color: #000000;
  background: #ffffff;
}
.ios .color-theme-black header a,
.ios .color-theme-black header .logo,
.ios .color-theme-black .nav-tabs .nav-item .nav-link.active,
.color-theme-black .block-title,
.color-theme-black .tabber-bottom .nav-tabs .nav-link.active {
  color: #000000 !important;
}
body.theme-dark {
  background: #000000;
  color: #dddddd;
}
.md body.theme-dark .block-title,
.ios body.theme-dark .block-title {
  color: #ffffff;
}
.theme-dark .swiper-slide,
.theme-dark .list .item-title,
.theme-dark .post-seconds {
  color: #ffffff;
}
.theme-dark .list .item-subtitle,
.theme-dark .title-small-carousel + p {
  color: #aaaaaa;
}
.theme-dark .block-footer,
.theme-dark .block-header,
.theme-dark .block-title {
  color: #bbbbbb;
}
.theme-dark .card {
  background-color: #333;
}
.theme-dark .card.card-data-item {
  border: 1px solid #dddddd38;
}
.theme-dark .card-footer,
.theme-dark .card-header {
  border-color: rgba(255, 255, 255, 0.06);
}
.theme-dark hr {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.theme-dark .swiper-pagination-bullet {
  background: #fff;
  opacity: 0.3;
}
.theme-dark .swiper-pagination-bullet-active {
  opacity: 1;
  background: #007aff;
}
.theme-dark .list ul:before,
.theme-dark ul:before,
.theme-dark .item-inner:after,
.theme-dark .list ul:after,
.list .theme-dark ul:after {
  background-color: #666666 !important;
}
.ios .theme-dark .swiper-pagination-bullet {
  background: #ffffff;
}
.theme-dark .swiper-content-block {
  border: 0px solid #ccc;
  background: #333333;
}
.md .theme-dark .swiper-content-block,
.ios .theme-dark .swiper-content-block {
  border: 1px solid #414142;
}
.theme-dark .footer,
.md .theme-dark .block.footer,
.ios .theme-dark .block.footer {
  background: rgba(232, 234, 243, 0.15);
  color: #ffffff;
}
.theme-dark .footer a,
.md .theme-dark .block.footer a,
.ios .theme-dark .block.footer a,
.theme-dark .footer a i,
.md .theme-dark .block.footer a i,
.ios .theme-dark .block.footer a i {
  color: #ffffff;
}
.theme-dark .footer.dark,
.md .theme-dark .block.footer.dark,
.ios .theme-dark .block.footer.dark {
  background: rgba(255, 255, 255, 0.3);
}
.theme-dark .footer-m {
  background-color: #171717;
}
.theme-dark .form-control {
  color: #ffffff;
}
.theme-dark .form-control::placeholder {
  color: rgba(255, 255, 255, 0.3);
}
.theme-dark .login-input-content {
  background: #333333;
}
.theme-dark .modal-content {
  background: #000000;
}
.block-title.color-dark {
  color: #000000 !important;
}
.theme-dark .block-title.color-dark {
  color: #ffffff !important;
}

/* button css */

.btn-round {
  border-radius: 25px !important;
  padding: 0px 23px !important;
}
.btn {
  border-radius: 0;
  font-size: 14px;
  font-weight: 500;
  padding: 0.375rem 1.5rem;
}
.ios .btn {
  border-radius: 4px !important;
}
.ios .btn-group .btn {
  border-radius: 0px !important;
}
.ios .btn-group .btn:first-child {
  border-top-left-radius: 4px !important;
  border-bottom-left-radius: 4px !important;
}
.ios .btn-group .btn:last-child {
  border-top-right-radius: 4px !important;
  border-bottom-right-radius: 4px !important;
}
.ios .btn-group.btn-group-vertical .btn {
  border-radius: 0 !important;
}
.ios .btn-group.btn-group-vertical .btn:first-child {
  border-radius: 4px 4px 0 0px !important;
}
.ios .btn-group.btn-group-vertical .btn:last-child {
  border-radius: 0 0px 4px 4px !important;
}
.ios .btn-group > .btn-group .btn:first-child {
  border-radius: 0 4px 4px 0 !important;
}
.ios .btn-group > .btn-group .btn:first-child {
  border-radius: 0 4px 4px 0 !important;
}
.ios .btn.dropdown-toggle,
.ios .btn-group .btn.dropdown-toggle {
  border-radius: 4px !important;
  border-radius: 4px !important;
}
.ios .btn + .btn.dropdown-toggle,
.ios .btn-group .btn + .btn.dropdown-toggle {
  border-top-right-radius: 4px !important;
  border-bottom-right-radius: 4px !important;
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
}
.btn-block {
  padding: 0.375rem 0.5rem;
}
.btn.rounded {
  border-radius: 30px !important;
}
.btn-sm {
  line-height: 30px;
  font-size: 12px;
  padding: 0.1rem 1rem;
}
.btn-lg {
  text-transform: uppercase;
  border-radius: 0;
  line-height: 44px;
  font-size: 16px;
  font-weight: 500;
  padding: 0.4rem 1.5rem;
}
.sq-btn {
  padding: 0;
  height: 50px;
  width: 50px;
  line-height: 50px;
  text-align: center;
}
.btn i {
  vertical-align: middle;
  margin-top: -3px;
}
.btn-outline-white {
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: #ffffff;
}
.btn-outline-white:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}
.md .btn.gradient {
  -moz-box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12) !important;
  -ms-box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12) !important;
  -webkit-box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12) !important;
}
.btn-group-lg > .btn,
.btn-lg {
  border-radius: 0;
}
.btn-group-sm > .btn,
.btn-sm {
  border-radius: 0;
}

/* background css */

.background {
  background: #2196f3;
  height: 100%;
  width: 100%;
  overflow: hidden;
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
}
.background img {
  opacity: 0.2;
  width: 100%;
  top: 0;
  border: 0;
  min-height: 100%;
}
.background + div {
  z-index: 1;
  position: relative;
}
.background.bg-225 {
  height: 225px;
}
.background.bg-170 {
  height: 170px;
}
.background.bg-125 {
  height: 65px;
}
.title-background {
  font-size: 25px;
  font-weight: 600;
  line-height: 25px;
  margin: 25px auto;
}
.title-background small {
  font-size: 15px;
  font-weight: 300;
}
.full-screen-background {
  width: 100%;
  height: 100%;
  min-height: 200px;
  overflow: hidden;
  position: relative;
}
.full-screen-background img {
  width: 100%;
  min-height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.circle-background:before {
  content: "";
  height: 280px;
  width: 100%;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  border-radius: 0 0 50% 50%;
}

/* dashboard swiper slider  */

.demo-swiper {
  width: 100%;
  height: 550px;
}
.swiper-slide,
.swiper-slide-item {
  font-size: 22px;
  font-weight: 300;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  background: #fff;
  color: #999999;
  box-sizing: border-box;
  background: none;
  padding: 15px;
  background-size: cover;
}
/*  By Steven   --------------------------------------------------------------*/
.swiper-container.combos-homepage-restaurant
  .swiper-slide
  .swiper-content-subcategory {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 7px; /* 15px 10px; */
}
.swiper-container.combos-homepage-restaurant
  .swiper-slide
  .swiper-content-subcategory
  .active-check {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: #fff;
  border-radius: 50px;
  font-size: 16px;
  line-height: 1;
  color: #e26d6d;
  border: 3px solid #e26d6d;
  display: none;
}
.swiper-container.combos-homepage-restaurant
  .swiper-slide
  .swiper-content-subcategory
  .active-check
  i {
  font-size: 16px;
}
.swiper-container.combos-homepage-restaurant
  .swiper-slide
  .swiper-content-subcategory.active
  .active-check {
  display: block;
}
.swiper-container.combos-homepage-restaurant
  .swiper-slide
  .swiper-content-subcategory
  .swiper-content-subcategory-text {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 5px 15px;
  border-radius: 10px;
}
.swiper-container.combos-homepage-restaurant
  .swiper-slide
  .swiper-content-subcategory
  .swiper-content-subcategory-text.color {
  color: #666;
}
/*  By Steven   --------------------------------------------------------------*/
.swiper-content-block {
  border: 0px solid #ccc;
  /*background: #ffffff;*/
  border-radius: 10px;
  height: 100%;
  width: 100%;
  padding: 15px;
}
.md .swiper-content-block {
  /*box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.15);
    -ms-box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.15);
    */
}
.swiper-content-block img {
  border-radius: 50px;
  max-width: 100%;
  float: left;
}
.ios .swiper-content-block {
  border: 1px solid #dddddd;
}
.swipermultiple {
  margin: 0px 0 35px;
  font-size: 18px;
  height: auto;
}
.swipermultiple.demo-swiper-multiple-auto .swiper-slide {
  width: 85%;
}
.swipermultiple.demo-swiper-multiple-auto .swiper-slide:nth-child(2n) {
  width: 70%;
}
.swipermultiple.demo-swiper-multiple-auto .swiper-slide:nth-child(3n) {
  width: 30%;
}
.swipermultiple {
  padding-bottom: 20px;
}
.swipermultiple.no-pagination {
  padding-bottom: 0px;
  margin-bottom: 10px;
}
.swipermultiple .swiper-pagination-bullets,
.swipermultiple .swiper-pagination-custom,
.swipermultiple .swiper-pagination-fraction {
  bottom: -5px;
}
.title-small-carousel {
  margin: 0;
  font-size: 14px;
  line-height: 18px;
  font-weight: 400;
}
.title-small-carousel + p {
  margin: 0;
  font-size: 11px;
  line-height: 14px;
  color: #999999;
}
.title-number-carousel {
  font-size: 18px;
  margin: 10px 0 0 0;
  display: inline-block;
  float: left;
  color: #666666;
}
.gauge {
  float: right;
  margin-top: 10px;
  line-height: 20px;
}
.md .block-title,
.ios .block-title {
  margin: 30px 15px 20px 15px;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.54);
  line-height: 16px;
  font-weight: 600;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
}

/* swiper css */

.demo-swiper-gallery-top {
  width: 100%;
  height: 500px;
  margin-left: auto;
  margin-right: auto;
}
demo-swiper-gallery-top .swiper-slide {
  background-size: cover;
  background-position: center;
}
.gallery-top {
  height: 80%;
  width: 100%;
}
.gallery-thumbs {
  height: 20%;
  box-sizing: border-box;
  padding: 10px 0;
}
.gallery-thumbs .swiper-slide {
  width: 25%;
  height: 100%;
  opacity: 0.4;
}
.gallery-thumbs .swiper-slide-thumb-active {
  opacity: 1;
}
.parallax-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 130%;
  height: 100%;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: center;
}
.demo-swiper-parallax .swiper-parallax-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 130%;
  height: 100%;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: center;
}
.demo-swiper-parallax .swiper-slide {
  flex-direction: column;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
}
.demo-swiper-parallax .swiper-slide .swiper-slide-title {
  font-size: 24px;
  color: #ffffff;
}
.demo-swiper-parallax .swiper-slide .swiper-slide-subtitle {
  font-size: 20px;
  color: #ffffff;
}
.demo-swiper-parallax .swiper-slide p {
  font-size: 16px;
  color: #ffffff;
}
.swiper-lazy {
  max-width: 100%;
  min-height: 100%;
}
.swiper-container-horizontal > .swiper-pagination-progressbar,
.swiper-container-vertical
  > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  height: 6px;
}

/* List group css */

.list-group-item {
  border-width: 1px 0 1px 0;
  padding: 10px 15px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.list-group-item:last-child,
.list-group-item:first-child {
  border-radius: 0rem;
}
.status-online {
  width: 8px;
  height: 8px;
  vertical-align: middle;
  display: inline-block;
  border-radius: 5px;
}
a:hover {
  text-decoration: none;
}
.theme-dark .list-group-item {
  background-color: #222222;
  border: 1px solid #333333;
}

/* card  */

.card {
  margin-bottom: 10px;
}
.md .card {
  box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: -1px 1px 4px 1px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.15);
  -ms-box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.15);
  border: 0;
  border-radius: 15px !important; /* ByYU 24 de febrero del 2025 */
}

.card_cart {
  position: relative;
  display: flex;
  min-width: 0;
  word-wrap: break-word;
  /*    background-color: #fff;*/
  background-clip: border-box;
  /*    border-bottom: 1px solid rgba(0,0,0,.125);*/
  /*    border-radius: .25rem;*/
}
.md .card_cart {
}
.md.card-footer,
.md .card-header {
  border-radius: var(--bord-rad-10) !important;
}
.md .card .card-body {
  padding: 10px 15px;
}
.card .card-body {
  z-index: 1;
}
.card-footer,
.card-header {
  background: none;
  padding: 10px 15px;
  z-index: 2;
  border-color: #fff;
}
.card-footer i {
  font-size: 16px;
  vertical-align: middle;
  /* color: #999999; */
}
.card-footer {
  line-height: 30px;
  color: #000000;
}
.card-footer .post-seconds {
  font-size: 15px;
  vertical-align: middle;
  font-weight: 500;
}
.card-footer .post-seconds span {
  font-size: 14px;
  color: #999999;
  font-weight: 300;
}
.card-title {
  margin: 0.3rem 0;
  font-size: 1em;
}

/* media css */

.icon {
  font-size: 22px;
}
.icon-2x {
  font-size: 40px;
  line-height: 40px;
  vertical-align: middle;
}
.icon-3x {
  font-size: 50px;
  line-height: 50px;
  vertical-align: middle;
}
.icon-4x {
  font-size: 70px;
  line-height: 70px;
  vertical-align: middle;
}

/* media css */

.media .media-body h5 {
  color: #000000;
  margin: 0;
  font-size: 16px;
}
.theme-dark .media .media-body h5 {
  color: #ffffff;
}
.media .media-body p {
  color: #666666;
  margin: 0;
  font-size: 14px;
}
.theme-dark .media .media-body p {
  color: rgba(255, 255, 255, 0.6);
}
.effort-time {
  line-height: 20px;
  vertical-align: middle;
  margin-bottom: 10px;
  display: block;
  text-align: right;
}
.effort-time i {
  line-height: 20px;
  vertical-align: middle;
}

/* sparkline  chart tooltip*/

.jqstooltip {
  height: auto !important;
  width: auto !important;
  display: block;
  padding: 6px;
  color: #222222 !important;
  background: rgb(255, 255, 255) !important;
  font-size: 12px;
  text-align: center;
  line-height: 14px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
}
.jqstooltip .jqsfield,
.jqstooltip .jqsfield span {
  color: #222222 !important;
}

/* avatar css */

.avatar {
  border-radius: 50%;
  margin: 0;
  margin-right: 10px;
  vertical-align: middle;
  display: inline-block;
}
.avatar img {
  width: 100%;
  vertical-align: top;
}
.avatar.avatar-30 {
  width: 30px;
  height: 30px;
  line-height: 30px;
}
.avatar.avatar-40 {
  width: 40px;
  height: 40px;
  line-height: 40px;
}
.avatar.avatar-120 {
  width: 120px;
  height: 120px;
  line-height: 120px;
}
.userlist_large {
  position: relative;
  padding: 15px;
}
.userlist_large .media {
  flex-flow: column;
  text-align: center;
  position: relative;
}
.userlist_large .media figure {
  margin: 0 auto;
}
.userblock-ht {
  height: 170px;
}

/* footer */

.footer-wrapper {
  width: 100%;
  display: block;
  position: relative;
  left: 0;
}
.fixed-footer .footer-wrapper {
  position: absolute;
  width: 100%;
  bottom: 0;
}
.fixed-footer .page-content {
  padding-bottom: 100px;
}
.footer {
  line-height: 40px;
  vertical-align: middle;
  padding: 5px 0px;
  width: 100%;
  background: #e8eaf3;
  color: #666666;
}
.footer.dark {
  color: #ffffff;
  background: #a8aab9;
}
.social {
  display: inline-block;
  height: 30px;
  width: 30px;
  margin: 0 2px;
  vertical-align: middle;
}
.social img {
  vertical-align: top;
  max-width: 100%;
  border: 0;
}

/* login page */

.login-logo {
  width: 75px;
  height: auto;
  margin-top: 15%;
}
.login-title {
  font-size: 50px;
  margin-top: 5px;
  line-height: 50px;
  color: #ffffff;
  font-weight: 600;
}
.login-title small {
  font-size: 30px;
  font-weight: 300;
}
.login-input-content {
  background: #ffffff;
  z-index: 1;
  position: relative;
}
.ios .login-input-content {
  margin-bottom: 10px;
}
.ios .login-tabs + .tab-content .login-input-content {
  border-radius: 4px;
  padding: 10px;
}
.ios .modal-content .login-input-content {
  border-radius: 0px;
  padding: 0px !important;
  margin-bottom: 15px;
}
.ios .login-input-content .input-group,
.ios .login-input-content .form-group {
  margin-bottom: 15px;
}
.ios .login-input-content .input-group:last-child,
.ios .login-input-content .form-group:last-child {
  margin-bottom: 0px;
}
.md .login-input-content {
  -webkit-box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12) !important;
}
.login-input-content .input-group-append,
.login-input-content .input-group-append .input-group-text,
.login-input-content .input-group-prepend,
.login-input-content .input-group-prepend .input-group-text {
  background: none;
}
.md .input-group {
  border: 0;
  border-radius: 0;
}
.md .input-group-append,
.md .input-group-append .input-group-text,
.md .input-group-prepend,
.md .input-group-prepend .input-group-text {
  border-radius: 0;
  border: 0;
  color: #888888;
}
.verification {
  padding: 20% 16% 0% 16%;
}

/* form control  */

.form-control {
  padding: 10px 0.75rem;
  font-size: 16px;
  background: none;
  min-height: 50px;
  line-height: 30px;
}
.md .form-control {
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.form-control:focus {
  box-shadow: none;
  border-color: #80bdff;
  background: none;
}
.form-control.text-white::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.searchcontrol {
  background: #ffffff;
  width: 0;
  overflow: hidden;
  transition: ease all 0.5s;
  -moz-transition: ease all 0.5s;
  -ms-transition: ease all 0.5s;
  -webkit-transition: ease all 0.5s;
  position: fixed;
  right: 0;
  top: 0;
  opacity: 0;
  z-index: 8;
}
.theme-dark .searchcontrol {
  background: #333333;
}
.searchcontrol .input-group {
  min-width: 250px;
}
.searchcontrol.active {
  width: 100%;
  opacity: 1;
}
.page-content .searchcontrol {
  position: relative;
  width: 100%;
  opacity: 1;
  overflow: visible;
  z-index: 0;
}
.md .page-content .searchcontrol:after {
  content: "";
  position: absolute;
  right: 0;
  opacity: 0.5;
  width: 100%;
  top: 100%;
  bottom: auto;
  height: 10px;
  pointer-events: none;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(rgba(0, 0, 0, 0.3)),
    color-stop(40%, rgba(0, 0, 0, 0.1)),
    color-stop(50%, rgba(0, 0, 0, 0.05)),
    color-stop(80%, rgba(0, 0, 0, 0)),
    to(rgba(0, 0, 0, 0))
  );
  background: -webkit-linear-gradient(
    top,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.1) 40%,
    rgba(0, 0, 0, 0.05) 50%,
    rgba(0, 0, 0, 0) 80%,
    rgba(0, 0, 0, 0) 100%
  );
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.1) 40%,
    rgba(0, 0, 0, 0.05) 50%,
    rgba(0, 0, 0, 0) 80%,
    rgba(0, 0, 0, 0) 100%
  );
}
.md .form-group label {
  margin-bottom: 0;
}

/* tabs */

.nav-tabs {
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
}
.ios .nav-tabs {
  background: #ffffff;
  border-radius: 4px;
  margin-bottom: 10px;
}
.ios .login-tabs.nav-tabs {
  margin-bottom: 0;
  border-radius: 4px 4px 0 0;
}
.ios .login-tabs.nav-tabs + .tab-content .login-input-content {
  border-radius: 0 0 4px 4px;
}
.nav-tabs .nav-item {
  border: 0;
  margin-bottom: -2px;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
  text-align: center;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: #fff !important;
  background: #f44336;
  border-radius: 6px !important;
  /* padding: 3px; */
  margin-bottom: 5px;
  margin-top: 5px;
}

.nav-tabs .nav-item .nav-link {
  border: 0;
  opacity: 0.6;
  padding: 5px 10px;
  line-height: 30px;
  border-radius: 0;
  -ms-border-radius: 0;
  -moz-border-radius: 0;
  color: #222222;
  text-align: center;
  text-transform: uppercase;
  font-size: 14px;
  line-height: 38px;
  font-weight: 500;
}
.ios .nav-tabs .nav-item .nav-link {
  color: #999999 !important;
}
.theme-dark .nav-tabs .nav-item .nav-link {
  color: #ffffff;
}
.nav-tabs .nav-item .nav-link.active {
  background: none;
  border: 0;
  border-bottom-width: 3px;
  border-bottom-style: solid;
  opacity: 1;
  line-height: 34px;
}
.ios .nav-tabs .nav-item .nav-link.active {
  border: 0;
  line-height: 38px;
}

/* iphone x updates css */

body .wrapper .page > header {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
body .wrapper .page-content {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
body .wrapper .sidebar-left {
  padding-left: env(safe-area-inset-left);
}
body .wrapper .sidebar-right {
  padding-left: env(safe-area-inset-right);
}
body .wrapper .page .footer {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* search block */

.clearfix {
  clear: both;
}
.md .searchshadow {
  border-radius: 7px !important;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 3px 20px 0px rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: 0px 3px 20px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 3px 20px 0px rgba(0, 0, 0, 0.15);
  -ms-box-shadow: 0px 3px 20px 0px rgba(0, 0, 0, 0.15);
  width: 100%;
  overflow: hidden;
}
.md .searchshadow .form-control {
  border-bottom: 0;
}

/* Image left details right overlay */

.image-left-below {
  position: relative;
  width: 100%;
  display: flex;
  text-align: left;
  margin: 10px 0;
}
.image-left-below .swiper-content-block {
  position: absolute;
  height: auto;
  top: 22px;
  right: 0;
  width: 50%;
}
.image-left-wrap {
  width: 80%;
  height: 200px;
  border-radius: 7px;
  overflow: hidden;
  margin: 0;
}
.image-left-wrap img {
  width: 100%;
  min-height: 100%;
}
.ios .media .like-heart,
.md .media .like-heart,
.like-heart {
  height: 24px;
  width: 24px;
  line-height: 24px;
  vertical-align: middle;
  border-radius: 50%;
  text-align: center;
  background: #f5f4f4;
  position: absolute;
  border: 0;
  padding: 0;
  right: 6px;
  top: 6px;
}

.ios .media .like-heart,
.md .media .like-heart {
  margin-top: 8px;
}
.ios .media .like-heart i,
.md .media .like-heart i,
.like-heart i {
  font-size: 16px;
  line-height: 24px;
  color: #f44336;
}
.image-left-below .swiper-content-block.right-block {
  position: absolute;
}
.right-block {
  position: relative;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.right-block p {
  line-height: 16px;
  margin: 0;
  font-size: 14px;
  margin-bottom: 5px;
}
.right-block h2 {
  font-size: 20px;
  margin: 0;
  line-height: 28px;
  font-weight: 300;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.right-block h3 {
  font-size: 16px;
  line-height: 16px;
  margin: 0;
  display: inline-block;
  margin-top: 10px;
  width: 100%;
}
.right-block h3 small {
  font-size: 14px;
  font-weight: 300;
  color: #888888;
}
.right-block a {
  display: block;
  font-size: 14px;
}
.image-left-wrap.smalls {
  width: 65px;
  height: 40px;
  border-radius: 3px;
  overflow: hidden;
  margin: 0;
}
.image-left-wrap.smalls img {
  width: 100%;
  min-height: 100%;
}

/* location details*/

.swiper-location-carousel,
.swiper-location {
  position: relative;
  z-index: 0;
}
.swiper-location .swiper-slide {
  padding: 0;
  border: 0;
}
.swiper-location .swiper-slide img {
  width: 100%;
}
.swiper-location .swiper-pagination-bullets,
.swiper-location .swiper-pagination-custom,
.swiper-location .swiper-pagination-fraction {
  bottom: auto;
  top: 10px;
}
.detailblock-top {
  margin-top: -50px !important;
  z-index: 2;
}
.location-ammenities .list-group {
  display: block;
}
.location-ammenities .media .item-media {
  width: 24px;
  min-width: 24px;
  line-height: 40px;
}
.location-ammenities .media .item-media img {
  width: 100%;
  vertical-align: middle;
}
.location-ammenities li {
  width: 50%;
  float: left;
}
.location-ammenities li:nth-child(2n) {
  border-left: 0;
}
.map {
  width: 100%;
}
.friend-visited + div,
.friend-visited {
  width: auto !important;
  margin-top: 15px;
}
.friend-visited .avatar {
  display: inline-block;
  margin-right: 4px;
  margin-bottom: 0;
}
.friend-visited + div p {
  font-size: 10px;
  margin-bottom: 0;
  margin-top: 5px;
  color: #666666;
}
.rating {
  width: 18px;
  font-size: 18px;
  vertical-align: middle;
}
.user-column {
  flex-direction: column;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  -moz-flex-direction: column;
  text-align: center;
}
.user-column .item-inner {
  padding-right: 0;
  margin: 0;
  text-align: center;
}
.user-column .item-inner > div {
  width: 100%;
}

/* restaurant css */

.combos-restaurant {
  margin-top: 15px;
  padding-bottom: 10px;
  margin-bottom: 15px;
}
.combos-restaurant .swiper-wrapper .block-slide {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5px;
  padding: 0px 30px 25px 30px;
}
.combos-restaurant .swiper-wrapper .swiper-slide figure {
  width: 100%;
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  height: 250px;
}

.homepage-restaurant {
  margin-top: 15px;
  z-index: 0;
  padding-bottom: 10px;
  margin-bottom: 15px;
}
.homepage-restaurant .swiper-wrapper .block-slide {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5px;
}
.homepage-restaurant .swiper-wrapper .swiper-slide figure {
  width: 100%;
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  height: 200px;
  /*    height: 250px;*/
}
.featured-restaurant .swiper-wrapper .swiper-slide figure {
  width: 100%;
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  height: 150px;
}
.homepage-restaurant .swiper-wrapper .swiper-slide figure + div .card {
  margin: 0;
}
.homepage-restaurant .swiper-wrapper .swiper-slide figure img {
  width: 100%;
  min-height: 100%;
  vertical-align: top;
}
.featured-restaurant .swiper-wrapper .swiper-slide figure img {
  width: 100%;
  min-height: 100%;
  vertical-align: top;
}
.featured-restaurant .swiper-wrapper .swiper-slide {
  width: 80%;
  padding: 0;
}
.categories {
  margin-bottom: 15px;
}
.categories .swiper-wrapper .swiper-slide,
.swiper-slide-item {
  flex-direction: column;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  -moz-flex-direction: column;
  width: 85px;
  padding: 0 5px;
}

/*  By Steven   --------------------------------------------------------------*/
.categories #category_list.swiper-wrapper {
  padding-top: 5px;
}
.categories #category_list.swiper-wrapper .swiper-slide .swiper-slide-item {
  margin: 1px 0px 0px 1px;
  padding: 5px 5px 5px 5px;
  border: 3px solid transparent;
}
.categories
  #category_list.swiper-wrapper
  .swiper-slide
  .swiper-slide-item.active {
  border-radius: 7px;
  /*box-shadow: 0 0 0 .15rem rgba(206,7,7,.4) !important;*/
  color: #7d0000;
  border: 3px solid rgba(206, 7, 7, 0.4);
}
/*  By Steven   --------------------------------------------------------------*/

.categories .swiper-wrapper .swiper-slide .swiper-content-block {
  padding: 0px;
  width: 100%;
}
.categories .swiper-wrapper .swiper-slide .swiper-content-block figure {
  padding: 0;
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
}
.categories .swiper-wrapper .swiper-slide p {
  font-size: 12px;
  margin: 10px 0 0 0;
}
.categories-banner {
  width: 100%;
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  height: 100px;
}
.categories-banner img {
  width: 100%;
  min-height: 100%;
  vertical-align: top;
}
.categories-banner figcaption {
  position: absolute;
  width: 100%;
  top: 30%;
  font-size: 30px;
  text-align: center;
  left: 0;
  color: #ffffff;
}
.square-40 {
  height: 40px;
  width: 40px;
  margin: 0;
  border-radius: 5px;
  overflow: hidden;
  margin-right: 15px;
}
.square-40 img {
  min-width: 100%;
  max-height: 100%;
  vertical-align: top;
}
.square-60 {
  height: 60px;
  width: 60px;
  margin: 0;
  border-radius: 5px;
  overflow: hidden;
}
.square-60 img {
  min-width: 100%;
  max-height: 100%;
  vertical-align: top;
}
.square-50x80 {
  height: 50px;
  width: 100px;
  margin: 0;
  border-radius: 5px;
  overflow: hidden;
  margin-right: 15px;
}
.square-50x80 iframe {
  width: 100%;
  height: 100%;
}
.topmost * {
  line-height: 20px;
}
.toolbar.light {
  background: #ffffff !important;
}
.ios .toolbar.light {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  height: 60px;
}
.ios .toolbar.light .toolbar-inner {
  padding: 5px 8px;
}
.toolbar.light a.tab-link,
.toolbar.light.tabbar-labels a.tab-link {
  color: rgba(0, 0, 0, 0.5);
}
.md .messagebar.light:after,
.md .toolbar-bottom-md.light:after {
  content: "";
  opacity: 0.5;
}
.w-100 {
  width: 100%;
}
.distance {
  font-size: 14px;
  width: 85px;
  height: 85px;
  text-align: center;
  padding: 10px;
  color: #999999;
  margin: 0 auto;
  background: #ffffff;
  margin-top: -40px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
  border-radius: 50px;
  box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.15);
  -ms-box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.15);
}
.distance i.icon {
  font-size: 40px;
  color: #000000;
}
.card.cart-block {
  margin: 0;
  margin-top: 40px;
}
.card.cart-block .like-heart {
  top: 0;
  right: 0;
  position: relative;
  margin-top: 0;
  display: inline-block;
}
.like-heart:hover, .share-prod:hover {
  transform: scale(1.03);
}
/* tabber */

.tabber {
  padding: 0;
  width: 100%;
  left: 0;
}
.tabber-bottom {
  position: absolute;
  bottom: 0px;
  overflow: hidden;
  padding-top: 10px;
  left: 0;
}
.ios .tabber-bottom {
  border-top: 1px solid #dddddd;
}
.tabber-bottom .nav-tabs,
.tabber-bottom .list-footer-options {
  background: #ffffff;
  width: 100%;
  left: 0;
  margin-bottom: 0;
  border-bottom: 0;
}

/*  By Steven - Start */
.fixed-header .list-footer-options {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.fixed-header .list-footer-options .swiper-wrapper .swiper-slide {
  width: auto;
  padding: 0;
}
.fixed-header .list-footer-options .swiper-wrapper .swiper-slide a {
  width: 100%;
  text-align: center;
  padding: 7px 12px; /* 7px 0; */
  color: #666666;
}
.fixed-header .list-footer-options .swiper-wrapper .swiper-slide a.active {
  border-top: 2px solid #ce0707;
  color: #7d0000;
  padding-top: 5px;
}
.fixed-header .list-footer-options .swiper-wrapper .swiper-slide a:hover {
  border-top: 2px solid #ce0707;
  padding-top: 5px;
}
.fixed-header .list-footer-options .swiper-wrapper .swiper-slide a p {
  margin: 0;
}
/*  By Steven - End */

.tabber-bottom:after {
  content: "";
  position: absolute;
  right: 0;
  width: 100%;
  top: 0px;
  height: 10px;
  pointer-events: none;
  opacity: 0.5;
}
.tabber-bottom .nav-tabs .nav-link {
  height: 60px;
  color: #999999;
  transition: all 0.3s ease;
  border: none;
  position: relative;
  overflow: hidden;
}

.tabber-bottom .nav-tabs .nav-link.active {
  color: #ffffff !important;
  background: transparent !important;
  border: none;
  font-weight: bold;
}

.tabber-bottom .nav-tabs .nav-link.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 3px;
  background-color: #ffffff;
  border-radius: 3px 3px 0 0;
  transition: all 0.3s ease;
}

.tabber-bottom .nav-tabs .nav-link:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.1);
}

.tabber-bottom .nav-tabs .nav-link i,
.tabber-bottom .nav-tabs .nav-link img {
  display: block;
  text-align: center;
  height: 22px;
  margin: 0 auto 4px;
}

.tabber-bottom .nav-tabs .nav-link .tabbar-label {
  font-size: 12px;
  display: block;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tabber-bottom .nav-tabs .nav-link .badge {
  position: absolute;
  top: 0;
  right: 25%;
  background: red;
  color: #ffffff;
  font-family: sans-serif;
  font-size: 10px;
  border-radius: 50%;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.tabber-bottom + .tab-content {
  padding-bottom: 60px;
}

#content_dinamic {
  /*height: 100%;*/
  overflow-y: auto;
}
/* Scrolbar webkit css */

::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}
::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}
@media screen and (max-width: 350px) {
  header > .right a,
  header > .left a,
  header,
  .logo figure {
    height: 44px;
    line-height: 44px;
  }
  header > .right a,
  header > .left a {
    width: 44px;
  }
  header.fixed-header ~ .page-content {
    padding-top: 44px;
  }
  .logo {
    line-height: 44px;
    font-size: 15px;
    vertical-align: top;
  }
  .login-title {
    font-size: 44px;
    line-height: 44px;
  }
  .navbar .navbar-nav li a {
    padding: 5px 15px;
  }
  .navbar .navbar-nav li a.dropdown-toggle::after {
    top: 18px;
  }
  .btn {
    line-height: 34px;
    font-size: 13px;
    padding: 5px 1.5rem;
  }
  .sq-btn {
    padding: 0;
    height: 44px;
    width: 44px;
    line-height: 42px;
    text-align: center;
  }
  .btn-block {
    padding: 5px 0.5rem;
  }
  .form-control {
    padding: 5px 0.75rem;
    font-size: 15px;
    min-height: 44px;
  }
  .sidebar {
    width: 250px;
  }
  .push-content-left.menu-left-open .page {
    margin-left: 250px;
  }
  .push-content-right.menu-right-open .page {
    margin-left: -250px;
  }
  .card-footer .post-seconds {
    font-size: 12px;
    vertical-align: middle;
  }
  .avatar.avatar-120 {
    width: 100px;
    height: 100px;
    line-height: 100px;
  }
}

.color-theme-taller-alpha .background {
  background: #0366cb;
}
.ios .color-theme-taller-alpha .sidebar,
.ios .color-theme-taller-alpha .fullscreen-menu,
.md .color-theme-taller-alpha .sidebar,
.md .color-theme-taller-alpha .fullscreen-menu,
.md .color-theme-taller-alpha header,
.color-theme-taller-alpha .circle-background:before {
  background: #00325b;
}
.ios .color-theme-taller-alpha header {
  color: #1283f6;
  background: #ffffff;
}
.ios .color-theme-taller-alpha header a,
.ios .color-theme-taller-alpha header .logo,
.ios .color-theme-taller-alpha .nav-tabs .nav-item .nav-link.active,
.color-theme-taller-alpha .block-title,
.color-theme-taller-alpha .tabber-bottom .nav-tabs .nav-link.active {
  color: #fff !important;
  /* background: #00325b !important; */
}
.color-theme-taller-alpha .nav-web {
  background: #00325b !important;
}
.color-theme-taller-alpha .nav-mobile #header_page {
  background: #00325b !important;
}
.color-theme-medical .background {
  background: #009688;
}
.ios .color-theme-medical .sidebar,
.ios .color-theme-medical .fullscreen-menu,
.md .color-theme-medical .sidebar,
.md .color-theme-medical .fullscreen-menu,
.md .color-theme-medical header,
.color-theme-medical .circle-background:before {
  background: #009688;
}
.ios .color-theme-medical header {
  color: #009688;
  background: #ffffff;
}
.ios .color-theme-medical header a,
.ios .color-theme-medical header .logo,
.ios .color-theme-medical .nav-tabs .nav-item .nav-link.active,
.color-theme-medical .block-title,
.color-theme-medical .tabber-bottom .nav-tabs .nav-link.active {
  color: #fff !important;
}
.color-theme-medical .nav-web {
  background: #009688 !important;
}
.color-theme-medical .nav-mobile #header_page {
  background: #009688 !important;
}

.color-theme-ferreteria .background {
  background: #009688;
}
.ios .color-theme-ferreteria .sidebar,
.ios .color-theme-ferreteria .fullscreen-menu,
.md .color-theme-ferreteria .sidebar,
.md .color-theme-ferreteria .fullscreen-menu,
.md .color-theme-ferreteria header,
.color-theme-ferreteria .circle-background:before {
  background: #009688;
}
.ios .color-theme-ferreteria header {
  color: #009688;
  background: #ffffff;
}
.ios .color-theme-ferreteria header a,
.ios .color-theme-ferreteria header .logo,
.ios .color-theme-ferreteria .nav-tabs .nav-item .nav-link.active,
.color-theme-ferreteria .block-title,
.color-theme-ferreteria .tabber-bottom .nav-tabs .nav-link.active {
  color: #009688 !important;
}
.color-theme-ferreteria .nav-web {
  background: #009688 !important;
}
.color-theme-ferreteria .nav-mobile #header_page {
  background: #009688 !important;
}

.color-theme-asada .background {
  background: #3f51b5;
}
.ios .color-theme-asada .sidebar,
.ios .color-theme-asada .fullscreen-menu,
.md .color-theme-asada .sidebar,
.md .color-theme-asada .fullscreen-menu,
.md .color-theme-asada header,
.color-theme-asada .circle-background:before {
  background: #3f51b5;
}
.ios .color-theme-asada header {
  color: #3f51b5;
  background: #ffffff;
}
/*
.ios .color-theme-asada header a,
.ios .color-theme-asada header .logo,
.ios .color-theme-asada .nav-tabs .nav-item .nav-link.active,
.color-theme-asada .block-title,
.color-theme-asada .tabber-bottom .nav-tabs .nav-link.active {
    color: #3F51B5 !important;
}
*/
.color-theme-asada .nav-web {
  background: #3f51b5 !important;
}
.color-theme-asada .nav-mobile #header_page {
  background: #3f51b5 !important;
}

.color-theme-posmovi .background {
  background: #2196f3;
}

.ios .color-theme-posmovi .sidebar,
.ios .color-theme-posmovi .fullscreen-menu,
.md .color-theme-posmovi .sidebar,
.md .color-theme-posmovi .fullscreen-menu,
.md .color-theme-posmovi header,
.color-theme-posmovi .circle-background:before {
  background: #2196f3;
}
.ios .color-theme-posmovi header {
  color: #1283f6;
  background: #ffffff;
}

.ios .color-theme-posmovi header a,
.ios .color-theme-posmovi header .logo,
.ios .color-theme-posmovi .nav-tabs .nav-item .nav-link.active,
.color-theme-posmovi .block-title,
.color-theme-posmovi .tabber-bottom .nav-tabs .nav-link.active {
  color: #fff !important;
}

.color-theme-posmovi .nav-web {
  background: #2196f3 !important;
}
.color-theme-posmovi .nav-mobile #header_page {
  background: #2196f3 !important;
}

.ios .color-theme-posmovi .sidebar,
.ios .color-theme-posmovi .fullscreen-menu,
.md .color-theme-posmovi .sidebar,
.md .color-theme-posmovi .fullscreen-menu,
.md .color-theme-posmovi header,
.color-theme-posmovi .circle-background:before {
  background: #2196f3 !important;
}
.ios .color-theme-posmovi header {
  color: #1283f6;
  background: #ffffff;
}
.ios .color-theme-posmovi header a,
.ios .color-theme-posmovi header .logo,
.ios .color-theme-posmovi .nav-tabs .nav-item .nav-link.active,
.color-theme-posmovi .block-title,
.color-theme-posmovi .tabber-bottom .nav-tabs .nav-link.active {
  color: #fff !important;
}

.color-theme-restaurante .nav-web {
  background: #f44336 !important;
}
.color-theme-restaurante .nav-mobile #header_page {
  background: #f44336 !important;
}

.color-theme-restaurante .background {
  background: #f44336;
}

.ios .color-theme-restaurante .sidebar,
.ios .color-theme-restaurante .fullscreen-menu,
.md .color-theme-restaurante .sidebar,
.md .color-theme-restaurante .fullscreen-menu,
.md .color-theme-restaurante header,
.color-theme-restaurante .circle-background:before {
  background: #f44336;
}
.ios .color-theme-restaurante header {
  color: #f44336;
  background: #ffffff;
}

.ios .color-theme-restaurante header a,
.ios .color-theme-restaurante header .logo,
.ios .color-theme-restaurante .nav-tabs .nav-item .nav-link.active,
.color-theme-restaurante .block-title,
.color-theme-restaurante .tabber-bottom .nav-tabs .nav-link.active {
  color: #fff !important;
}

.color-theme-restaurante .nav-web {
  background: #f44336 !important;
}
.color-theme-restaurante .nav-mobile #header_page {
  background: #f44336 !important;
}

.ios .color-theme-restaurante .sidebar,
.ios .color-theme-restaurante .fullscreen-menu,
.md .color-theme-restaurante .sidebar,
.md .color-theme-restaurante .fullscreen-menu,
.md .color-theme-restaurante header,
.color-theme-restaurante .circle-background:before {
  background: #f44336 !important;
}
.ios .color-theme-restaurante header {
  color: #f44336;
  background: #ffffff;
}
.ios .color-theme-restaurante header a,
.ios .color-theme-restaurante header .logo,
.ios .color-theme-restaurante .nav-tabs .nav-item .nav-link.active,
.color-theme-restaurante .block-title,
.color-theme-restaurante .tabber-bottom .nav-tabs .nav-link.active {
  color: #fff !important;
}

.close-modal-header {
  position: absolute;
  left: -9px;
  /* padding-top: 3px; */
  background: white;
  border-radius: 200px;
  padding: 1px;
  color: #373737;
  font-size: 30px;
  top: 0px;
  font-weight: bold;
  cursor: pointer;
}

.logo strong:hover {
  color: #fff !important;
  text-decoration: none;
}
.close-modal-header:hover {
  color: #d01c1c;
}

.content_price {
  width: auto;
  height: auto;
  border-left: 4px solid #fff;
  border-top: 4px solid #fff;
  border-bottom: 4px solid #fff;
  padding: 3px 10px 3px 20px;

  background: #64952b;
  margin-top: 10px;
  -webkit-border-top-left-radius: 98px;
  -webkit-border-bottom-left-radius: 98px;
  -moz-border-radius-topleft: 98px;
  -moz-border-radius-bottomleft: 98px;
  border-top-left-radius: 98px;
  border-bottom-left-radius: 98px;

  color: #fff;
  font-size: 25px;
  text-align: right;
}
.content_price_saving {
  text-decoration: line-through;
  font-size: 15px;
  font-weight: bold;
  padding: 0;
  line-height: 5px;
  margin: 0;
  margin-bottom: 10px;
}

.multisteps-form__progress {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

.multisteps-form__progress-btn {
  transition-property: all;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  transition-delay: 0s;
  position: relative;
  padding-top: 20px;
  color: rgba(108, 117, 125, 0.7);
  text-indent: -9999px;
  border: none;
  background-color: transparent;
  outline: none !important;
  cursor: pointer;
}

@media (min-width: 500px) {
  .multisteps-form__progress-btn {
    text-indent: 0;
  }
}

.multisteps-form__progress-btn:before {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: 13px;
  height: 13px;
  content: "";
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  transition: all 0.15s linear 0s,
    -webkit-transform 0.15s cubic-bezier(0.05, 1.09, 0.16, 1.4) 0s;
  transition: all 0.15s linear 0s,
    transform 0.15s cubic-bezier(0.05, 1.09, 0.16, 1.4) 0s;
  transition: all 0.15s linear 0s,
    transform 0.15s cubic-bezier(0.05, 1.09, 0.16, 1.4) 0s,
    -webkit-transform 0.15s cubic-bezier(0.05, 1.09, 0.16, 1.4) 0s;
  border: 2px solid currentColor;
  border-radius: 50%;
  background-color: #fff;
  box-sizing: border-box;
  z-index: 3;
}

.multisteps-form__progress-btn:after {
  position: absolute;
  top: 5px;
  left: calc(-50% - 13px / 2);
  transition-property: all;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  transition-delay: 0s;
  display: block;
  width: 100%;
  height: 2px;
  content: "";
  background-color: currentColor;
  z-index: 1;
}

.multisteps-form__progress-btn:first-child:after {
  display: none;
}

.multisteps-form__progress-btn.js-active {
  color: #007bff;
}

.multisteps-form__progress-btn.js-active:before {
  -webkit-transform: translateX(-50%) scale(1.2);
  transform: translateX(-50%) scale(1.2);
  background-color: currentColor;
}

.multisteps-form__form {
  position: relative;
}

.multisteps-form__panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  opacity: 0;
  visibility: hidden;
}

.multisteps-form__panel.js-active {
  height: auto;
  opacity: 1;
  visibility: visible;
}

.method_payment_active {
  background: #e9ffeb;
  color: #474747;
  border: 1px #0aa33f solid !important;
}

.btn_add_product {
  border-radius: 4px !important;
  padding: 4px 24px !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
  background: black !important;
  color: white !important;
  border: none !important;
  cursor: pointer !important;
  width: auto !important;
  min-width: 120px !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  transform: translateZ(0) !important; /* Forzar renderizado en GPU */
  -webkit-font-smoothing: antialiased !important; /* Mejor renderizado de texto */
}

.btn_add_product:hover {
  background: #333 !important;
}

.btn_add_product:before {
  display: none !important;
}

.align-text-right {
  align-items: flex-start !important;
  display: flex !important;
}


.color-not-favorite{
    color: #c1c1c1 !important; /* ByYU 8 de enero del 2024  */
}




.btn_option_custom{
    decoration-style: none;
    border: 2px solid #512da8;
    margin: 0px;
    cursor: pointer;
    text-align: center;
    background-color: white;
}

.btn_option_custom.btn_option_custom_md{
    padding: 6px 10px;
    min-width: 90px;
    font-size: 14px;
}

.btn_option_right{
    margin-left:-5px;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
}

.btn_option_middle{
    margin-left:-5px;
}

.btn_option_left{
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
}

.btn_option_custom:hover{
    background-color: #d8dadc;
}

.btn_option_custom.active{
    background-color: #512da8;
    color: white;
}

.btn_option_custom.btn_sale_selected{
    background-color: #512da8;
    color: white;
}


/* 03-10-2023 ByYS */

.card-container-sty{
  padding: 4px 4px 4px 4px !important; /*ByYU 3 de marzo del 2025*/
  width: 250px; 
  height: 380px; /* Altura fija para el contenedor principal de la tarjeta */ 
  margin-bottom: 8px;
  display: flex; /* Añadido para controlar la altura del hijo */
  flex-direction: column; /* Añadido para controlar la altura del hijo */
}
.card-img{
  border-radius: 15px 15px 0px 0px; /* ByYU 24 de febrero del 2025 */
  max-width: 100%; 
  height: 190px;
  object-fit: cover; /* Asegura que la imagen cubra el espacio sin deformarse */
}
.card-body-sty{
  /* height: 130px; */ /* Quitar altura fija si la tenía */
  padding: 12px; 
  display: flex;
  flex-direction: column;
  justify-content: space-between; 
  flex-grow: 1; /* Asegura que el card-body ocupe el espacio restante */
}
.currency-symbol{
  font-size: 18px !important;
}
.card-img-content{
  cursor: pointer; 
  border-radius: var(--bord-rad-10) var(--bord-rad-10) 0 0; /* Asegurar bordes superiores redondeados */
  height: 190px; /* Altura fija para el contenedor de la imagen, igual a .card-img height */
  overflow: hidden; /* Para asegurar que la imagen no se desborde */
}
/* MediaQuery */

@media only screen and (max-width : 600px) {
  .card-container-sty{
    width: 48vw; 
    height: auto; /* Altura automática para móviles, el contenido definirá la altura */
  }

  .logo figure img {
    margin-top: 8px;
  }

  /* Botón de Agregar al Carrito - Móvil */
  .btn_card_add_product {
    width: auto !important; /* Permitir que el botón no ocupe todo el ancho si no es necesario en móvil */
    max-width: 100%; /* Pero que no se desborde */
    /* right: 5px !important; */ /* Quitar si ya no es position absolute */
    /* bottom: 5px !important; */ /* Quitar si ya no es position absolute */
    padding: 8px 10px !important; /* Ajustar padding para móvil */
    font-size: 0.8rem !important;
    align-self: stretch; /* Asegurar que ocupe el ancho si es el único elemento al final del flex container */
    margin-left: 0; /* Asegurar que no haya márgenes extraños */
    margin-right: 0;
  }

  /* Ajustes adicionales para el contenido de la tarjeta en móviles */
  .product_card_name {
    -webkit-line-clamp: 2; /* Permitir hasta 2 líneas para el nombre */
    max-height: 2.8em; /* Ajustar para 2 líneas con line-height de 1.4 */
    line-height: 1.4;
    font-size: 0.85rem !important; /* Reducir tamaño de fuente del nombre */
  }

  .final-price {
    font-size: 0.9rem !important; /* Reducir tamaño de fuente del precio */
  }

  .original-price {
    font-size: 0.75rem !important; /* Reducir tamaño de fuente del precio original */
  }

  .product-rating-container span,
  .product-cooking-time-container span {
    font-size: 0.75rem !important; /* Reducir tamaño de fuente de calificación y tiempo */
  }
  
  .product-rating-container .material-icons,
  .product-cooking-time-container .material-icons {
    font-size: 0.9rem !important; /* Reducir tamaño de íconos */
  }

  .card-body-sty {
    padding: 10px !important; /* Reducir padding del cuerpo de la tarjeta */
  }

  .product-info-wrapper {
    margin-bottom: 8px; /* Reducir margen inferior del wrapper de info */
  }

  /* Botón de Agregar en tarjetas Aliexpress - Móvil */
  .btn_add_product {
    width: auto !important;
    min-width: 100px !important;
    padding: 4px 12px !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    font-size: 0.85rem !important;
    transform: translateZ(0) !important; /* Forzar renderizado en GPU */
  }

  /* Prevenir problemas de traducción en móviles */
  .notranslate {
    display: inline-block !important;
    white-space: nowrap !important;
    font-size: 0.85rem !important;
  }
}

/* .card-heigth{
  height: 290px !important;
} */


/* share social network */
.close-shre-product {
  position: absolute;
  right: 0;
  margin-top: -12px;
  font-size: 24px;
  z-index: 100;
  cursor: pointer;
  border: 2px rgb(147, 149, 150);
  border-radius: 100px;
  background: rgb(178, 179, 180);
  color: #fff;
}

.a-content-social-img{
  padding: 4px;
}

.social-img{
  width: 30px;
  margin-right: 3px;
}

.social-img:hover{
  transform: scale(1.03);
}

.card-item-over_full{
  border-radius: var(--bord-rad-10) !important; 
  margin-bottom: 0px;
  /* min-height: 353px; */ /* Quitar min-height si interfiere con la altura fija */
  height: 100%; /* Hacer que la tarjeta ocupe toda la altura del card-container-sty */
  display: flex; /* Añadido para controlar la distribución interna */
  flex-direction: column; /* Añadido para controlar la distribución interna */
}
.card-item-over_full:hover{
  transform: scale(1.03); 
} 
.div-like-share{
  position: absolute; 
  top: 0; 
  right: 0;
}
.div-like-share > a{
  cursor: pointer;
}

.share-prod {
  height: 24px;
  width: 24px;
  line-height: 24px;
  vertical-align: middle;
  border-radius: 50%;
  text-align: center;
  background: #f5f4f4;
  position: absolute;
  border: 0;
  padding: 0;
  right: 6px;
  top: 6px;
  margin-top: 30px;
}
.share-prod i {
  font-size: 16px;
  line-height: 24px;
  color: #063de3;
}


/* card brands */
.card-brands-content{
  border-radius: var(--bord-rad-10);
  max-width: 100%; 
  /* max-height: 220px; */ /* ByYU 13 de febrero del 2025 */
  display: none;
  border: 1px solid #e9e9e9;
}

.card-brands{
  border-radius: var(--bord-rad-10);
  max-width: 100%; 
  height: 50px;
}

.card-brands-title{
  background: #ffffff; /* ByYU 13 de febrero del 2025 */
  color: #000000;
  /* border-bottom: 1px solid #e9e9e9;  */ /* ByYU 20 de febrero del 2025 */
  border-radius: var(--bord-rad-10) var(--bord-rad-10) 0 0 !important; /* ByYU 13 de febrero del 2025 */
}

.card-brands-body{
  border-bottom: 1px solid #e9e9e9;
  border-radius: 0 0 10px 10px;
  max-height: 199px;
  background-color: #fff;
  @media (max-width: 1024px) {
    background-color: unset;
  }
  overflow-y: auto;
}

.h5-color{
  color: #000000;
}

/* APP */
.app-background{
  background-color: #f1f1f1;
}
.card-category-content{
  border-radius: 10px;
  max-width: 100%; 
  /* display: none; */ /* ByYU 27 de febrero del 2025 */
  /* border: 1px solid #e9e9e9; */ /* ByYU 13 de febrero del 2025 */
}

.cat_active{
  box-shadow: 0px 0px 6px 1px rgb(90, 166, 232);
}
.cat-br-bot{
  border-bottom: 1px solid #ced5db;
}
.bor-rad-top-10{
  border-radius: var(--bord-rad-10) !important;
}

.bor-rad-bott-10{
  border-radius: 0 0 10px 10px;
}
.bg-title{
  background: #f4f6f7;
}
.bg-color-0{
  background: #fff;
}
.card-animation:hover{
  transform: scale(1.02); 
}


.div_container{
  margin-bottom: 12px; 
  padding: 0; 
  border-radius: 15px; 
  background:#fff; 
  box-shadow: 2px 2px 10px 1px #7f8181;
}
.span_item_right{
  box-sizing: border-box; 
  font-size: 12px; 
  padding: 4px 6px 4px 2px; 
  margin: 0 10px 0 0; 
  border-top-right-radius: 20px; 
  border-bottom-right-radius: 20px; 
  background: var(--bg-color-pr);
}

.span_item_left{
  box-sizing: border-box; 
  font-size: 12px; 
  padding: 4px 2px 4px 6px; 
  margin: 0 0 0 10px; 
  border-top-left-radius: 20px; 
  border-bottom-left-radius: 20px; 
  background: var(--bg-color-pr);
}


.btn_card_add_product {
  line-height: 20px;
  font-size: 14px;
  font-weight: 500px;
  border-radius: 15px;
  position: absolute; 
  bottom: 6px; 
  right: 6px;
  padding: 4px;
}

.product_card_name {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1; /* ByYU 24 de febrero del 2025 */
  -webkit-box-orient: vertical;
}
.bg-color-pr{
  background: var(--bg-color-pr);
}

.card-combo-container-sty{ /* ByYU 12 de febrero del 2025 */
  padding: 0px 8px 0 12px !important; 
  margin:0 !important;
  width: 100%; 
  max-width: 493px;
}

.card-combo-container-sty:hover{ /* ByYU 12 de febrero del 2025 */
  transform: scale(1.01);
}

.product_card_name_combo { /* ByYU 12 de febrero del 2025 */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 0;
  padding: 0;
}

.card-data-item-h{ /* ByYU 12 de febrero del 2025 */
  height: 100%;
  padding: 0;
  border-radius: var(--bord-rad-10);
  width: 100%;
}

.card-combo-img{ /* ByYU 12 de febrero del 2025 */
  position: relative; 
  background-size: cover;
  background-position: center;
  width: 100%; 
  border-radius: var(--bord-rad-10) !important;
  height: 254px;
}

.card-combo-info{ /* ByYU 12 de febrero del 2025 */
  height: auto;
  min-height: 80px;
  align-content: center;
  background: linear-gradient(0deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 100%);
  color: #000;
  position: absolute;
  bottom: 0; 
  width: 100%;
  padding: 14px 8px;
}

/* Ajustes responsivos para móviles */
@media only screen and (max-width: 600px) { /* ByYU 12 de febrero del 2025 */
  .card-combo-container-sty {
    padding: 0px 4px !important;
    margin: 0 auto !important;
    width: 100%;
  }

  .card-items {
    width: 100% !important;
  }

  .card-data-item-h {
    width: 100%;
  }

  .content_price {
    font-size: 16px;
    padding: 2px 8px 2px 15px;
  }

  .content_price p {
    font-size: 16px !important;
  }

  .content_price_saving {
    font-size: 12px !important;
  }

  .card-combo-info h4 {
    font-size: 16px;
  }

  .card-combo-info h5 {
    font-size: 12px !important;
  }
}


.discount-badge { /* ByYU 20 de febrero del 2025 */
  position: absolute;
  top: 10px;
  left: 10px;
  background: #ff4757;
  color: white;
  padding: 4px 8px;
  border-radius: 0px 12px 12px 12px;
  font-weight: 600;
  font-size: 0.85rem;
  z-index: 1;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Clases para evitar traducciones automáticas */
.notranslate {
    white-space: nowrap !important;
    display: inline-block !important;
}

/* Solución para botones con traducción */
button[translate="no"] {
    font-family: sans-serif !important; /* Usar una fuente sin problemas de traducción */
    letter-spacing: 0.02em !important; /* Espaciado entre letras para mejor legibilidad */
}

.footer-mobile {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

.footer-mobile .nav-tabs {
  display: flex;
  justify-content: space-around;
  border: none;
}

.footer-mobile .nav-tabs .nav-item {
  flex: 1;
  text-align: center;
  /* margin: 0 !important; */
}

.footer-mobile .nav-tabs .nav-item .nav-link {
  padding: 8px 0;
  transition: all 0.3s ease;
}

/* Estilo para el efecto de onda al hacer clic (ripple effect) */
.rippler {
  position: relative;
  overflow: hidden;
}

.rippler:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  transition: transform 0.5s, opacity 0.8s;
}

.rippler:active:after {
  transform: scale(0, 0);
  opacity: 0.3;
  transition: 0s;
}

@media screen and (max-width: 600px) {
  .logo {
    display: flex;
    align-items: center;
  }
  
  .logo figure {
    display: flex;
    align-items: center;
    height: auto;
    margin: 0 5px 0 0;
  }
  
  .logo figure img {
    max-height: 32px;
    margin: 0;
  }
}

/* Estilos mejorados para product_view_full_card.blade.php */
.card-body-sty {
  padding: 12px; /* Aumentar padding general */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Para que el botón se alinee abajo si hay espacio */
}

.product-info-wrapper {
  margin-bottom: 12px; /* Espacio entre la info y el botón */
  flex-grow: 1; /* Permite que este div crezca y empuje el botón hacia abajo */
}

.product_card_name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 2.8em; /* Ajustado para 2 líneas con line-height 1.4 */
  line-height: 1.4; /* Mejor espaciado entre líneas */
  font-size: 0.9rem; /* Ligeramente más pequeño para encajar mejor */
  font-weight: 600; /* Un poco más de peso */
  color: #333333;
  margin-bottom: 6px !important; /* Sobrescribir el m-0 si es necesario y agregar margen */
}

.product_card_name .material-icons {
  font-size: 0.9rem !important; /* Ajustar tamaño del ícono open_in_new */
  vertical-align: middle;
}

.product-price-container {
  margin-bottom: 6px !important;
  align-items: baseline; /* Mejor alineación para precios */
}

.original-price {
  font-size: 0.8rem; 
  color: #757575;
}

.final-price {
  font-size: 1rem; 
  font-weight: 700; 
  color: #0D47A1;
}

.product-rating-container {
  margin-bottom: 6px !important; 
  margin-left: 0px !important; 
}

.product-rating-container .material-icons,
.product-cooking-time-container .material-icons {
  font-size: 1rem !important; 
}

.product-rating-container span,
.product-cooking-time-container span {
  font-size: 0.8rem; 
  color: #424242; 
}

.product-rating-container .text-warning {
  color: #FFC107 !important; /* Mantener el color de estrella warning */
}

.product-cooking-time-container {
  background-color: #eeeeee !important; /* Un gris más claro para el fondo */
  margin-bottom: 10px !important; /* Espacio antes del botón */
  padding: 4px 8px !important; /* Ajuste de padding */
}

.btn_card_add_product {
  width: 100%; /* Ocupar todo el ancho */
  padding: 10px 12px !important; /* Padding más generoso */
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  color: #ffffff !important;
  background-color: #1976D2 !important; /* Azul principal para el botón */
  border: none !important;
  border-radius: 8px !important; /* Bordes redondeados consistentes */
  text-align: center;
  margin-top: auto; /* Empuja el botón hacia abajo si .card-body-sty es flex y tiene espacio */
  transition: background-color 0.3s ease !important;
  /* Quitar estilos de position: absolute; si estaban antes */
  position: static !important; /* Asegurar que no sea absoluto */
}

.btn_card_add_product:hover {
  background-color: #1565C0 !important; /* Un azul más oscuro al pasar el mouse */
}

.btn_card_add_product .material-icons {
  font-size: 1rem !important; /* Tamaño de ícono del botón */
  vertical-align: middle !important;
  margin-right: 6px !important;
}

/* Ajuste para la hr que está después del nombre del producto */
.product-info-wrapper hr.m-0 {
    margin-top: 4px !important;
    margin-bottom: 8px !important;
    border-top: 1px solid #e0e0e0 !important; /* Hacerla visible pero sutil */
}

/* Media query para asegurar que en móviles el botón no sea demasiado grande si el texto es largo */
@media (max-width: 360px) {
  .btn_card_add_product {
    padding: 8px 10px !important;
    font-size: 0.85rem !important;
  }
  .btn_card_add_product .material-icons {
    font-size: 0.9rem !important;
    margin-right: 4px !important;
  }
  .final-price {
    font-size: 0.95rem;
  }
  .product_card_name {
    font-size: 0.85rem;
  }
}