:root {
   --main-background: #f4f4f5;
   --primary: #ff0091;
   --primary-light: #ff6cc0;
   --primary-btn: #a37282;
   --black: #07090f;
   --black-background: #000;
   --grey: #bababa;
   --light-gray: #e8e8e8;
   --gray: #c1c1c1;
   --water-green: #c5f4e0;
   --green: #009045;
   --red: #ea1414;
   --white: #fff;
}

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

html,
body {
   margin: 0 !important;
   overflow-x: hidden;
}

html {
   font-size: 62.5%;
   font-family: 'Mulish', sans-serif;
}

html {
   scrollbar-color: #6969dd #e0e0e0;
   scrollbar-width: thin;
}

body {
   font-family: 'Mulish';
   background-color: var(--main-background);
   min-width: 1064px;
}

.modal-lm {
   max-width: 800px;
}

.sc::-webkit-scrollbar {
   width: 5px;
   height: 5px;
}

.sc::-webkit-scrollbar-track {
   background-color: rgba(255, 255, 255, 0.1);
   border-radius: 10px;
}

.sc::-webkit-scrollbar-thumb {
   background-color: var(--primary-light);
   border-radius: 10px;
}

.just-white-background {
   background-color: var(--white);
}

header {
   padding: 12px 40px;
   color: var(--primary);
   font-size: 1.3rem;
   background-color: var(--white);
   display: flex;
   flex-direction: row;
   justify-content: space-between;
}

header img {
   width: 98px;
}

header a {
   color: var(--primary);
   font-weight: bold;
}

.menu-empty {
   background-color: var(--primary);
   padding: 5px;
}

.menu {
   font-size: 1.6rem;
}

.menu ul {
   background-color: var(--primary);
   padding: 10px;
   display: flex;
   flex-direction: row;
   justify-content: space-around;
}

.menu li {
   display: inline-block;
}

.menu li a {
   color: var(--white);
   line-height: 20px;
   text-decoration: none;
}

.menu li a.active {
   border-bottom: 1px solid white;
   padding-bottom: 3px;
}

.menu li.saldo {
   padding: 2px 7px;
   background-color: var(--black);
   color: var(--white);
}

.login {
   padding: 80px 25px;
   /*background-image: url('../images/fondo-principal.jpg');*/
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
}

.login .title div {
   display: flex;
   flex-direction: column;
   color: white;
}

.form-login {
   padding: 40px;
   background-color: white;
   border-radius: 10px;
   width: 420px;
   text-align: center;
}

.form-login .form-control {
   margin: 10px 0;
}

.form-login h3 {
   font-size: 1.6rem;
}

.form-login .forgot {
   color: #a37282;
   text-decoration: none;
   font-size: 1.4rem;
   display: block;
   margin-bottom: 10px;
}

.form-login .register {
   margin-top: 20px;
   font-size: 1.4rem;
   color: #a37c40;
}

.form-login .register a {
   color: #a37c40;
   font-weight: bold;
   text-decoration: underline;
}

.form-login .forgot:hover {
   text-decoration: underline;
}

.login .title h1 {
   font-size: 4.5rem !important;
   color: white;
}

.login .title ul li {
   font-size: 2rem;
   line-height: 3.5rem;
}

.recomendar {
   min-height: 340px;
   max-height: 380px !important;
}

.recomendar form {
   width: 300px;
   height: auto;
   margin: auto;
}

.recomendar form {
   text-align: center;
   font-size: 1.4rem;
}

.recomendar form h3 {
   font-size: 2rem;
   color: var(--black);
   font-weight: bold;
}

.recomendar form .form-control {
   margin-top: 20px;
}

.recomendar form button {
   margin-top: 20px;
}

footer section {
   padding: 10px;
}

footer section .col {
   text-align: center;
}

footer .info {
   background-color: var(--black-background);
   color: var(--white);
   text-align: center;
   padding: 15px;
   font-size: 1.3rem;
}

footer ul li {
   display: inline-block;
   margin: 0 20px;
}

footer ul {
   margin: 0px;
}

span.icon {
   display: inline-block;
   width: 17px;
   height: 17px;
   background-repeat: no-repeat;
   background-size: cover;
   vertical-align: text-bottom;
}

.whatsapp {
   background-image: url('../images/whatsapp-logo.png');
}

.instagram {
   background-image: url('../images/instagram-logo.png');
}

.icon-folder {
   background-image: url('../images/folder.png');
   width: 15px !important;
   height: 16px !important;
}

.rounded-4 {
   border-radius: 0.8rem !important;
}

.rounded-5 {
   border-radius: 1.2rem !important;
}

.form-control {
   width: 100%;
   font-size: 1.4rem !important;
   padding: 10px 15px;
   border-radius: 8px;
   border: 1px solid #ebeff3;
   color: var(--black);
   appearance: auto !important;
   -moz-appearance: auto !important;
   appearance: auto !important;
}

