/*
Table of Contents



Table of Sass Contents

1. Abstracts

2. Global/Base	

3. Components

4. Layout

5. Pages

6. Preloader



0 - 600: Phone
600 - 900: Tablet portrait
900 - 1200: Tablet landscape
1200 - 1800: Normal styles
1800+ : Big Desktop
1em = 16px
The smaller device rules always should write below the bigger device rules
Fixing Order => Base + Typography >> General Layout + Grid >> Page Layout + Component

*/

@font-face {
    font-family: 'Montserrat';
    src: url('montserrat.woff2') format('woff2'), url('montserrat.woff') format('woff'), url('montserrat.ttf') format('truetype');
  }
  
  /* Reset */
  ::selection {
    color: #fff;
    background: var(--f7-theme-color);
  }
  
  body {
    overflow-x: hidden;
    height: 100%;
    position: relative;
    color: #303030;
    max-width: 100%;
    font-size: 14px;
    font-weight: 400;
    font-family: var(--f7-font-family);
    background: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  p {
    font-size: 16px;
    line-height: 24px;
  }
  
  .bg-gray {
    background-color: #f9f9f9 !important;
  }
  
  .bg-green {
    background-color: rgba(75, 192, 192, 0.7) !important;
  }
  
  .bg-red {
    background-color: rgba(255, 99, 132, 0.7) !important;
  }
  
  .bg-yellow {
    background-color: rgba(255, 205, 86, 0.7) !important;
  }
  
  .bg-blue {
    background-color: #2196f3 !important;
  }
  
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  h1 a,
  h2 a,
  h3 a,
  h4 a,
  h5 a,
  h6 a {
    color: #1b1b1b;
  }
  
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .h1,
  .h2,
  .h3,
  .h4,
  .h5,
  .h6 {
    font-family: var(--f7-font-family);
    font-weight: 600;
    color: #1b1b1b;
  }
  
  h1,
  .h1 {
    font-size: 2rem;
    line-height: 1.3;
  }
  
  h2,
  .h2 {
    font-size: 1.5rem;
    line-height: 1.3;
  }
  
  h3,
  .h3 {
    font-size: 1.25rem;
    line-height: 1.3;
  }
  
  h4,
  .h4 {
    font-size: 1.125rem;
    line-height: 1.4;
  }
  
  h5,
  .h5 {
    font-size: 1rem;
    line-height: 1.4;
  }
  
  h6,
  .h6 {
    font-size: 0.875rem;
    line-height: 1.4;
  }
  
  .radius-8 {
    border-radius: 8px;
  }
  
  .radius-10 {
    border-radius: 10px;
  }
  
  .radius-12 {
    border-radius: 12px;
  }
  
  .radius-14 {
    border-radius: 14px;
  }
  
  .radius-16 {
    border-radius: 16px;
  }
  
  .radius-18 {
    border-radius: 18px;
  }
  
  .radius-20 {
    border-radius: 20px;
  }
  
  .radius-30 {
    border-radius: 30px;
  }
  
  .radius-40 {
    border-radius: 40px;
  }
  
  .bg-primary {
    background: var(--f7-theme-color) !important;
  }
  
  .bg-secondary {
    background: var(--f7-theme-color-bg) !important;
  }
  
  .text-primary {
    color: var(--f7-theme-color) !important;
  }
  
  .text-success {
    color: #37b7af !important;
  }
  
  .text-info {
    color: #6798ff !important;
  }
  
  .text-warning {
    color: #ff9838 !important;
  }
  
  .text-secondary {
    color: #f6dbb3 !important;
  }
  
  .text-black {
    color: #000 !important;
  }
  
  .text-white {
    color: #fff;
  }
  
  .bg-info {
    background: #6798ff !important;
  }
  
  .ml-auto {
    margin-left: auto;
  }
  
  .mr-auto {
    margin-right: auto;
  }
  
  /* Opacity */
  .op1 {
    opacity: 0.1;
  }
  
  .op2 {
    opacity: 0.2;
  }
  
  .op3 {
    opacity: 0.3;
  }
  
  .op4 {
    opacity: 0.4;
  }
  
  .op5 {
    opacity: 0.5;
  }
  
  .op6 {
    opacity: 0.6;
  }
  
  .op7 {
    opacity: 0.7;
  }
  
  .op8 {
    opacity: 0.8;
  }
  
  .op9 {
    opacity: 0.9;
  }
  
  /* Font Size */
  .fs-12 {
    font-size: 12px !important;
    line-height: 1.3;
  }
  
  .fs-13 {
    font-size: 13px !important;
    line-height: 1.4;
  }
  
  .fs-14 {
    font-size: 14px !important;
    line-height: 1.5;
  }
  
  .fs-15 {
    font-size: 14px !important;
    line-height: 1.5;
  }
  
  .fs-16 {
    font-size: 16px !important;
    line-height: 1.5;
  }
  
  .fs-18 {
    font-size: 18px !important;
    line-height: 1.5;
  }
  
  .fs-20 {
    font-size: 20px !important;
    line-height: 1.5;
  }
  
  .fs-22 {
    font-size: 22px !important;
    line-height: 1.5;
  }
  
  .fs-24 {
    font-size: 24px !important;
    line-height: 1.4;
  }
  
  .fs-26 {
    font-size: 26px !important;
    line-height: 1.4;
  }
  
  .fs-28 {
    font-size: 28px !important;
    line-height: 1.4;
  }
  
  .fs-30 {
    font-size: 30px !important;
    line-height: 1.4;
  }
  
  .fs-32 {
    font-size: 32px !important;
    line-height: 1.25;
  }
  
  .fs-35 {
    font-size: 35px !important;
    line-height: 1.25;
  }
  
  .fs-36 {
    font-size: 36px !important;
    line-height: 1.25;
  }
  
  .fs-46 {
    font-size: 46px !important;
    line-height: 1.25;
  }
  
  .fw1 {
    font-weight: 100;
  }
  
  .fw2 {
    font-weight: 200;
  }
  
  .fw3 {
    font-weight: 300;
  }
  
  .fw4 {
    font-weight: 400;
  }
  
  .fw5 {
    font-weight: 500;
  }
  
  .fw6 {
    font-weight: 600;
  }
  
  .fw7 {
    font-weight: 700;
  }
  
  .fw8 {
    font-weight: 800;
  }
  
  .fw9 {
    font-weight: 900;
  }
  
  /* Width */
  .w-10 {
    width: 10% !important;
  }
  
  .w-20 {
    width: 20% !important;
  }
  
  .w-30 {
    width: 30% !important;
  }
  
  .w-40 {
    width: 40% !important;
  }
  
  .w-50 {
    width: 50% !important;
  }
  
  .w-60 {
    width: 60% !important;
  }
  
  .w-70 {
    width: 70% !important;
  }
  
  .w-80 {
    width: 80% !important;
  }
  
  .w-90 {
    width: 90% !important;
  }
  
  .w-95 {
    width: 95% !important;
  }
  
  .w-100 {
    width: 100% !important;
  }
  /* Spacing */
  /* Padding Around */
  .pa-0 {
    padding: 0;
  }
  
  .pa-5 {
    padding: 5px;
  }
  
  .pa-10 {
    padding: 10px;
  }
  
  .pa-15 {
    padding: 15px;
  }
  
  .pa-20 {
    padding: 20px;
  }
  
  .pa-25 {
    padding: 25px;
  }
  
  .pa-30 {
    padding: 30px;
  }
  
  .pa-40 {
    padding: 40px;
  }
  
  .pa-50 {
    padding: 50px;
  }
  
  .pa-60 {
    padding: 60px;
  }
  
  .pa-70 {
    padding: 70px;
  }
  
  .pa-80 {
    padding: 80px;
  }
  
  .pa-90 {
    padding: 90px;
  }
  
  .pa-100 {
    padding: 100px;
  }
  
  /* Padding Top */
  .pt-0 {
    padding-top: 0;
  }
  
  .pt-5 {
    padding-top: 5px;
  }
  
  .pt-10 {
    padding-top: 10px;
  }
  
  .pt-15 {
    padding-top: 15px;
  }
  
  .pt-20 {
    padding-top: 20px;
  }
  
  .pt-30 {
    padding-top: 30px;
  }
  
  .pt-40 {
    padding-top: 40px;
  }
  
  .pt-50 {
    padding-top: 50px;
  }
  
  .pt-60 {
    padding-top: 60px;
  }
  
  .pt-70 {
    padding-top: 70px;
  }
  
  .pt-80 {
    padding-top: 80px;
  }
  
  .pt-90 {
    padding-top: 90px;
  }
  
  .pt-100 {
    padding-top: 100px;
  }
  
  /* Padding Bottom */
  .pb-0 {
    padding-bottom: 0;
  }
  
  .pb-5 {
    padding-bottom: 5px;
  }
  
  .pb-10 {
    padding-bottom: 10px;
  }
  
  .pb-15 {
    padding-bottom: 15px;
  }
  
  .pb-20 {
    padding-bottom: 20px;
  }
  
  .pb-30 {
    padding-bottom: 30px;
  }
  
  .pb-40 {
    padding-bottom: 40px;
  }
  
  .pb-50 {
    padding-bottom: 50px;
  }
  
  .pb-60 {
    padding-bottom: 60px;
  }
  
  .pb-70 {
    padding-bottom: 70px;
  }
  
  .pb-80 {
    padding-bottom: 80px;
  }
  
  .pb-90 {
    padding-bottom: 90px;
  }
  
  .pb-100 {
    padding-bottom: 100px;
  }
  
  /* Padding Left */
  .pl-0 {
    padding-left: 0;
  }
  
  .pl-5 {
    padding-left: 5px;
  }
  
  .pl-10 {
    padding-left: 10px;
  }
  
  .pl-15 {
    padding-left: 15px;
  }
  
  .pl-20 {
    padding-left: 20px;
  }
  
  .pl-30 {
    padding-left: 30px;
  }
  
  .pl-40 {
    padding-left: 40px;
  }
  
  .pl-50 {
    padding-left: 50px;
  }
  
  .pl-60 {
    padding-left: 60px;
  }
  
  .pl-70 {
    padding-left: 70px;
  }
  
  .pl-80 {
    padding-left: 80px;
  }
  
  .pl-90 {
    padding-left: 90px;
  }
  
  .pl-100 {
    padding-left: 100px;
  }
  
  /* Padding Right */
  .pr-0 {
    padding-right: 0;
  }
  
  .pr-5 {
    padding-right: 5px;
  }
  
  .pr-10 {
    padding-right: 10px;
  }
  
  .pr-15 {
    padding-right: 15px;
  }
  
  .pr-20 {
    padding-right: 20px;
  }
  
  .pr-30 {
    padding-right: 30px;
  }
  
  .pr-40 {
    padding-right: 40px;
  }
  
  .pr-50 {
    padding-right: 50px;
  }
  
  .pr-60 {
    padding-right: 60px;
  }
  
  .pr-70 {
    padding-right: 70px;
  }
  
  .pr-80 {
    padding-right: 80px;
  }
  
  .pr-90 {
    padding-right: 90px;
  }
  
  .pr-100 {
    padding-right: 100px;
  }
  
  /* Padding left Right */
  .px-0 {
    padding-left: 0;
    padding-right: 0;
  }
  
  .px-5 {
    padding-left: 5px;
    padding-right: 5px;
  }
  
  .px-10 {
    padding-left: 10px;
    padding-right: 10px;
  }
  
  .px-15 {
    padding-left: 15px;
    padding-right: 15px;
  }
  
  .px-20 {
    padding-left: 20px;
    padding-right: 20px;
  }
  
  .px-30 {
    padding-left: 30px;
    padding-right: 30px;
  }
  
  .px-40 {
    padding-left: 40px;
    padding-right: 40px;
  }
  
  .px-50 {
    padding-left: 50px;
    padding-right: 50px;
  }
  
  .px-60 {
    padding-left: 60px;
    padding-right: 60px;
  }
  
  .px-70 {
    padding-left: 70px;
    padding-right: 70px;
  }
  
  .px-80 {
    padding-left: 80px;
    padding-right: 80px;
  }
  
  .px-90 {
    padding-left: 90px;
    padding-right: 90px;
  }
  
  .px-100 {
    padding-left: 100px;
    padding-right: 100px;
  }
  
  /* Padding Top Bottom */
  .py-0 {
    padding-bottom: 0;
    padding-top: 0;
  }
  
  .py-5 {
    padding-bottom: 5px;
    padding-top: 5px;
  }
  
  .py-10 {
    padding-bottom: 10px;
    padding-top: 10px;
  }
  
  .py-15 {
    padding-bottom: 15px;
    padding-top: 15px;
  }
  
  .py-20 {
    padding-bottom: 20px;
    padding-top: 20px;
  }
  
  .py-30 {
    padding-bottom: 30px;
    padding-top: 30px;
  }
  
  .py-40 {
    padding-bottom: 40px;
    padding-top: 40px;
  }
  
  .py-50 {
    padding-bottom: 50px;
    padding-top: 50px;
  }
  
  .py-60 {
    padding-bottom: 60px;
    padding-top: 60px;
  }
  
  .py-70 {
    padding-bottom: 70px;
    padding-top: 70px;
  }
  
  .py-80 {
    padding-bottom: 80px;
    padding-top: 80px;
  }
  
  .py-90 {
    padding-bottom: 90px;
    padding-top: 90px;
  }
  
  .py-100 {
    padding-bottom: 100px;
    padding-top: 100px;
  }
  
  /* Margin Around */
  .m-auto {
    margin: auto;
  }
  
  .ma-0 {
    margin: 0;
  }
  
  .ma-5 {
    margin: 5px;
  }
  
  .ma-10 {
    margin: 10px;
  }
  
  .ma-15 {
    margin: 15px;
  }
  
  .ma-20 {
    margin: 20px;
  }
  
  .ma-30 {
    margin: 30px;
  }
  
  .ma-40 {
    margin: 40px;
  }
  
  .ma-50 {
    margin: 50px;
  }
  
  .ma-60 {
    margin: 60px;
  }
  
  .ma-70 {
    margin: 70px;
  }
  
  .ma-80 {
    margin: 80px;
  }
  
  .ma-90 {
    margin: 90px;
  }
  
  .ma-100 {
    margin: 100px;
  }
  
  /* Margin Top */
  .mt-auto {
    margin-top: auto;
  }
  
  .mt-0 {
    margin-top: 0;
  }
  
  .mt-5 {
    margin-top: 5px;
  }
  
  .mt-10 {
    margin-top: 10px;
  }
  
  .mt-15 {
    margin-top: 15px;
  }
  
  .mt-20 {
    margin-top: 20px;
  }
  
  .mt-30 {
    margin-top: 30px;
  }
  
  .mt-40 {
    margin-top: 40px;
  }
  
  .mt-50 {
    margin-top: 50px;
  }
  
  .mt-60 {
    margin-top: 60px;
  }
  
  .mt-70 {
    margin-top: 70px;
  }
  
  .mt-80 {
    margin-top: 80px;
  }
  
  .mt-90 {
    margin-top: 90px;
  }
  
  .mt-100 {
    margin-top: 100px;
  }
  
  /* Margin Bottom */
  .mb-auto {
    margin-bottom: auto;
  }
  
  .mb-0 {
    margin-bottom: 0;
  }
  
  .mb-5 {
    margin-bottom: 5px;
  }
  
  .mb-10 {
    margin-bottom: 10px;
  }
  
  .mb-15 {
    margin-bottom: 15px;
  }
  
  .mb-20 {
    margin-bottom: 20px;
  }
  
  .mb-30 {
    margin-bottom: 30px;
  }
  
  .mb-40 {
    margin-bottom: 40px;
  }
  
  .mb-50 {
    margin-bottom: 50px;
  }
  
  .mb-60 {
    margin-bottom: 60px;
  }
  
  .mb-70 {
    margin-bottom: 70px;
  }
  
  .mb-80 {
    margin-bottom: 80px;
  }
  
  .mb-90 {
    margin-bottom: 90px;
  }
  
  .mb-100 {
    margin-bottom: 100px;
  }
  
  /* Margin left */
  .ml-auto {
    margin-left: auto;
  }
  
  .ml-0 {
    margin-left: 0;
  }
  
  .ml-5 {
    margin-left: 5px;
  }
  
  .ml-10 {
    margin-left: 10px;
  }
  
  .ml-15 {
    margin-left: 15px;
  }
  
  .ml-20 {
    margin-left: 20px;
  }
  
  .ml-30 {
    margin-left: 30px;
  }
  
  .ml-40 {
    margin-left: 40px;
  }
  
  .ml-50 {
    margin-left: 50px;
  }
  
  .ml-60 {
    margin-left: 60px;
  }
  
  .ml-70 {
    margin-left: 70px;
  }
  
  .ml-80 {
    margin-left: 80px;
  }
  
  .ml-90 {
    margin-left: 90px;
  }
  
  .ml-100 {
    margin-left: 100px;
  }
  
  /* Margin Right */
  .mr-auto {
    margin-right: auto;
  }
  
  .mr-0 {
    margin-right: 0;
  }
  
  .mr-5 {
    margin-right: 5px;
  }
  
  .mr-10 {
    margin-right: 10px;
  }
  
  .mr-15 {
    margin-right: 15px;
  }
  
  .mr-20 {
    margin-right: 20px;
  }
  
  .mr-30 {
    margin-right: 30px;
  }
  
  .mr-40 {
    margin-right: 40px;
  }
  
  .mr-50 {
    margin-right: 50px;
  }
  
  .mr-60 {
    margin-right: 60px;
  }
  
  .mr-70 {
    margin-right: 70px;
  }
  
  .mr-80 {
    margin-right: 80px;
  }
  
  .mr-90 {
    margin-right: 90px;
  }
  
  .mr-100 {
    margin-right: 100px;
  }
  
  /* Margin Left Right */
  .mx-auto {
    margin-left: auto;
    margin-right: auto;
  }
  
  .mx-0 {
    margin-left: 0;
    margin-right: 0;
  }
  
  .mx-5 {
    margin-left: 5px;
    margin-right: 5px;
  }
  
  .mx-10 {
    margin-left: 10px;
    margin-right: 10px;
  }
  
  .mx-15 {
    margin-left: 15px;
    margin-right: 15px;
  }
  
  .mx-20 {
    margin-left: 20px;
    margin-right: 20px;
  }
  
  .mx-30 {
    margin-left: 30px;
    margin-right: 30px;
  }
  
  .mx-40 {
    margin-left: 40px;
    margin-right: 40px;
  }
  
  .mx-50 {
    margin-left: 50px;
    margin-right: 50px;
  }
  
  .mx-60 {
    margin-left: 60px;
    margin-right: 60px;
  }
  
  .mx-70 {
    margin-left: 70px;
    margin-right: 70px;
  }
  
  .mx-80 {
    margin-left: 80px;
    margin-right: 80px;
  }
  
  .mx-90 {
    margin-left: 90px;
    margin-right: 90px;
  }
  
  .mx-100 {
    margin-left: 100px;
    margin-right: 100px;
  }
  
  /* Margin Top Bottom */
  .my-auto {
    margin-bottom: auto;
    margin-top: auto;
  }
  
  .my-0 {
    margin-bottom: 0;
    margin-top: 0;
  }
  
  .my-5 {
    margin-bottom: 5px;
    margin-top: 5px;
  }
  
  .my-10 {
    margin-bottom: 10px;
    margin-top: 10px;
  }
  
  .my-15 {
    margin-bottom: 15px;
    margin-top: 15px;
  }
  
  .my-20 {
    margin-bottom: 20px;
    margin-top: 20px;
  }
  
  .my-30 {
    margin-bottom: 30px;
    margin-top: 30px;
  }
  
  .my-40 {
    margin-bottom: 40px;
    margin-top: 40px;
  }
  
  .my-50 {
    margin-bottom: 50px;
    margin-top: 50px;
  }
  
  .my-60 {
    margin-bottom: 60px;
    margin-top: 60px;
  }
  
  .my-70 {
    margin-bottom: 70px;
    margin-top: 70px;
  }
  
  .my-80 {
    margin-bottom: 80px;
    margin-top: 80px;
  }
  
  .my-90 {
    margin-bottom: 90px;
    margin-top: 90px;
  }
  
  .my-100 {
    margin-bottom: 100px;
    margin-top: 100px;
  }
  
  /* Gap */
  .gap-0 {
    gap: 0;
  }
  
  .gap-5 {
    gap: 5px;
  }
  
  .gap-10 {
    gap: 10px;
  }
  
  .gap-15 {
    gap: 15px;
  }
  
  .gap-20 {
    gap: 20px;
  }
  
  .gap-30 {
    gap: 30px;
  }
  
  .gap-40 {
    gap: 40px;
  }
  
  .gap-50 {
    gap: 50px;
  }
  
  .gap-60 {
    gap: 60px;
  }
  
  .gap-70 {
    gap: 70px;
  }
  
  .gap-80 {
    gap: 80px;
  }
  
  .gap-90 {
    gap: 90px;
  }
  
  .gap-100 {
    gap: 100px;
  }
  
  /* Content Bottom Space */
  .bottom-sp100:after {
    height: 100px;
    content: '';
    display: block;
  }
  
  .bottom-sp90:after {
    height: 90px;
    content: '';
    display: block;
  }
  
  .bottom-sp80:after {
    height: 80px;
    content: '';
    display: block;
  }
  
  .bottom-sp70:after {
    height: 70px;
    content: '';
    display: block;
  }
  
  .bottom-sp60:after {
    height: 60px;
    content: '';
    display: block;
  }
  
  .bottom-sp50:after {
    height: 50px;
    content: '';
    display: block;
  }
  
  .bottom-sp40:after {
    height: 40px;
    content: '';
    display: block;
  }
  
  .radius-md {
    border-radius: 12px;
  }
  
  .text-capitalize {
    text-transform: capitalize;
  }
  
  .bg-secondary {
    background-color: #f6dbb3;
  }
  
  .container {
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
    /* padding-left: 20px;
    padding-right: 20px; */
    box-sizing: border-box;
    width: 100%;
  }
  
  .border-top,
  .border-bottom,
  .border-left,
  .border-right {
    border: 1px solid;
    border-color: #f3f3f3;
  }
  
  .border-top {
    border-width: 1px 0 0;
  }
  
  .border-bottom {
    border-width: 0 0 1px;
  }
  
  .border-left {
    border-width: 0 0 0 1px;
  }
  
  .border-right {
    border-width: 0 1px 0 0;
  }
  
  .page-content {
    scrollbar-width: none;
  }
  
  /* Framework */
  .block-title-medium {
    font-size: 18px;
    font-weight: 600;
  }
  
  /* button loader */
  .loader-screen {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 9999;
    background-color: var(--f7-theme-color);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }
  
  #loading-area {
    position: relative;
    margin: auto;
    padding: 15px;
    height: 100%;
  }
  
  #loading-area .load-icon {
    margin: 0 0 0 10px;
  }
  
  #loading-area .load-text {
    font-size: 38px;
    line-height: 38px;
    color: #fff;
    display: flex;
    margin: 10px 0 0;
    justify-content: center;
  }
  
  #loading-area .load-text span {
    margin: 0 1px;
    animation: flip 2.6s infinite linear;
    transform-origin: 0 70%;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
  }
  
  #loading-area .load-text span:nth-child(2) {
    animation-delay: 0.3s;
  }
  
  #loading-area .load-text span:nth-child(3) {
    animation-delay: 0.6s;
  }
  
  #loading-area .load-text span:nth-child(4) {
    animation-delay: 0.9s;
  }
  
  #loading-area .load-text span:nth-child(5) {
    animation-delay: 1.2s;
  }
  
  #loading-area .load-text span:nth-child(6) {
    animation-delay: 1.5s;
  }
  
  #loading-area .load-text span:nth-child(7) {
    animation-delay: 1.8s;
  }
  
  @keyframes flip {
    35% {
      transform: rotateX(360deg);
    }
  
    100% {
      transform: rotatex(360deg);
    }
  }
  
  /* On Boading */
  .footer-button {
    height: 100px;
    background-color: #fff;
    padding: 15px 30px !important;
    right: 0;
    left: 0;
  }
  
  .footer-button:after,
  .footer-button:before {
    content: none;
  }
  
  .page-onboading {
    background: var(--color-onboarding);
  }
  
  .page-welcome {
    background: var(--color-onboarding);
  }
  
  .page-home {
    background: var(--color-home);
  }
  
  .page.bg-gray,
  .page-content.bg-gray {
    background: #f9f9f9 !important;
  }
  
  .onboading-logo {
    margin: 25px auto;
    text-align: center;
  }
  
  .onboading-logo img {
    width: 70px;
  }
  
  /* Get Started */
  .get-started {
    text-align: center;
    height: 100%;
  }
  
  .get-started .swiper-wrapper {
    margin-bottom: 15px;
  }
  
  .get-started .dz-title {
    margin-top: 0;
    margin-bottom: 25px;
  }
  
  .get-started p {
    margin-bottom: 0;
    margin-top: 0;
    color: #1b1b1b;
  }
  
  .get-started .swiper-pagination {
    bottom: 0;
    opacity: 1;
  }
  
  .get-started .swiper-pagination .swiper-pagination-bullet {
    margin: 0 4px;
    width: 10px;
    border-radius: 5px;
    height: 10px;
    background: #d2d2d2;
    opacity: 1;
    -webkit-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transition: all 0.5s;
  }
  
  .get-started .swiper-pagination .swiper-pagination-bullet-active {
    background: var(--f7-theme-color);
    width: 23px;
  }
  
  @media (max-width: 361px) {
    .get-started .dz-title {
      margin-bottom: 15px;
    }
  }
  
  .started-swiper-box {
    height: 100%;
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
  
  .started-swiper-box .swiper-slide {
    height: 100%;
    position: relative;
  }
  
  .started-swiper-box .slide-info {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    padding-bottom: 40px;
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 100%;
    z-index: 1;
    position: relative;
  }
  
  .started-swiper-box .view-logo {
    margin: auto;
  }
  
  .started-swiper-box .view-logo + .slide-content {
    margin-top: 0;
  }
  
  .started-swiper-box .slide-content {
    z-index: 1;
    position: relative;
    padding: 0 15px;
    max-width: 320px;
    margin: auto auto 0;
  }
  
  .started-swiper-box .bg-icon {
    position: absolute;
    left: 0;
    top: 50%;
    opacity: 0.1;
    transform: translateY(-50%);
  }
  
  @media (max-width: 361px) {
    .started-swiper-box .slide-info {
      padding-bottom: 40px;
    }
  
    .started-swiper-box .view-logo {
      margin: 20px auto;
    }
  }
  
  .view-main .page-onboading .page-content {
    display: flex;
    flex-direction: column;
    padding: 70px 0 110px;
    text-align: center;
  }
  
  .view-main .page-onboading .footer-button {
    background: transparent;
  }
  
  .view-main .page-onboading .footer-button .login-btn {
    background-color: var(--f7-theme-color-tint);
    margin-top: 18px;
  }
  
  .view-main .page-onboading .view-logo .logo-text {
    color: #fff;
  }
  
  .view-main .page-onboading .start-btn {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    z-index: 1;
  }
  
  .view-main .page-onboading .dz-media {
    margin: auto;
    /* width: 235px; */
    width: 80%;
  }
  
  .view-main .page-onboading .dz-media img {
    width: 100%;
    border-radius: 5%;
  }
  
  .color-theme-tumovil .view-main .page-onboading .dz-media img {
    /* mix-blend-mode: multiply; */
    width: 100%;
  }
  
  @media (max-width: 361px) {
    .view-main .page-onboading .page-content {
      padding: 50px 0 100px;
    }
  
    .view-main .page-onboading .dz-media {
      width: 95%;
      /* width: 200px;
      margin: 0 auto 15px; */
    }
  
    .view-main .page-onboading .dz-media img {
      width: 100%;
    }
  }
  
  /* Login Register Account */
  .account-area .page-content {
    padding-top: 35px;
  }
  
  .account-area .main-logo {
    justify-content: center;
    margin-bottom: 50px;
  }
  
  .account-area .block {
    padding: 0 30px;
    margin: 25px 0;
  }
  
  .account-area .swiper-slide,
  .account-area .swiper-wrapper,
  .account-area .tabs-swipeable-wrap {
    height: auto;
  }
  
  .account-area p {
    color: #000000;
  }
  
  .account-area .tabbar {
    margin-bottom: 30px;
  }
  
  .account-area .title-head {
    margin-bottom: 30px;
  }
  
  .account-area .title-head p {
    margin: 0;
  }
  
  .account-area .title-head .title {
    margin-top: 0;
    margin-bottom: 10px;
  }
  
  .account-area .account-footer {
    margin: 40px 0 0;
  }
  
  .account-area .account-footer p {
    font-weight: 500;
    opacity: 0.4;
  }
  
  .account-area .account-footer .form-text {
    font-size: 14px;
    margin: 0 0 10px;
    opacity: 1;
  }
  
  .account-area .account-footer .form-text a {
    font-weight: 600;
  }
  
  .social-account {
    margin-top: 30px;
    text-align: center;
  }
  
  .social-account p {
    margin: 5px 0;
  }
  
  .social-account a {
    width: 36px;
    display: inline-block;
    margin-left: 20px;
  }
  
  .social-account a img {
    width: 100%;
  }
  
  .form-elements .list {
    margin-top: 0;
    margin-bottom: 10px;
  }
  
  .form-elements ul {
    background: transparent;
  }
  
  .form-elements ul:before,
  .form-elements ul:after {
    content: none;
  }
  
  .form-elements ul .item-content {
    padding: 0;
  }
  
  .form-elements ul .item-content .item-media {
    position: absolute;
    left: 24px;
    min-width: auto;
    top: 10px;
    z-index: 1;
  }
  
  .form-elements ul .item-content .item-media + .item-inner {
    margin-left: 0;
  }
  
  .form-elements ul .item-content .item-media + .item-inner .item-input-wrap .form-control {
    padding: 15px 25px 15px 64px;
  }
  
  .form-elements ul .item-content .item-inner {
    padding: 0;
  }
  
  .form-elements ul .item-content .item-inner .item-label {
    font-size: 14px;
    color: #8a8a8a;
    margin-bottom: 10px;
  }
  
  .form-elements ul .item-content .item-inner .item-input-wrap {
    margin-bottom: 25px;
  }
  
  .form-elements ul .item-content .item-inner .item-input-wrap.mb-0 {
    margin-bottom: 0;
  }
  
  .form-elements ul .item-content .item-inner .item-input-wrap:after {
    content: none !important;
  }
  
  .form-elements ul .item-content .item-inner .item-input-wrap .form-control {
    background: transparent;
    height: 60px;
    border: 2px solid;
    border-color: #e9e9e9;
    border-width: 0 0 2px;
    font-size: 16px;
    color: #000000;
    font-weight: 400;
    -webkit-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transition: all 0.5s;
  }
  
  .form-elements ul .item-content .item-inner .item-input-wrap .form-control::placeholder {
    color: #8b8b8b;
  }
  
  .form-elements ul .item-content .item-inner .item-input-wrap .form-control:active,
  .form-elements ul .item-content .item-inner .item-input-wrap .form-control:focus {
    border-color: var(--f7-theme-color);
  }
  
  .form-elements ul .item-content .item-inner .item-input-wrap.item-input-group {
    display: flex;
  }
  
  .form-elements ul .item-content .item-inner .item-input-wrap.input-dropdown-wrap:before {
    content: '\f078';
    position: absolute;
    right: 20px;
    top: 21px;
    font-size: 12px;
    font-family: var(--f7-font-family);
    font-weight: 900;
  }
  
  .form-elements ul .item-content .item-inner .item-input-wrap.input-dropdown-wrap.dropdown-left:before {
    right: auto;
    left: 16px;
  }
  
  .form-elements ul .item-content .item-inner::placeholder {
    color: red !important;
  }
  
  .form-elements .form-text {
    color: #656565;
    margin: 20px 0 0;
  }
  
  .form-elements .form-text a {
    font-weight: 600;
    text-decoration: underline;
    overflow: hidden;
    padding: 2px;
  }
  
  .input-dropdown-wrap:before {
    content: '\f0d7';
    right: 40px;
    top: 18px;
    position: absolute;
    z-index: 99;
    border: 0;
    font-family: var(--f7-font-family);
    font-weight: 900;
    font-size: 18px;
    margin: 0;
    color: var(--f7-theme-color);
  }
  
  .checkbox-form-control {
    width: 100%;
    display: flex;
    align-items: center;
  }
  
  .checkbox-form-control .checkbox {
    float: left;
    margin-right: 15px;
  }
  
  .checkbox-form-control .checkbox-text {
    font-weight: 500;
    color: #000;
    font-size: 16px;
    margin: 0;
  }
  
  .show-pass {
    position: absolute;
    right: 20px;
    top: 18px;
  }
  
  .show-pass:after {
    content: '';
    background-color: var(--f7-theme-color);
    width: 2px;
    height: 20px;
    position: absolute;
    top: 2px;
    left: 11px;
    transform: rotate(40deg);
    display: block;
  }
  
  .show-pass.active:after {
    display: none;
  }
  
  .show-pass [fill] {
    fill: var(--f7-theme-color);
  }
  
  .md .list .item-media {
    min-width: unset;
  }
  
  .light.page,
  .light .page-content,
  .light .navbar,
  .light .toolbar {
    background: #fafafa;
  }
  
  .svg-primary {
    fill: var(--f7-theme-color);
  }
  
  .svg-primary [fill] {
    fill: var(--f7-theme-color);
  }
  
  .dz-list > ul {
    background-color: transparent;
  }
  
  .tabs-height-auto {
    height: auto;
  }
  
  .sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 999;
  }
  
  .border-top {
    border-top: 1px solid;
    border-color: #f4f4f4;
  }
  
  .top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .top-bar .link.panel-open {
    /* margin: 0 0 30px 20px; */
  }
  
  .top-bar .media {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
    font-size: 22px;
    gap: 15px;
  }
  
  .top-bar .title {
    margin: 0;
  }
  
  .top-bar span {
    display: block;
    margin-bottom: 5px;
    color: #000;
  }
  
  .top-bar .media img {
    height: 46px;
    width: 46px;
    border-radius: 8px;
  }
  
  .top-bar .media .active {
    color: var(--f7-theme-color);
    font-size: 13px;
    border: 2px solid #fff;
    position: absolute;
    right: -5px;
    top: -5px;
    border-radius: 50%;
  }
  
  .top-bar .notification-bar {
    position: relative;
  }
  
  .menubar-area {
    background-color: var(--f7-theme-color-white);
    height: 60px;
  }
  
  .menubar-area:before,
  .menubar-area:after {
    content: none;
  }
  
  .menubar-area .toolbar-inner {
    max-width: 1024px;
    left: 50%;
    transform: translatex(-50%);
    z-index: 1;
    box-sizing: border-box;
    padding-left: 30px;
    padding-right: 30px;
  }
  
  .menubar-area .toolbar-inner .tab-link {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: unset;
    color: #adadad;
    letter-spacing: unset;
    position: relative;
  }
  
  .menubar-area .toolbar-inner .tab-link path[fill],
  .menubar-area .toolbar-inner .tab-link path {
    fill: #adadad;
  }
  
  .menubar-area .toolbar-inner .tab-link i,
  .menubar-area .toolbar-inner .tab-link svg {
    color: #adadad;
  }
  
  .menubar-area .toolbar-inner .tab-link span {
    font-size: 12px;
    text-transform: capitalize;
    display: block;
    margin-top: 5px;
  }
  
  .menubar-area .toolbar-inner .tab-link:after {
    content: '';
    background-color: var(--f7-theme-color);
    height: 10px;
    width: 10px;
    border-radius: 10px 10px 0 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    bottom: -2px;
  }
  
  .menubar-area .toolbar-inner .tab-link.active path,
  .menubar-area .toolbar-inner .tab-link.active path[fill] {
    fill: var(--f7-theme-color);
  }
  
  .menubar-area .toolbar-inner .tab-link.active i,
  .menubar-area .toolbar-inner .tab-link.active svg {
    color: #adadad;
  }
  
  .menubar-area .toolbar-inner .tab-link.active span {
    color: var(--f7-theme-color);
  }
  
  .menubar-area .toolbar-inner .tab-link.active:after {
    opacity: 1;
  }
  
  .menubar-area .tab-link-highlight {
    display: none;
  }
  
  .main-swiper {
    margin-left: -20px;
  }
  
  .main-swiper .swiper-slide:first-child {
    margin-left: 20px;
  }
  
  @media only screen and (max-width: 1199px) {
    .main-swiper {
      margin-right: -20px;
    }
  }
  
  .title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    margin-bottom: 20px;
  }
  
  .title-bar .dz-title,
  .title-bar a {
    font-weight: 600;
    margin: 0;
  }
  
  .title-bar path[fill],
  .title-bar path {
    fill: var(--f7-theme-color);
  }
  
  .title-bar i,
  .title-bar svg {
    font-size: 24px;
    color: var(--f7-theme-color);
  }
  
  .avatar-group {
    display: flex;
  }
  
  .avatar-group img {
    width: 32px;
    border: 2px solid #fff;
    border-radius: 50px;
    margin-left: -12px;
  }
  
  .avatar-group img:first-child {
    margin: 0;
  }
  
  .search-list ul:before,
  .search-list ul:after {
    content: none;
  }
  
  .card-bx {
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin: 0;
    border-radius: 8px;
  }
  
  .card-bx .card-media {
    overflow: hidden;
    border-radius: 8px;
  }
  
  .card-bx .card-media img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  
  .categories-bx {
    padding: 15px 45px 15px 25px;
    display: flex;
    background-color: #fff;
    border-radius: 18px;
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.25);
    margin: 5px 0;
    border: 1px solid #efefef;
    cursor: pointer;
  }
  
  .categories-bx:hover {
    box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.35);
  }
  
  .categories-bx:active {
    transform: scale(0.95);
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.25);
  }
  
  .categories-bx .icon-bx {
    position: relative;
    display: flex;
    margin-right: 20px;
  }
  
  .categories-bx .icon-bx i,
  .categories-bx .icon-bx svg {
    color: var(--f7-theme-color);
  }
  
  .categories-bx .icon-bx path[fill],
  .categories-bx .icon-bx path {
    fill: var(--f7-theme-color);
  }
  
  .categories-bx .title {
    color: var(--f7-theme-color);
    margin: 0;
  }
  
  .categories-bx .menus {
    margin-top: 5px;
    display: block;
    font-weight: 500;
  }
  
  .categories-swiper .swiper-slide {
    width: auto;
  }
  
  .categories-swiper i,
  .categories-swiper svg {
    font-size: 20px;
  }
  
  .bookmark-btn .fas {
    display: none;
  }
  
  .bookmark-btn .far {
    opacity: 0.3;
  }
  
  .bookmark-btn.active .fas {
    display: block;
  }
  
  .bookmark-btn.active .far {
    display: none;
  }
  
  .input-select select {
    font-weight: 600;
    color: var(--f7-theme-color);
  }
  
  .input-select:after {
    content: '\f0dd';
    position: absolute;
    font-family: var(--f7-font-family);
    color: var(--f7-theme-color);
    right: 0;
    top: 0;
    font-weight: 900;
    line-height: 14px;
  }
  
  .dz-banner-heading {
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    height: 300px;
    overflow: hidden;
  }
  
  .dz-banner-heading iframe {
    border: 0;
    width: 100%;
    height: 450px;
    margin-top: -50px;
  }
  
  .dz-banner-heading .bnr-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .fixed-content {
    background-color: var(--f7-theme-color-white);
    border-radius: 20px 20px 0 0;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    padding: 15px 20px;
    /* padding-top: 30px;
    padding-bottom: 35px; */
  }
  
  .fixed-content .cart-list-area {
    margin-left: -20px;
    margin-right: -20px;
  }
  
  .dz-banner {
    height: 250px;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    background-position: bottom;
  }
  
  .dz-banner-height {
    height: 280px;
    width: 100%;
    display: block;
  }
  
  .input-select {
    position: relative;
    padding-right: 20px;
  }
  
  .input-select:after {
    content: '\f0dd';
    position: absolute;
    font-family: var(--f7-font-family);
    color: var(--f7-theme-color);
    right: 0;
    top: 0;
    font-weight: 900;
    line-height: 14px;
    font-size: 18px;
  }
  
  .input-select select {
    font-size: 14px;
    color: var(--f7-theme-color);
    font-weight: 500;
  }
  
  .dz-meta ul {
    padding: 0 !important;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
  }
  
  .dz-meta ul li {
    display: inline-flex !important;
    align-items: center;
    margin-right: 12px;
    font-size: 18px;
    line-height: 18px;
    position: relative;
  }
  
  .dz-meta ul li path[fill],
  .dz-meta ul li path {
    fill: var(--f7-theme-color);
  }
  
  .dz-meta ul li svg {
    margin-right: 10px;
  }
  
  .dz-meta ul li i,
  .dz-meta ul li svg {
    color: var(--f7-theme-color);
    margin-right: 10px;
  }
  
  .card-overlay .dz-media {
    display: flex;
    align-items: center;
  }
  
  .card-overlay .dz-media img {
    width: 100%;
  }
  
  .card-overlay.style-1 {
    border-radius: 30px;
    padding: 15px 15px 20px;
    margin-top: 50px;
  }
  
  .card-overlay.style-1 .dz-media {
    margin: -70px auto -20px;
    height: 200px;
  }
  
  .card-overlay.style-1 .dz-media img {
    height: 200px;
    object-fit: cover;
    width: auto;
  }
  
  .card-overlay.style-1 .title {
    margin: 0 0 15px;
  }
  
  .card-overlay.style-1 .title a {
    color: #fff;
  }
  
  .card-overlay.style-1 .dz-info {
    padding: 20px 5px 5px;
  }
  
  .card-overlay.style-1 .dz-meta li {
    color: #fff;
    font-size: 24px;
    font-weight: 500;
    line-height: 24px;
  }
  
  .card-overlay.style-1 .dz-meta li sup {
    margin-top: -10px;
    font-size: 14px;
    margin-right: 5px;
  }
  
  .card-overlay.style-1 .dz-meta li del {
    font-size: 16px;
    opacity: 0.5;
    margin-left: 10px;
  }
  
  .card-overlay.style-2 {
    background-color: var(--f7-theme-color);
    padding: 15px 25px 15px 15px;
    border-radius: 18px;
    display: flex;
    align-items: center;
  }
  
  .card-overlay.style-2 .dz-media {
    min-width: 96px;
    max-width: 96px;
    margin-right: 12px;
  }
  
  .card-overlay.style-2 .title {
    font-weight: 500;
    margin: 0 0 5px;
  }
  
  .card-overlay.style-2 .title a {
    color: #fff;
  }
  
  .card-overlay.style-2 .dz-meta ul {
    justify-content: space-between;
  }
  
  .card-overlay.style-2 .dz-meta ul li {
    font-size: 12px;
    opacity: 0.5;
    color: #fff;
  }
  
  .card-overlay.style-2 .dz-meta ul li svg {
    margin: 0;
  }
  
  .card-overlay.style-2 .dz-meta ul li path[fill],
  .card-overlay.style-2 .dz-meta ul li path {
    fill: #fff;
  }
  
  .card-overlay.style-2 .dz-meta ul li:last-child {
    padding-right: 0;
  }
  
  .overlay-swiper1 .swiper-slide {
    width: 205px;
  }
  
  .overlay-swiper2 .swiper-slide {
    width: 265px;
  }
  
  .tag-list {
    padding: 0;
    margin-bottom: 15px;
  }
  
  .tag-list li {
    display: inline-block;
    position: relative;
    margin-right: 2px;
  }
  
  .tag-list li a {
    color: #777777;
    font-size: 14px;
  }
  
  .tag-list li:after {
    content: ',';
    right: 0;
    bottom: 0;
    color: inharit;
  }
  
  .tag-list li:last-child:after {
    content: none;
  }
  
  .item-list ul {
    background-color: var(--f7-theme-color-white);
  }
  
  .item-bx {
    position: relative;
  }
  
  .item-bx .dz-media {
    position: relative;
  }
  
  .item-bx .dz-media img {
    border-radius: 18px;
    width: 100%;
    height: 100%;
    display: flex;
  }
  
  .item-bx ul li.hidden-by-searchbar {
    display: inline-block !important;
  }
  
  .item-bx .item-title {
    font-weight: 600;
    margin: 0 0 15px;
    white-space: normal;
  }
  
  .item-bx .dz-meta ul li:last-child {
    margin-right: 0;
  }
  
  .item-bx .price {
    font-weight: 600;
    font-size: 18px;
    color: #000;
  }
  
  .item-bx .price del {
    font-size: 16px;
    font-weight: 500;
    color: #929292;
    margin-left: 12px;
  }
  
  .item-bx .pts {
    font-weight: 500;
  }
  
  .item-bx .btn-buy {
    text-transform: capitalize;
    background-color: var(--f7-theme-color-secondary);
    width: 45px !important;
    height: 45px !important;
    font-size: 15px;
    font-family: black;
    box-sizing: border-box;
    font-size: 20px;
    line-height: 16px;
    border-radius: 50px;
    font-weight: 500;
    border: 1px solid #d8d8d8;
    color: #000;
  }
  
  .item-bx .btn-buy:hover,
  .item-bx .btn-buy.active-state {
    background-color: var(--f7-theme-color);
    color: #fff;
  }
  
  .item-bx .btn-buy:hover path[fill],
  .item-bx .btn-buy:hover path,
  .item-bx .btn-buy.active-state path[fill],
  .item-bx .btn-buy.active-state path {
    fill: #fff;
  }
  
  .item-bx .rating {
    padding: 4px 15px;
    background-color: #f0af25;
    border-radius: 20px;
    color: #fff;
    align-items: center;
    position: absolute;
    box-sizing: border-box;
    bottom: -15px;
    left: 16px;
  }
  
  .item-bx .rating i,
  .item-bx .rating svg {
    color: #fff;
    font-size: 13px;
    margin-right: 5px;
  }
  
  .item-bx .dz-head {
    margin-bottom: 15px;
  }
  
  .item-bx .tag-list {
    padding: 0;
  }
  
  .item-bx.item-list {
    display: flex;
    margin-bottom: 35px;
    margin-top: 20px;
  }
  
  .item-bx.item-list .dz-media {
    max-width: 85px;
    min-width: 85px;
    margin-right: 10px;
  }
  
  .item-bx.item-list .item-title {
    margin-bottom: 5px;
  }
  
  .item-bx.item-list .dz-meta ul {
    justify-content: space-between;
    align-items: center;
  }
  
  .item-bx.item-list .dz-info {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  
  .icon-bx-left {
    display: flex;
    align-items: center;
  }
  
  .icon-bx-left .icon-bx {
    margin-right: 10px;
  }
  
  .icon-bx-left .icon-bx path[fill],
  .icon-bx-left .icon-bx path,
  .icon-bx-left .icon-bx circle {
    fill: #04764e;
  }
  
  .icon-bx-left .icon-bx i,
  .icon-bx-left .icon-bx svg {
    color: #04764e;
  }
  
  .icon-bx-left p {
    margin: 0;
  }
  
  .icon-bx-left .title {
    margin: 0;
  }
  
  .icon-color {
    color: var(--color-icon);
  }
  
  .color-sheet {
    display: block;
    border-radius: 5px;
    background-color: #fff;
    padding: 0;
    margin-bottom: 0;
    width: 35px;
    height: 35px;
    text-align: center;
    line-height: 40px;
  }
  
  .color-sheet i,
  .color-sheet svg {
    font-size: 16px;
    color: #000;
  }
  
  .dark-light {
    width: 35px;
    height: 35px;
    position: relative;
    margin: 0 0 0 10px;
    padding: 0;
    display: block;
  }
  
  .dark-light li {
    position: relative;
  }
  
  .dark-light li.demo-theme-picker {
    position: absolute;
    display: inline-block;
    padding: 0;
    border: 0;
    box-shadow: unset;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 15px;
    color: #000;
  }
  
  .dark-light li.demo-theme-picker:after {
    font-weight: 700;
    font-family: var(--f7-font-family);
  }
  
  .dark-light li.demo-theme-picker.light:after {
    content: '\f185';
  }
  
  .dark-light li.demo-theme-picker.dark:after {
    content: '\f186';
  }
  
  .dark-light li.demo-theme-picker.active {
    display: none;
  }
  
  .setting-area {
    display: flex;
    align-items: center;
  }
  
  .sub-title {
    color: #252525;
    margin-bottom: 12px;
  }
  
  .blog-list ul {
    margin: 0;
    padding: 0;
  }
  
  .blog-list ul li {
    list-style: none;
    margin-bottom: 20px;
  }
  
  .blog-box {
    width: 100%;
    height: 120px;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  
  .blog-box:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(37, 37, 37, 0.54);
    backdrop-filter: blur(1.5px);
  }
  
  .blog-box .title {
    margin: 0;
    font-weight: 500;
    font-size: 24px;
    color: #fff;
  }
  
  .blog-box .detail {
    z-index: 1;
    color: #fff;
  }
  
  .blog-tag {
    clear: both;
    display: table;
    margin-bottom: 10px;
  }
  
  .blog-tag a {
    position: relative;
    padding: 6px 15px;
    display: inline-block;
    margin: 0 8px 8px 0;
    font-size: 14px;
    color: #fff;
    border-radius: 20px !important;
    line-height: 1.4;
    border: 0;
    background: #04764e;
    border-radius: 0;
  }
  
  .blog-detail img {
    width: 100%;
    object-fit: cover;
  }
  
  .author-bx {
    text-align: center;
    padding: 30px 0;
  }
  
  .author-bx .dz-media {
    height: 105px;
    width: 105px;
    min-width: 105px;
    position: relative;
    box-sizing: border-box;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 25px;
  }
  
  .author-bx .dz-media img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  
  .author-bx .name {
    margin: 0 0 10px;
    font-size: 28px;
  }
  
  .author-bx p {
    margin: 0;
    font-size: 16px;
  }
  
  .widget_getintuch ul {
    padding: 0;
    margin: 0;
  }
  
  .widget_getintuch ul li {
    display: flex;
    width: 100%;
    margin-bottom: 25px;
  }
  
  .widget_getintuch ul li .icon-bx {
    height: 54px;
    min-width: 54px;
    text-align: center;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    margin-right: 15px;
  }
  
  .widget_getintuch ul li .icon-bx svg {
    height: 54px;
  }
  
  .widget_getintuch ul li .sub-title {
    font-size: 12px;
    margin: 0 0 10px;
    font-weight: 500;
  }
  
  .widget_getintuch ul li .title {
    margin: 0;
  }
  
  .main-logo.center {
    text-align: center;
  }
  
  .main-logo.center .logo-name {
    font-size: 38px;
    margin: 10px 0 0;
  }
  
  .main-logo.center p {
    margin: 10px 0 0;
  }
  
  .main-logo.left {
    position: relative;
    display: flex;
    align-items: center;
    text-align: left;
  }
  
  .main-logo.left .logo-icon {
    margin-right: 10px;
    width: 100px;
    height: 100px;
    padding: 20px;
    margin: 0 auto;
  }
  
  .dark .main-logo.left .logo-icon {
    background-color: gray !important;
    border-radius: 30px !important;
  }
  
  .main-logo.left .logo-icon img {
    object-fit: contain;
    width: 100%;
    height: 100%;
  }
  
  .main-logo.left .logo-name {
    font-size: 28px;
    margin: 0;
    line-height: 30px;
  }
  
  .main-logo.left p {
    margin: 0;
  }
  
  .welcome-screen .welcome-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    padding-top: 80px;
    padding-bottom: 40px;
  }
  
  @media (max-width: 328px) {
    .welcome-screen .welcome-inner {
      height: auto;
    }
  }
  
  @media (max-width: 1024px) {
    .welcome-logo {
      height: 30%;
      width: 20%;
    }
  }
  
  @media (max-width: 991px) {
    .welcome-logo {
      height: 30%;
      width: 30%;
    }
  }
  
  @media (max-width: 867px) {
    .welcome-logo {
      height: 50%;
      width: 50%;
    }
  }
  
  @media (max-width: 767px) {
    .welcome-logo {
      height: 50%;
      width: 60%;
    }
  }
  
  @media (max-width: 512px) {
    .welcome-logo {
      height: 50%;
      width: 70%;
    }
  }
  
  @media (max-width: 467px) {
    .welcome-logo {
      height: 50%;
      width: 90%;
    }
  }
  
  .error-page {
    display: block;
    text-align: center;
  }
  
  .error-page .icon-bx {
    margin: 0 0 10px;
  }
  
  .error-page .title {
    font-size: 36px;
    line-height: 36px;
    margin: 0 0 12px;
  }
  
  .error-page p {
    margin: 0;
    font-size: 15px;
  }
  
  .map-dir {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    padding: 15px 25px;
    background-color: var(--f7-theme-color-white);
    display: inline-block;
    border-radius: 22px;
    position: relative;
  }
  
  .map-dir:after {
    content: '';
    background-color: inherit;
    height: 20px;
    width: 20px;
    position: absolute;
    left: 18px;
    top: -6px;
    transform: rotate(45deg);
    box-shadow: -5px -3px 10px rgba(0, 0, 0, 0.1);
  }
  
  .track-content {
    position: relative;
  }
  
  .location-tracking iframe {
    height: 100%;
    width: 100%;
    border: 0;
    margin-bottom: -60px;
  }
  
  .location-tracking .fixed-content {
    bottom: 0;
    left: 0;
    right: 0;
  }
  
  .location-tracking .map-dir {
    position: absolute;
    left: 115px;
    top: -185px;
  }
  
  .location-tracking .bottom-wraper {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: 0.5s ease all;
  }
  
  .location-tracking .bottom-wraper.hide-chofer {
    bottom: -230px !important;
  }
  
  .location-tracking .bottom-wraper.hide-pasajero {
    bottom: -270px !important;
  }
  
  .location-tracking .w100 {
    width: 100%;
  }
  
  .hide-element {
    display: none !important;
  }
  
  .delivery-man {
    padding: 10px 25px 36px;
    background-color: var(--f7-theme-color-white);
    border-radius: 22px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    z-index: 1;
    position: relative;
    margin: 0 auto -30px;
  }
  
  .delivery-man .inner-content {
    display: flex;
    align-items: center;
  }
  
  .delivery-man .icon-area {
    display: flex;
    margin-left: auto;
  }
  
  .delivery-man .dz-media {
    height: 50px;
    max-width: 50px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 20px;
  }
  
  .delivery-man .dz-media img {
    width: 100%;
  }
  
  .delivery-man .title {
    margin: 0;
    font-weight: 500;
  }
  
  .delivery-man p {
    margin: 0;
  }
  
  .delivery-man .icon-cell {
    margin-left: 10px;
    height: 50px;
    width: 50px;
    /* background-color: rgba(255, 255, 255, 0.2); */
    background-color: white;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .delivery-man .icon-cell svg {
    height: 28px;
  }
  
  .track-list {
    padding: 0;
    margin: 0;
    position: relative;
  }
  
  .track-list li {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
  }
  
  .track-list li .icon-bx {
    height: 50px;
    width: 50px;
    text-align: center;
    line-height: 58px;
    border-radius: 50px;
    border: 1px solid;
    border-color: var(--f7-theme-color);
    margin-right: 20px;
    background-color: var(--f7-theme-color-white);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .track-list li .icon-bx svg {
    height: 28px;
  }
  
  .track-list li .icon-bx.location {
    background-color: var(--f7-theme-color-light);
    border-color: var(--f7-theme-color-light);
  }
  
  .track-list li .icon-bx path[fill],
  .track-list li .icon-bx path {
    fill: var(--f7-theme-color);
  }
  
  .track-list li .icon-bx i,
  .track-list li .icon-bx svg {
    color: var(--f7-theme-color);
  }
  
  .track-list li .title {
    margin: 0;
  }
  
  .track-list li p {
    margin: 0;
    font-size: 12px;
  }
  
  .track-list li:last-child {
    margin-bottom: 0;
  }
  
  .track-list li .button {
    text-transform: capitalize;
    font-weight: 700;
    margin-left: auto;
  }
  
  .track-list:after {
    content: '';
    height: calc(90% - 10px);
    left: 25px;
    top: 10px;
    width: 1px;
    border-left: 2px dashed rgba(0, 0, 0, 0.3);
    position: absolute;
    z-index: -1;
  }
  
  /* Message List */
  .search-list-bar {
    margin-top: 20px;
    margin-bottom: 0;
    padding-left: 0;
    padding-right: 0;
  }
  
  .search-list-bar ul {
    background: transparent;
  }
  
  .search-list-bar ul:after,
  .search-list-bar ul:before {
    content: none;
  }
  
  .search-list-bar ul li {
    padding: 0;
  }
  
  .search-list-bar .item-content {
    padding: 10px 30px;
  }
  
  .search-list-bar .item-content .item-media {
    width: 58px;
    height: 58px;
    padding: 0;
    margin: 0;
    position: relative;
  }
  
  .search-list-bar .item-content .item-media img {
    width: 100%;
    border-radius: 18px;
    overflow: hidden;
  }
  
  .search-list-bar .item-content .online {
    height: 12px;
    width: 12px;
    border-radius: 15px;
    border: 4px solid var(--f7-theme-color-light);
    background-color: #009600;
    position: absolute;
    left: -8px;
    bottom: -7px;
  }
  
  .search-list-bar .item-content .item-inner {
    padding: 0;
    margin-left: 15px;
  }
  
  .search-list-bar .item-content .item-inner:after,
  .search-list-bar .item-content .item-inner:before {
    content: none;
  }
  
  .search-list-bar .item-content .item-inner .item-text {
    font-size: 12px;
    margin-bottom: 0;
    margin-top: 0;
    color: #000;
    font-weight: 500;
  }
  
  .search-list-bar .item-content .item-inner .item-title-row {
    padding-right: 0;
  }
  
  .search-list-bar .item-content .item-inner .item-title-row:after,
  .search-list-bar .item-content .item-inner .item-title-row:before {
    content: none;
  }
  
  .search-list-bar .item-content .item-inner .item-title-row .item-title {
    font-size: 16px;
    margin: 0 0 2px;
    font-weight: 600;
    color: #1b1b1b;
  }
  
  .search-list-bar .item-content .item-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
  }
  
  .search-list-bar .item-content .item-footer span {
    font-size: 12px;
    align-items: center;
    color: #898a8d;
    font-weight: 500;
  }
  
  .search-list-bar .item-content .item-footer span i,
  .search-list-bar .item-content .item-footer span svg {
    margin-left: 5px;
  }
  
  .messages-navbar.navbar .title .name {
    margin: 0;
  }
  
  .messages-navbar.navbar .title p {
    font-size: 14px;
    margin: 0;
    opacity: 0.5;
    font-weight: 500;
  }
  
  .messagebar {
    left: 50%;
    transform: translateX(-50%);
  }
  
  .messagebar:before,
  .messagebar:after {
    content: none;
  }
  
  .messagebar .toolbar-inner {
    border: 1px solid #dadada;
    border-radius: 18px;
    padding: 6px;
    background-color: var(--f7-theme-color-white);
  }
  
  .messagebar .toolbar-inner .emoji-icon {
    left: 10px;
    margin: 0;
    padding: 0;
  }
  
  .messagebar .toolbar-inner .demo-send-message-link {
    height: 52px;
    width: 52px;
    padding-bottom: 10px;
    /* line-height: 52px; */
    /* border-radius: 18px; */
    font-size: 18px;
    /* color: #fff; */
    /* background-color: #fff; */
    /* box-shadow: 0px 0px 10px 0 rgba(0, 0, 0, 0.2); */
    text-align: center;
    opacity: 1 !important;
  }
  
  .messagebar .toolbar-inner textarea {
    height: 45px;
    padding: 10px 15px;
  }
  
  .messagebar .toolbar-inner .messagebar-attachments {
    border-bottom: 0;
  }
  
  .messagebar .messagebar-area {
    margin: 0;
  }
  
  .messagebar .messagebar-sheet {
    background-color: var(--f7-theme-color-white);
  }
  
  .messages {
    margin: 0 0 20px !important;
    background: transparent;
  }
  
  .messages .messages-title {
    font-weight: 600;
    position: relative;
    margin: 20px 0;
  }
  
  .messages .messages-title:before {
    content: '';
    width: 100%;
    height: 1px;
    position: absolute;
    top: 6px;
    background-color: #ebebeb;
    left: 0;
    z-index: -1;
  }
  
  .messages .messages-title span {
    background-color: var(--f7-theme-color-white);
    padding: 2px 8px;
  }
  
  .messages .message .message-avatar {
    height: 42px;
    width: 42px;
    border-radius: 8px;
    overflow: hidden;
  }
  
  .messages .message .message-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .messages .message .message-content .message-bubble {
    font-size: 16px;
    padding: 4px 15px;
    line-height: 22px;
  }
  
  .messages .message .message-content .message-bubble:before {
    content: none;
  }
  
  .messages .message .message-content .message-name {
    /* display: none; */
  }
  
  .messages .message.message-received .message-content .message-bubble {
    background: #f6dbb3;
    color: #262626;
    border-radius: 18px 18px 18px 0;
  }
  
  .messages .message.message-received .message-avatar + .message-content {
    margin-left: 15px;
  }
  
  .messages .message.message-sent .message-content .message-bubble {
    color: #fff;
    border-radius: 18px 0 18px 18px;
  }
  
  .add-wishlist-btn {
    display: flex;
  }
  
  .add-wishlist-btn .fas {
    display: none;
  }
  
  .add-wishlist-btn.active .far {
    display: none;
  }
  
  .add-wishlist-btn.active .fas {
    display: block;
  }
  
  .navbar .add-wishlist-btn i,
  .navbar .add-wishlist-btn svg {
    font-size: 24px;
    margin: 0;
    color: #fff;
  }
  
  .item-details .button span {
    opacity: 0.5;
    margin-left: 10px;
  }
  
  .item-details .stepper {
    border: 1px solid #c4c4c4;
    height: 42px;
  }
  
  .item-details .stepper .stepper-button-minus,
  .item-details .stepper .stepper-button-plus,
  .item-details .stepper .stepper-input-wrap {
    border: 0;
  }
  
  .item-details .stepper input {
    font-size: 18px;
    color: #000;
  }
  
  .item-details .price-bx {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
  }
  
  .item-details .price-bx .price {
    margin: 0;
  }
  
  .item-details .price-bx .price i,
  .item-details .price-bx .price svg {
    font-size: 30px;
    margin-right: 8px;
  }
  
  .item-details .price-bx .price sup {
    line-height: 14px;
    font-size: 14px;
    margin-right: 3px;
  }
  
  .item-details .price-bx .price del {
    color: #000;
    opacity: 0.5;
    font-weight: 600;
    font-size: 16px;
    margin-left: 5px;
  }
  
  .dz-range {
    margin: 35px 0;
  }
  
  .dz-range .range-slider .range-bar {
    height: 12px;
    border-radius: 50px;
    background-color: #ececec;
  }
  
  .dz-range .range-slider .range-knob-wrap {
    width: 25px;
    height: 25px;
    top: 8px;
  }
  
  .dz-range .range-slider .range-knob-wrap .range-knob:after {
    background-color: var(--f7-theme-color);
    opacity: 0.2;
    border-radius: 50%;
  }
  
  .dz-range .range-slider .range-knob-wrap.range-knob-active-state .range-knob {
    transform: scale(1);
  }
  
  .dz-range .label-list {
    padding: 0;
    display: flex;
    justify-content: space-between;
    margin: 25px 0 0;
  }
  
  .dz-range .label-list li {
    display: inline-block;
    font-size: 16px;
    padding: 0 5px;
  }
  
  .item-rating {
    height: 64px;
    width: 64px;
    text-align: center;
    line-height: 64px;
    background-color: #ff9838;
    border-radius: 50%;
    font-size: 24px;
    color: #fff;
    font-weight: 600;
    position: absolute;
    right: 30px;
    top: -30px;
    box-shadow: 0 0 20px rgba(255, 152, 56, 0.5);
  }
  
  /* Notification List */
  .notification-list {
    padding: 0;
  }
  
  .notification-list ul {
    padding: 0;
    margin: 0;
  }
  
  .notification-list ul li {
    margin: 0 0 15px 0;
    display: block;
  }
  
  .notification-list ul li .card {
    padding: 20px 20px;
    border-radius: 8px;
    margin: 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  
  .notification-list ul li .item-title {
    margin: 0 0 12px;
  }
  
  .notification-list ul li .item-title i,
  .notification-list ul li .item-title svg {
    font-size: 14px;
    margin-right: 5px;
  }
  
  .notification-list ul li .item-text {
    font-size: 14px;
    margin-bottom: 15px;
    line-height: 22px;
  }
  
  .notification-list ul li .item-time {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #787878;
  }
  
  .notification-list ul li .time i,
  .notification-list ul li .time svg {
    font-size: 16px;
    margin-right: 3px;
  }
  
  .notification-list ul li .mark {
    font-weight: 500;
  }
  
  .active-badge {
    position: relative;
    display: flex;
  }
  
  .active-badge .active {
    font-size: 6px;
    border: 2px solid var(--f7-theme-color-white);
    border-radius: 50%;
    position: absolute;
    right: 0;
    top: 0;
  }
  
  /* Sidebar Menu */
  .sidebar-menu .main-logo {
    padding: 0 5px;
    align-items: center;
    background-color: var(--color-panel);
  }
  
  .sidebar-left:after {
    content: none;
  }
  
  .sidebar-left .title {
    margin-top: 0;
    margin-bottom: 0;
    padding: 30px;
  }
  
  .sidebar-left .panel-close {
    color: rgba(var(--f7-theme-color), 0.8);
    position: absolute;
    right: 5%;
    top: 2%;
    line-height: 1;
  }
  
  .panel-close {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
  
  .panel-close .fa-circle-xmark {
    font-size: 25px;
    /* color: var(--color-font-primary);  */
  }
  
  .sidebar-left .nav-bar {
    padding: 20px 20px 20px 0;
    margin: 0;
    background-color: var(--color-panel);
    border-radius: 0px;
  }
  
  .sidebar-left .nav-bar ul {
    margin: 0;
    padding: 0;
  }
  
  .sidebar-left .nav-bar ul:before,
  .sidebar-left .nav-bar ul:after {
    content: none;
  }
  
  .sidebar-left .nav-bar ul li {
    list-style: none;
    display: block;
    padding: 0 !important;
  }
  
  .sidebar-left .nav-bar ul li .item-link {
    display: flex;
    align-items: center;
    color: var(--color-front-menu) !important;
    font-size: 16px;
    padding: 15px 25px;
    position: relative;
    border-radius: 0 8px 8px 0 !important;
    margin: 0;
    background-color: transparent;
  }
  
  .sidebar-left .nav-bar ul li .item-link svg,
  .sidebar-left .nav-bar ul li .item-link img {
    margin-right: 15px;
  }
  
  .sidebar-left .nav-bar ul li .item-link i,
  .sidebar-left .nav-bar ul li .item-link svg {
    transform: scale(1.4);
    -moz-transform: scale(1.4);
    -webkit-transform: scale(1.4);
    -ms-transform: scale(1.4);
    -o-transform: scale(1.4);
    margin-right: 20px;
  }
  
  .sidebar-left .nav-bar ul li .item-link path[fill],
  .sidebar-left .nav-bar ul li .item-link path {
    fill: var(--color-front-menu);
  }
  
  .sidebar-left .nav-bar ul li .item-link i,
  .sidebar-left .nav-bar ul li .item-link svg {
    color: #adadad;
  }
  
  .sidebar-left .nav-bar ul li .item-link.item-selected path[fill],
  .sidebar-left .nav-bar ul li .item-link.item-selected path {
    fill: var(--color-front-menu);
  }
  
  .sidebar-left .nav-bar ul li .item-link.item-selected i,
  .sidebar-left .nav-bar ul li .item-link.item-selected span {
    color: var(--color-front-menu);
  }
  
  .sidebar-left .nav-bar ul li .item-link.logout-link {
    margin-top: 30px;
  }
  
  .sidebar-left .nav-bar ul li .item-link.logout-link path[fill],
  .sidebar-left .nav-bar ul li .item-link.logout-link path {
    fill: #ff8484;
  }
  
  .sidebar-footer {
    padding: 35% 30px;
    background-color: var(--color-panel);
  }
  
  .sidebar-footer .name {
    color: #b1b1c3;
    font-weight: 500;
    font-size: 15px;
    margin-top: 0;
    margin-bottom: 5px;
  }
  
  .sidebar-footer p {
    color: #b1b1c3;
    font-weight: 400;
    font-size: 12px;
    margin-top: 0;
    margin-bottom: 0;
  }
  
  .sidebar-left + .view-main {
    -webkit-transition: all 0.2s;
    -ms-transition: all 0.2s;
    transition: all 0.2s;
    height: 100%;
    top: 0;
    border-radius: 0;
    box-shadow: none;
    transition-property: inherit !important;
    -moz-transition-property: inherit !important;
    -webkit-transition-property: inherit !important;
    -o-transition-property: inherit !important;
    transition-duration: 0.5s !important;
    -moz-transition-duration: 0.5s !important;
    -webkit-transition-duration: 0.5s !important;
    -o-transition-duration: 0.5s !important;
  }
  
  /* .sidebar-left.panel-in+.view-main {
    height: calc(100% - 130px);
    top: 90px;
    border-radius: 24px;
    box-shadow: -5px 5px 30px 0 var(--f7-theme-color-light);
  } */
  
  .write-reviews-box {
    padding-top: 30px;
    padding-bottom: 30px;
  }
  
  .write-reviews-box .form-elements ul .item-content .item-inner .item-input-wrap textarea.form-control {
    height: 110px;
    border-width: 2px;
    padding: 20px;
    border-radius: 18px;
  }
  
  .write-reviews-box .form-elements .list {
    margin-bottom: 0;
  }
  
  .rating-info {
    margin: 40px 0 30px;
    text-align: center;
  }
  
  .rating-info .rating-text {
    margin: 0 0 20px;
    font-size: 50px;
    line-height: 50px;
  }
  
  .rating-info .rating-list {
    padding: 0;
    display: flex;
    justify-content: center;
  }
  
  .rating-info .rating-list li {
    display: inline-block;
    font-size: 24px;
    background-color: #b6b6b6;
    height: 50px;
    width: 50px;
    border-radius: 50px;
    line-height: 50px;
    color: #fff;
    margin: 0 3px;
  }
  
  .rating-info .rating-list li.rating-star {
    background-color: #ff8730;
  }
  
  .review-product {
    border-bottom: 1px solid var(--border-color);
    padding: 28px 0;
    background-color: var(--f7-theme-color-white);
  }
  
  .review-product .inner-content {
    display: flex;
    align-items: center;
  }
  
  .review-product .dz-media {
    height: 105px;
    max-width: 105px;
    min-width: 105px;
    border-radius: 12px;
    overflow: hidden;
    margin-right: 22px;
  }
  
  .review-product .dz-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .review-product .title {
    margin: 0 0 10px;
    font-weight: 500;
  }
  
  .review-product p {
    margin: 0;
    font-size: 16px;
  }
  
  .rewards-box {
    padding: 25px 30px;
    border-radius: 18px;
    position: relative;
    z-index: 1;
    overflow: hidden;
  }
  
  .rewards-box .sub-title {
    margin: 0 0 10px;
    color: #fff;
    font-weight: 500;
  }
  
  .rewards-box .title {
    color: #fff;
    font-size: 34px;
    margin: 0;
  }
  
  .rewards-box .badge {
    background-color: rgba(255, 255, 255, 0.3);
    padding: 12px 18px;
    border-radius: 8px;
    height: auto;
    font-size: 14px;
    line-height: 14px;
    margin-top: 25px;
  }
  
  .rewards-box:before,
  .rewards-box:after {
    content: '';
    position: absolute;
    width: 270px;
    height: 270px;
    z-index: -1;
    border-radius: 50%;
  }
  
  .rewards-box:before {
    left: -140px;
    bottom: -125px;
    background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.01) 0%, black 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.01) 0%, black 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.01) 0%, black 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    opacity: 0.1;
  }
  
  .rewards-box:after {
    right: -140px;
    top: -125px;
    background: #007862;
    /* Old browsers */
    background: -moz-linear-gradient(top, #007862 20%, #1dcf8f 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #007862 20%, #1dcf8f 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #007862 20%, #1dcf8f 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    opacity: 0.9;
    transform: rotate(130deg);
  }
  
  .rewards-box .bg-icon {
    position: absolute;
    right: -20px;
    bottom: -20px;
  }
  
  .rewards-box .icon-bx {
    float: right;
  }
  
  .rewards-list {
    padding: 0;
  }
  
  .rewards-list > ul {
    padding: 0;
    margin: 0;
  }
  
  .rewards-list > ul > li {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    justify-content: space-between;
    padding: 15px 28px;
  }
  
  .rewards-list > ul > li .title {
    margin: 0 0 15px;
    font-weight: 500;
  }
  
  .rewards-list > ul > li .pts-bx {
    text-align: right;
    margin-left: 30px;
  }
  
  .rewards-list > ul > li .pts-bx .points {
    margin: 0 0 10px;
  }
  
  .rewards-list > ul > li .pts-bx p {
    margin: 0;
  }
  
  .rewards-list .dz-meta ul {
    padding: 0;
    margin: 0;
  }
  
  .rewards-list .dz-meta ul li {
    display: inline-block;
    font-size: 12px;
    color: #7e7e7e;
    padding-right: 10px;
    margin-right: 10px;
    font-weight: 500;
  }
  
  .rewards-list .dz-meta ul li:after {
    content: '|';
    right: 0;
    position: absolute;
    color: inherit;
  }
  
  .rewards-list .dz-meta ul li:last-child {
    padding-right: 0;
    margin-right: 0;
  }
  
  .rewards-list .dz-meta ul li:last-child:after {
    content: none;
  }
  
  /* Cart Item */
  .cart-list-area {
    padding-left: 0;
    padding-right: 0;
  }
  
  .cart-list {
    overflow: hidden;
    margin: 0;
  }
  
  .cart-list ul:before,
  .cart-list ul:after {
    content: none;
  }
  
  .cart-list .cart-item {
    background-color: #ff0000;
    overflow: unset;
    margin: 6px 0;
  }
  
  .cart-list .cart-item.swipeout.swipeout-opened {
    z-index: 1;
  }
  
  .cart-list .cart-item .item-content {
    padding-left: 0;
    transition: all 0.5s;
  }
  
  .cart-list .cart-item .item-inner {
    background-color: var(--f7-theme-color-white);
    padding: 12px 20px;
  }
  
  .cart-list .cart-item .item-inner:after {
    content: none;
  }
  
  .cart-list .cart-item .item-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    white-space: normal;
  }
  
  .cart-list .cart-item .item-media {
    min-width: 92px !important;
    width: 103px;
    position: relative;
    padding: 0;
    border-radius: 16px;
    overflow: hidden;
    margin-right: 22px;
    height: 115px;
  }
  
  .cart-list .cart-item .item-media a {
    height: 100%;
  }
  
  .cart-list .cart-item .item-media img {
    width: 100%;
  }
  
  .cart-list .cart-item .item-info {
    width: 100%;
    justify-content: space-between;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 5px 0;
    box-sizing: border-box;
  }
  
  .cart-list .cart-item .item-foot ul {
    padding: 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 0 -10px;
  }
  
  .cart-list .cart-item .item-foot ul li {
    display: inline-block !important;
    font-size: 18px;
    font-weight: 600;
    margin: 0 10px;
  }
  
  .cart-list .cart-item .swipeout-delete {
    background-color: #ff0000;
    font-size: 28px;
  }
  
  .cart-list .cart-item.swipeout-opened .item-content {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  }
  
  .nav-wizard {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    background-color: #fff;
    padding: 25px 0 15px;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
  }
  
  .nav-wizard:before,
  .nav-wizard:after {
    content: '';
    height: 2px;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 24px;
  }
  
  .nav-wizard:before {
    background-color: var(--f7-theme-color);
  }
  
  .nav-wizard:after {
    background: -moz-linear-gradient(left, white 0%, rgba(255, 255, 255, 0) 54%, white 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, white 0%, rgba(255, 255, 255, 0) 54%, white 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 54%, white 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    z-index: 1;
  }
  
  .nav-wizard li {
    display: inline-block;
  }
  
  .nav-wizard li .nav-link {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  
  .nav-wizard li .nav-link span {
    margin-bottom: 40px;
    display: block;
    font-weight: 500;
    font-size: 16px;
    opacity: 0.4;
    color: #1b1b1b;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100px;
    overflow: hidden;
    justify-content: center;
    text-align: center;
  }
  
  .nav-wizard li .nav-link.active:before,
  .nav-wizard li .nav-link.active:after {
    content: '';
    position: absolute;
    transform: translateX(-50%);
    border-radius: 50%;
    left: 50%;
  }
  
  .nav-wizard li .nav-link.active:before {
    bottom: 0;
    height: 20px;
    width: 20px;
    border: 6px solid var(--f7-theme-color);
    background-color: #fff;
    box-sizing: border-box;
    z-index: 1;
  }
  
  .nav-wizard li .nav-link.active:after {
    bottom: -6px;
    height: 30px;
    border: 1px solid var(--f7-theme-color);
    width: 30px;
    opacity: 0.2;
  }
  
  .nav-wizard li .nav-link.active span {
    opacity: 1;
    font-weight: 600;
    font-size: 18px;
    max-width: 180px;
    width: 180px;
  }
  
  .nav-wizard li:first-child .nav-link:after {
    left: auto;
    right: 0;
  }
  
  .btn-icon {
    justify-content: space-between;
  }
  
  .btn-icon i,
  .btn-icon svg {
    font-size: 22px;
  }
  
  .payment-swiper .swiper-slide {
    width: auto;
  }
  
  .payment-card {
    width: 285px;
    height: 170px;
    position: relative;
    border-radius: 18px;
    overflow: hidden;
  }
  
  .payment-card .card-media {
    display: flex;
    width: 100%;
    height: 100%;
  }
  
  .payment-card .card-info {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 25px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    height: 100%;
  }
  
  .payment-card .card-name {
    font-size: 16px;
    color: #fff;
    font-weight: 500;
    margin: 0 0 15px;
  }
  
  .payment-card .card-number {
    color: #fff;
    font-size: 16px;
    margin: 0;
    font-weight: 300;
    letter-spacing: 2px;
  }
  
  .payment-card .bottom-info {
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .payment-card .bottom-info p {
    font-weight: 300;
    margin: 0;
    font-size: 16px;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.4);
  }
  
  .checkout-details .checkout-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
  }
  
  .checkout-details .checkout-total .title {
    margin: 0;
    font-size: 16px;
  }
  
  .checkout-details .checkout-total .checkout-total {
    margin: 0;
  }
  
  .order-details .location {
    display: flex;
    margin-bottom: 15px;
    justify-content: space-between;
    align-items: center;
  }
  
  .order-details .location .button {
    border-radius: 12px;
    padding: 15px 20px;
    text-transform: capitalize;
  }
  
  .order-details .location p {
    opacity: 0.6;
    margin: 0;
  }
  
  .order-details .author-bx {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    text-align: left;
    padding: 0;
  }
  
  .order-details .author-bx .thumb {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 20px;
  }
  
  .order-details .author-bx .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .order-details .author-bx .info {
    margin-right: 20px;
  }
  
  .order-details .author-bx .info p {
    margin: 0;
  }
  
  .order-details .author-bx .author-name {
    margin: 0;
  }
  
  .order-details .author-bx .phone {
    height: 52px;
    width: 52px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    text-align: center;
    line-height: 52px;
    margin-left: auto;
  }
  
  .order-details .author-bx .phone svg {
    height: 52px;
  }
  
  .order-details .author-bx .phone path[fill],
  .order-details .author-bx .phone path {
    fill: var(--f7-theme-color);
  }
  
  .order-details .author-bx .phone i,
  .order-details .author-bx .phone svg {
    color: var(--f7-theme-color);
  }
  
  .location-wraper .fixed-toolbar {
    background-color: var(--f7-theme-color-white);
    padding-top: 20px;
    padding-bottom: 20px;
  }
  
  .location-wraper .filter-text {
    color: #4e4e4e;
    font-weight: 500;
  }
  
  .store-card {
    border-radius: 18px;
    overflow: hidden;
    background-color: var(--f7-theme-color-white);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  }
  
  .store-card .card-media img {
    width: 100%;
    height: 100%;
    display: flex;
    object-fit: cover;
  }
  
  .store-card .title {
    margin: 0 0 10px;
  }
  
  .store-card .time {
    margin: 0;
  }
  
  .store-card .info-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .store-card .card-info {
    padding: 30px 20px 20px;
    position: relative;
  }
  
  .store-card .btn-dir {
    background-color: #1d3eb1;
    color: #fff;
    text-transform: capitalize;
    border-radius: 30px;
    position: absolute;
    top: -18px;
    right: 20px;
    padding: 0 16px;
  }
  
  .store-card .location {
    display: flex;
    align-items: center;
    font-weight: 500;
  }
  
  .store-card .location i,
  .store-card .location svg {
    margin-right: 5px;
  }
  
  .wishlist-bx {
    position: relative;
    background-color: var(--f7-theme-color-white);
    overflow: hidden;
    border-radius: 18px;
    display: flex;
    padding: 12px 25px 12px 12px;
    align-items: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    /* Bookmark */
  }
  
  .wishlist-bx p {
    font-size: 12px;
    margin: 0;
    font-weight: 500;
    line-height: 12px;
  }
  
  .wishlist-bx .dz-info {
    padding: 0 0 0 15px;
    width: 100%;
  }
  
  .wishlist-bx .item-title {
    font-weight: 600;
    margin: 0 0 15px;
    white-space: normal;
  }
  
  .wishlist-bx .dz-head {
    margin-bottom: 15px;
  }
  
  .wishlist-bx .dz-media {
    width: 93px;
    min-width: 93px;
    border-radius: 18px;
    overflow: hidden;
    position: relative;
  }
  
  .wishlist-bx .dz-media img {
    width: 100%;
    height: 100%;
    display: flex;
  }
  
  .wishlist-bx .dz-meta ul {
    justify-content: space-between;
    background-color: transparent;
  }
  
  .wishlist-bx .price {
    font-weight: 600;
    font-size: 18px;
    color: #000;
  }
  
  .wishlist-bx .price del {
    font-size: 12px;
    font-weight: 500;
    color: #929292;
    margin-left: 8px;
  }
  
  .wishlist-bx .qty {
    font-size: 16px;
    line-height: 16px;
    margin-left: auto;
  }
  
  .wishlist-bx .qty strong {
    font-weight: 600;
    margin-right: 5px;
  }
  
  .wishlist-bx .rating {
    display: flex;
    font-size: 12px;
    align-items: center;
  }
  
  .wishlist-bx .rating i,
  .wishlist-bx .rating svg {
    color: #ffa800;
    margin-right: 5px;
  }
  
  .wishlist-bx .dz-footer {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .wishlist-bx.item-list {
    display: flex;
  }
  
  .wishlist-bx.item-list .dz-media {
    width: 120px;
    min-width: 120px;
  }
  
  .wishlist-bx.item-list .dz-media img {
    object-fit: cover;
  }
  
  .wishlist-bx .bookmark-btn {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-family: var(--f7-font-family);
  }
  
  .wishlist-bx .bookmark-btn input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
    display: none;
  }
  
  .wishlist-bx .bookmark-btn input:checked ~ .checkmark:before {
    color: var(--f7-theme-color);
  }
  
  .wishlist-bx .bookmark-btn .checkmark {
    font-weight: 900;
    line-height: 1;
  }
  
  .wishlist-bx .bookmark-btn .checkmark:after {
    content: '\f004';
    position: absolute;
    display: none;
  }
  
  .wishlist-bx .bookmark-btn .checkmark:before {
    content: '\f004';
    font-size: 20px;
    color: #b9bcd3;
  }
  
  /* Theme Dark */
  .dark h1,
  .dark h2,
  .dark h3,
  .dark h4,
  .dark h5,
  .dark h6,
  .dark h1 a,
  .dark h2 a,
  .dark h3 a,
  .dark h4 a,
  .dark h5 a,
  .dark h6 a,
  .dark .navbar .navbar-inner .title {
    color: #fff;
  }
  
  .dark body {
    color: #cecece;
  }
  
  /* Border Color */
  .dark .navbar,
  .dark .menubar-area,
  .dark .border-top,
  .dark .searchbar.search-box .searchbar-input-wrap input,
  .dark .form-elements ul .item-content .item-inner .item-input-wrap .form-control,
  .dark .messagebar .toolbar-inner,
  .dark .page-content .searchbar.search-box .searchbar-input-wrap input,
  .dark .form-elements ul .item-content .item-inner .item-input-wrap .number-select,
  .dark .search-list-bar ul li,
  .dark .button-social.google,
  .dark .navbar.navbar-style-1 a.link,
  .dark .categories-bx,
  .dark .item-details .stepper {
    border-color: #333333 !important;
  }
  
  .dark input {
    color: rgba(255, 255, 255, 0.9) !important;
  }
  
  .dark input::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
  }
  
  .dark .sidebar-left .nav-bar,
  .dark .main-logo,
  .dark .sidebar-footer,
  .dark .groupChart,
  .dark .mapLayerOptions ul,
  .dark .navbar .navbar-inner,
  .dark .message-sent .message-bubble,
  .dark .list li.accordion-item ul,
  .dark #containerAdministradores ul,
  .dark .card-content,
  .dark .messages .messages-title:before {
    background-color: var(--f7-page-bg-color) !important;
  }
  
  .dark .sidebar-left .nav-bar ul li .item-link,
  .dark .item-link a,
  .dark .display-flex.flex-direction-row.justify-content-space-between.align-items-center,
  .dark .card-header {
    color: white !important;
  }
  
  .dark .input,
  .dark .messagebar .toolbar-inner .demo-send-message-link,
  .item-input {
    background-color: transparent !important;
  }
  
  .dark .item-input .item-inner {
    background-color: var(--color-input-dark) !important;
  }
  
  /* Background Color */
  .dark body,
  .dark .page,
  .dark .page-content,
  .dark .tab-style-1,
  .dark .footer-button,
  .dark .page-onboading .page-content,
  .dark .card-featured .icon-bx,
  .dark .light.page,
  .dark .light .page-content,
  .dark .light .navbar,
  .dark .light .toolbar,
  .dark .toolbar.messagebar,
  .dark .nav-wizard,
  .dark .dz-accordion .accordion-item .item-link.item-content .item-title:before {
    background: #2f2f2f !important;
  }
  
  .dark .navbar .navbar-bg {
    background: var(--f7-page-bg-color) !important;
  }
  
  .dark .page.bg-gray,
  .dark .page-content.bg-gray {
    background: #080808 !important;
  }
  
  .dark .nav-wizard:after {
    background: -moz-linear-gradient(left, #151515 0%, rgba(255, 255, 255, 0) 54%, #151515 100%);
    background: -webkit-linear-gradient(left, #151515 0%, rgba(255, 255, 255, 0) 54%, #151515 100%);
    background: linear-gradient(to right, #151515 0%, rgba(255, 255, 255, 0) 54%, #151515 100%);
  }
  
  /* Background Color Dark 2 */
  .dark .view-logo .logo-icon,
  .dark .page-content .searchbar.search-box .searchbar-input-wrap input,
  .dark .tabbar.tab-style-1 .toolbar-inner,
  .dark .button.button-gray,
  .dark .categories-bx,
  .dark .dz-range .range-slider .range-bar,
  .dark .navbar.navbar-style-1 .navbar-inner .link.back,
  .dark .store-card,
  .dark .notification-list .card,
  .dark .widget_getintuch ul li .icon-bx,
  .dark .wishlist-bx {
    background-color: #000;
  }
  
  /* Theme Color White */
  .dark .text-black,
  .dark .form-elements ul .item-content .item-inner .item-input-wrap .form-control,
  .dark .navbar.navbar-transparent.navbar-transparent-visible .title,
  .dark .navbar.navbar-transparent.navbar-transparent-visible a,
  .dark .navbar.navbar-transparent.navbar-transparent-visible i,
  .dark .navbar a.link,
  .dark .tab-style-1 .tab-link.tab-link-active,
  .dark .search-list-bar .item-content .item-inner .item-title-row .item-title,
  .dark .tabbar.tab-style-1 .tab-link.tab-link-active,
  .dark .tabbar.tab-style-2 .tab-link,
  .dark .panel-close i,
  .dark .top-bar span,
  .dark .featured-card .location,
  .dark .company-details .head-details .block-btn .title,
  .dark .get-started p,
  .dark .item-bx .price,
  .dark .item-details .price-bx .price del,
  .dark .item-details .stepper input {
    color: #cecece;
  }
  
  /* Theme Dark Color Fill White */
  .dark .navbar a.link path[fill],
  .dark .navbar a.link path,
  .dark .navbar a.link rect,
  .dark .navbar a.link rect[fill],
  .dark .navbar a.link [fill],
  .dark .navbar.navbar-style-1 .navbar-inner .link.back [fill],
  .dark .navbar.navbar-style-1 .navbar-inner .link.back path {
    fill: var(--color-icon-dark);
  }
  
  /* Theme Color Second */
  .dark .search-list-bar .item-content .item-inner .item-text,
  .dark .form-elements ul .item-content .item-inner .item-input-wrap .form-control::placeholder,
  .dark .account-area p,
  .dark .account-area .form-text {
    color: #969696;
  }
  
  .dark .navbar.navbar-style-1.navbar-transparent .link.back {
    background-color: rgba(255, 255, 255, 0.2);
  }
  
  .dark .navbar.navbar-style-1.navbar-transparent.navbar-transparent-visible .title,
  .dark .dz-accordion .accordion-item .item-link.item-content .item-title,
  .dark .checkbox-form-control .checkbox-text,
  .dark .nav-wizard li .nav-link span,
  .dark .wishlist-bx .price {
    color: #fff;
  }
  
  /* Background Color White */
  .dark .swiper-pagination-bullet {
    background: #fff;
  }
  
  /* Theme Color Dark Variable */
  .ios .dark,
  .ios.dark {
    --f7-text-color: #fff;
    --f7-bars-bg-color: #121212;
    --f7-bars-bg-color-rgb: 22, 22, 22;
    --f7-bars-border-color: rgba(255, 255, 255, 0.16);
    --f7-page-bg-color: #151515;
  }
  
  :root .dark,
  :root.dark,
  :root.md.dark {
    --f7-bars-text-color: #fff;
    --f7-block-title-text-color: #fff;
    --f7-block-strong-border-color: rgba(255, 255, 255, 0.15);
    --f7-block-title-medium-text-color: #fff;
    --f7-block-title-large-text-color: #fff;
    --f7-block-strong-bg-color: #030b00;
    --f7-list-button-border-color: rgba(255, 255, 255, 0.15);
    --f7-list-bg-color: #030b00;
    --f7-list-border-color: rgba(255, 255, 255, 0.15);
    --f7-list-item-border-color: rgba(255, 255, 255, 0.15);
    --f7-list-item-divider-border-color: rgba(255, 255, 255, 0.15);
    --f7-list-item-divider-bg-color: #232323;
    --f7-list-group-title-bg-color: #232323;
    --f7-list-chevron-icon-color: rgba(255, 255, 255, 0.3);
    --f7-card-bg-color: #030b00;
    --f7-bars-bg-color: #030b00;
    --f7-theme-color-light: #040e01;
    --f7-theme-color-white: #151515;
    --border-color: #333333;
    --f7-page-bg-color: #151515;
  }
  
  /* Theme Color */
  
  /* https://v5.framework7.io/docs/color-themes */
  :root {
    --f7-theme-color-light: #ebf6f0;
    --f7-theme-color-white: #fff;
    --f7-theme-color-bg: #fff;
    --f7-theme-color-secondary: #fff;
    --border-color: #f3f3f3;
    --f7-panel-right-width: 420px;
    --color-font: #000;
    --color-icon: #777777;
    --color-btn-primary: #333333;
    --color-btn-secondary: #414141;
    --color-panel: #4d4d4d;
    --color-cabecera: #030303;
    --color-home: #fff;
    --color-onboarding: #707070;
    --color-welcome: #2e383f;
    --color-link: #584e4e;
    --color-front-gray: #6b6b6b;
  }
  
  :root,
  .md:not([class*='color-theme']) {
    --f7-theme-color: #2196f3;
    --f7-theme-color-secondary: #2196f3;
    --f7-theme-color-rgb: 18, 34, 97;
    --f7-theme-color-shade: #2196f3e8;
    --f7-theme-color-tint: #2196f3c7;
    --f7-theme-color-light: #d9ede6;
    --color-font: #000;
    --color-icon: #777777;
  }
  
  .color-theme-coffe {
    --f7-theme-color: #04764e;
    --f7-theme-color-rgb: 74, 55, 73;
    --f7-theme-color-shade: #0936c3;
    --f7-theme-color-tint: #a44ef1;
  }
  
  .color-theme-utntesting {
    --f7-theme-color: #4e4e53;
    --f7-theme-color-secondary: #4e4e53;
    --f7-theme-color-rgb: 78, 78, 83;
    --f7-theme-color-shade: #3a3a3e;
    --f7-theme-color-tint: #626268;
    --f7-theme-color-bg: #777777;
    --color-font: #e3e3e3;
    --color-front-menu: #9a9a9a;
    --color-icon: #b3b3b3;
    --color-icon-dark: #4a4a4e;
    --color-btn-primary: #626268;
    --color-font-primary: #ffffff;
    --color-btn-secondary: #4e4e53;
    --color-btn-close: rgba(78, 78, 83, 0.8);
    --color-font-secondary: #c7c7c7;
    --color-btn-tertiary: #ffffff;
    --color-font-tertiary: #4e4e53;
    --color-border: #9a9a9a;
    --color-panel: #3a3a3e;
    --color-cabecera: transparent;
    --color-cabecera-admin: #3a3a3e;
    --color-home: #3a3a3e;
    --color-onboarding: #3a3a3e;
    --color-welcome: #626268;
    --color-link: #9a9a9a;
    --color-input: #e3e3e3;
    --color-input-dark: #4a4a4e;
    --color-login: #2e2e33;
    --color-login-bg: #4e4e53;
    --color-start-button: #777777;
    --f7-page-bg-color: #1f1f22;
  }
  
  
  .color-theme-tutaxituremis {
    --f7-theme-color: #2196f3;
    --f7-theme-color-secondary: #2196f3;
    --f7-theme-color-rgb: 33, 150, 243;
    --f7-theme-color-shade: #0c82df;
    --f7-theme-color-tint: #4496d8;
    --f7-theme-color-bg: #48a8f5;
    --color-font: #000;
    --color-icon: #777777;
    --color-btn-primary: #f0af25;
    --color-font-primary: #000;
    --color-btn-secondary: #9b1732;
    --color-font-secondary: #fff;
    --color-btn-tertiary: #07406a;
    --color-font-tertiary: #fff;
    --color-border: #9b1732;
    --color-panel: #9b1732;
    --color-cabecera: #004b82;
    --color-home: #fff;
    --color-onboarding: #004b82;
    --color-welcome: #004b82;
    --color-link: #fff;
  }
  
  .color-theme-rapitaxi,
  .color-theme-taxilibre {
    --f7-theme-color: #eaa500;
    --f7-theme-color-secondary: #ffffff;
    --f7-theme-color-rgb: 234, 165, 0;
    --f7-theme-color-shade: #c18800;
    --f7-theme-color-tint: #ffba14;
    --f7-theme-color-bg: #eaa500;
    --color-font: #000000;
    --color-front-menu: #646464;
    --color-icon: #bbbbbb;
    --color-icon-dark: #000000;
    --color-btn-primary: #ffba14;
    --color-font-primary: #ffffff;
    --color-btn-secondary: #eaa500;
    --color-btn-close: rgba(240, 198, 12, 0.89);
    --color-font-secondary: #000000;
    --color-btn-tertiary: #ffffff;
    --color-font-tertiary: #000000;
    --color-border: #646464;
    --color-panel: #ffffff;
    --color-cabecera: transparent;
    --color-cabecera-admin: #ffffff;
    --color-home: #ffffff;
    --color-onboarding: #ffffff;
    --color-welcome: #d3c121;
    --color-link: #ffba14;
    --color-input: #dddddd;
    --color-input-dark: #000000;
    --color-login: #f0f0f0;
    --color-login-bg: #eaa500;
    --color-start-button: #ffba14;
    --f7-page-bg-color: #151515;
  }
  
  .color-theme-englobal {
    --f7-theme-color: #4e4e53;
    --f7-theme-color-secondary: #ffffff;
    --f7-theme-color-rgb: 78, 78, 83;
    --f7-theme-color-shade: #3a3a3e;
    --f7-theme-color-tint: #626268;
    --f7-theme-color-bg: #777777;
    --color-font: #e3e3e3;
    --color-front-menu: #9a9a9a;
    --color-icon: #b3b3b3;
    --color-icon-dark: #4a4a4e;
    --color-btn-primary: #626268;
    --color-font-primary: #ffffff;
    --color-btn-secondary: #4e4e53;
    --color-btn-close: rgba(78, 78, 83, 0.8);
    --color-font-secondary: #333333;
    --color-btn-tertiary: #ffffff;
    --color-font-tertiary: #4e4e53;
    --color-border: #9a9a9a;
    --color-panel: #ffffff;
    --color-cabecera: transparent;
    --color-cabecera-admin: transparent;
    --color-home: #ffffff;
    --color-onboarding: #ffffff;
    --color-welcome: #626268;
    --color-link: #9a9a9a;
    --color-input: #e3e3e3;
    --color-input-dark: #4a4a4e;
    --color-login: #ffffff;
    --color-login-bg: #4e4e53;
    --color-start-button: #777777;
    --f7-page-bg-color: #1f1f22;
  }
  
  
  .color-theme-tumovil {
    --f7-font-family: 'Monserrat', sans-serif;
    --f7-theme-color: #004b82;
    --f7-theme-color-dark: #07406a;
    --f7-theme-color-rgb: 0, 75, 130;
    --f7-theme-color-shade: #07406a;
    --f7-theme-color-tint: #14598c;
    --f7-theme-color-bg: #004b82;
    --f7-theme-color-secondary: #f0af25;
    --color-font: #fff;
    --color-front-menu: #004b82;
    --color-icon: #fff;
    --color-icon-dark: #ffffff;
    --color-btn-primary: #f0af25;
    --color-font-primary: #000;
    --color-btn-secondary: #9b1732;
    --color-btn-close: #9b1732;
    --color-font-secondary: #fff;
    --color-btn-tertiary: #07406a;
    --color-font-tertiary: #fff;
    --color-border: #9b1732;
    --color-panel: #fff;
    --color-cabecera: #004b82;
    --color-cabecera-admin: #004b82;
    --color-home: #fff;
    --color-onboarding: #004b82;
    --color-welcome: #004b82;
    --color-link: #4f4f4f;
    --color-input: #14598c;
    --color-input-dark: #14598c;
    --color-input-secondary: #e1e2ec;
    --color-login: #004b82;
    --color-login-bg: #9b1732;
    --color-start-button: #00b649;
  }
  
  .color-theme-escolarescba {
    --f7-theme-color: #FFB322;
    --f7-theme-color-secondary: #ffffff;
    --f7-theme-color-rgb: 234, 165, 0;
    --f7-theme-color-shade: #c18800;
    --f7-theme-color-tint: #ffba14;
    --f7-theme-color-bg: #FFB322;
    --color-font: #000000;
    --color-front-menu: #646464;
    --color-icon: #bbbbbb;
    --color-icon-dark: #000000;
    --color-btn-primary: #ffba14;
    --color-font-primary: #ffffff;
    --color-btn-secondary: #FFB322;
    --color-btn-close: rgba(240, 198, 12, 0.89);
    --color-font-secondary: #000000;
    --color-btn-tertiary: #ffffff;
    --color-font-tertiary: #000000;
    --color-border: #646464;
    --color-panel: #ffffff;
    --color-cabecera: transparent;
    --color-cabecera-admin: #ffffff;
    --color-home: #ffffff;
    --color-onboarding: #ffffff;
    --color-welcome: #d3c121;
    --color-link: #ffba14;
    --color-input: #dddddd;
    --color-input-dark: #000000;
    --color-login: #f0f0f0;
    --color-login-bg: #FFB322;
    --color-start-button: #ffba14;
    --f7-page-bg-color: #151515;
  }
  
  
  /* ************************** */
  
  .color-theme-green-dark {
    --f7-theme-color: #04764e;
    --f7-theme-color-rgb: 18, 34, 97;
    --f7-theme-color-shade: #00613f;
    --f7-theme-color-tint: #07ac72;
    --f7-theme-color-light: #d9ede6;
  }
  
  .color-theme-red {
    --f7-theme-color: #ff3b30;
    --f7-theme-color-rgb: 255, 59, 48;
    --f7-theme-color-shade: #ff1407;
    --f7-theme-color-tint: #ff6259;
    --f7-theme-color-light: #fbe6e4;
  }
  
  .color-theme-green {
    --f7-theme-color: #09c36a;
    --f7-theme-color-rgb: 76, 217, 100;
    --f7-theme-color-shade: #2cd048;
    --f7-theme-color-tint: #6ee081;
    --f7-theme-color-light: #e7f7e9;
  }
  
  .color-theme-blue {
    --f7-theme-color: #2196f3;
    --f7-theme-color-rgb: 33, 150, 243;
    --f7-theme-color-shade: #0c82df;
    --f7-theme-color-tint: #48a8f5;
    --f7-theme-color-light: #e7eff6;
  }
  
  .color-theme-pink {
    --f7-theme-color: #ff2d55;
    --f7-theme-color-rgb: 255, 45, 85;
    --f7-theme-color-shade: #ff0434;
    --f7-theme-color-tint: #ff5676;
    --f7-theme-color-light: #f6e0e4;
  }
  
  .color-theme-yellow {
    --f7-theme-color: #ffcc00;
    --f7-theme-color-rgb: 255, 204, 0;
    --f7-theme-color-shade: #d6ab00;
    --f7-theme-color-tint: #ffd429;
    --f7-theme-color-light: #f2efe4;
  }
  
  .color-theme-orange {
    --f7-theme-color: #ff8900;
    --f7-theme-color-rgb: 255, 149, 0;
    --f7-theme-color-shade: #d67d00;
    --f7-theme-color-tint: #ffa629;
    --f7-theme-color-light: #f9f2e8;
  }
  
  .color-theme-purple {
    --f7-theme-color: #ad00ff;
    --f7-theme-color-rgb: 156, 39, 176;
    --f7-theme-color-shade: #7e208f;
    --f7-theme-color-tint: #b92fd1;
    --f7-theme-color-light: #f2dbf6;
  }
  
  .color-theme-deeppurple {
    --f7-theme-color: #673ab7;
    --f7-theme-color-rgb: 103, 58, 183;
    --f7-theme-color-shade: #563098;
    --f7-theme-color-tint: #7c52c8;
    --f7-theme-color-light: #f0eaf9;
  }
  
  .color-theme-lightblue {
    --f7-theme-color: #5ac8fa;
    --f7-theme-color-rgb: 90, 200, 250;
    --f7-theme-color-shade: #32bbf9;
    --f7-theme-color-tint: #82d5fb;
    --f7-theme-color-light: #e2eff5;
  }
  
  .color-theme-teal {
    --f7-theme-color: #009688;
    --f7-theme-color-rgb: 0, 150, 136;
    --f7-theme-color-shade: #006d63;
    --f7-theme-color-tint: #00bfad;
    --f7-theme-color-light: #e3f5f3;
  }
  
  .color-theme-lime {
    --f7-theme-color: #cddc39;
    --f7-theme-color-rgb: 205, 220, 57;
    --f7-theme-color-shade: #bac923;
    --f7-theme-color-tint: #d6e25c;
    --f7-theme-color-light: #f0f1e5;
  }
  
  .color-theme-deeporange {
    --f7-theme-color: #ff6b22;
    --f7-theme-color-rgb: 255, 107, 34;
    --f7-theme-color-shade: #f85200;
    --f7-theme-color-tint: #ff864b;
    --f7-theme-color-light: #fcf2ed;
  }
  
  .color-theme-gray {
    --f7-theme-color: #8e8e93;
    --f7-theme-color-rgb: 142, 142, 147;
    --f7-theme-color-shade: #79797f;
    --f7-theme-color-tint: #a3a3a7;
    --f7-theme-color-light: #f5f5f5;
  }
  
  .color-theme-white {
    --f7-theme-color: #ffffff;
    --f7-theme-color-rgb: 255, 255, 255;
    --f7-theme-color-shade: #ebebeb;
    --f7-theme-color-tint: #ffffff;
    --f7-theme-color-light: #f5f5f5;
  }
  
  .color-theme-black:not(.theme-dark) {
    --f7-theme-color: #000000;
    --f7-theme-color-rgb: 0, 0, 0;
    --f7-theme-color-shade: #000000;
    --f7-theme-color-tint: #141414;
    --f7-theme-color-light: #f5f5f5;
  }
  
  .color-red {
    --f7-theme-color: #ff3b30;
    --f7-theme-color-rgb: 255, 59, 48;
    --f7-theme-color-shade: #ff1407;
    --f7-theme-color-tint: #ff6259;
    --f7-theme-color-light: #f4e9e9;
  }
  
  .navbar {
    background: var(--f7-theme-color-white);
  }
  
  .navbar a.link {
    padding: 0 10px !important;
    justify-content: center;
    color: #1b1b1b;
    /* min-width: 46px; */
  }
  
  .navbar a.link i,
  .navbar a.link svg {
    font-size: 32px;
    fill: #000000;
  }
  
  .navbar a.link [fill],
  .navbar a.link path {
    fill: #000000;
  }
  
  .navbar .navbar-inner {
    max-width: 1024px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 20px;
    background-color: var(--color-cabecera);
  }
  
  .navbar .navbar-inner .title {
    color: #1b1b1b;
    font-weight: 600;
    width: 100%;
    margin-left: 10%;
    margin-right: 10%;
    color: var(--color-font-secondary);
  }
  
  .navbar {
    height: 50px;
    border-radius: 0 0 15px 15px;
    box-shadow: 0px 0px 15px -8px rgba(0, 0, 0, 0.69);
    -webkit-box-shadow: 0px 0px 15px -8px rgba(0, 0, 0, 0.69);
  }
  
  .linkBack {
    width: 30px !important;
    height: 30px !important;
    background-color: var(--f7-theme-color-secondary) !important;
    border-radius: 50px;
    padding: 0;
    text-align: center;
    justify-content: center;
    box-shadow: 0 0px 30px 0px rgba(0, 0, 0, 0.35);
  }
  
  .linkBack .fa-angle-left {
    font-size: 15px !important;
  }
  
  .linkBack a.link {
    min-width: 30px !important;
  }
  
  .linkBack [fill],
  .linkBack path {
    fill: #373737;
  }
  
  .navbar.navbar-style-1 .navbar-inner .link.back {
    width: 30px !important;
    height: 30px !important;
    background-color: var(--f7-theme-color-secondary) !important;
    border-radius: 50px;
    padding: 0;
    text-align: center;
    justify-content: center;
  }
  
  .navbar.navbar-style-1 .navbar-inner .link.back .fa-angle-left {
    font-size: 15px !important;
  }
  
  .md .navbar a.link {
    min-width: 30px !important;
  }
  
  .navbar.navbar-style-1 .navbar-inner .link.back [fill],
  .navbar.navbar-style-1 .navbar-inner .link.back path {
    fill: #373737;
  }
  
  .navbar.navbar-style-1 .navbar-inner .title {
    text-align: center;
  }
  
  .navbar.navbar-style-1 .navbar-inner .link.panel-open {
    padding: 0 0 0 10px !important;
    min-width: 40px;
  }
  
  .navbar.navbar-style-1.navbar-transparent {
    background-color: transparent;
    border-color: transparent;
  }
  
  .navbar.navbar-style-1.navbar-transparent a.link [fill],
  .navbar.navbar-style-1.navbar-transparent a.link path {
    fill: #fff;
  }
  
  .navbar.navbar-style-1.navbar-transparent a.link .title,
  .navbar.navbar-style-1.navbar-transparent a.link a,
  .navbar.navbar-style-1.navbar-transparent a.link i,
  .navbar.navbar-style-1.navbar-transparent a.link svg {
    color: #fff;
  }
  
  .navbar.navbar-style-1.navbar-transparent .title {
    opacity: 1 !important;
    color: #fff;
  }
  
  .navbar.navbar-style-1.navbar-transparent .link.back {
    background-color: rgba(255, 255, 255, 0.2);
  }
  
  .navbar.navbar-style-1.navbar-transparent .link.back [fill],
  .navbar.navbar-style-1.navbar-transparent .link.back path {
    fill: #fff;
  }
  
  .navbar.navbar-style-1.navbar-transparent.navbar-transparent-visible {
    background: var(--f7-theme-color-white);
    border-color: 1px solid #f4f4f4;
  }
  
  .navbar.navbar-style-1.navbar-transparent.navbar-transparent-visible a.link .title,
  .navbar.navbar-style-1.navbar-transparent.navbar-transparent-visible a.link a,
  .navbar.navbar-style-1.navbar-transparent.navbar-transparent-visible a.link i,
  .navbar.navbar-style-1.navbar-transparent.navbar-transparent-visible a.link svg {
    color: var(--f7-theme-color);
  }
  
  .navbar.navbar-style-1.navbar-transparent.navbar-transparent-visible a.link [fill],
  .navbar.navbar-style-1.navbar-transparent.navbar-transparent-visible a.link path {
    fill: var(--f7-theme-color);
  }
  
  .navbar.navbar-style-1.navbar-transparent.navbar-transparent-visible .add-wishlist-btn i,
  .navbar.navbar-style-1.navbar-transparent.navbar-transparent-visible .add-wishlist-btn svg {
    color: var(--f7-theme-color);
  }
  
  .navbar.navbar-style-1.navbar-transparent.navbar-transparent-visible .link.back {
    background-color: #f6f6f6;
  }
  
  .navbar.navbar-style-1.navbar-transparent.navbar-transparent-visible .link.back [fill],
  .navbar.navbar-style-1.navbar-transparent.navbar-transparent-visible .link.back path {
    fill: #373737;
  }
  
  .navbar.navbar-style-1.navbar-transparent.navbar-transparent-visible .title {
    color: #1b1b1b;
  }
  
  .navbar.navbar-style-admin .navbar-inner {
    background-color: var(--color-cabecera-admin);
    color: var(--color-font-primary);
  }
  
  .navbar.navbar-style-admin .navbar-inner .link.back {
    width: 30px !important;
    height: 30px !important;
    background-color: var(--f7-theme-color-secondary) !important;
    border-radius: 50px;
    padding: 0;
    text-align: center;
    justify-content: center;
    box-shadow: 0 0px 30px 0px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s ease-in-out;
  }
  
  .navbar.navbar-style-admin .navbar-inner .link.back:hover {
    transform: scale(1.1);
  }
  
  .navbar.navbar-style-admin .navbar-inner .link.back .fa-angle-left {
    font-size: 15px !important;
  }
  
  .md .navbar a.link {
    min-width: 30px !important;
  }
  
  .navbar.navbar-style-admin .navbar-inner .link.back [fill],
  .navbar.navbar-style-admin .navbar-inner .link.back path {
    fill: #373737;
  }
  
  .navbar.navbar-style-admin .navbar-inner .title {
    text-align: center;
  }
  
  .navbar.navbar-style-admin .navbar-inner .link.panel-open {
    padding: 0 0 0 10px !important;
    min-width: 40px;
  }
  
  .navbar.navbar-style-admin.navbar-transparent {
    background-color: transparent;
    border-color: transparent;
  }
  
  .navbar.navbar-style-admin.navbar-transparent a.link [fill],
  .navbar.navbar-style-admin.navbar-transparent a.link path {
    fill: #fff;
  }
  
  .navbar.navbar-style-admin.navbar-transparent a.link .title,
  .navbar.navbar-style-admin.navbar-transparent a.link a,
  .navbar.navbar-style-admin.navbar-transparent a.link i,
  .navbar.navbar-style-admin.navbar-transparent a.link svg {
    color: #fff;
  }
  
  .navbar.navbar-style-admin.navbar-transparent .title {
    opacity: 1 !important;
    color: #fff;
  }
  
  .navbar.navbar-style-admin.navbar-transparent .link.back {
    background-color: rgba(255, 255, 255, 0.2);
  }
  
  .navbar.navbar-style-admin.navbar-transparent .link.back [fill],
  .navbar.navbar-style-admin.navbar-transparent .link.back path {
    fill: #fff;
  }
  
  .navbar.navbar-style-admin.navbar-transparent.navbar-transparent-visible {
    background: var(--f7-theme-color-white);
    border-color: 1px solid #f4f4f4;
  }
  
  .navbar.navbar-style-admin.navbar-transparent.navbar-transparent-visible a.link .title,
  .navbar.navbar-style-admin.navbar-transparent.navbar-transparent-visible a.link a,
  .navbar.navbar-style-admin.navbar-transparent.navbar-transparent-visible a.link i,
  .navbar.navbar-style-admin.navbar-transparent.navbar-transparent-visible a.link svg {
    color: var(--f7-theme-color);
  }
  
  .navbar.navbar-style-admin.navbar-transparent.navbar-transparent-visible a.link [fill],
  .navbar.navbar-style-admin.navbar-transparent.navbar-transparent-visible a.link path {
    fill: var(--f7-theme-color);
  }
  
  .navbar.navbar-style-admin.navbar-transparent.navbar-transparent-visible .add-wishlist-btn i,
  .navbar.navbar-style-admin.navbar-transparent.navbar-transparent-visible .add-wishlist-btn svg {
    color: var(--f7-theme-color);
  }
  
  .navbar.navbar-style-admin.navbar-transparent.navbar-transparent-visible .link.back {
    background-color: #f6f6f6;
  }
  
  .navbar.navbar-style-admin.navbar-transparent.navbar-transparent-visible .link.back [fill],
  .navbar.navbar-style-admin.navbar-transparent.navbar-transparent-visible .link.back path {
    fill: #373737;
  }
  
  .navbar.navbar-style-admin.navbar-transparent.navbar-transparent-visible .title {
    color: #1b1b1b;
  }
  
  .tabbar.tab-style-1 {
    height: 56px;
    background-color: transparent;
    z-index: 9;
  }
  
  .tabbar.tab-style-1 .toolbar-inner {
    margin-left: -4px;
    margin-right: -4px;
    height: 100%;
  }
  
  .tabbar.tab-style-1:before,
  .tabbar.tab-style-1:after {
    content: none;
  }
  
  .tabbar.tab-style-1 .tab-link-highlight {
    display: none;
  }
  
  .tabbar.tab-style-1 .tab-link {
    font-size: 16px;
    line-height: 16px;
    text-transform: capitalize;
    letter-spacing: unset;
    font-weight: 500;
    width: auto;
    padding: 14px 24px;
    height: 46px;
    background-color: transparent;
    border-radius: 30px;
    border: 1px solid var(--f7-theme-color);
    color: var(--f7-theme-color);
    margin-left: 4px;
    margin-right: 4px;
  }
  
  .tabbar.tab-style-1 .tab-link.tab-link-active {
    color: #fff;
    background-color: var(--f7-theme-color);
  }
  
  .tabbar.tab-style-1 .swiper-slide {
    width: auto;
  }
  
  .tabbar.tab-style-2 {
    background-color: transparent;
    margin-left: -20px;
    border-bottom: 1px solid var(--border-color);
  }
  
  .tabbar.tab-style-2:before,
  .tabbar.tab-style-2:after {
    content: none;
  }
  
  .tabbar.tab-style-2 .tab-link-highlight {
    display: none;
  }
  
  .tabbar.tab-style-2 .swiper-slide {
    width: auto;
  }
  
  .tabbar.tab-style-2 .swiper-slide:first-child {
    margin-left: 20px;
  }
  
  .tabbar.tab-style-2 .tab-link {
    font-size: 18px;
    letter-spacing: unset;
    text-transform: capitalize;
    border-bottom: 3px solid;
    border-color: transparent;
    opacity: 0.7;
    height: 50px;
    padding: 10px 15px;
  }
  
  .tabbar.tab-style-2 .tab-link.tab-link-active {
    border-color: var(--f7-theme-color);
    opacity: 1;
  }
  
  @media only screen and (max-width: 991px) {
    .tabbar.tab-style-2 {
      margin-right: -20px;
    }
  }
  
  .button {
    letter-spacing: unset;
  }
  
  .button.button-large {
    font-size: 16px;
    padding: 18px 25px;
    height: auto;
    line-height: 1.3;
    font-weight: 600;
    /* Agrega estas propiedades */
    display: flex;
    /* width: 65%; */
    text-align: center;
    margin: 2% auto;
  }
  
  .button.button-large-primary {
    background-color: var(--color-btn-primary) !important;
    color: var(--color-font-primary) !important;
  }
  
  .button.button-large-secondary {
    background-color: var(--color-btn-secondary) !important;
    color: var(--color-font-secondary) !important;
  }
  
  .button.button-large-tertiary {
    background-color: var(--color-btn-tertiary) !important;
    color: var(--color-font-tertiary) !important;
    border: 5px solid var(--color-border) !important;
  }
  
  .button.button-large-close {
    background-color: var(--color-btn-close) !important;
    color: var(--color-font-secondary) !important;
  }
  
  .button.color-light {
    background-color: var(--f7-theme-color-light);
    color: var(--f7-theme-color);
  }
  
  .button.button-secondary {
    background-color: #f6dbb3;
    color: #313131;
  }
  
  .button.button-gray {
    background-color: #e5e5e5;
    color: #646464;
  }
  
  .rounded-sm {
    border-radius: 8px;
  }
  
  .rounded-md {
    border-radius: 12px;
  }
  
  .rounded-lg {
    border-radius: 20px;
  }
  
  .rounded-xl {
    border-radius: 50px;
  }
  
  .button-outline {
    border-width: 1px;
  }
  
  .button-social {
    text-transform: capitalize;
    /* background-color: #376aed; */
  }
  
  .button-social img {
    width: 24px;
    margin-right: auto;
  }
  
  .button-social span {
    width: 100%;
  }
  
  .button-social.facebook {
    background-color: #376aed;
  }
  
  .button-social.google {
    border: 1px solid #d1d1d1;
  }
  
  .button-light {
    background-color: #e8ffe0;
    color: var(--f7-theme-color);
  }
  
  .overlay-black-light,
  .overlay-black-middle,
  .overlay-black-dark,
  .overlay-gradient-light,
  .overlay-gradient-middle,
  .overlay-gradient-dark,
  .overlay-white-light,
  .overlay-white-middle,
  .overlay-white-dark,
  .overlay-primary-light,
  .overlay-primary-middle,
  .overlay-primary-dark,
  .overlay-primary {
    position: relative;
  }
  
  .overlay-black-light:before,
  .overlay-black-middle:before,
  .overlay-black-dark:before,
  .overlay-gradient-light:before,
  .overlay-gradient-middle:before,
  .overlay-gradient-dark:before,
  .overlay-white-light:before,
  .overlay-white-middle:before,
  .overlay-white-dark:before,
  .overlay-primary-light:before,
  .overlay-primary-middle:before,
  .overlay-primary-dark:before,
  .overlay-primary:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  
  .overlay-black-light .container,
  .overlay-black-light .container-fluid,
  .overlay-black-middle .container,
  .overlay-black-middle .container-fluid,
  .overlay-black-dark .container,
  .overlay-black-dark .container-fluid,
  .overlay-gradient-light .container,
  .overlay-gradient-light .container-fluid,
  .overlay-gradient-middle .container,
  .overlay-gradient-middle .container-fluid,
  .overlay-gradient-dark .container,
  .overlay-gradient-dark .container-fluid,
  .overlay-white-light .container,
  .overlay-white-light .container-fluid,
  .overlay-white-middle .container,
  .overlay-white-middle .container-fluid,
  .overlay-white-dark .container,
  .overlay-white-dark .container-fluid,
  .overlay-primary-light .container,
  .overlay-primary-light .container-fluid,
  .overlay-primary-middle .container,
  .overlay-primary-middle .container-fluid,
  .overlay-primary-dark .container,
  .overlay-primary-dark .container-fluid,
  .overlay-primary .container,
  .overlay-primary .container-fluid {
    position: relative;
    z-index: 1;
  }
  
  .overlay-black-light:before,
  .overlay-black-middle:before,
  .overlay-black-dark:before {
    background: #000;
  }
  
  .overlay-gradient-light:before,
  .overlay-gradient-middle:before,
  .overlay-gradient-dark:before {
    background: var(--gradient);
    background-size: 200%;
  }
  
  .overlay-white-light:before,
  .overlay-white-middle:before,
  .overlay-white-dark:before {
    background: #fff;
  }
  
  .overlay-primary-light:before,
  .overlay-primary-middle:before,
  .overlay-primary-dark:before,
  .overlay-primary:before {
    background: var(--f7-theme-color);
  }
  
  .overlay-primary-light:before,
  .overlay-white-light:before,
  .overlay-gradient-light:before,
  .overlay-black-light:before {
    opacity: 0.3;
  }
  
  .overlay-primary-middle:before,
  .overlay-white-middle:before,
  .overlay-gradient-middl:before,
  .overlay-black-middle:before {
    opacity: 0.5;
  }
  
  .overlay-primary-dark:before,
  .overlay-white-dark:before,
  .overlay-gradient-dark:before,
  .overlay-black-dark:before {
    opacity: 0.8;
  }
  
  .badge-lg {
    height: auto;
    padding: 10px 20px;
    border-radius: 30px;
    color: #fff;
    font-size: 18px;
    line-height: 18px;
    background-color: var(--f7-theme-color);
    display: inline-flex;
  }
  
  .badge-lg strong {
    margin-right: 5px;
    font-weight: 600;
  }
  
  .dz-accordion {
    margin: 0 -28px;
  }
  
  .dz-accordion > ul:before,
  .dz-accordion > ul:after {
    content: none;
  }
  
  .dz-accordion .accordion-item {
    border-bottom: 1px solid var(--border-color);
  }
  
  .dz-accordion .accordion-item .item-link.item-content {
    padding-left: 0;
  }
  
  .dz-accordion .accordion-item .item-link.item-content .item-inner {
    padding: 20px;
  }
  
  .dz-accordion .accordion-item .item-link.item-content .item-inner:before {
    right: 25px;
  }
  
  .dz-accordion .accordion-item .item-link.item-content .item-title {
    color: #000;
    font-size: 16px;
    font-weight: 600;
    position: relative;
    padding-left: 40px;
  }
  
  .dz-accordion .accordion-item .item-link.item-content .item-title:before,
  .dz-accordion .accordion-item .item-link.item-content .item-title:after {
    content: '';
    position: absolute;
    border-radius: 50%;
  }
  
  .dz-accordion .accordion-item .item-link.item-content .item-title:before {
    height: 20px;
    width: 20px;
    background-color: #fff;
    left: 0;
    top: 0;
    border: 2px solid;
    border-color: #8e8e8f;
  }
  
  .dz-accordion .accordion-item .item-link.item-content .item-title:after {
    left: 7px;
    top: 7px;
    height: 10px;
    width: 10px;
    background-color: #fff;
  }
  
  .dz-accordion .accordion-item.accordion-item-opened .item-link.item-content .item-title:before {
    border-color: var(--f7-theme-color);
  }
  
  .dz-accordion .accordion-item.accordion-item-opened .item-link.item-content .item-title:after {
    background-color: var(--f7-theme-color);
  }
  
  .dz-accordion .accordion-item .accordion-item-content .item-content-inner {
    padding: 10px 20px 0;
  }
  
  .searchbar input[type='search'],
  .searchbar input[type='text'] {
    font-size: 16px;
  }
  
  .page-content .searchbar.search-box {
    height: 60px;
    box-shadow: unset;
    margin: 0 0 20px;
    border-radius: 8px;
    width: 100%;
    background-color: transparent;
  }
  
  .page-content .searchbar.search-box .searchbar-input-wrap input {
    border: 1px solid #e9e9e9;
    height: 60px;
    background-color: #f9f9f9;
    font-size: 16px;
    padding: 12px 50px 12px 25px;
    border-radius: 50px;
    font-weight: 400;
    color: #585858;
  }
  
  .page-content .searchbar.search-box .searchbar-input-wrap input::placeholder,
  .page-content .containerSearchBox .inputsSearchBox input::placeholder,
  .page-content .calendarDiv input::placeholder,
  .page-content .container .containerSearchBox #inputContainerSortable .item-input .item-input-wrap input::placeholder,
  .page-content .popup-container .list .item-input .item-inner .item-input-wrap input#destinoFavoritoNombre::placeholder {
    color: var(--color-font-secondary);
  }
  
  /* .page-content .searchbar.search-box .searchbar-input-wrap input::placeholder{
    color: black;
  } */
  
  .page-content .searchbar.search-box .searchbar-input-wrap .searchbar-icon {
    right: 25px;
    margin: 0;
    top: 5px;
    left: auto;
    font-size: 20px;
  }
  
  .page-content .searchbar.search-box .searchbar-input-wrap .searchbar-icon:after {
    content: none;
  }
  
  /* *************************************************** */
  .toolTip {
    position: absolute;
    width: 26px;
    height: 26px;
    transition: all 0.5s;
    user-select: none;
    right: -45px;
    z-index: 100;
    /* right: 3%; */
    /* top: 15%; */
  }
  
  .iconoToolTip {
    position: relative !important;
    top: 0% !important;
    left: 0rem !important;
    transform: translateY(0%) !important;
    width: 100%;
    height: 100%;
    color: var(--main-color);
  }
  
  .toolTipText {
    position: absolute;
    width: 272px;
    right: 0%;
    bottom: 15px;
    color: black;
    background: white;
    border-radius: 14px;
    padding: 10px;
    box-shadow: 0px 0px 20px -9px rgba(0, 0, 0, 0.69);
    -webkit-box-shadow: 0px 0px 20px -9px rgba(0, 0, 0, 0.69);
  }
  
  .toolTipText::before {
    content: '';
    position: absolute;
    left: 52%;
    top: 100%;
    transform: translateX(360%);
    border: 15px solid;
    border-color: #ffffff #0000 #0000 #0000;
  }
  
  .containerToolTip {
    position: relative;
    width: 32px;
    height: 32px;
    transform: translateY(-75px);
    opacity: 0;
    visibility: hidden;
    transition: 0.1s;
  }
  
  /* .iconoToolTip:hover~.containerToolTip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-65px);
    transition: 0.5s;
    } */
  
  .toolTip:hover .containerToolTip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-65px);
    transition: 0.5s;
  }
  
  .item-input-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    /* justify-content: center; */
  }
  
  .item-content .item-inner {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
  }
  
  .item-input .item-inner {
    background-color: var(--color-input);
    border-bottom: 2px solid #fff;
    padding: 10px;
    border-radius: 10px 10px 0 0;
  }
  
  .item-input .item-inner input::placeholder {
    color: #000000 !important; 
    opacity: 0.7; 
  }
  
  
  .input-icon {
    background-color: var(--color-input-secondary) !important;
  }
  
  .input-admin {
    background-color: #e1e2ec !important;
    border-bottom: 2px solid #fff !important;
    padding: 10px !important;
  }
  
  .cabecera-admin {
    background-color: var(--color-cabecera-admin) !important;
  }
  
  .item-input-wrap .state-toggle {
    position: relative;
    left: -30px;
  }
  
  .item-input-wrap .state-toggle .state-inactive {
    display: none;
  }
  
  .item-input-wrap .input-clear-button {
    top: 50%;
  }
  
  .responsive-container {
    width: 100%;
    height: 350px;
  }
  
  .list .item-media,
  .ios .list .item-media,
  .md .list .item-media {
    justify-content: center;
    min-width: 24px;
  }
  
  .list .item-floating-label,
  .list .item-label {
    color: #000;
  }
  
  .list .item-floating-label,
  .list .item-label::after {
    color: red;
  }
  
  .shape-container {
    align-items: center;
    box-sizing: border-box;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding: 12px;
    text-align: center;
    color: white;
  }
  
  .size-40 {
    height: 40px;
    width: 40px;
  }
  
  .shape-auto {
    border-radius: 8px;
  }
  
  /*
  |------------------------------------------------------------------------------
  | Utilities
  |------------------------------------------------------------------------------
  */
  
  [class*='text-gradient-'] {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  .bg-transparent {
    background: transparent !important;
  }
  
  .bg-translucent {
    background-color: rgba(255, 255, 255, 0.75);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
  }
  
  .dark .bg-translucent,
  .dark.bg-translucent {
    background-color: rgba(45, 45, 45, 0.75);
  }
  
  .bg-color-chrome {
    --f7-theme-color-bg-color: rgba(var(--f7-color-gray-rgb), 0.25);
  }
  
  .border-color-chrome {
    --f7-theme-color-border-color: rgba(var(--f7-color-gray-rgb), 0.25);
  }
  
  .opacity-0 {
    opacity: 0;
  }
  
  .opacity-25 {
    opacity: 0.25;
  }
  
  .opacity-50 {
    opacity: 0.5;
  }
  
  .opacity-75 {
    opacity: 0.75;
  }
  
  .opacity-100 {
    opacity: 1;
  }
  
  .font-color-primary h1,
  .font-color-primary h2,
  .font-color-primary h3,
  .font-color-primary h4,
  .font-color-primary h5,
  .font-color-primary h6,
  .font-color-primary,
  .font-color-primary p {
    color: var(--color-font-primary) !important;
  }
  
  .font-color-secondary h1,
  .font-color-secondary h2,
  .font-color-secondary h3,
  .font-color-secondary h4,
  .font-color-secondary h5,
  .font-color-secondary h6,
  .font-color-secondary,
  .font-color-secondary p {
    color: var(--color-font-secondary) !important;
  }
  
  .font-color-link {
    color: var(--color-link) !important;
  }
  
  .font-gray {
    color: #adadad !important;
  }
  
  .font-black {
    color: #000000 !important;
  }
  
  .font-white {
    color: #ffffff !important;
  }
  
  .font-size-8 {
    font-size: 8px !important;
  }
  
  .font-size-10 {
    font-size: 10px !important;
  }
  
  .font-size-12 {
    font-size: 12px !important;
  }
  
  .font-size-14 {
    font-size: 14px !important;
  }
  
  .font-size-16 {
    font-size: 16px !important;
  }
  
  .font-size-18 {
    font-size: 18px !important;
  }
  
  .font-size-20 {
    font-size: 20px !important;
  }
  
  .font-size-22 {
    font-size: 22px !important;
  }
  
  .font-size-24 {
    font-size: 24px !important;
  }
  
  .font-size-26 {
    font-size: 26px !important;
  }
  
  .font-size-28 {
    font-size: 28px !important;
  }
  
  .font-size-30 {
    font-size: 30px !important;
  }
  
  .font-size-32 {
    font-size: 32px !important;
  }
  
  .font-size-40 {
    font-size: 40px !important;
  }
  
  .font-size-48 {
    font-size: 48px !important;
  }
  
  .font-size-56 {
    font-size: 56px !important;
  }
  
  .font-size-64 {
    font-size: 64px !important;
  }
  
  .font-size-72 {
    font-size: 72px !important;
  }
  
  .font-size-80 {
    font-size: 80px !important;
  }
  
  .font-size-88 {
    font-size: 88px !important;
  }
  
  .font-size-96 {
    font-size: 96px !important;
  }
  
  .font-weight-bold {
    font-weight: bold !important;
  }
  
  .font-weight-normal {
    font-weight: normal !important;
  }
  
  .font-weight-600 {
    font-weight: 600 !important;
  }
  
  .font-weight-800 {
    font-weight: 800 !important;
  }
  
  .font-weight-900 {
    font-weight: 900 !important;
  }
  
  .text-capitalize {
    text-transform: capitalize !important;
  }
  
  .text-uppercase {
    text-transform: uppercase !important;
  }
  
  .text-italic {
    font-style: italic;
  }
  
  .text-underline-dotted {
    cursor: pointer;
    text-decoration-line: underline;
    text-decoration-style: dotted;
  }
  
  .single-line-text {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  
  .multi-line-text {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    word-break: break-word !important;
  }
  
  .lines-1 {
    -webkit-line-clamp: 1 !important;
  }
  
  .lines-2 {
    -webkit-line-clamp: 2 !important;
  }
  
  .lines-3 {
    -webkit-line-clamp: 3 !important;
  }
  
  .lines-4 {
    -webkit-line-clamp: 4 !important;
  }
  
  .lines-5 {
    -webkit-line-clamp: 5 !important;
  }
  
  .overflow-hidden {
    overflow: hidden !important;
  }
  
  .overflow-visible {
    overflow: visible !important;
  }
  
  .height-100 {
    height: 100% !important;
  }
  
  .height-auto {
    height: auto !important;
  }
  
  .height-full {
    height: 100% !important;
    overflow-y: auto !important;
  }
  
  .width-100 {
    width: 100%;
  }
  
  .flexbox-centered {
    align-items: center;
    border-radius: inherit;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    text-align: center;
    width: 100%;
  }
  
  .flex-grow-1 {
    flex-grow: 1 !important;
  }
  
  .flex-wrap-wrap {
    flex-wrap: wrap !important;
  }
  
  .letter-spacing-1 {
    letter-spacing: 1px;
  }
  
  .line-height-1 {
    line-height: 1 !important;
  }
  
  .text-align-start {
    text-align: start !important;
  }
  
  .text-align-end {
    text-align: end !important;
  }
  
  .vertical-align-middle {
    vertical-align: middle !important;
  }
  
  .white-space-normal {
    white-space: normal !important;
  }
  
  .white-space-nowrap {
    white-space: nowrap !important;
  }
  
  .z-index-0 {
    z-index: 0 !important;
  }
  
  .z-index-1 {
    z-index: 1 !important;
  }
  
  .z-index-10 {
    z-index: 10 !important;
  }
  
  .z-index-100 {
    z-index: 100 !important;
  }
  
  .z-index-1000 {
    z-index: 1000 !important;
  }
  
  .user-select-none {
    user-select: none;
  }
  
  .mask {
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
  }
  
  .mask-squircle {
    -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjAwJyBoZWlnaHQ9JzIwMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBkPSdNMTAwIDBDMjAgMCAwIDIwIDAgMTAwczIwIDEwMCAxMDAgMTAwIDEwMC0yMCAxMDAtMTAwUzE4MCAwIDEwMCAwWicvPjwvc3ZnPg==);
    mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjAwJyBoZWlnaHQ9JzIwMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBkPSdNMTAwIDBDMjAgMCAwIDIwIDAgMTAwczIwIDEwMCAxMDAgMTAwIDEwMC0yMCAxMDAtMTAwUzE4MCAwIDEwMCAwWicvPjwvc3ZnPg==);
  }
  
  .list-search {
    margin: 0 !important;
  }
  
  .list ul {
    list-style: none;
    margin: 0;
    padding: 10px;
    position: relative;
    /* background: #f1f3fc; */
    border-radius: var(--f7-list-inset-border-radius);
  }
  
  /*
  |------------------------------------------------------------------------------
  | Note
  |------------------------------------------------------------------------------
  */
  
  .note {
    align-items: flex-start;
    background-color: var(--f7-block-strong-bg-color);
    box-sizing: border-box;
    color: var(--f7-text-color);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: calc(var(--f7-block-margin-vertical) / 2) 0;
    padding-bottom: calc(var(--f7-block-padding-vertical) / 1.5);
    padding-left: calc(var(--f7-block-padding-horizontal) / 1.5 + var(--f7-safe-area-left));
    padding-right: calc(var(--f7-block-padding-horizontal) / 1.5 + var(--f7-safe-area-right));
    padding-top: calc(var(--f7-block-padding-vertical) / 1.5);
  }
  
  .block-strong .note {
    border: 2px solid var(--f7-color-mono);
    border-radius: var(--f7-block-inset-border-radius);
  }
  
  .block-strong .note[class*='color-'] {
    border-color: var(--f7-theme-color);
  }
  
  .note.inset {
    border-radius: var(--f7-block-inset-border-radius);
    margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
    margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
    --f7-safe-area-left: 0px;
    --f7-safe-area-right: 0px;
  }
  
  .note-fade[class*='color-'] {
    background-color: rgba(var(--f7-theme-color-rgb), 0.15);
  }
  
  .note-fill[class*='color-'] {
    background-color: var(--f7-theme-color);
  }
  
  .note-outline {
    border: 2px solid var(--f7-color-mono);
  }
  
  .note-outline[class*='color-'] {
    border-color: var(--f7-theme-color);
  }
  
  .note > * + * {
    margin-left: 8px;
    margin-right: 0;
  }
  
  [dir='rtl'] .note > * + * {
    margin-left: 0;
    margin-right: 8px;
  }
  
  .note > .note-media i,
  .note > .note-media .icon {
    font-size: 40px;
  }
  
  .note[class*='color-'] > .note-media i,
  .note[class*='color-'] > .note-media .icon {
    color: var(--f7-theme-color);
  }
  
  .note-fill[class*='color-'] > .note-media i,
  .note-fill[class*='color-'] > .note-media .icon {
    color: #ffffff;
  }
  
  .note-media img,
  .note-media > svg {
    height: auto;
    width: 40px;
  }
  
  .note-content {
    flex: 1;
    font-size: 16px;
    width: 100%;
  }
  
  .note[class*='color-'] .note-content {
    color: var(--f7-theme-color);
  }
  
  .note-fill[class*='color-'] .note-content {
    color: #ffffff;
  }
  
  .note-title {
    font-size: 16px;
    font-weight: 600;
  }
  
  .note[class*='color-'] .note-title {
    color: var(--f7-theme-color);
  }
  
  .note-fill[class*='color-'] .note-title {
    color: #ffffff;
  }
  
  .note-title + .note-message {
    color: var(--f7-block-header-text-color);
    font-size: 14px;
  }
  
  .note[class*='color-'] .note-title + .note-message {
    color: rgba(var(--f7-theme-color-rgb), 0.75);
  }
  
  .note-fill[class*='color-'] .note-title + .note-message {
    color: rgba(255, 255, 255, 0.75);
  }
  
  .note-actions {
    align-self: center;
    display: flex;
  }
  
  .note-content .note-actions {
    margin-top: 8px;
  }
  
  .note-action + .note-action {
    margin-left: 8px;
    margin-right: 0;
  }
  
  [dir='rtl'] .note-action + .note-action {
    margin-left: 0;
    margin-right: 8px;
  }
  
  .note-close {
    color: var(--f7-color-mono);
    height: 18px;
    line-height: 1;
    --f7-touch-ripple-color: rgba(var(--f7-color-black-rgb), 0.25);
  }
  
  .note[class*='color-'] .note-close {
    color: var(--f7-theme-color);
    --f7-touch-ripple-color: rgba(var(--f7-theme-color-rgb), 0.25);
  }
  
  .note-fill[class*='color-'] .note-close {
    color: #ffffff;
  }
  
  .note-close:after {
    color: inherit;
    content: 'notification_close_ios';
    font-family: var(--f7-font-family);
    font-size: 8px;
  }
  
  .note-actions + .note-close:after {
    content: 'delete_md';
    font-size: 12px;
  }
  
  /*
  |------------------------------------------------------------------------------
  | CARDS
  |------------------------------------------------------------------------------
  */
  
  .list.inset .item-divider:first-child {
    border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
  }
  
  .list.inset .item-divider:last-child {
    border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
  }
  
  .list.inset .list-group ul {
    border-radius: 0;
  }
  
  .list.inset .list-group:first-child ul {
    border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
  }
  
  .list.inset .list-group:last-child ul {
    border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
  }
  
  .list.inset .list-group:first-child .list-group-title:first-child {
    border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
  }
  
  .simple-list ul {
    transition: 0.2s ease all;
  }
  
  .simple-list li {
    height: auto;
    line-height: inherit;
    padding: 3px;
    white-space: normal;
  }
  
  .cards-list li {
    border-radius: inherit;
    margin: calc(var(--f7-typography-margin) / 2) 0;
  }
  
  .item-bx .item-list {
    width: 100% !important;
  }
  
  .cards-list li:first-child {
    margin-top: 0;
  }
  
  .cards-list li:last-child {
    margin-bottom: 0;
  }
  
  .cards-list.inset li {
    border-radius: var(--f7-list-inset-border-radius);
  }
  
  .cards-list > ul.row > li {
    margin: calc(var(--f7-typography-margin) / 2) 0;
  }
  
  .cards-list .item-link.active-state {
    border-radius: inherit !important;
  }
  
  .aurora.device-desktop .links-list a:hover:not(.active-state):not(.no-hover),
  .aurora.device-desktop .list .item-link:not(.item-selected):hover:not(.active-state):not(.no-hover) {
    border-radius: inherit;
  }
  
  .cards-list .item-inner:after {
    display: none !important;
  }
  
  /* *************************************************************************************** */
  
  .links-list a:after,
  .list .item-inner:after,
  .simple-list li:after {
    /* content: ''; */
    position: absolute;
    background-color: var(--f7-list-item-border-color);
    display: block;
    z-index: 15;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    height: 1px;
    width: 100%;
    transform-origin: 50% 100%;
    transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  }
  
  /* ****** */
  
  :root {
    /*
    --f7-radio-active-color: var(--f7-theme-color);
    */
    --f7-radio-border-radius: 50%;
    --f7-radio-extra-margin: 0px;
  }
  
  :root .dark,
  :root.dark {
    --f7-radio-inactive-color: rgba(255, 255, 255, 0.3);
  }
  
  .ios {
    --f7-radio-size: 22px;
    --f7-radio-border-width: 1px;
    --f7-radio-inactive-color: #c7c7cc;
  }
  
  .md {
    --f7-radio-size: 20px;
    --f7-radio-border-width: 2px;
    --f7-radio-inactive-color: #6d6d6d;
  }
  
  /* .linkBack {
    width: 45px;
    height: 45px;
    position: fixed;
    font-size: 22px;
    top: 2%;
    left: 4%;
    background: var(--f7-theme-color-secondary);
    color: #000;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    box-shadow: 0 0px 20px 5px rgba(0, 0, 0, 0.5);
  } */
  
  /* ********************************************************* */
  
  /* .overlayRide {
    background: rgba(0, 0, 0, .5);
    position: fixed;
    height: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    align-items: center;
    justify-content: center;
    display: flex;
    visibility: hidden;
    opacity: 0;
    z-index: 20;
    transition: 0.5s;
  }
  
  .overlayRide.activeOverlayRide {
    visibility: visible;
    opacity: 1;
  } */
  
  .rideInformation {
    display: flex;
    flex-direction: column;
    height: 250px;
    border-radius: 12px 12px 0 0;
    gap: 5px;
    justify-content: space-evenly;
    transition: 0.5s;
  }
  
  .activeOverlayRide .rideInformation {
    transform: translateY(0);
  }
  
  #circleSpanRide {
    width: 10px;
    height: 10px;
    background-color: var(--f7-theme-color);
    border-radius: 50%;
    position: absolute;
    top: 0px;
    left: 50%;
    animation: circleSpan 1.5s infinite;
    z-index: -1;
  }
  
  @keyframes circleSpan {
    0% {
      opacity: 1;
    }
  
    100% {
      opacity: 0;
      scale: 90;
    }
  }
  
  .userRideInfo {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }
  
  .userRideImage {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    /* box-shadow: var(--box-shadow); */
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #c2c2c2;
  }
  
  .userRideImage img {
    width: 65px;
    mix-blend-mode: multiply;
    border-radius: 50%;
  }
  
  .dark .userRideImage img {
    mix-blend-mode: normal;
  }
  
  .containerUserRideInfo {
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  .containerUserRideCalification {
    display: flex;
    align-items: center;
    gap: 5px;
  }
  
  .containerUserRideCalification .material-icons {
    color: var(--f7-theme-color);
  }
  
  #userRideCalification {
    font-weight: 600;
  }
  
  .userRideName {
    font-size: 20px;
    font-weight: 600;
  }
  
  .locationRideInfo {
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: relative;
  }
  
  .locationRideInfo::before {
    content: "";
    width: 3px;
    height: 50px;
    background: black;
    top: 25px;
    left: -12px;
    position: absolute;
  }
  
  .adrressInfoContainer div {
    margin: 0px 5px;
    color: black;
  }
  
  #infoAdicionalOrigen, #infoAdicionalDestino {
    border-radius: 5px 5px 0px 0px;
  }
  
  #pasajeroOrigenNombre, #pasajeroDestinoNombre {
    border-radius: 0px 0px 5px 5px;
    font-weight: bold;
  }
  
  #infoAdicionalOrigen, #pasajeroOrigenNombre {
    background-color: #77b6ebbd;
  }
  
  #infoAdicionalDestino, #pasajeroDestinoNombre {
    background-color: #77ee91bd;
  }
  
  .adrressInfoContainer::after {
    content: "";
    width: 10px;
    height: 10px;
    background: black;
    left: -15px;
    position: absolute;
    top: 15px;
  }
  
  .addressInfo {
    display: flex;
    flex-direction: column;
    width: 72%;
  }
  
  .addressDistance {
    font-size: 15px;
  }
  
  .addressName{
    font-size: 19px;
    font-weight: 600;
    max-height: 48px !important;
    overflow-y: hidden;
  }
  
  @media (max-width: 435px) {
    .addressName {
      font-size: 17px;
    }
  }
  
  @media (max-width: 390px) {
    .addressName {
      font-size: 15px;
    }
  }
  
  @media (max-width: 266px) {
    .addressName {
      font-size: 14px;
    }
  }
  
  .ridePrice {
    font-size: 28px;
    font-weight: 600;
  }
  
  .buttonsNewRide {
    display: flex;
    gap: 5px;
  }
  
  #rechazarViaje {
    background: rgb(255, 73, 73);
    color: white;
    width: 50%;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
  }
  
  #aceptarViaje {
    background: var(--f7-theme-color);
    color: white;
    width: 50%;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
  }
  
  div#cointanerTimerCountDown {
    position: absolute;
    top: 10px;
    right: 10px;
  }
  
  /* ****************************************************************************************** */
  
  /* Registro actividad */
  
  .list ul {
    padding: 0px;
  }
  
  .item-bx.item-list .dz-info {
    max-width: 72%;
  }
  
  .item-bx.item-list .item-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 90%;
  }
  
  .dz-meta {
    display: flex;
    justify-content: center;
    height: 10px;
  }
  
  .status-green {
    color: var(--color-green-700);
  }
  
  .status-yellow {
    color: var(--color-yellow-700);
  }
  
  .status-red {
    color: var(--color-red-700);
  }
  
  /* ******************************************************** */
  
  /* Right Menu Click */
  
  #right-click-menu {
    visibility: hidden;
    position: absolute;
    width: 300px;
    border-radius: 10px;
    background: #fff;
    /* box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1); */
    -webkit-box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.53);
    -moz-box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.53);
    box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.53);
    z-index: 999999;
    top: 0;
  }
  
  #right-click-menu .rmc-menu {
    padding: 14px 14px;
  }
  
  .rmc-content .rmc-item {
    list-style: none;
    font-size: 22px;
    height: 50px;
    display: flex;
    width: 100%;
    cursor: pointer;
    align-items: center;
    border-radius: 5px;
    margin-bottom: 2px;
    padding: 0 5px 0 10px;
  }
  
  .rmc-content .rmc-item:hover {
    background: #f2f2f2;
  }
  
  .rmc-content .rmc-item span {
    margin-left: 8px;
    font-size: 19px;
  }
  
  .rmc-content .bottomRmc {
    display: flex;
    margin-top: -5px;
    padding: 5px 12px;
    border-top: 1px solid #ccc;
  }
  
  .rmc-content .rmc-multiple {
    position: relative;
    justify-content: space-between;
    overflow: visible;
  }
  
  .rmc-multiple .rcm-multiple-menu {
    position: absolute;
    background: #fff;
    width: 220px;
    right: -200px;
    top: -35px;
    padding: 13px !important;
    margin: 10px !important;
    opacity: 0;
    pointer-events: none;
    border-radius: 10px;
    /* box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08); */
    -webkit-box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.53);
    -moz-box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.53);
    box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.53);
    transition: 0.2s ease;
  }
  
  .rmc-multiple:hover .rcm-multiple-menu {
    opacity: 1;
    pointer-events: auto;
  }
  
  /* ********************************************************************* */
  
  /* Estilo iOS */
  .switch__container {
    width: 120px;
    transform: scale(0.5);
  }
  
  .switch {
    visibility: hidden;
    position: absolute;
    margin-left: -9999px;
  }
  
  .switch + label {
    display: block;
    position: relative;
    cursor: pointer;
    outline: none;
    user-select: none;
  }
  
  .switch--shadow + label {
    padding: 2px;
    width: 120px;
    height: 60px;
    background-color: #dddddd;
    border-radius: 60px;
  }
  
  .switch--shadow + label:before,
  .switch--shadow + label:after {
    display: block;
    position: absolute;
    top: 1px;
    left: 1px;
    bottom: 1px;
    content: '';
  }
  
  .switch--shadow + label:before {
    right: 1px;
    background-color: #ff5151;
    border-radius: 60px;
    transition: background 0.4s;
  }
  
  .switch--shadow + label:after {
    width: 62px;
    background-color: #fff;
    border-radius: 100%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: all 0.4s;
  }
  
  .switch--shadow:checked + label:before {
    background-color: #8ce196;
  }
  
  .switch--shadow:checked + label:after {
    transform: translateX(60px);
  }
  
  /* Estilo Flat */
  .switch--flat + label {
    padding: 2px;
    width: 120px;
    height: 60px;
    background-color: #dddddd;
    border-radius: 60px;
    transition: background 0.4s;
  }
  
  .switch--flat + label:before,
  .switch--flat + label:after {
    display: block;
    position: absolute;
    content: '';
  }
  
  .switch--flat + label:before {
    top: 2px;
    left: 2px;
    bottom: 2px;
    right: 2px;
    background-color: #fff;
    border-radius: 60px;
    transition: background 0.4s;
  }
  
  .switch--flat + label:after {
    top: 4px;
    left: 4px;
    bottom: 4px;
    width: 56px;
    background-color: #dddddd;
    border-radius: 52px;
    transition: margin 0.4s, background 0.4s;
  }
  
  .switch--flat:checked + label {
    background-color: #8ce196;
  }
  
  .switch--flat:checked + label:after {
    margin-left: 60px;
    background-color: #8ce196;
  }
  
  /* ********************************************************************************************* */
  
  /* data-table */
  
  .list.list-outline.table-container {
    height: 100%;
    margin: 0;
  }
  
  .tabla-container .tabla-body ul:nth-child(odd) {
    background-color: white;
  }
  
  .dark .tabla-container .tabla-body ul:nth-child(odd) {
    background-color: #333;
  }
  
  .tabla-container .column-align-center {
    text-align: center;
    width: 100%;
  }
  
  .tabla-container .bg-status {
    width: 100%;
    text-align: center;
    padding: 3px;
    font-weight: 700;
    border-radius: 25px;
  }
  
  .tabla-container .bg-status-green {
    background-color: green;
    color: white;
  }
  
  .tabla-container .bg-status-red {
    background-color: red;
    color: white;
  }
  
  .tabla-container .bg-status-orange {
    background-color: orange;
    color: white;
  }
  
  .tabla-container .bg-status-gray {
    background-color: gray;
    color: white;
  }
  
  .tabla-container .bg-status-blue {
    background-color: blue;
    color: white;
  }
  
  .tabla-container .data-table .label-cell .input input,
  .tabla-container .data-table .label-cell .input textarea,
  .tabla-container .data-table .label-cell .input select {
    height: var(--f7-table-input-height);
    color: var(--f7-table-input-text-color);
    font-size: var(--f7-table-input-font-size);
  }
  
  .tabla-container .data-table .sortable-cell:not(.numeric-cell):not(.input-cell):after,
  .tabla-container .data-table .sortable-cell.numeric-cell:not(.input-cell):before,
  .tabla-container .data-table .sortable-cell:not(.numeric-cell).input-cell > .table-head-label:after,
  .tabla-container .data-table .sortable-cell.numeric-cell.input-cell > .table-head-label:before {
    position: absolute;
    top: 35%;
    right: 0;
  }
  
  .tabla-container input[type='search'] {
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    outline: 0 !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: var(--f7-font-family) !important;
    background: none !important;
    resize: none !important;
  }
  
  .tabla-container li {
    flex: 1;
    margin-right: 5px;
  }
  
  .tabla-container ul {
    border-bottom: 1px solid #e4e4e4;
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    border-radius: 0px !important;
    /* background-color: white; */
  }
  
  .tabla-container .data-table-actions {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .tabla-container li::-webkit-scrollbar {
    display: none;
  }
  
  /* Hide scrollbar for IE, Edge and Firefox */
  .tabla-container li {
    overflow-x: scroll;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
    white-space: nowrap !important;
  }
  
  .tabla-container .checkbox-cell {
    flex: 0 !important;
    overflow-x: visible;
  }
  
  .tabla-container {
    overflow: hidden;
    margin: 5px 0;
    height: 100%;
  }
  
  .tabla-container .tabla-body {
    overflow-y: scroll;
    height: 84%;
  }
  
  .tabla-container .searchbar-backdrop.searchbar-backdrop-in {
    display: none !important;
  }
  
  .tabla-container .card-header {
    background-color: var(--f7-theme-color) !important;
    color: white !important;
    padding: 0px 10px;
  }
  
  .tabla-container .table-content {
    height: 87%;
  }
  
  .tabla-container .table-header {
    border-bottom: 1px solid black !important;
  }
  
  .tabla-container .data-table-actions i,
  .tabla-container .data-table-actions svg {
    color: white;
  }
  
  .simple-list ul:hover {
    background-color: #e7e7e7 !important;
  }
  
  .dark .tabla-container ul:hover {
    background-color: #414141 !important;
  }
  
  .tabla-container .table-header:hover {
    background-color: white !important;
  }
  
  .dark .tabla-container .table-header:hover {
    background-color: #333 !important;
  }
  
  /* *************************************************************************** */
  
  /* input-grid */
  
  .input-grid-img-container {
    width: 60px;
  }
  
  .input-grid-img-container img {
    width: 100%;
    height: 100%;
  }
  
  /* ******************************************************************************************** */
  /* Message bubble */
  
  .containerMessageDrop {
    width: 96vw;
    height: 96vh;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999999;
  }
  
  /* #outer-dropzone {
    height: 140px;
  } */
  
  #trash-dropzone {
    position: absolute;
    bottom: 0;
    height: 80px;
    /* background-color: #bfe4ff; */
    background: linear-gradient(to top, #00000078, transparent);
    /* border: dashed 4px transparent; */
    border-radius: 4px;
    padding: 10px;
    width: 100%;
    transition: background 0.5s ease, opacity 0.5s ease, visibility 0.5s ease;
    /* Añadí la propiedad 'opacity' a la transición */
    display: flex;
    justify-content: center;
    user-select: none;
    opacity: 0;
    /* z-index: 0; */
    visibility: hidden;
    z-index: 99999;
  }
  
  .trash-dropzone-red {
    width: 100%;
    height: 100%;
    position: absolute;
    background: linear-gradient(to top, #ff6161b0, transparent);
    opacity: 0 !important;
    transition: 0.2s ease all;
  }
  
  .trash-dropzone-active {
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  .trash-dropzone-drop-target .trash-dropzone-red {
    opacity: 1 !important;
  }
  
  /* .trash-dropzone-drop-target {
    background: linear-gradient(to top, #ff6161b0, transparent) !important;
  } */
  
  /* .dropzone {
  
  } */
  
  .bubble-message {
    position: absolute;
    top: 10px;
    right: 10px;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: inline-block;
    /* min-width: 40px; */
    /* padding: 2em 0.5em; */
    /* margin: 1rem 0 0 1rem; */
    color: #fff;
    /* background-color: #29e; */
  
    border: solid 1px rgb(99, 99, 99);
    touch-action: none;
    transform: translate(0px, 0px);
    transition: background-color 0.3s;
    z-index: 999999;
  }
  
  .bubble-message-transition-transform {
    transition: transform 1s;
  }
  
  .bubble-message::before {
    content: 'x';
    background-color: #00000085;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s ease all;
    opacity: 0;
  }
  
  .bubble-message.can-delete::before {
    opacity: 1;
  }
  
  /* 
  .bubble-message.can-delete {
    color: #000;
    background-color: #4e4;
  } */
  
  .bubble-message-img-container {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
  }
  
  .bubble-message img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  
  .bubble-message-title {
    width: max-content;
    font-size: 12px;
    position: absolute;
    bottom: -15px;
    left: -25%;
    /* color: white; */
    color: black;
    -webkit-text-stroke: 0.1px white;
    /* Para navegadores basados en WebKit como Chrome y Safari */
    text-stroke: 0.1px white;
    /* Propiedad estándar para la mayoría de los navegadores */
    font-weight: 600;
    background: white;
  }
  
  .container-message-chat {
    background-color: red;
    position: absolute;
    top: 150px;
    right: 0;
    transition: 0.5s ease all;
    transform: scale(0.01);
    border-radius: 50%;
    width: 10px;
    height: 10px;
    opacity: 0;
    z-index: 999999;
  }
  
  .container-message-chat-active {
    width: 100%;
    height: 60vh;
    border-radius: 15px;
    transform: scale(1);
    opacity: 1;
  }
  
  /* ******************************************************************************************** */
  /* FAB BUTTON */
  .fabButton {
    opacity: 0;
    visibility: hidden;
  }
  
  /* ******************************************************************************************** */
  /* BOTON DE PANICO */
  
  #boton-panico {
    position: absolute;
    bottom: 160px;
    right: 15px;
    z-index: 50;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transition: 0.5s ease all;
    border: 0px;
  }
  
  #boton-panico #btnCancelarUrgencia {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
  }
  
  .card-expandable:not(.card-tablet-fullscreen).card-opened,
  .card-expandable:not(.card-tablet-fullscreen).card-opening {
    border-radius: 3% !important;
  }
  
  #boton-panico .card.card-expandable {
    margin: 0px;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    box-shadow: var(--box-shadow);
    box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.1);
  }
  
  #boton-panico-icono {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    position: relative;
    opacity: 1;
    visibility: visible;
    background: white;
    transition: 0.5s ease all;
    font-size: 22px;
    color: black;
  }
  
  /* ******************************************************************************************** */
  
  :root {
    --f7-badge-text-color: #fff;
    --f7-badge-bg-color: #8e8e93;
    --f7-badge-in-icon-size: 16px;
    --f7-badge-in-icon-font-size: 10px;
    --f7-badge-font-weight: normal;
    --f7-badge-font-size: 12px;
  }
  
  .ios {
    --f7-badge-padding: 0 4px;
    --f7-badge-size: 20px;
    --f7-badge-font-weight: 600;
  }
  
  .md {
    --f7-badge-padding: 2px 6px;
    --f7-badge-size: 20px;
    --f7-badge-font-weight: 500;
  }
  
  .badge {
    display: inline-flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    color: var(--f7-badge-text-color);
    background: var(--f7-badge-bg-color);
    position: relative;
    box-sizing: border-box;
    text-align: center;
    vertical-align: middle;
    font-weight: var(--f7-badge-font-weight);
    font-size: var(--f7-badge-font-size);
    border-radius: var(--f7-badge-size);
    padding: var(--f7-badge-padding);
    height: var(--f7-badge-size);
    min-width: var(--f7-badge-size);
  }
  
  .f7-icons .badge,
  .framework7-icons .badge,
  .icon .badge,
  .material-icons .badge,
  .badge.top {
    position: absolute;
    left: 100%;
    margin-left: -10px;
    top: -2px;
    font-family: var(--f7-font-family);
    --f7-badge-font-size: var(--f7-badge-in-icon-font-size);
    --f7-badge-size: var(--f7-badge-in-icon-size);
    --f7-badge-padding: 0px 2px;
  }
  
  .badge[class*='color-'] {
    --f7-badge-bg-color: var(--f7-theme-color);
  }
  
  .bg-action {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .bg-action .icon-container {
    width: 14px;
    height: 14px;
    text-align: center;
    padding: 10px;
    font-weight: 700;
    background-color: var(--f7-theme-color);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    cursor: pointer;
  }
  
  /* .bg-action .icon-container .bg-color-red {
    --f7-theme-color-bg-color: var(--color-red-500) !important;
  }
  
  .bg-action .icon-container .bg-color-red {
    background-color: red !important;
  }
  
  .bg-action .icon-container .bg-color-red {
    background-color: red !important;
  } */
  
  .list-dividers.simple-list li:after {
    display: none;
  }
  
  /* ******************************************************************************************** */
  /* NOTIFICATION F7 */
  
  .notification-icon {
    font-size: 26px;
  }
  
  .md .notification-with-icon .notification-icon {
    top: 50%;
  }
  
  .notification {
    -webkit-box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.53);
    -moz-box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.53);
    box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.53);
    border-radius: 10px;
  }
  
  .f7-notification-container {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background-color: black;
    color: white;
    text-align: center;
    padding-left: 1px;
    width: 30px;
    height: 30px;
  }
  
  .f7-notification-success {
    background-color: #13d719;
  }
  
  .f7-notification-error {
    background-color: #eb6565;
  }
  
  .f7-notification-info {
    background-color: #3e95ef;
  }
  
  .f7-notification-warning {
    background-color: orange;
  }
  
  /* ******************************************************************************************** */
  /* FLOATING BUTTON */
  
  .fabf7 {
    position: absolute;
    z-index: 1500;
  }
  
  .fabf7 a {
    --f7-touch-ripple-color: var(--f7-touch-ripple-white);
  }
  
  .actions-button,
  .button,
  .checkbox,
  .dialog-button,
  .fabf7 a,
  .item-link,
  .link,
  .list-button,
  .radio,
  .ripple,
  .speed-dial-buttons a,
  .tab-link {
    -webkit-user-select: none;
    user-select: none;
    /* color: black !important; */
  }
  
  .actions-button .ripple-wave,
  .button .ripple-wave,
  .dialog-button .ripple-wave,
  .fabf7 a .ripple-wave,
  .item-checkbox .ripple-wave,
  .item-link .ripple-wave,
  .item-radio .ripple-wave,
  .links-list a .ripple-wave,
  .list label.item-content .ripple-wave,
  .list-button .ripple-wave,
  .list.accordion-list .accordion-item-toggle .ripple-wave,
  .photo-browser .toolbar .link .ripple-wave,
  .ripple-blur .ripple-wave,
  .stepper-button .ripple-wave,
  .stepper-button-minus .ripple-wave,
  .stepper-button-plus .ripple-wave,
  .tab-link .ripple-wave,
  button .ripple-wave {
    animation: touch-ripple-in-blurred 250ms forwards;
    background-image: radial-gradient(closest-side circle at 50% 50%, var(--f7-touch-ripple-color) 50%, rgba(255, 255, 255, 0));
    background-color: transparent;
  }
  
  .fab-buttons a,
  .fabf7 > a {
    background-color: var(--f7-fab-bg-color, var(--f7-theme-color));
    width: var(--f7-fab-size);
    height: var(--f7-fab-size);
    box-shadow: var(--f7-fab-box-shadow);
    border-radius: var(--f7-fab-border-radius);
    position: relative;
    transition-duration: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 1;
    color: var(--f7-fab-text-color);
  }
  
  .fabf7 > a i {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1);
    transition: 0.3s;
  }
  
  .fabf7 > a i + i {
    transform: translate3d(-50%, -50%, 0) rotate(-90deg) scale(0.5);
    opacity: 0;
  }
  
  .ios .fab-buttons a.active-state,
  .ios .fabf7 > a.active-state {
    transition-duration: 0s;
    background-color: var(--f7-fab-pressed-bg-color, var(--f7-theme-color-shade));
  }
  
  .md .fab-buttons a.active-state,
  .md .fabf7 > a.active-state {
    background-color: var(--f7-fab-pressed-bg-color, var(--f7-fab-bg-color, var(--f7-theme-color)));
  }
  
  #messages-section-admin {
    width: 85px;
    height: 86px;
    position: fixed;
    bottom: 200px;
    right: -60px;
    z-index: 50000;
    /* background: red; */
    border-radius: 50px;
    transition: 0.5s ease all;
  }
  
  #messages-section {
    width: 85px;
    height: 86px;
    position: fixed;
    bottom: 120px;
    right: -60px;
    z-index: 50000;
    /* background: red; */
    border-radius: 50px;
    transition: 0.5s ease all;
  }
  
  #messages-section-admin:hover,
  #messages-section:hover,
  .messages-section-active {
    right: 0px !important;
  }
  
  #messages-section.admin .fab-label,
  #messages-section .fab-label {
    max-width: 60vw;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  
  #messages-section-admin .fab-buttons-left,
  #messages-section .fab-buttons-left {
    top: 35%;
  }
  
  .background-message-section {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #0000006b;
    opacity: 0;
    visibility: hidden;
    transition: 0.5s ease all;
  }
  
  .messages-section-active .background-message-section {
    opacity: 1;
    visibility: visible;
  }
  
  #notification-message-section-admin,
  #notification-message-section {
    position: absolute;
    top: 12px;
    left: 5px;
    width: 17px;
    height: 17px;
    background: red;
    z-index: 1501;
    border-radius: 50%;
    color: white;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    font-size: 11px;
  }
  
  #content-message-section-admin,
  #content-message-section {
    z-index: 6000;
    position: absolute;
    background: #eee;
    width: 180px;
    height: 50px;
    border-radius: 15px;
    top: -5px;
    left: 0px;
    translate: 85px;
    transition: 0.5s ease all;
    padding: 6px;
    overflow-y: scroll;
    user-select: none;
    color: black;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  #content-message-section-admin.active-cms,
  #content-message-section.active-cms {
    translate: -185px;
  }
  
  #content-message-section-admin::-webkit-scrollbar,
  #content-message-section::-webkit-scrollbar {
    display: none;
  }
  
  #content-message-section-admin,
  #content-message-section {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  
  .md,
  .md.dark,
  .md.dark [class*='color-'] {
    --f7-button-fill-text-color: white !important;
    --f7-block-title-text-color: white !important;
  }
  
  .md.dark .item-input-focused .item-floating-label,
  .md.dark .item-input-focused .item-label {
    color: white !important;
  }
  
  .dark .list-button {
    color: white;
  }
  
  .list-button .popover-close a {
    color: black !important;
  }
  
  .dark .navbar {
    background-color: #1a1c29;
  }
  
  .draggable-resizable {
    min-height: 350px !important;
    min-width: 350px !important;
    /* touch-action: none;
    user-select: none;
    overflow: hidden;
  
    box-sizing: border-box;
  
    left: 0 !important;
    top: 0 !important;
    margin-left: 0 !important;
    margin-top: 0 !important; */
  }
  
  .dark .sheet-modal-inner,
  .dark .swipe-handler {
    background-color: var(--f7-page-bg-color);
  }
  
  .dark .block-title-large {
    color: white;
  }
  
  .dark .list ul li {
    background-color: transparent !important;
  }
  
  .dark .block-title,
  .dark .item-title {
    color: white !important;
  }
  
  .popup .item-subtitle {
    text-wrap: wrap;
    margin-top: 5px;
  }
  
  .inputgrid-icon-tooltip {
    font-size: 22px;
    color: #1d95ff;
  }
  
  .dark .popup-backdrop {
    background: rgb(0 0 0 / 70%) !important;
  }
  
  /*floating button connection socket*/
  
  .connection-socket-container {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 4px;
    right: 30px;
    width: 44px;
    height: 44px;
    z-index: 1000;
    cursor: pointer;
  
    /*seteamos los valores por defecto de button*/
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    text-align: inherit;
  }
  
  .floatingButtonConnectionSocket {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: var(--box-shadow);
    border-radius: 50%;
    color: white;
    font-size: 18px;
    z-index: 1000;
  }
  .floatingButtonConnectionSocket.reconnect {
    background-color: white;
    color: black;
  }
  .floatingButtonConnectionSocket.connect {
    background-color: #388e3c;
  }
  .floatingButtonConnectionSocket.no-connect {
    background-color: #ef5350;
  }
  .connection-socket-circle {
    display: none;
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid #2196f3;
    border-top-color: white;
    z-index: 1001;
    animation: none;
  }
  
  .dark .connection-socket-circle {
    border-top-color: #333;
  }
  .connection-socket-circle.active {
    animation: spin 1s linear infinite;
  }
  
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
  /* ************************************************** */
  #message-section-handler{
    position: fixed;
    right: 0;
    top: 50vh;
    z-index: 5997;
  }
  
  #message-button-handler {
    z-index: 5998;
    height: 50px;
    width: 25px;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px 0 0 10px;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.6);
    cursor: pointer;
    border: none;
    color: gray;
  }
  
  .md .message + .message:not(.message-first) {
    margin-top: var(--f7-message-margin);
  }
  
  .timeline-item-divider {
    width: 40px !important; /* Tamaño del contenedor */
    height: 40px !important;
    background-color: white !important; /* Color de fondo */
    margin: 0 auto;
    display: flex; /* Para centrar el icono */
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: black !important;
  }
  
  .timeline-item-divider i {
    color: red !important; /* Color del icono */
    font-size: 20px; /* Tamaño del icono */
  }
  
  .timeline-item-divider .fa-location-dot {
    color: #f0af25 !important;
    font-size: 30px !important;
  }
  
  .timeline-item-divider:after {
    color: #000 !important;
  }
  
  .btn-ayuda {
    position: fixed;
  
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--f7-theme-color);
    /* margin: 0 0 0 90%; */
    font-size: 30px;
    right: 15px;
    bottom: 15px;
    z-index: 100;
  }
  
  .btn-ayuda .fa-comments {
    color: var(--color-icon);
  }
  
  .shepherd-button-primary {
    background-color: var(--color-btn-primary) !important;
    color: var(--color-font-primary) !important;
    border-radius: 50px !important;
  }
  
  .shepherd-button-secondary {
    border: 1px solid var(--color-btn-primary) !important;
    border-radius: 50px !important;
  }
  
  .shepherd-element .shepherd-content {
    border-radius: 15px;
  }
  
  .block-title {
    font-size: 18px !important;
    font-weight: bold !important;
  }
  
  .mapLayerOptions ul {
    background-color: #fff4db !important;
  }
  
  .mapLayerOptions ul li {
    border: black;
    justify-content: space-between !important;
    align-items: center !important;
  }
  
  .item-title {
    font-size: 16px !important;
    color: #333 !important;
  }
  
  .margin-vertical {
    width: 90% !important;
  }
  
  .dialog.dialog-no-buttons.modal-out {
    display: none !important;
  }
  
  .dark li::before {
    background: var(--color-input-dark) !important;
  }
  
  .dark .item-content::before {
    background: var(--color-input-dark) !important;
  }
  
  .popup[data-url="/messages-chat/"] {
    z-index: 99999;
  }
  
  .popover-mensajes-predeterminados{
    z-index: 99999;
  }
  
  /* ############################################################## */
  /* Slide button */
  
  .slide-container {
    position: relative;
    width: 100%;
    max-width: 300px;
    height: 50px;
    margin: 5px auto;
    background: #ddd;
    border-radius: 25px;
    overflow: hidden;
    cursor: pointer;
    touch-action: none;
  }
  
  .slide-track {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    color: #666;
    user-select: none;
  }
  
  .slide-track .slide-text{
    margin-left: 45px;
  }
  
  .slide-thumb {
    position: absolute;
    width: 50px;
    height: 50px;
    background: #007aff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    left: 0;
    transition: 0.3s;
    z-index: 1;
  }
  
  .slide-thumb .slide-icon{
    user-select: none;
    z-index: 0;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
  }
  
  
  .slide-container.unlocked .slide-thumb {
    background: #34c759;
    width: 100%;
    border-radius: 25px;
  }
  
  .slide-track:after {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    width: 0%;
    height: 100%;
    border-radius: 10px;
    background: #58a8ff;
    transition: none;
    animation: shine 4s infinite;
    z-index: 0;
  }
  
  @keyframes shine {
    100% {
      width: 120%;
      background-color: rgba(255, 255, 255, 0);
      transition: all 1.2s ease-out;
    }
  }
  
  /* ############################################################## */