.btn-primary {
   color: #fff;
   background-color: var(--primary);
   border-color: var(--primary);
   font-size: 1.4rem;
   padding: 8px 25px;
   font-weight: 400;
   min-width: 180px;
}

.btn-primary:hover {
   color: var(--white);
   background-color: #db037df6;
   border-color: #db037df6;
}

.btn-primary.disabled,
.btn-primary:disabled {
   color: #fff;
   background-color: #ff0091;
   border-color: #ff0091;
}

.btn-check:focus+.btn-primary,
.btn-primary:focus {
   color: #fff;
   background-color: #db037df6 !important;
   border-color: #db037df6 !important;
   box-shadow: 0 0 0 0.25rem rgb(49 132 253 / 50%);
}

.btn-check:active+.btn-primary,
.btn-check:checked+.btn-primary,
.btn-primary.active,
.btn-primary:active,
.show>.btn-primary.dropdown-toggle {
   color: #fff;
   background-color: #db037df6;
   border-color: #db037df6;
}

.btn-default {
   color: var(--black);
   background-color: var(--light-gray);
   border-color: var(--light-gray);
   font-size: 1.4rem;
   padding: 8px 25px;
   font-weight: 400;
}

.btn-default:hover {
   color: var(--black);
   background-color: #c0c0c0f6;
   border-color: #c0c0c0f6;
}

.btn-dark-primary {
   color: var(--white);
   background-color: var(--primary-btn);
   border-color: var(--primary-btn);
   font-size: 1.4rem;
   padding: 10px 15px;
}

.btn-dark-primary:hover {
   color: var(--white);
   background-color: #95596d;
   border-color: #95596d;
}

.btn-padding {
   padding: 7px 30px;
}

.btn-rounded {
   border-radius: 8px;
}

.inner-addon {
   position: relative;
}

.inner-addon .form-control {
   padding-left: 45px;
}

.inner-addon i.far,
.inner-addon i.fas {
   position: absolute;
   padding: 14px 16px;
   pointer-events: none;
}

i.far,
i.fas,
i.fa {
   font-size: 15px;
}

.left-addon i.far,
.left-addon i.fas {
   left: 0px;
}

.right-addon i.far,
.right-addon i.fas {
   right: 0px;
}

.form-login i.far,
.form-login i.fas,
.main-container i.far,
.main-container i.fas {
   padding: 14px 17px;
}

.main-container {
   padding: 35px 55px;
   display: block;
}

.main-container .titulo {
   font-size: 2.6rem;
}

.main-container fieldset {
   margin: 30px 0;
   border: 2px solid var(--black);
   border-radius: 5px;
   padding: 25px;
}

.main-container fieldset legend {
   font-size: 1.6rem !important;
   font-weight: bold;
   padding: 5px 35px;
   font-size: 32px;
   margin-left: 20px;
   float: none;
   width: auto;
}

.main-container fieldset .form-label,
.main-container .form-check-label {
   font-size: 1.5rem;
}

.main-container fieldset .row {
   padding: 0 30px;
   margin-bottom: 30px;
}

.main-container fieldset .row>* {
   padding-right: calc(var(--bs-gutter-x) * 0.7);
   padding-left: calc(var(--bs-gutter-x) * 0.7);
}

.main-container input[type='radio'] {
   transform: scale(1);
}

.main-container .form-check label {
   font-size: 1.5rem;
   position: relative;
   top: -4px;
   left: 5px;
}

.main-container .form-check label:hover {
   cursor: pointer;
}

.main-container .form-check {
   margin: 0 20px;
}

.main-container .form-check-input:checked {
   background-color: var(--primary);
   border-color: var(--primary);
}

.modal-header {
   padding: 20px 30px;
   border: none;
}

.modal-content {
   border-radius: 1.3rem;
}

.mtop-negativo {
   margin-top: -15px;
}

.modal-body h4 {
   font-weight: bold;
   font-size: 1.6rem;
   margin-bottom: 10px;
}

.modal-body p {
   font-size: 1.4rem;
}

.content-olvido-contra {
   width: 370px;
}

.modal-body button {
   margin-top: 20px;
   margin-bottom: 20px;
}

.text-bold {
   font-weight: bold;
}

.text-primary {
   color: var(--primary) !important;
}

.main-container {
   font-size: 1.6rem;
   line-height: 35px;
}

.main-img-item {
   width: 13px;
   margin-right: 10px;
}

.table-simple {
   width: 95%;
   margin: 0 40px 20px 40px;
}

.table-data {
   background-color: var(--white);
   border-radius: 10px;
   border-collapse: inherit;
   padding-bottom: 20px;
}

.table-data thead tr {
   border-bottom: 1px solid var(--light-gray);
}

.table-data>tbody *:last-child>tr:last-of-type {
   background-color: #0f0;
}

.table-data th {
   font-size: 1.5rem;
   font-weight: bold;
   padding: 20px 0;
}

.table-data td {
   font-size: 1.4rem;
   padding: 20px 0;
   border-bottom: none;
}

.table-data th,
.table-data td {
   text-align: center;
}

.table-data td.precio {
   font-weight: bold;
}

.table-data tbody tr {
   border-bottom: 1px solid var(--light-gray);
}

.table-data tbody tr:last-child {
   border-bottom: none;
}

.link-primary {
   color: var(--primary);
   text-decoration: underline;
}

.link-primary:hover {
   color: var(--primary-light);
}

.icon-acciones {
   width: 25px;
}

#modalContenidoPedido .modal-header {
   border-bottom: 1px solid var(--light-gray);
}

.modal-header h4 {
   font-weight: bold;
   font-size: 2rem;
}

.content-detalle-pedido {
   width: 95%;
   font-size: 1.7rem;
   margin: 10px 0;
}

.content-detalle-pedido section {
   margin-bottom: 20px;
}

.content-detalle-pedido h3 {
   padding: 10px;
   text-align: justify;
   font-size: 1.7rem;
   font-weight: bold;
}

.content-detalle-pedido .row {
   padding: 0 30px;
   font-size: 1.6rem;
   text-align: justify;
   line-height: 30px;
}

.content-detalle-pedido table {
   background-color: var(--main-background);
   padding: 15px;
   border-collapse: inherit;
   border-radius: 8px;
}

.content-detalle-pedido table th {
   padding: 8px 0;
   font-size: 1.4rem;
}

.content-detalle-pedido table td {
   padding: 8px 0;
   font-size: 1.4rem;
}

.container-nuevo-pedido table {
   border-collapse: inherit;
   background-color: var(--white);
   border-radius: 10px;
   padding: 30px 30px 50px 30px;
   text-align: center;
   min-height: 300px;
   max-height: 350px;
   overflow: auto;
}

.container-nuevo-pedido table th {
   padding: 10px;
   font-size: 1.5rem;
}

.container-nuevo-pedido table td {
   padding: 10px 0;
   font-size: 1.4rem;
}

.container-nuevo-pedido section {
   margin: 30px auto;
}

.container-nuevo-pedido section h4 {
   font-size: 2rem;
   font-weight: bold;
}

.container-nuevo-pedido .section-entrega {
   display: flex;
   flex-direction: column;
   min-width: 900px;
}

.container-nuevo-pedido .section-entrega .container-entrega {
   margin: 20px 50px;
}

.container-nuevo-pedido .section-entrega .card {
   padding: 20px;
   border-radius: 16px;
   margin: auto;
   text-align: left;
   border: none;
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
   min-width: 400px;
   max-width: 600px;
   line-height: 30px;
   height: 320px;
}

.container-nuevo-pedido .section-entrega .card .row {
   margin: 10px 20px;
}

.container-nuevo-pedido .card:hover {
   cursor: pointer;
}

.container-nuevo-pedido .card {
   background-image: url('../images/check-disabled.png');
   background-repeat: no-repeat;
   background-size: 28px;
   background-position: right 10px top 10px;
}

.container-nuevo-pedido .card.active {
   border: 3px solid var(--primary);
   background-image: url('../images/check.png');
   background-repeat: no-repeat;
   background-size: 28px;
   background-position: right 10px top 10px;
}

.container-nuevo-pedido .section-entrega .card-body {
   font-size: 1.4rem;
}

.container-nuevo-pedido .section-entrega .card h3 {
   font-weight: bold;
   font-size: 1.6rem;
}

.m-e-5 {
   margin-right: 20px;
}

.m-s-5 {
   margin-left: 20px;
}

.line-height-small {
   line-height: 22px;
}

.line-height-medium {
   line-height: 32px !important;
}

.m-tb-force {
   margin-top: 20px !important;
   margin-block-end: 20px !important;
}

.comprobante-pago {
   margin: 20px;
   padding: 25px;
   background-color: #f1f1f1;
   border-radius: 10px;
   line-height: 30px;
}

.comprobante-pago .row {
   margin: 18px 0;
}

.content-pedido-registrado {
   line-height: 60px;
}

.content-pedido-registrado p {
   line-height: 25px;
}

.content-edicion-destino {
   padding: 10px 40px 20px 40px;
}

.content-edicion-destino form .row {
   font-size: 1.4rem;
   margin: 30px 0px;
}

.swal2-popup {
   width: 45em !important;
}

.swal2-title {
   font-size: 2.4rem !important;
}

.swal2-content {
   font-size: 1.6rem !important;
   line-height: 25px;
}

.swal2-actions {
   margin-top: 30px !important;
}

.swal2-styled.swal2-confirm,
.swal2-styled.swal2-cancel {
   font-size: 1.3rem !important;
}

.small {
   font-size: 1.3rem !important;
}

.big {
   font-size: 2rem !important;
}

.table tfoot td {
   border-bottom: none;
}

.password-info {
   font-size: 1.4rem !important;
}

.password-info .fas {
   padding: 10px 2px !important;
}

.modal-sm {
   max-width: 700px;
}

.modal-xs {
   max-width: 600px;
}

.modal-lg,
.modal-xl {
   max-width: 900px;
}

.modal-xxl {
   max-width: 1200px;
}

.whatsapp-content {
   position: fixed;
   bottom: 0;
   right: 0;
   margin: 30px;
   background-color: #3abb4b;
   padding: 15px;
   border-radius: 50%;
   box-shadow: 0px 4px 4px rgb(0 0 0 / 25%);
}

.whatsapp-content img {
   width: 3.5rem;
   font-weight: bold;
}

.content-whatsapp h4 {
   font-size: 2rem;
}

.content-whatsapp p {
   width: 80%;
   margin: 20px auto;
   line-height: 25px;
   font-size: 1.5rem;
}

.content-whatsapp ul {
   margin: 35px auto;
   width: 40%;
   line-height: 35px;
}

.content-whatsapp li {
   font-size: 1.8rem;
   display: block;
   margin-top: 9px;
   font-weight: 700;
}

.content-whatsapp li img {
   margin-right: 10px;
}

.dropdown-menu {
   font-size: 1.3rem !important;
}

.content-pedido-guardado {
   text-align: center;
   line-height: 25px;
}

.content-pedido-guardado h4 {
   font-size: 1.8rem;
}

.content-pedido-guardado p {
   font-size: 1.7rem;
}

.content-pedido-guardado img.check {
   margin: 20px auto;
}

.content-pedido-guardado .card {
   text-align: justify;
   padding: 15px 40px;
   line-height: 20px;
   font-size: 1.4rem;
   width: 80%;
   margin: 20px auto;
   border: none;
   border-radius: 5px;
}

.content-pedido-guardado .card p {
   margin-bottom: 0px;
}

.content-pedido-guardado .card .title {
   font-size: 1.5rem;
   font-weight: bold;
}

.content-pedido-guardado .card.primary-bg {
   background-color: #ffdef1;
}

.content-pedido-guardado .card.green-bg {
   background-color: var(--water-green);
}

.disabled {
   background-color: #e9ecef;
   opacity: 1;
}

.titulo-recomendar {
   font-size: 1.5rem;
}

.content-detalle-recomendar {
   font-size: 1.4rem;
   text-align: justify;
   padding: 10px;
}

.table-detalle-recomendar {
   font-size: 1.6rem;
   border-collapse: separate;
   border-spacing: 15px;
}

.table-detalle-recomendar tr td {
   text-align: justify;
}

.table-detalle-recomendar tr>td {
   margin-bottom: 10px;
}

.m-r-20 {
   margin-right: 20px;
}

.m-l-20 {
   margin-left: 20px;
}

#modalTerminosPago .modal-body {
   font-size: 1.6rem;
   padding: 10px 20px 20px 20px;
}

.content-terminos-condiciones h4 {
   font-weight: bold;
   font-size: 22px !important;
}

.tableFixHead {
   overflow: auto;
   min-height: 350px;
   max-height: 700px;
}

.tableFixHead thead th {
   position: sticky;
   top: 0;
   z-index: 1;
}

.tableFixHead th {
   background: white;
}

.font-12 {
   font-size: 1.2rem;
}

.font-14 {
   font-size: 1.4rem;
}

.font-16 {
   font-size: 1.6rem !important;
}

.font-18 {
   font-size: 1.8rem !important;
}

.btn-details i {
   font-size: 10px;
   padding: 9px 4px !important;
}

.btn-details {
   padding: 0px 10px;
   font-size: 1.2rem;
   width: auto !important;
}

.dropdown-menu table {
   width: 240px;
   font-size: 16px;
}

.dropdown-menu table thead {
   color: var(--primary) !important;
   font-weight: bold;
}

#modalTerminosPago .modal-body {
   text-align: left !important;
   font-size: 1.5rem !important;
}

.form-control:disabled,
.form-control[readonly].normal-bg {
   background-color: #fffffe;
   opacity: 1;
}

.list-group-item {
   padding: 15px 25px;
}

.swal2-popup {
   width: 55em !important;
}

.label {
   border-radius: 30px;
   color: white;
   padding: 6px 10px;
   font-size: 11px;
}

.label-success {
   background-color: green;
}

div:where(.swal2-container) .swal2-html-container {
  font-size: 1.8em !important;
}