.contact-card .product-card-info {
display: flex;
flex-direction: column;
/*background-color: var(--color-white);*/
width: 100%;
padding: 12px 12px 12px 15px !important;
border-radius: 8px;
overflow: hidden;
color: var(--color-black);
}
.product-category {
font-size: 14px !important;
}
.card-productos.active {
background-color: var(--color-light-blue-5);
box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3);
/*border: 1px solid var(--color-light-blue-7); */
}
.card-productos.active .contact-other-info {
color: var(--color-dark-blue-3);
}
.card-productos.active .contact-name {
color: var(--color-dark-blue-3);
}
.producto-botones-selecciones {
padding: 6px 0px !important;
/*18px*/
width: unset !important;
}
.text-color-red {
color: var(--color-red);
}
.text-color-white {
color: var(--color-white);
;
}
.search-wrapper {
border-bottom: 1px solid var(--color-red);
height: 75px;
padding: 8px 15px;
overflow: hidden;
}
.text-buscador {
font-family: Roboto, sans-serif;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 14px;
color: var(--color-gray);
margin-top: 16px;
margin-bottom: 15px;
}
.width-312 {
width: 312px;
}
.padding-24 {
padding: 24px
}
.padding-16 {
padding: 16px
}
.padding-x-16 {
padding-left: 16px;
padding-right: 16px;
}
.subTitulo {
font-family: Roboto, sans-serif;
font-weight: 500;
font-size: 22px;
line-height: 28px;
}
.secondary-title {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 14px;
display: flex;
align-items: center;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.container-options .nombreDireccion:hover {
background: rgba(191, 7, 0, 0.08);
border-radius: 4px;
height: 48px;
display: flex;
align-items: center;
width: 243px;
}
.cod-postal {
height: 50px;
width: 100%;
background: #BEE5EB;
border: 1px solid #D1ECF1;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.15);
border-radius: 8px;
font-family: Roboto, sans-serif;
font-size: 12px;
line-height: 20px;
letter-spacing: 0.0075em;
color: #0C5460;
margin-bottom: 10px;
}
.form-label {
font-family: Roboto, sans-serif;
font-size: 16px;
line-height: 28px;
color: var(--color-gray);
}
input:focus-visible {
border: none;
border-bottom: 1px solid #A4A4A4;
outline: none;
}
.input-direc {
border: none;
font-family: Roboto, sans-serif;
font-size: 16px;
line-height: 28px;
border-bottom: 1px solid #A4A4A4;
width: 100%;
margin-top: 20px;
padding-left: 15px;
}
.valid {
background: var(--color-white);
}
.valid .form-label {
background: var(--color-white);
border-radius: 4px 4px 0px 0px;
color: var(--color-dark-green-2) !important;
}
.msn-delete {
width: 730px;
height: 50px;
background: var(--color-dark);
box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.15);
left: calc(50% - 365px);
border-radius: 8px;
padding: 15px 16px;
position: fixed;
z-index: 10;
top: 100%;
transition: all ease 0.5s;
}
.msn-delete.visible {
top: 90%;
}
.texto-blanco {
font-family: Roboto, sans-serif;
font-size: 14px;
line-height: 20px;
color: var(--color-white);
}
.container-options {
background: var(--color-white);
width: 275px;
box-shadow: 0px 8px 12px 6px rgb(0 0 0/ 15%), 0px 4px 4px rgb(0 0 0/ 30%);
border-radius: 8px;
padding: 20px 0px 16px 10px;
float: right;
z-index: 2;
top: 0px;
right: -260px;
position: absolute;
}
.container-direccion {
width: 353px;
height: 168px;
background: var(--color-white);
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 1px 2px rgba(0, 0, 0, 0.3);
border-radius: 8px;
padding: 20px 16px 16px 16px;
}
.img-empty {
align-items: center;
display: flex;
height: 100px;
justify-content: center;
width: 100%;
}
.principal-title {
font-family: Roboto, sans-serif;
font-weight: bold;
color: #000000;
font-size: 28px;
line-height: 36px;
}
.pad-option {
padding: 0px 12px 0px 12px;
}
.black-text {
font-family: Roboto, sans-serif;
font-size: 16px;
line-height: 24px;
justify-content: center;
display: flex;
letter-spacing: 0.5px;
color: #000000;
margin-top: 32px;
margin-bottom: 16px;
}
.text-pregunta {
font-family: Roboto, sans-serif;
font-size: 14px;
line-height: 20px;
justify-content: center;
letter-spacing: 0.25px;
color: var(--color-gray);
margin-bottom: 32px;
}
.text-aclaracion {
font-family: Roboto, sans-serif;
font-size: 12px;
line-height: 20px;
justify-content: center;
letter-spacing: 0.25px;
color: var(--color-gray);
margin-bottom: 32px;
}
.form-group {
position: relative;
background: var(--color-white);
}
.nombreDireccion {
font-family: Roboto, sans-serif;
font-size: 16px;
line-height: 21px;
letter-spacing: 1px;
color: var(--color-black);
}
.infoDireccion {
font-family: Roboto, sans-serif;
font-size: 12px;
line-height: 16px;
letter-spacing: 0.5px;
color: var(--color-black);
margin-bottom: 8px;
}
.red-accion {
font-family: Roboto, sans-serif;
font-size: 16px;
line-height: 20px;
color: var(--color-red);
cursor: pointer;
}
.valid .input-direc {
background: var(--color-white);
border-radius: 4px 4px 0px 0px;
color: var(--color-dark-green-2) !important;
background-image: "../img/success.svg";
background-repeat: no-repeat;
background-position: center right calc(0.375em + 0.1875rem);
}
.no-valid {
background: var(--color-light-red-2);
}
.no-valid .form-label {
background: var(--color-light-red-2);
border-radius: 4px 4px 0px 0px;
color: var(--color-dark-red) !important;
}
.no-valid .input-direc {
color: var(--color-dark-red) !important;
background: var(--color-light-red-2);
border-radius: 4px 4px 0px 0px;
background-image: "../img/error.svg";
background-repeat: no-repeat;
background-position: center right calc(0.375em + 0.1875rem);
border-radius: 4px 4px 0px 0px;
}
/**/
/* MIS ESTILOS */
:root {
--color-white: #FFFFFF;
--color-light: #FBFBFB;
--color-light-2: #F1F1F1;
--color-light-3: #FCFCFC;
--color-light-4: rgba(103, 103, 103, 0.08);
--color-light-5: #E5E5E5;
--color-light-6: rgba(103, 103, 103, 0.12);
--color-orange: #FF6640;
--color-light-red: #ffefec;
--color-light-red-2: #FFDAD4;
--color-light-red-3: #a70d151a;
--color-light-red-4: #FFEDE9;
--color-light-red-5: rgba(33, 33, 33, 0.08);
--color-light-red-6: rgba(214, 21, 0, 0.08);
--color-red: #D61500;
--color-red-2: #BA1B1B;
--color-red-middle: #BF1400;
--color-dark-red: #680003;
--color-dark-red-2: #410001;
--color-light-gray: #878787;
--color-light-gray-2: #F6F6F6;
--color-light-gray-3: #C3C3C3;
--color-light-gray-4: #7B7B7B;
--color-light-gray-5: rgba(103, 103, 103, 0.32);
--color-gray: #676767;
--color-dark: #474747;
--color-black: #262626;
--color-dark-black: #212121;
--color-dark-black-2: #000000;
--color-light-green: #37994C;
--color-light-green-2: #E6F6E7;
--color-light-green-3: rgb(37 118 54 / 8%);
/*e2ece2*/
--color-light-green-4: #4CAF50;
--color-light-green-5: #C2E7C5;
--color-light-green-6: #eff7f1;
--color-light-green-7: rgb(21 87 36);
--color-green: #2E8741;
--color-dark-green: #257636;
--color-dark-green-2: #155724;
--color-light-blue: #3456C1;
--color-light-blue-2: #2047B8;
--color-light-blue-3: #BEE5EB;
--color-light-blue-4: #E4F2FF;
--color-light-blue-5: rgb(0 51 160 / 8%);
/* #C3C9ED al 8% */
--color-light-blue-6: #E7EAF8;
--color-light-blue-7: #C3C9ED;
--color-blue: #0033A0;
--color-dark-blue: #03256d;
--color-dark-blue-2: #002168;
--color-dark-blue-3: #18255B;
--color-dark-blue-4: #0D1645;
--color-dark-blue-5: #001E31;
--color-light-yellow: #fff8e3;
--color-light-yellow-2: #FFEBB2;
--color-yellow: #CDB415;
--color-dark-yellow: #A6890C;
--color-dark-yellow-2: #856404;
}
html {
margin-left: calc(100vw - 100%) !important;
margin-right: 0 !important;
}
/*este del body no se debe poner en el liferay*/
html,
body {
background-color: var(--color-light) !important;
margin: 0;
color: var(--color-dark-black);
overflow-x: hidden;
}
/*html, body, section {
}*/
/* MODAL */
.modal-dialog {
position: static !important;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100% !important;
height: 100%;
margin: 0 !important;
max-width: 100% !important;
pointer-events: all !important;
}
.modal-dialog .max-modal-body-height.size-y-1 {
height: 320px;
}
.btns-modal {
text-align: end;
padding-right: 24px;
margin-top: 1.5625rem;
}
.modal-content {
box-shadow: 0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px rgba(0, 0, 0, 0.3) !important;
border-radius: 8px !important;
border: transparent !important;
background: var(--color-white);
margin-left: calc(54% - 160px);
width: 428px;
height: 203px;
position: relative;
display: flex;
outline: 0;
padding: 24px;
}
.modal-content.full {
overflow: visible;
}
.modal-title-delete {
font-family: Roboto, sans-serif;
color: #000000;
font-size: 24px;
line-height: 32px;
font-weight: 700;
}
.overlay {
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(103, 103, 103, 0.32);
transition: opacity 200ms;
}
/* FIN MODAL */
/* BUSCADOR DE DIRECCIONES */
.form_search {
position: relative;
}
.form_search .flex_search {
display: flex;
}
.form_search .flex_search .input_search {
border: none;
padding: 10px 20px 10px 0px;
margin: 20px 0px;
width: auto;
height: auto;
background: transparent;
color: var(--color-red);
outline-color: transparent;
font-family: Roboto, sans-serif;
font-size: 16px;
line-height: 24px;
}
.form_search .flex_search .input_search::-moz-placeholder {
color: var(--color-red);
outline-color: transparent;
font-family: Roboto, sans-serif;
font-size: 16px;
line-height: 24px;
}
.form_search .flex_search .input_search::-webkit-input-placeholder {
color: var(--color-red);
outline-color: transparent;
font-family: Roboto, sans-serif;
font-size: 16px;
line-height: 24px;
}
.form_search .flex_search .input_search:-ms-input-placeholder {
color: var(--color-red);
outline-color: transparent;
font-family: Roboto, sans-serif;
font-size: 16px;
line-height: 24px;
}
.form_search .flex_search .button_search {
border: none;
background: transparent;
color: var(--color-white);
font-size: 17px;
cursor: pointer;
outline-color: transparent;
margin-bottom: 5px;
}
.title-buscador {
font-family: Roboto, sans-serif;
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 21px;
color: var(--color-red);
height: 56px;
border-bottom: 1px solid #F1F1F1;
padding-top: 16px;
padding-left: 16px;
margin-bottom: 0;
}
.tableBusqueda {
background: var(--color-white);
height: auto;
box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3);
border-radius: 8px;
position: absolute;
z-index: 2;
}
/* FIN BUSCADOR DE DIRECCIONES */
.select-list {
list-style: none;
margin: 0px;
background-color: var(--color-white);
padding: 0px;
box-shadow: 0px 1px 2px rgb(0 0 0 / 30%), 0px 2px 6px 2px rgb(0 0 0 / 15%);
border-radius: 4px;
}
.select-list .list-item {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 14px;
color: var(--color-gray);
height: auto;
padding: 8px 4px;
}
.select-list .list-item:hover {
background: rgba(0, 51, 160, 0.08);
}
/* BUSCADOR y PREDICTOR */
.search-container {
padding: 0px;
overflow: hidden;
position: relative;
width: 330px;
max-height: 327px;
/* M3/sys/light/on-primary */
background: var(--color-white);
/* M3/Elevation Light/3 */
box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3);
border-radius: 4px;
}
.search-elements {
list-style: none;
margin: 0px;
padding: 0px;
}
.text-resultado {
display: flex;
flex-direction: row;
align-items: center;
justify-content: start;
font-family: Roboto, sans-serif;
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 21px;
color: var(--color-dark);
width: 100%;
height: 65px;
padding: 10px 10px 10px 20px;
cursor: pointer;
}
.text-resultado .filled {
display: none;
}
.text-resultado:hover {
background: rgba(103, 103, 103, 0.08);
border-radius: 8px;
width: 100%;
height: 65px;
color: var(--color-dark);
}
.text-resultado.selected {
background: rgba(103, 103, 103, 0.12);
border-radius: 8px;
}
.text-resultado.selected .outlined {
display: none;
}
.text-resultado.selected .filled {
display: block;
}
.buscador-alias {
font-family: Roboto, sans-serif;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 21px;
color: var(--color-gray);
}
.search-elements-predictor {
list-style: none;
margin: 0px;
padding: 0px;
background-color: var(--color-white);
border-radius: 8px;
box-shadow: 0px 8px 12px 6px rgba(0, 0, 0, 0.15);
/* filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.3)); */
}
.text-resultado-predictor {
font-family: Roboto, sans-serif;
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 21px;
color: var(--color-red-middle);
height: 65px;
width: 100%;
padding: 0px 16px 0px 16px;
cursor: pointer;
border-radius: 8px;
margin-top: -0.5px;
}
.text-resultado-predictor:hover {
background: rgba(214, 21, 0, 0.08);
/* border-bottom: 1px solid rgba(103, 103, 103, 0.08); */
}
.text-resultado-predictor.selected {
background: rgba(214, 21, 0, 0.12);
}
.text-resultado-predictor>.item {
padding: 12px 0px 8.6px 0px;
border-bottom: 1px solid #F6F6F6;
height: 65px;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: start;
}
.text-resultado-predictor:hover>.item {
padding: 12px 0px 8.6px 0px;
border-bottom: 1px solid transparent
}
.buscador-alias-predictor {
font-family: Roboto, sans-serif;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 21px;
color: var(--color-red-middle);
}
.text-resultado-predictor.blue {
font-family: Roboto, sans-serif;
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 21px;
color: var(--color-blue);
height: 65px;
width: 100%;
padding: 0px 16px 0px 16px;
cursor: pointer;
border-radius: 8px;
margin-top: -0.5px;
}
.text-resultado-predictor.blue:hover {
background: #183b860c;
/* border-bottom: 1px solid rgba(103, 103, 103, 0.08); */
}
.text-resultado-predictor.blue.selected {
background: #E7EAF8;
}
.text-resultado-predictor.blue>.item {
padding: 12px 0px 8.6px 0px;
border-bottom: 1px solid #F6F6F6;
height: 65px;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: start;
}
.text-resultado-predictor.blue:hover>.item {
padding: 12px 0px 8.6px 0px;
border-bottom: 1px solid transparent
}
.buscador-alias-predictor.blue {
font-family: Roboto, sans-serif;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 21px;
color: var(--color-blue);
}
/* FIN BUSADOR Y PREDICTOR */
/* TOOLTIP */
/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
position: relative;
z-index: 2;
cursor: pointer;
}
/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
visibility: hidden;
/* -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0); */
opacity: 0;
pointer-events: none;
}
/* Position tooltip above the element */
[data-tooltip]:before {
position: absolute;
bottom: 140%;
left: -80%;
text-align: left;
padding: 16px;
gap: 16px;
width: 343px;
height: 72px;
/* Secundario/140 */
background: var(--color-dark);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 8px;
/* background-color: #000; */
background-color: var(--color-dark);
color: var(--color-white);
content: attr(data-tooltip);
/* text-align: center; */
font-size: 14px;
/* line-height: 1.2; */
font-family: Roboto, sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 20px;
/* or 143% */
/* Blanco_y_Negro/Blanco */
}
/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
width: 0;
/* border-top: 10px solid #000; */
border-top: 10px solid var(--color-dark);
border-right: 7px solid transparent;
border-left: 7px solid transparent;
content: " ";
font-size: 0;
line-height: 0;
}
/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
visibility: visible;
/* -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100); */
opacity: 1;
}
/*FIN TOOLTIP*/
.modal-dialog-pago-impuestos-notification {
position: fixed;
width: 100%;
left: calc(10% - 230px);
top: calc(50% - 250px);
}
/* CLASES ESPECIFICAS PARA MODAL DE TERMINOS Y CONDICIONES */
.new-term-divisor {
display: flex;
flex-direction: row;
justify-content: space-between;
position: relative;
margin: 15px 0px;
}
.new-term-divisor .new-term-notification-word {
size: 18px;
font-family: Roboto, sans-serif;
font-style: normal;
font-weight: 600;
padding: 6px 16px;
background: #F1F1F1;
border-radius: 8px;
position: absolute;
left: 41.5%;
top: -18px;
width: 84px;
height: 33px;
text-align: center;
line-height: 20px;
color: var(--color-black);
}
.new-term-divisor .new-term-notification-external-line {
height: 1px;
width: 195px;
background-color: rgba(33, 33, 33, 0.08);
}
.popup-form-title.terms-and-conditions {
width: 516px;
margin-bottom: 1.8rem;
}
.modal-dialog-new-terms-and-conditions-notification {
position: fixed;
width: 100%;
left: calc(5% - 230px);
bottom: 50%;
top: calc(50% - 250px);
}
.modal-dialog-terms-and-conditions {
position: fixed;
width: 100%;
left: calc(5% - 230px);
bottom: 50%;
top: calc(40% - 250px);
}
.modal-content-terms-and-conditions {
box-shadow: 0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px rgba(0, 0, 0, 0.3);
border-radius: 8px;
background: var(--color-white);
margin-left: calc(50% - 160px);
width: 554px;
height: 656px;
position: relative;
display: flex;
outline: 0;
/* padding: 35px 15px 10px 36px !important; */
letter-spacing: 0.25px;
}
.modal-text-terms-and-conditions-body {
font-family: Roboto, sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 28px;
color: var(--color-gray);
height: 500px;
width: 513px;
}
.modal-text-terms-and-conditions-body ul {
margin-left: -18px;
}
.text-pre-line {
white-space: pre-line;
}
.modal-text-terms-and-conditions-body .text-important {
font-weight: 700;
}
.modal-text-terms-and-conditions-body .highlight {
background: #FFE9E7;
letter-spacing: 0.1px;
transition: all 1000ms
}
.modal-body-with-scroll {
overflow-y: auto !important;
}
.modal-body-with-scroll::-webkit-scrollbar {
width: 8px !important;
}
.modal-body-with-scroll::-webkit-scrollbar-track {
/* box-shadow: inset 0 0 2px #333;
border-radius: 10px; */
border: 0px !important;
}
.modal-body-with-scroll::-webkit-scrollbar-thumb {
background: #D9D9D9 !important;
/* opacity: 0.6; */
border-radius: 4px !important;
}
.modal-body-with-scroll::-webkit-scrollbar-thumb:hover {
background: rgba(51, 51, 51, 1) !important;
}
/* FIN MODAL TERMINOS Y CONDICIONES*/
/* CLASES PARA LOS BOTONES */
.form-buttons-container {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 15px;
width: 100%;
height: 41px;
}
.btn-basic {
border-radius: 100px;
font-family: Roboto, sans-serif;
font-size: 16px;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: auto;
padding: 12px 24px;
cursor: pointer;
height: 45px;
line-height: 17px;
letter-spacing: 0.5px;
border: 1px solid black;
}
.btn-basic.btn-disabled,
.btn-basic.esperandoDatos {
pointer-events: none;
opacity: 0.5;
}
.btn-basic.btn-small {
width: 159px;
}
.btn-basic.btn-small-big {
width: 166px;
}
.btn-basic.btn-medium {
width: 201.5px;
}
.btn-basic.btn-medium-2 {
width: 225.5px;
height: 42px;
}
.btn-basic.btn-large {
width: 240px;
}
.btn-basic.btn-large-1 {
width: 266px;
}
.btn-basic.btn-large-2 {
width: 300px;
}
.btn-basic.btn-middle {
width: 50%;
}
.btn-basic.btn-big {
width: 100%;
}
.btn-basic.btn-color-red {
background: var(--color-red);
color: var(--color-white);
border: 1px solid transparent;
}
.btn-basic.btn-color-red:hover {
background: linear-gradient(0deg, rgba(214, 21, 0, 0.08), rgba(214, 21, 0, 0.08)), #D61500;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 1px 2px rgba(0, 0, 0, 0.3);
border-radius: 100px;
}
/* .btn-basic.btn-color-red.btn-disabled {
opacity: 0.5;
} */
/* .btn-basic.btn-color-red.btn-disabled {
background: #FFE9E7;
color: #FF8463;
border: 1px solid transparent;
} */
.btn-basic.btn-tranparent-hover-blue {
border: 1px solid transparent;
flex: none;
}
.btn-basic.btn-tranparent-hover-blue.btn-disabled {
opacity: 0.5;
}
.btn-basic.btn-tranparent-hover-blue:hover {
background-color: #031e5a0f;
}
.btn-basic.btn-tranparent-hover-gray {
border: 1px solid transparent;
flex: none;
}
.btn-basic.btn-tranparent-hover-gray.btn-disabled {
opacity: 0.5;
}
.btn-basic.btn-tranparent-hover-gray:hover {
background-color: #67676719;
}
.btn-cancel-action {
color: var(--color-red);
background-color: var(--color-white);
border: 1px solid var(--color-red);
}
.btn-cancel-action:hover {
background-color: rgba(214, 21, 0, 0.08);
}
.btn-cancel {
font-size: medium;
font-size: 18px;
border-radius: 100px;
justify-content: center;
font-family: Roboto, sans-serif;
font-weight: 500;
align-items: center;
padding: 10px;
text-align: center;
background: transparent;
color: var(--color-red);
cursor: pointer;
width: 201.5px;
height: 41px;
/* margin-left: calc(50% - 100px); */
border: 1px solid;
line-height: 21px;
}
.btn-corp {
border-radius: 1.625rem;
line-height: 1.188rem;
padding: 10px 2.4rem;
cursor: pointer;
}
.btn-search-sucursales-mobile-position {
position: sticky;
bottom: 20px;
width: 100%;
padding-bottom: 5px;
height: auto;
overflow: hidden;
/* background-color: white; */
}
.btn-new-direccion {
display: flex;
justify-content: center;
/* position: relative;
left: calc(50%-250px); */
padding: 10px 24px 10px 16px;
width: 277px;
background: var(--color-red);
border-radius: 100px;
font-family: Roboto, sans-serif;
font-size: 18px;
color: var(--color-white);
margin-left: auto;
margin-right: auto;
cursor: pointer;
}
.btn-basic.btn-border-gray {
background: var(--color-white);
color: var(--color-gray);
border: 1px solid var(--color-gray);
}
.btn-basic.btn-border-gray:hover {
background: var(--color-light-gray-2);
}
.btn-basic.btn-border-blue {
border: 1px solid var(--color-blue);
color: var(--color-blue);
background-color: var(--color-white);
}
.btn-basic.btn-border-blue:hover {
background-color: #04236410;
}
/* FIN CLASES PARA LOS BOTONES */
.font-weight-400 {
font-weight: 400 !important;
}
.font-weight-500 {
font-weight: 500 !important;
}
.font-weight-600 {
font-weight: 600 !important;
}
.font-weight-700 {
font-weight: 700 !important;
}
.font-size-10 {
font-family: Roboto, sans-serif;
font-size: 10px;
}
.font-size-11 {
font-family: Roboto, sans-serif;
font-size: 11px;
}
.font-size-12 {
font-family: Roboto, sans-serif;
font-size: 12px;
}
.font-size-14 {
font-family: Roboto, sans-serif;
font-size: 14px;
}
.font-size-16 {
font-family: Roboto, sans-serif;
font-size: 16px;
}
.font-size-18 {
font-family: Roboto, sans-serif;
font-size: 18px;
}
.font-size-20 {
font-family: Roboto, sans-serif;
font-size: 20px !important;
}
.font-size-21 {
font-family: Roboto, sans-serif;
font-size: 21px !important;
}
.font-size-22 {
font-family: Roboto, sans-serif;
font-size: 22px !important;
}
.font-size-24 {
font-family: Roboto, sans-serif;
font-size: 24px !important;
}
.font-size-28 {
font-family: Roboto, sans-serif;
font-size: 28px !important;
}
.font-size-32 {
font-family: Roboto, sans-serif;
font-size: 32px !important;
}
.message {
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.15);
border-radius: 8px;
font-family: Roboto, sans-serif;
font-size: 14px;
font-weight: 400;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 15px 16px;
}
.message.snackbar {
width: 730px;
z-index: 100;
}
.message.bg-dark {
color: var(--color-white);
}
.message.bg-my-light {
border: 1px solid #D1ECF1;
color: #0C5460;
background-color: var(--color-light-blue-3);
}
.message .message-section {
max-width: 720px;
}
.message .message-section-left {
max-width: 720px;
text-align: left;
}
.message .message-section-right {
max-width: 720px;
text-align: right;
}
.alert {
display: flex;
flex-direction: row;
align-items: center;
padding: 6px 16px !important;
margin: 0px;
gap: 16px;
width: 100%;
height: 48px;
border-radius: 8px !important;
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 21px;
}
.alert.bg-yellow {
background: #FFEBB2;
color: #A6890C;
}
.alert.bg-light-blue {
background: #E4F2FF;
color: #18255B;
}
.alert.bg-light-red-2 {
background-color: var(--color-light-red-2);
color: var(--color-dark-red-2);
}
.alert.alert-shadow {
box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3);
}
.line-section {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.line-section .line-section-title-aling {
display: flex;
flex-direction: row;
justify-content: left;
padding: 5px;
}
.line-section .line-section-title-aling .line-section-title {
color: #000;
font-size: 22px;
font-weight: 500;
font-family: Roboto, sans-serif;
}
.line-options {
padding: 0px 15px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.line-options .option {
color: var(--color-red);
font-size: 16px;
font-weight: 500;
cursor: pointer;
width: 300px;
}
.line-options .option.option-left {
text-align: left;
}
.line-options .option.option-right {
text-align: right;
}
.line-options .option .custom-option {
position: relative;
}
.container-section {
width: 880px;
min-height: 656px;
padding: 16px 75px 32px;
background-color: var(--color-light);
}
.container-form {
max-width: 427px;
height: auto;
margin-left: calc(50% - 212px);
}
.container-form-modal {
width: 100%;
height: auto;
}
.add-contact-bg-image {
background-color: #F1F1F1;
height: 100px;
width: 100px;
border-radius: 50%;
position: relative;
left: calc(50% - 50px);
}
.add-contact-bg-image img.new-contact {
position: absolute;
top: 15px;
left: 30px;
}
.add-contact-bg-image img.new-casilla-postal {
position: absolute;
top: 15px;
left: 19.5px;
}
.add-contact-bg-image img.red-line-x {
position: absolute;
top: 37px;
left: 63px;
}
.add-contact-bg-image img.red-line-y {
position: absolute;
top: 37px;
left: 63px;
transform: rotate(90deg);
}
.position-relative {
position: relative;
}
.drag-and-drop-line {
display: flex;
flex-direction: row;
justify-content: center;
height: 4px;
background: #FFA890;
}
.contact-card {
background: var(--color-white);
display: flex;
flex-direction: row;
width: 100%;
box-shadow: 0px 1px 2px var(--color-light-2), 0px 2px 6px 2px var(--color-light-2);
border-radius: 8px;
height: 100%;
}
.card-size-desktop-small {
height: 182px;
}
.card-size-desktop-medium {
height: 230px;
}
.card-size-desktop-big {
height: 305px;
}
.contact-card.shadow-card {
z-index: -1;
position: absolute;
top: 0px;
width: 90%;
border: 1px dashed #FFB4A5;
box-shadow: 0px 8px 12px 6px var(--color-white), 0px 4px 4px var(--color-white) !important;
}
.contact-card .contact-card-info {
display: flex;
flex-direction: column;
background-color: var(--color-white);
width: 100%;
padding: 20px 22px 16px 20px;
border-radius: 8px;
overflow: hidden;
color: var(--color-black);
}
.contact-card .contact-card-info.shadow-card {
background-color: #FFE9E7 !important;
}
.contact-card .contact-card-left-option {
background: var(--color-light);
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
padding: 20px 0px 16px 10px;
width: 32px;
display: flex;
overflow: hidden;
flex-direction: column;
justify-content: center;
}
.contact-card .contact-card-left-option.shadow-card {
background: #FFA890 !important;
}
.contact-card .contact-card-left-option img {
cursor: move !important;
}
.contact-card.active {
z-index: 5;
}
.contact-card .contact-card-right-option {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
width: 60px;
float: left;
}
.contact-card .contact-name {
font-weight: 600;
font-family: Roboto, sans-serif;
font-size: 16px;
}
.contact-card .contact-other-info {
font-weight: 400;
font-family: Roboto, sans-serif;
font-size: 12px;
margin-bottom: 3px;
}
.display-flex-colum-center-contactos {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 15px;
width: 100%;
}
.display-flex-colum-center {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
}
.display-flex-colum-start {
display: flex;
flex-direction: column;
justify-content: start;
align-items: flex-start;
width: 100%;
}
.display-flex-colum-end {
display: flex;
flex-direction: column;
justify-content: start;
align-items: flex-end;
width: 100%;
}
.display-flex-colum-space-between {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
width: 100%;
height: 100%;
}
.display-flex-wrap {
display: flex;
flex-wrap: wrap;
}
.display-flex-row-space-between {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
}
.display-flex-row-center {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 100%;
}
.display-flex-row-start {
display: flex;
flex-direction: row;
align-items: center;
justify-content: start;
width: 100%;
}
.display-flex-row-end {
display: flex;
flex-direction: row;
align-items: center;
justify-content: end;
width: 100%;
}
.gap-0 {
gap: 0;
}
.bg-white {
background-color: var(--color-white);
--color: var(--color-white);
}
.bg-light {
background-color: var(--color-light);
--color: var(--color-light);
}
.bg-light-2 {
background-color: var(--color-light-2);
--color: var(--color-light-2);
}
.bg-light-3 {
background-color: var(--color-light-3);
--color: var(--color-light-3);
}
.bg-light-4 {
background-color: var(--color-light-4);
--color: var(--color-light-4);
}
.bg-light-5 {
background-color: var(--color-light-5);
--color: var(--color-light-5);
}
.bg-light-6 {
background-color: var(--color-light-6);
--color: var(--color-light-6);
}
.bg-orange {
background-color: var(--color-orange);
--color: var(--color-orange);
}
.bg-red {
background-color: var(--color-red);
--color: var(--color-red);
}
.bg-dark-red {
background-color: var(--color-dark-red);
--color: var(--color-dark-red);
}
.bg-gray {
background-color: var(--color-gray);
--color: var(--color-gray);
}
.bg-light-gray {
background-color: var(--color-light-gray);
--color: var(--color-light-gray);
}
.bg-light-gray-2 {
background-color: var(--color-light-gray-2);
--color: var(--color-light-gray-2);
}
.bg-light-gray-3 {
background-color: var(--color-light-gray-3);
--color: var(--color-light-gray-3);
}
.bg-light-gray-4 {
background-color: var(--color-light-gray-4);
--color: var(--color-light-gray-5);
}
.bg-dark {
background-color: var(--color-dark);
--color: var(--color-dark);
}
.bg-black {
background-color: var(--color-black);
--color: var(--color-black);
}
.bg-dark-black {
background-color: var(--color-dark-black);
--color: var(--color-dark-black);
}
.bg-light-green {
background-color: var(--color-light-green);
--color: var(--color-light-green);
}
.bg-light-green-5 {
background-color: var(--color-light-green-5);
--color: var(--color-light-green-7);
}
.bg-green {
background-color: var(--color-green);
--color: var(--color-green);
}
.bg-light-blue {
background-color: var(--color-light-blue);
--color: var(--color-light-blue);
}
.bg-light-blue-2 {
background-color: var(--color-light-blue-2);
--color: var(--color-light-blue-2);
}
.bg-light-blue-3 {
background-color: var(--color-light-blue-3);
--color: var(--color-light-blue-3);
}
.bg-light-blue-4 {
background-color: var(--color-light-blue-4);
--color: var(--color-light-blue-4);
}
.bg-light-blue-5 {
background-color: var(--color-light-blue-5);
--color: var(--color-light-blue-5);
}
.bg-light-blue-6 {
background-color: var(--color-light-blue-6);
--color: var(--color-light-blue-6);
}
.bg-light-blue-7 {
background-color: var(--color-light-blue-7);
--color: var(--color-light-blue-7);
}
.bg-blue {
background-color: var(--color-blue);
--color: var(--color-blue);
}
.bg-dark-blue {
color: var(--color-dark-blue);
--color: var(--color-dark-blue);
}
.bg-dark-blue-2 {
background-color: var(--color-dark-blue-2);
--color: var(--color-dark-blue-2);
}
.bg-dark-blue-3 {
background-color: var(--color-dark-blue-3);
--color: var(--color-dark-blue-3);
}
.bg-dark-blue-4 {
background-color: var(--color-dark-blue-4);
--color: var(--color-dark-blue-4);
}
.bg-light-yellow {
background-color: var(--color-light-yellow);
--color: var(--color-light-yellow);
}
.bg-light-yellow-2 {
background-color: var(--color-light-yellow-2);
--color: var(--color-light-yellow-2);
}
.bg-yellow {
background-color: var(--color-yellow);
--color: var(--color-yellow);
}
.bg-dark-yellow {
background-color: var(--color-dark-yellow);
--color: var(--color-dark-yellow);
}
.bg-dark-yellow-2 {
background-color: var(--color-dark-yellow-2);
--color: var(--color-dark-yellow-2);
}
/* ------ ------- -------- ---- */
.color-white {
color: var(--color-white);
--color: var(--color-white);
}
.color-light {
color: var(--color-light);
--color: var(--color-light);
}
.color-light-2 {
color: var(--color-light-2);
--color: var(--color-light-2);
}
.color-light-3 {
color: var(--color-light-3);
--color: var(--color-light-3);
}
.color-orange {
color: var(--color-orange);
--color: var(--color-orange);
}
.color-red {
color: var(--color-red);
--color: var(--color-red);
}
.color-red-2 {
color: var(--color-red-2);
--color: var(--color-red-2);
}
.color-dark-red {
color: var(--color-dark-red);
--color: var(--color-dark-red);
}
a.color-red.no-link:hover {
color: var(--color-red);
--color: var(--color-red);
}
.color-gray {
color: var(--color-gray);
--color: var(--color-gray);
}
.color-light-gray {
color: var(--color-light-gray);
--color: var(--color-light-gray);
}
.color-light-gray-2 {
color: var(--color-light-gray-2);
--color: var(--color-light-gray-2);
}
.color-light-gray-3 {
color: var(--color-light-gray-3);
--color: var(--color-light-gray-3);
}
.color-dark {
color: var(--color-dark);
--color: var(--color-dark);
}
.color-black {
color: var(--color-black);
--color: var(--color-black);
}
.color-dark-black {
color: var(--color-dark-black);
--color: var(--color-dark-black);
}
.color-dark-black-2 {
color: var(--color-dark-black-2);
--color: var(--color-dark-black-2);
}
.color-green {
color: var(--color-green);
--color: var(--color-green);
}
.color-light-green {
color: var(--color-light-green);
--color: var(--color-light-green);
}
.color-light-blue {
color: var(--color-light-blue);
--color: var(--color-light-blue);
}
.color-light-blue-2 {
color: var(--color-light-blue-2);
--color: var(--color-light-blue-2);
}
.color-light-blue-3 {
color: var(--color-light-blue-3);
--color: var(--color-light-blue-3);
}
.color-light-blue-4 {
color: var(--color-light-blue-4);
--color: var(--color-light-blue-4);
}
.color-light-blue-5 {
color: var(--color-light-blue-5);
--color: var(--color-light-blue-5);
}
.color-light-blue-6 {
color: var(--color-light-blue-6);
--color: var(--color-light-blue-6);
}
.color-light-blue-7 {
color: var(--color-light-blue-7);
--color: var(--color-light-blue-7);
}
.color-blue {
color: var(--color-blue);
--color: var(--color-blue);
}
.color-dark-blue {
color: var(--color-dark-blue);
--color: var(--color-dark-blue);
}
.color-dark-blue-2 {
color: var(--color-dark-blue-2);
--color: var(--color-dark-blue-2);
}
.color-dark-blue-3 {
color: var(--color-dark-blue-3);
--color: var(--color-dark-blue-3);
}
.color-dark-blue-4 {
color: var(--color-dark-blue-4);
--color: var(--color-dark-blue-4);
}
.color-dark-blue-5 {
color: var(--color-dark-blue-5);
--color: var(--color-dark-blue-5);
}
.color-light-yellow {
color: var(--color-light-yellow);
--color: var(--color-light-yellow);
}
.color-light-yellow-2 {
color: var(--color-light-yellow-2);
--color: var(--color-light-yellow-2);
}
.color-yellow {
color: var(--color-yellow);
--color: var(--color-yellow);
}
.color-dark-yellow {
color: var(--color-dark-yellow);
--color: var(--color-dark-yellow);
}
.color-dark-yellow-2 {
color: var(--color-dark-yellow-2);
--color: var(--color-dark-yellow-2);
}
.mr-5px {
margin-right: 5px !important;
}
.mr-8px {
margin-right: 8px !important;
}
.mr-10px {
margin-right: 10px;
}
.mr-12px {
margin-right: 12px;
}
.mr-15px {
margin-right: 15px;
}
.mr-16px {
margin-right: 16px;
}
.mr-18px {
margin-right: 18px;
}
.mr-20px {
margin-right: 20px;
}
.mr-25px {
margin-right: 25px;
}
.mr-31px {
margin-right: 31px;
}
.mr-32px {
margin-right: 32px;
}
.mr-41 {
margin-right: 41px;
}
.mt-4px {
margin-top: 4px;
}
.mt-16px {
margin-top: 16px;
}
.mt-18px {
margin-top: 18px;
}
.mt-20px {
margin-top: 20px;
}
.mt-40px {
margin-top: 40px;
}
.mb-4px {
margin-bottom: 4px;
}
.mb-8px {
margin-bottom: 8px;
}
.mb-12px {
margin-bottom: 12px;
}
.mb-16px {
margin-bottom: 16px;
}
.mb-22px {
margin-bottom: 22px;
}
.mb-24px {
margin-bottom: 24px;
}
.mb-25px {
margin-bottom: 25px;
}
.mb-32px {
margin-bottom: 32px;
}
.mb-40px {
margin-bottom: 40px;
}
.mb-60px {
margin-bottom: 60px;
}
.mb-80px {
margin-bottom: 80px;
}
.mb-100px {
margin-bottom: 100px;
}
.mb-150px {
margin-bottom: 150px;
}
.mb-240px {
margin-bottom: 240px;
}
.mb-250px {
margin-bottom: 250px;
}
.ml-8px {
margin-left: 8px;
}
.ml-15px {
margin-left: 15px;
}
.ml-40px {
margin-left: 40px;
}
.pl-8px {
padding-left: 8px !important;
}
.pl-12px {
padding-left: 12px !important;
}
.pr-3px {
padding-right: 3px;
}
.pr-10px {
padding-right: 10px;
}
.pr-15px {
padding-right: 15px;
}
.pr-20px {
padding-right: 20px;
}
.pr-30px {
padding-right: 30px;
}
.pt-20px {
padding-top: 20px;
}
.p-16px {
padding: 16px !important;
}
.p-24 {
padding: 24px;
}
/* SCROLL HORIZONTAL Y VERTICAL */
.scroll-horizontal {
overflow-x: auto;
scrollbar-width: 8px;
scrollbar-color: #D9D9D9 #FAFAFA;
padding-bottom: 9px;
}
.scroll-horizontal:hover {
overflow-x: auto;
scrollbar-width: 8px;
scrollbar-color: rgb(192, 188, 188) #FAFAFA;
}
.scroll-horizontal::-webkit-scrollbar {
padding-bottom: 9px;
height: 8px !important;
}
.scroll-horizontal::-webkit-scrollbar-track {
/*box-shadow: inset 0 0 2px #333; */
background-color: #FAFAFA;
border-radius: 10px;
border: 0px !important;
}
.scroll-horizontal::-webkit-scrollbar-thumb {
background: #D9D9D9 !important;
border-radius: 4px !important;
}
.scroll-horizontal::-webkit-scrollbar-thumb:hover {
background: rgb(192, 188, 188) !important;
}
.scroll-vertical {
overflow-y: auto;
scrollbar-width: 8px;
scrollbar-color: #D9D9D9 #FAFAFA;
padding-right: 6px;
}
.scroll-vertical:hover {
overflow-x: auto;
scrollbar-width: 8px;
scrollbar-color: rgb(192, 188, 188) #FAFAFA;
}
.scroll-vertical::-webkit-scrollbar {
padding-right: 6px;
width: 8px !important;
}
.scroll-vertical::-webkit-scrollbar-track {
/*box-shadow: inset 0 0 2px #333; */
background-color: #FAFAFA;
border-radius: 10px;
border: 0px !important;
}
.scroll-vertical::-webkit-scrollbar-thumb {
background: #D9D9D9 !important;
border-radius: 4px !important;
}
.scroll-vertical::-webkit-scrollbar-thumb:hover {
background: rgb(192, 188, 188) !important;
}
/* SCROLL HORIZONTAL Y VERTICAL */
.divisor {
border-bottom: 2px solid rgba(33, 33, 33, 0.08);
width: inherit;
}
/* opciones de listas */
.list-options {
position: relative;
top: 0px;
}
.contact-options-list {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 16px;
position: relative;
width: 275px;
background: var(--color-white);
box-shadow: 0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px rgba(0, 0, 0, 0.3);
border-radius: 8px;
}
.contact-options-list-item {
height: 48px;
width: 100%;
padding-top: 10px;
padding-left: 10px;
margin-bottom: 0px;
font-size: 16px;
}
.contact-options-list-item:hover {
cursor: pointer;
background-color: #fcf0ee;
border-radius: 8px;
/* color: var(--color-red); */
}
/* fin opciones de listas */
/* popup - estos se conbinan con las clases modal */
.popup-form {
display: flex;
flex-direction: column;
align-items: flex-end;
padding: 15px 20px 10px;
background: var(--color-white);
box-shadow: 0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px rgba(0, 0, 0, 0.3);
border-radius: 8px;
color: var(--color-black);
}
.popup-form.default-dimension {
width: 312px;
height: auto;
}
.popup-form.notification-dimension {
width: 554px;
height: auto;
}
.popup-form.notification-pago-impuestos-dimension {
width: 328px;
height: auto;
}
.popup-form.contact-options-dimension {
width: 275px;
height: auto;
}
.popup-form-window-icon {
margin-left: auto;
margin-right: auto;
}
.popup-form-title {
/*height: 56px;*/
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
font-family: Roboto, sans-serif;
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 32px;
width: 100%;
}
.popup-form-text-body {
width: 100%;
font-family: Roboto, sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 21px;
display: flex;
justify-content: flex-start;
align-items: center;
letter-spacing: 0.25px;
color: var(--color-gray);
/* padding: 5px 0px 0px 10px; */
}
.popup-form-group-material {
position: relative;
height: 56px;
width: 100%;
}
.popup-form-group-material input {
position: absolute;
width: 230px;
border: 0px;
outline: none;
bottom: 0px;
left: 4px;
/* border-bottom: 2px solid #C4C4C4; */
}
.popup-form-group-material label {
position: absolute;
height: 100%;
width: 280px;
bottom: -18px;
left: -5px;
pointer-events: none;
border-bottom: 2px solid #C4C4C4;
font-family: Roboto, sans-serif;
font-size: 16px;
font-weight: 400;
}
.popup-form-group-material label .label {
position: absolute;
left: 12px;
top: calc(50% - 21px/2 - 9.5px);
font-family: Roboto, sans-serif;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 21px;
letter-spacing: 0.4px;
color: var(--color-gray);
}
.popup-form-group-material label .postfijo {
position: absolute;
right: 15px;
top: 16px;
bottom: 12.5%;
}
.popup-form-footer {
display: flex;
flex-direction: row;
justify-content: flex-end;
gap: 8px;
width: 100%;
font-family: Roboto, sans-serif;
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 21px;
text-align: center;
letter-spacing: 0.1px;
color: var(--color-gray);
}
.popup-form-footer.notification-buttons-right {
flex-direction: column;
text-align: right;
padding-right: 1rem;
}
/* fin popup */
.disabled-color {
color: var(--color-light-red-2);
}
.enabled-color {
color: var(--color-red);
cursor: pointer;
}
.text-underline {
text-decoration: underline;
}
.headers {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 28px;
}
.proccess-line {
display: flex;
justify-content: center;
flex-direction: row;
margin-top: 3rem;
margin-bottom: 3rem;
}
.step {
text-align: center;
height: 48px;
width: 48px;
border-radius: 50%;
}
.step.pending-step {
background-color: #F1F1F1;
color: var(--color-gray);
}
.step.current-step {
background-color: var(--color-light-red-2);
color: var(--color-gray);
}
.step.finalized-step {
color: var(--color-white);
background-color: var(--color-red);
}
.step.step-content {
position: relative;
top: 12px;
}
.union-line {
width: calc(33% - 10px);
height: 2px;
background: #C4C4C4;
/* Inside auto layout */
/* flex: none;
order: 3;
flex-grow: 1; */
margin-right: 1.5%;
margin-left: 1.5%;
position: relative;
top: 22px;
}
.title-2 {
font-family: Roboto, sans-serif;
font-style: normal;
font-weight: 600;
font-size: 22px;
line-height: 28px;
color: #000000;
}
.sub-title-3 {
color: var(--color-gray);
font-size: 12px;
text-transform: uppercase;
font-weight: 500;
margin-top: 50px;
margin-bottom: 50px;
}
.countCharacters {
font-weight: 400;
font-family: Roboto, sans-serif;
color: var(--color-gray);
font-size: 12px;
}
.top-right-default {
display: flex;
flex-direction: row;
align-items: center;
}
.title-3-top-right {
font-family: Roboto, sans-serif;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 21px;
display: flex;
align-items: center;
letter-spacing: 0.4px;
color: var(--color-gray);
}
.top-right-notification span {
color: var(--color-gray);
font-size: 12px;
}
.form-group-material {
position: relative;
height: 56px;
width: 100%;
overflow: hidden;
border-radius: 4px 4px 0px 0px;
/* background: var(--color-white); */
/* pointer-events: none; */
}
.form-group-material~.list-relative {
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
}
.form-group-material~.list-relative>.list-absolute {
position: absolute;
z-index: 10;
width: 100%;
padding: 1px;
}
.wrap-form-group-material-with-error-message {
position: relative;
width: 100%;
padding-bottom: 20px;
}
.wrap-form-group-material-with-error-message>.error-message-input-empty {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 12px;
color: var(--color-red-2);
margin-left: 10px;
}
.wrap-form-group-material-with-error-message>.form-group-material.no-valid-background.input-empty~.error-message-input-empty {
display: block;
position: absolute;
}
.wrap-form-group-material-with-error-message>.form-group-material.valid-background.input-empty~.error-message-input-empty {
display: none;
}
.wrap-form-group-material-with-error-message>.form-group-material~.error-message-input-empty {
display: none;
}
.wrap-form-group-material-with-error-message>.form-group-material~.error-message-input-empty.disabled {
display: none !important;
}
.wrap-form-group-material-with-error-message>.error-message-input-data-error {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 12px;
color: var(--color-red-2);
margin-left: 10px;
}
/* .wrap-form-group-material-with-error-message .error-message-input-data-error {
display: none;
} */
.wrap-form-group-material-with-error-message>.form-group-material.no-valid-background.input-data-error~.error-message-input-data-error {
display: block;
}
.wrap-form-group-material-with-error-message>.form-group-material.valid-background.input-data-error~.error-message-input-data-error {
display: none;
}
.wrap-form-group-material-with-error-message>.form-group-material~.error-message-input-data-error {
display: none;
}
.wrap-form-group-material-with-error-message>.form-group-material~.error-message-input-data-error.disabled {
display: none !important;
}
.wrap-form-group-material-with-error-message>.form-group-material~.info-message {
color: var(--color-gray);
text-align: end;
display: block;
width: 100%;
padding-right: 10px;
}
.wrap-form-group-material-with-error-message>.form-group-material.valid-background~.info-message {
color: var(--color-light-green);
}
.wrap-form-group-material-with-error-message>.form-group-material.no-valid-background~.info-message {
color: var(--color-red-2);
}
.wrap-form-group-material-with-error-message>.error-message-input-data-duplicated-error {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 12px;
color: var(--color-red-2);
margin-left: 10px;
}
.wrap-form-group-material-with-error-message>.form-group-material.no-valid-background.input-mail-error~.error-message-input-data-duplicated-error {
display: block;
}
.wrap-form-group-material-with-error-message>.form-group-material.valid-background~.error-message-input-data-duplicated-error {
display: none;
}
.wrap-form-group-material-with-error-message>.form-group-material~.error-message-input-data-duplicated-error {
display: none;
}
.wrap-form-group-material-with-error-message>.form-group-material~.error-message-input-data-duplicated-error.disabled {
display: none !important;
}
.wrap-form-group-material-with-error-message>.error-message-input-mail {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 12px;
color: var(--color-red-2);
margin-left: 10px;
}
.wrap-form-group-material-with-error-message>.form-group-material.no-valid-background.input-mail-error~.error-message-input-mail {
display: block;
}
.wrap-form-group-material-with-error-message>.form-group-material.valid-background~.error-message-input-mail {
display: none;
}
.wrap-form-group-material-with-error-message>.form-group-material~.error-message-input-mail {
display: none;
}
.wrap-form-group-material-with-error-message>.form-group-material~.error-message-input-mail.disabled {
display: none !important;
}
.form-group-material input {
height: 100%;
width: 100%;
position: absolute;
padding-top: 20px;
/*altura del span que se usa como label*/
border: none;
outline: none;
/* z-index: 0; */
/* line-height: 28px; */
}
.form-group-material label {
position: absolute;
height: 100%;
width: 100%;
bottom: -8px;
left: 0px;
pointer-events: none;
}
.form-group-material.disable label .form-input-material-prefijo.focus,
.form-group-material.disable label .form-input-material-prefijo.no-valid,
.form-group-material.disable label .form-input-material-prefijo.valid {
display: none;
}
.form-group-material.disable label .form-input-material-prefijo.enable {
display: block;
}
.form-group-material.enable label .form-input-material-prefijo.focus,
.form-group-material.enable label .form-input-material-prefijo.no-valid,
.form-group-material.enable label .form-input-material-prefijo.valid {
display: none;
}
.form-group-material.enable label .form-input-material-prefijo.enable {
display: block;
}
.form-group-material.focus label .form-input-material-prefijo.enable,
.form-group-material.focus label .form-input-material-prefijo.no-valid,
.form-group-material.focus label .form-input-material-prefijo.valid {
display: none;
}
.form-group-material.focus label .form-input-material-prefijo.focus {
display: block;
}
.form-group-material.no-valid-background label .form-input-material-prefijo.enable,
.form-group-material.no-valid-background label .form-input-material-prefijo.focus,
.form-group-material.no-valid-background label .form-input-material-prefijo.valid {
display: none;
}
.form-group-material.no-valid-background label .form-input-material-prefijo.no-valid {
display: block;
--color: var(--color-red-2);
}
.form-group-material.valid-background label .form-input-material-prefijo.enable,
.form-group-material.valid-background label .form-input-material-prefijo.focus,
.form-group-material.valid-background label .form-input-material-prefijo.no-valid {
display: none;
}
.form-group-material.valid-background label .form-input-material-prefijo.valid {
display: block;
}
/* ----- */
.form-group-material.disable label .form-input-material-postfijo.focus,
.form-group-material.disable label .form-input-material-postfijo.no-valid,
.form-group-material.disable label .form-input-material-postfijo.valid {
display: none;
}
.form-group-material.disable label .form-input-material-postfijo.enable {
display: block;
}
.form-group-material.enable label .form-input-material-postfijo.focus,
.form-group-material.enable label .form-input-material-postfijo.no-valid,
.form-group-material.enable label .form-input-material-postfijo.valid {
display: none;
}
.form-group-material.enable label .form-input-material-postfijo.enable {
display: block;
}
.form-group-material.focus label .form-input-material-postfijo.enable,
.form-group-material.focus label .form-input-material-postfijo.no-valid,
.form-group-material.focus label .form-input-material-postfijo.valid {
display: none;
}
.form-group-material.focus label .form-input-material-postfijo.focus {
display: block;
}
.form-group-material.no-valid-background label .form-input-material-postfijo.enable,
.form-group-material.no-valid-background label .form-input-material-postfijo.focus,
.form-group-material.no-valid-background label .form-input-material-postfijo.valid {
display: none;
}
.form-group-material.no-valid-background label .form-input-material-postfijo.no-valid {
display: block;
--color: var(--color-red-2);
}
.form-group-material.valid-background label .form-input-material-postfijo.enable,
.form-group-material.valid-background label .form-input-material-postfijo.focus,
.form-group-material.valid-background label .form-input-material-postfijo.no-valid {
display: none;
}
.form-group-material.valid-background label .form-input-material-postfijo.valid {
display: block;
}
/* ----- */
.form-group-material.disable input {
background-color: rgba(103, 103, 103, 0.08);
pointer-events: none;
}
.form-group-material.disable label {
border-bottom: 1px solid var(--color-gray);
}
.form-group-material.disable label .form-label-material-span {
color: var(--color-gray);
}
.form-group-material.enable label {
border-bottom: 1px solid var(--color-gray);
}
.form-group-material.enable label .form-label-material-span {
color: var(--color-gray);
}
.form-group-material.enable input:hover {
background: rgba(0, 51, 160, 0.08);
}
.form-group-material.enable input:hover+label {
border-bottom: 1px solid var(--color-blue);
}
.form-group-material.enable input:hover+label .form-label-material-span {
color: var(--color-blue) !important;
}
.form-group-material.enable input:hover+label .form-input-material-prefijo.enable {
display: none;
}
.form-group-material.enable input:hover+label .form-input-material-prefijo.focus {
display: block;
}
.form-group-material.enable input:hover+label .form-input-material-postfijo.focus {
display: block;
}
.form-group-material.enable input:hover+label .form-input-material-postfijo.enable {
display: none;
}
.form-group-material.enable input:hover+label .form-input-material-postfijo.focus {
display: block;
}
.form-group-material.focus input:hover {
background: rgba(0, 51, 160, 0.08);
}
.form-group-material.focus label {
border-bottom: 1px solid var(--color-blue);
}
.form-group-material.focus .form-label-material-span {
color: var(--color-blue) !important;
}
.form-group-material.valid-background label {
border-bottom: 1px solid var(--color-light-green);
}
.form-group-material.no-valid-background label {
border-bottom: 1px solid var(--color-red-2);
}
.border-bottom-gray {
border-bottom: 1px solid #C4C4C4;
}
.border-bottom-dark-gray {
border-bottom: 1px solid var(--color-gray);
}
.border-bottom-lite-gray {
border-bottom: 1px solid #F1F1F1;
}
.border-bottom-dark {
border-bottom: 1px solid #201A19;
}
.border-bottom-red {
border-bottom: 1px solid var(--color-red);
}
.border-bottom-blue {
border-bottom: 1px solid var(--color-light-blue);
}
.border-bottom-dark-blue {
border-bottom: 1px solid var(--color-blue);
}
.form-input-material-prefijo {
cursor: pointer
}
.valid {
background: var(--color-white);
}
/* .valid .form-label-material-span {
background: transparent;
border-radius: 4px 4px 0px 0px;
color: var(--color-dark-green-2) !important;
} */
.valid-background {
background: rgba(55, 153, 76, 0.08);
}
.valid-background .form-label-material-span {
background: transparent;
border-radius: 4px 4px 0px 0px;
color: var(--color-light-green) !important;
}
.input-submit {
outline: none;
border: 0px;
}
.valid .input-simple,
.valid .input-with-80 {
background: var(--color-white);
color: var(--color-dark-green-2);
}
.valid-background .input-simple,
.valid-background .input-with-80 {
background: rgba(55, 153, 76, 0.01);
}
.no-valid {
background: var(--color-light-red-2);
}
.no-valid .form-label-material-span {
background: var(--color-light-red-2);
color: var(--color-dark-red) !important;
}
.no-valid .input-simple,
.no-valid .input-with-80 {
color: var(--color-dark-red) !important;
background: var(--color-light-red-2);
}
.no-valid-background {
background: var(--color-light-red-2);
}
.no-valid-background .form-label-material-span {
background: transparent;
color: var(--color-dark-red) !important;
}
.no-valid-background .input-simple,
.no-valid-background .input-with-80 {
background: var(--color-light-red-2);
}
.tranform-180deg {
transform: rotate(180deg);
}
.tranform-360deg {
transform: rotate(360deg);
}
.form-group-material label::after {
content: "";
position: absolute;
height: 100%;
width: 100%;
bottom: -1px;
}
.form-group-material.valid label::after {
border-bottom: 2px solid var(--color-dark-green-2);
transform: translateX(-100%)
}
.form-group-material.no-valid label.required::after {
border-bottom: 2px solid var(--color-dark-red);
}
.form-group-material .input-with-80 {
padding-left: 45px;
}
.form-group-material .input-simple {
padding-left: 12px;
}
.form-group-material .input-simple.pl-45px {
padding-left: 45px;
}
.form-group-material .input-simple.pl-42px {
padding-left: 42px;
}
.form-label-material-span {
position: absolute;
bottom: 15px;
/*altura del span que se usa como label*/
left: 12px;
transition: all 0.3s ease;
/* font-size: 16px; */
}
.form-label-material-span.left-10 {
left: 10px;
}
.form-label-material-span.left-47 {
left: 47px;
}
.form-label-material-span.left-42 {
left: 42px;
}
.form-input-material-prefijo {
position: absolute;
bottom: -38.5px;
left: 10px;
transition: all 0.3s ease;
font-size: 16px !important;
font-family: Roboto, sans-serif;
font-weight: 400;
background-color: transparent;
}
.form-input-material-prefijo-search {
position: absolute;
bottom: 15px;
left: 10px;
font-size: 16px !important;
font-family: Roboto, sans-serif;
font-weight: 400;
background-color: transparent;
}
.form-input-material-postfijo {
position: absolute;
bottom: -38.5px;
right: 12px;
transition: all 0.3s ease;
font-size: 16px !important;
font-family: Roboto, sans-serif;
font-weight: 400;
background-color: transparent;
}
.form-input-material-postfijo-search {
position: absolute;
bottom: 15px;
right: 12px;
transition: all 0.3s ease;
font-size: 16px !important;
font-family: Roboto, sans-serif;
font-weight: 400;
cursor: pointer;
background-color: transparent;
}
.form-label-material .form-input-material-prefijo.block {
transform: translateY(-185%);
}
.form-label-material .form-input-material-prefijo.align-label.block {
transform: translateY(-220%);
}
.form-label-material .form-input-material-postfijo.align-label.block {
right: 12px;
transform: translateY(-220%);
}
.block-search {
transform: translateY(5%);
}
.block-search-1 {
transform: translateY(33%);
}
.form-input-material-postfijo-valid,
.form-input-material-postfijo-no-valid {
position: absolute;
bottom: -35px;
right: 8px;
transition: all 0.3s ease;
font-size: 16px;
font-family: Roboto, sans-serif;
font-weight: 400;
}
.no-valid .form-input-material-postfijo-no-valid {
transform: translateY(-171%);
}
.valid .form-input-material-postfijo-valid {
transform: translateY(-171%);
}
.no-valid-background .form-input-material-postfijo-no-valid {
transform: translateY(-208%);
}
.valid-background .form-input-material-postfijo-valid {
transform: translateY(-208%);
}
.valid-background .form-input-material-postfijo-valid.with-hover-shadow {
transform: translateY(-108%);
}
.form-group-material input:focus+.form-label-material .form-label-material-span,
.form-group-material input:valid+.form-label-material .form-label-material-span {
transform: translateY(-70%);
/*altura del span que se usa como label despues de hacer foco en el input*/
font-size: 12px;
}
.form-group-material input:focus+.form-label-material .form-label-material-span {
color: var(--color-gray);
}
.form-group-material input:focus+.form-label-material.required .form-label-material-span.color-red,
.form-group-material input:valid+.form-label-material.required .form-label-material-span.color-red {
color: var(--color-red);
}
.form-group-material .form-label-material .form-input-material-prefijo.valid {
display: none;
}
.form-group-material.valid-background .form-label-material .form-input-material-prefijo.valid {
display: block;
}
.valid-background .form-label-material .form-input-material-prefijo.no-valid {
display: none;
}
.form-group-material.no-valid-background .form-label-material .form-input-material-prefijo.valid {
display: none;
}
.no-valid-background .form-label-material .form-input-material-prefijo.no-valid {
display: block;
}
.form-group-material input:focus+.form-label-material .form-input-material-prefijo,
.form-group-material input:valid+.form-label-material .form-input-material-prefijo {
transform: translateY(-185%);
font-size: 16px;
}
.form-group-material input:focus+.form-label-material .form-input-material-prefijo.align-label.block,
.form-group-material input:valid+.form-label-material .form-input-material-prefijo.align-label.block {
transform: translateY(-220%);
font-size: 16px;
}
.form-group-material input:focus+.form-label-material .form-input-material-postfijo.align-label.block,
.form-group-material input:valid+.form-label-material .form-input-material-postfijo.align-label.block {
transform: translateY(-220%);
}
.form-group-material input:focus+.form-label-material .form-input-material-prefijo.text,
.form-group-material input:valid+.form-label-material .form-input-material-prefijo.text {
transform: translateY(-175%);
font-size: 16px;
}
.form-group-material input:focus+.form-label-material .form-input-material-prefijo.block,
.form-group-material input:valid+.form-label-material .form-input-material-prefijo.block {
transform: translateY(-185%);
font-size: 16px;
}
.form-group-material input:focus+.form-label-material .form-input-material-prefijo-search.block-search,
.form-group-material input:valid+.form-label-material .form-input-material-prefijo-search.block-search {
transform: translateY(-195%);
font-size: 16px;
}
/* .form-label-material .form-input-material-postfijo.align-label.block */
/* .form-group-material input:focus + .form-label-material .form-input-material-postfijo.select-arrow.align-label.block,
.form-group-material input:valid + .form-label-material .form-input-material-postfijo.select-arrow.align-label.block
{
transform: translateY(-218%);
} */
.form-group-material input:focus+.form-label-material::after,
.form-group-material input:valid+.form-label-material::after {
transform: translateX(0%);
transition: all 0.3s ease;
}
.li-acordeon-style {
border: none;
background-color: var(--color-light) !important;
margin: 0px;
padding: 0px !important;
border: 0px !important;
}
/* ESTILOS PARA NO TENER CONFLICTOS CON EL THEME DE SV */
.dropdown-menu-corp {
padding: 0 25px !important;
}
.headermenu-list {
padding-left: 10px !important;
}
#dropdownMenuLink2.btn {
display: flex;
}
/* FIN ESTILOS PARA NO TENER CONFLICTOS CON EL THEME DE SV */
/* CUSTOM CHECKBOX */
.checkbox {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* hide the browser's default checkbox */
.checkbox input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* create custom checkbox */
.checkbox .check {
position: absolute;
top: 0;
left: 0;
border-radius: 2px;
}
.checkbox.gray .check {
background-color: var(--color-white);
border: 2px solid var(--color-gray);
}
.checkbox.red .check {
background-color: var(--color-white);
border: 2px solid var(--color-red);
}
.check.big {
height: 18px;
width: 18px;
}
/* on mouse-over, add border color */
.checkbox.gray:hover input~.check {
border: 2px solid var(--color-gray);
}
/* add background color when the checkbox is checked */
.checkbox.gray input:checked~.check {
background-color: var(--color-gray);
/* border:none; */
}
/* on mouse-over, add border color */
.checkbox.red:hover input~.check {
border: 2px solid var(--color-red);
}
/* add background color when the checkbox is checked */
.checkbox.red input:checked~.check {
background-color: var(--color-red);
/* border:none; */
}
/* create the checkmark and hide when not checked */
.check:after {
content: "";
position: absolute;
display: none;
}
/* show the checkmark when checked */
.checkbox input:checked~.check:after {
display: block;
}
/* checkmark style */
.checkbox .check.big:after {
left: 3px;
top: -1px;
width: 7px;
height: 13px;
border: solid white;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
/*FIN CUSTOM CHECKBOX*/
/* CUSTOM RADIO BUTTONS */
.shadow-radio {
position: relative;
}
.shadow-radio {
height: 38px;
width: 38px;
border-radius: 50%;
background-color: transparent;
}
.shadow-radio {
height: 38px;
width: 38px;
border-radius: 50%;
background-color: transparent;
}
.shadow-radio:hover {
cursor: pointer;
}
.shadow-radio.bg-light-4:hover {
background-color: var(--color-light-4);
}
.shadow-radio.bg-light-blue-5:hover {
background-color: var(--color-light-blue-5);
}
.shadow-radio.bg-light-red-3:hover {
background-color: var(--color-light-red-3);
}
.radio {
position: absolute;
}
.radio.radio-align-inside-shadow {
left: calc(50% - 10px);
}
.shadow-radio .radio svg {
display: block;
}
.shadow-radio .radio svg.active {
display: none;
}
.shadow-radio .radio.active svg {
display: none;
}
.shadow-radio .radio.active svg.active {
display: block;
}
/*FIN CUSTOM RADIO BUTTONS*/
/* SELECT DE MATERIAL PERSONALIZADO */
label.field {
background: var(--color-white);
/*nuevo*/
border-radius: 4px;
color: #666;
display: block;
padding-top: 0px;
/*nuevo*/
opacity: 0;
position: relative;
transition-property: opacity;
z-index: 1;
height: 56px;
}
label.field span {
color: inherit;
display: block;
font-size: 16px;
font-family: Roboto, sans-serif, sans-serif;
height: 0px;
line-height: 20px;
left: 9px;
pointer-events: none;
position: absolute;
top: 18px;
/*puede menejar la altura inicial del texto que hace funcion de label en el select*/
transform: scale(1) translateY(0);
transition-property: color, font-size, top;
transition: all 0.5s ease;
/*para hacer la transicion poco a poco*/
z-index: 1;
}
/*Version vieja*/
label.field .postfijo-select-blur {
left: auto;
right: 9px;
top: 17px !important;
font-size: 16px !important;
cursor: pointer;
}
label.field .postfijo-select-blur::after {
content: url("../img/expand.svg");
}
label.field .postfijo-select-focus {
left: auto;
right: 9px;
top: 17px !important;
font-size: 16px !important;
cursor: pointer;
}
label.field .postfijo-select-focus::after {
content: url("../img/expand_blue.svg");
}
/*Fin version vieja*/
label.field span.required::after {
color: inherit;
content: "*";
display: block;
height: 20px;
left: -20px;
line-height: 20px;
position: absolute;
text-align: center;
top: 0;
width: 20px;
}
label.field .psuedo_select {
background: rgba(255, 255, 255, 0);
position: relative;
border-color: #C4C4C4;
border-style: solid;
border-width: 0 0 2px 0;
color: #666;
cursor: pointer;
font-size: 16px;
/*de 20 a 16*/
height: 56px;
line-height: 24px;
width: 100%;
padding-top: 0px;
/*puede menejar la altura inicial del texto que hace funcion de label en el select*/
outline: 0;
z-index: 1;
}
/* label.field .psuedo_select::after {
background: url("data:image/svg+xml;utf8,"), no-repeat;
content: "";
height: 24px;
width: 24px;
position: absolute;
top: 0;
right: 0;
transition-property: background;
} */
label.field .psuedo_select .selected {
height: 24px;
left: 9px;
line-height: 2px;
opacity: 0;
position: absolute;
top: 35px;
/* altura de la opcion que se selecciona en el select*/
font-family: Roboto, sans-serif, sans-serif;
}
label.field .psuedo_select ul {
background: var(--color-white);
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
border-radius: 4px;
display: block;
height: 0;
list-style: none;
margin-top: 2px;
opacity: 0;
overflow: hidden;
padding: 0 1px;
pointer-events: none;
transition-property: height, opacity;
width: 100%;
z-index: 2;
}
label.field .psuedo_select ul li {
height: 32px;
padding: 8px 4px;
font-family: Roboto, sans-serif, sans-serif;
}
label.field .deselect {
height: 100vh;
left: 0;
position: fixed;
top: 0;
width: 100vw;
z-index: -1;
}
/*label.field.focused {
color: var(--color-light-blue)
}*/
label.field.focused .psuedo_select {
border-color: var(--color-light-blue)
}
label.field.focused .psuedo_select::after {
background: url("data:image/svg+xml;utf8,"), no-repeat;
}
label.field.focused .psuedo_select ul {
position: absolute;
top: 60px;
/*para darle posicion en las "Y" a la lista desplegable*/
opacity: 1;
pointer-events: all;
}
label.field.focused .psuedo_select ul label.field {
border-radius: 2px;
color: #666;
display: block;
margin: 16px;
max-width: 300px;
padding: 8px;
opacity: 0;
position: relative;
transition-property: opacity;
z-index: 1;
}
label.field.focused .psuedo_select ul label.field span {
color: inherit;
display: block;
font-size: 16px;
height: 20px;
line-height: 20px;
left: 9px;
pointer-events: none;
position: absolute;
top: 32px;
transform: scale(1) translateY(0);
transition-property: color, font-size, top;
z-index: 1;
}
label.field.focused .psuedo_select ul label.field span.required::after {
color: inherit;
content: "*";
display: block;
height: 20px;
left: -20px;
line-height: 20px;
position: absolute;
text-align: center;
top: 0;
width: 20px;
}
label.field.focused .psuedo_select ul .error label.field span {
color: #f02318;
}
label.field.focused .psuedo_select ul label.field .psuedo_select {
background: rgba(255, 255, 255, 0);
position: relative;
border-color: #666;
border-style: solid;
border-width: 0 0 2px 0;
color: #666;
cursor: pointer;
font-size: 16px;
/*de 20 a 16*/
height: 24px;
line-height: 24px;
margin: 24px 32px 0 0;
min-width: 250px;
padding-top: 24px;
outline: 0;
z-index: 1;
}
label.field.focused .psuedo_select ul label.field .psuedo_select::after {
background: url("data:image/svg+xml;utf8,"), no-repeat;
content: "";
height: 24px;
width: 24px;
position: absolute;
top: 0;
right: 0;
transition-property: background;
}
label.field.focused .psuedo_select ul label.field .psuedo_select .selected {
height: 24px;
left: 1px;
line-height: 24px;
opacity: 0;
position: absolute;
top: 0;
transform: translateY(24px);
transition-property: opacity, transform;
will-change: transform;
}
label.field.focused .psuedo_select ul label.field .psuedo_select ul {
background: var(--color-white);
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
display: block;
height: 0;
list-style: none;
margin-top: 2px;
opacity: 0;
overflow: hidden;
padding: 0 1px;
pointer-events: none;
transition-property: height, opacity;
width: 100%;
z-index: 2;
}
label.field.focused .psuedo_select ul label.field .psuedo_select ul li {
height: 32px;
padding: 8px 4px;
}
/*nuevo*/
label.field .psuedo_select ul li:hover {
background-color: rgba(0, 51, 160, 0.08);
height: 32px;
padding: 8px 4px;
}
label.field.focused .psuedo_select ul label.field .deselect {
height: 100vh;
left: 0;
position: fixed;
top: 0;
width: 100vw;
z-index: -1;
}
label.field.focused .psuedo_select ul label.field.focused {
color: #007bed;
}
label.field.focused .psuedo_select ul label.field.focused .psuedo_select {
border-color: #007bed;
}
label.field.focused .psuedo_select ul label.field.focused .psuedo_select::after {
background: url("data:image/svg+xml;utf8,"), no-repeat;
}
label.field.focused .psuedo_select ul label.field.focused .psuedo_select ul {
opacity: 1;
pointer-events: all;
}
/* FIN DE SELECT DE MATERIAL */
/* TAB PANELS PERSONALIZADO */
.custom-tabs-container {
width: 100%;
height: auto;
}
.custom-tabs-container .custom-tabs {
list-style: none;
padding: 0;
width: 100%;
display: flex;
/* flex-flow: nowrap; */
justify-content: space-between;
align-items: center;
}
.custom-tabs-container .custom-tabs .custom-tab {
cursor: pointer;
width: 100%;
padding: 0px;
margin: 0px;
transition: all .5s ease;
}
.custom-tabs-container .custom-tabs .custom-tab.disabled {
pointer-events: none;
}
.custom-tabs-container .custom-tabs .custom-tab .custom-tab-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0px;
height: 72px;
color: var(--color-dark);
border-bottom: 1px solid var(--color-dark);
}
.custom-tabs-container .custom-tabs .custom-tab.active .custom-tab-content {
color: var(--color-red);
border-bottom: 1px solid var(--color-red);
}
.custom-tabs-container .custom-tab-panels {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.custom-tabs-container .custom-tab-panels .custom-tab-panel {
display: none;
}
.custom-tabs-container .custom-tab-panels .custom-tab-panel.active {
display: block;
}
/* TAB PANELS PERSONALIZADO */
/* ESTILOS DE SUCURSALES*/
.container-section-max-1440 {
max-width: 1440px;
height: auto;
padding: 89px 40px 32px;
background-color: var(--color-light);
}
.sucursales-details-container {
max-width: 1440px;
display: flex;
flex-direction: row;
justify-content: left;
/* padding-bottom: 150px; */
background-color: var(--color-light);
}
.sucursales-details-subcontainer {
height: auto;
padding: 89px 156px 32px;
}
.title-sucursales {
font-family: Roboto, sans-serif;
font-style: normal;
/* margin-left: 22px; */
line-height: 36px;
height: auto;
padding-top: 16px;
margin-bottom: 0;
}
.title-sucursales-width-auto {
width: 420px;
}
.sub-title-sucursales-width-auto {
width: 245px;
}
.sucursales-circle-dimensions {
height: 264px;
width: 264px;
}
.sucursales-image-position {
position: absolute;
top: 50px;
left: 50px
}
/* .sucursal-table-utlimas-recogidas tr {
border: 1px solid var(--color-light-gray-3);
} */
.sucursal-table-utlimas-recogidas {
border: 1px solid var(--color-light-gray-3);
table-layout: fixed;
width: 100%;
text-align: center;
}
.sucursal-table-utlimas-recogidas th {
font-family: Roboto, sans-serif;
font-size: 14px;
font-weight: 400;
text-transform: uppercase;
color: var(--color-gray);
border: 1px solid var(--color-light-gray-3);
}
.sucursal-table-utlimas-recogidas td {
font-family: Roboto, sans-serif;
font-size: 12px;
color: var(--color-gray);
border: 1px solid var(--color-light-gray-3);
}
/* .sucursales-no-result{
} */
.sucursales-no-result-icon {
position: relative;
top: 38px;
left: 80px
}
.sucursal-results-colum {
position: relative !important;
top: 295px;
}
.sucursal-details-colum {
width: 456px;
}
.map {
width: 648px;
height: 615px;
}
.input-predictor {
text-transform: uppercase;
}
.predictor:hover {
background-color: rgba(214, 21, 0, 0.08);
}
.sucursales-right-side {
width: 648px;
height: 615px;
}
.sucursales-right-side-details {
position: absolute;
width: 648px;
height: 615px;
left: 636px;
top: 90px;
}
.width-search-sucursal {
width: 456px;
}
.badge-info-succes {
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: center;
padding: 6px 16px;
gap: 8px;
width: 88px;
height: 33px;
border: 1px solid #C2E7C5;
border-radius: 8px;
flex: none;
flex-grow: 0;
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 21px;
display: flex;
align-items: center;
text-align: center;
letter-spacing: 0.5px;
color: var(--color-light-green);
}
.badge-info-error {
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: center;
padding: 6px 16px;
gap: 8px;
width: 88px;
height: 33px;
border: 1px solid #FFEDE9;
border-radius: 8px;
flex: none;
flex-grow: 0;
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 21px;
display: flex;
align-items: center;
text-align: center;
letter-spacing: 0.5px;
color: var(--color-red-2);
}
.mt-badge-info {
margin-top: -4px;
}
.filtro_resultados {
display: flex;
flex-wrap: wrap;
/* width: 456px; */
}
.filter-chip-active {
padding: 6px 16px 6px 8px;
gap: 8px;
height: 32px;
background: rgba(103, 103, 103, 0.12);
border-radius: 8px;
flex: none;
align-self: stretch;
flex-grow: 0;
cursor: pointer;
width: auto;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 1px 2px rgba(0, 0, 0, 0.3);
}
.filter-chip-active::before {
content: url("../img/check_dark.svg");
}
.filter-chip {
padding: 6px 16px;
gap: 8px;
height: 33px;
border: 1px solid #F6F6F6;
border-radius: 8px;
flex: none;
flex-grow: 0;
cursor: pointer;
width: auto;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 1px 2px rgba(0, 0, 0, 0.3);
}
.filter-chip-text-format {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 21px;
display: flex;
align-items: center;
text-align: center;
letter-spacing: 0.5px;
color: var(--color-gray);
}
.check-list-sucursal {
padding-left: 20px;
list-style-image: url("../img/check_green.svg");
list-style-position: 30px;
}
.check-list-sucursal li {
margin-bottom: 8px;
padding-left: 8px;
}
.no-link {
text-decoration: none;
}
.no-link:active {
text-decoration: none;
}
.no-link:hover {
text-decoration: none;
}
.color-dark.no-link:active {
color: var(--color-dark);
}
.color-dark.no-link:hover {
color: var(--color-dark);
}
.text-color-white.no-link:active {
color: white;
}
.text-color-white.no-link:hover {
color: white;
}
.cursor-pointer {
cursor: pointer;
}
.no-pointer-events {
pointer-events: none;
}
.pointer-events-all {
pointer-events: all;
}
a.link {
color: #0099E0;
text-decoration: underline;
}
a.link:link {
color: #0099E0;
}
a.link:visited {
color: #003450;
}
a.link:focus {
color: #0099E0;
}
a.link:hover {
color: #006494;
}
a.link:active {
color: #0099E0;
}
.no-result-margin {
margin-top: 5rem;
margin-left: 6rem;
}
.desktop-view-only {
display: block;
}
.mobile-view-only {
display: none;
}
/* FIN ESTILOS DE SUCURSALES*/
/* ESTILOS LOADING */
.center-loading {
position: relative;
top: calc(50vh - 6rem);
left: calc(50vw - 5rem);
width: 145px;
height: 145px;
}
.center-loading-logo {
position: absolute;
top: calc(50% - 18px);
left: calc(50% - 38px);
z-index: 200;
}
/* FIN ESTILOS LOADING */
/* ESTILOS DE PREINGRESO */
.container-preingreso {
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 801px;
width: 100%;
max-width: 1392px;
padding-bottom: 100px;
/* width: 100%; */
/* height: 900px; */
}
.container-preingreso-width {
width: 100%;
max-width: 1392px;
}
.preingreso-container-position {
padding: 95px 24px 150px !important;
width: 100%;
}
.container-preingreso-paso {
margin-left: auto;
margin-right: auto;
max-width: 1214px;
width: 100%;
}
.container-preingreso-paso-width {
width: 100%;
max-width: 1214px;
}
.container-preingreso-carrito {
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 890px;
width: 100%;
max-width: 1440px;
}
.container-preingreso-comprobante {
width: 100%;
max-width: 1245px;
}
.container-preingreso-mobile {
width: inherit;
/* margin-top: 23px; */
padding: 23px 16px;
height: auto;
}
.subcontainer-preingreso {
width: 100%;
height: auto;
}
.subcontainer-preingreso-mobile {
height: 652px;
width: 100%;
margin-top: 29px;
/* overflow-y: auto; */
}
.preingreso-container-blue {
background: rgba(0, 51, 160, 0.12);
border: 1px solid #c6d0fb;
border-radius: 8px;
display: flex;
align-items: center;
text-align: center;
}
.preingreso-container-green {
background: rgba(55, 153, 76, 0.12);
border: 1px solid #C2E7C5;
border-radius: 8px;
display: flex;
align-items: center;
text-align: center;
}
.preingreso-map-wrapper {
padding: 8px;
width: 595px;
height: 420px;
background: #FFFFFF;
border: 1px solid #F1F1F1;
border-radius: 8px;
}
.preingreso-map {
width: 579px;
height: 404px;
border-radius: 8px;
overflow: hidden;
}
.container-preingreso-paso .wrap-component-input-type-number-personalizado {
width: 100%;
box-sizing: border-box;
padding: 8px;
background-color: var(--color-light-gray-2);
border-radius: 8px;
}
.container-preingreso-paso .wrap-component-input-type-number-personalizado .input-type-number-personalizado-subwrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
/* height: 72px; */
padding: 0 16px 0 18px;
}
.container-preingreso-paso .wrap-component-input-type-number-personalizado .input-type-number-personalizado-subwrapper .principal-info {
color: var(--color-dark-black);
--color: var(--color-dark-black);
}
.container-preingreso-paso .wrap-component-input-type-number-personalizado .input-type-number-personalizado-subwrapper .secondary-info {
color: var(--color-gray);
--color: var(--color-gray);
}
.container-preingreso-paso .wrap-component-input-type-number-personalizado .input-type-number-personalizado-subwrapper.valid-background {
background-color: var(--color-light-green-2);
}
.container-preingreso-paso .wrap-component-input-type-number-personalizado .input-type-number-personalizado-subwrapper.valid-background .principal-info {
color: var(--color-dark-green);
--color: var(--color-dark-green);
}
.container-preingreso-paso .wrap-component-input-type-number-personalizado .input-type-number-personalizado-subwrapper.valid-background .secondary-info {
color: var(--color-light-green);
--color: var(--color-light-green);
}
.container-preingreso-paso .wrap-component-input-type-number-personalizado .input-type-number-personalizado-subwrapper.no-valid-background .principal-info {
color: var(--color-dark-red);
--color: var(--color-dark-red);
}
.container-preingreso-paso .wrap-component-input-type-number-personalizado .input-type-number-personalizado-subwrapper.no-valid-background .secondary-info {
color: var(--color-red-2);
--color: var(--color-red-2);
}
.container-preingreso-paso .wrap-component-input-type-number-personalizado .input-type-number-personalizado-subwrapper .input-type-number-personalizado {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: auto;
padding: 6px 2rem;
height: 36px;
background-color: var(--color-white);
border-radius: 8px;
}
.container-preingreso-paso .wrap-component-input-type-number-personalizado .input-type-number-personalizado-subwrapper .input-type-number-personalizado input {
color: var(--color-black);
border: transparent;
width: 80px !important;
min-width: 80px;
max-width: 120px;
text-overflow: ellipsis;
overflow: hidden;
}
.container-preingreso-paso .wrap-component-input-type-number-personalizado .input-type-number-personalizado-subwrapper .input-type-number-personalizado .control-left {
position: absolute;
top: 2px;
left: 10px;
cursor: pointer;
}
.container-preingreso-paso .wrap-component-input-type-number-personalizado .input-type-number-personalizado-subwrapper .input-type-number-personalizado .control-right {
position: absolute;
top: 2px;
right: 10px;
cursor: pointer;
}
.container-preingreso-paso .opciones-horizontales {
width: 100%;
/* height: 65px; */
border-radius: 8px;
padding-left: 8px;
padding-right: 8px;
background-color: var(--color-white);
}
.container-preingreso-paso .opciones-horizontales .active {
display: none;
}
.container-preingreso-paso .opciones-horizontales:hover {
background-color: var(--color-light-gray-2);
}
.container-preingreso-paso .opciones-horizontales.active {
background-color: var(--color-light-2);
}
.container-preingreso-paso .opciones-horizontales.active .inactive {
display: none;
}
.container-preingreso-paso .opciones-horizontales.active .active {
display: block;
}
.container-preingreso-paso .opciones-horizontales.active:hover {
background-color: var(--color-light-2);
}
.preingreso-shadow-container {
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
width: 100%;
height: 48px;
border-radius: 8px;
padding: 5px;
}
.preingreso-shadow-container:hover {
background-color: rgba(0, 0, 0, 0.048);
}
.preingreso-sucursal-subdetails {
border: 1px solid #E5E5E5;
border-radius: 8px;
padding: 16px;
background-color: var(--color-white);
}
.preingreso-filter-wrapper {
display: flex;
flex-direction: row;
justify-content: start;
width: 100%;
}
.preingreso-filter-chip-active {
padding: 6px 16px 6px 8px;
gap: 5px;
height: 33px;
background: rgba(0, 51, 160, 0.12);
border-radius: 8px;
flex: none;
align-self: stretch;
flex-grow: 0;
cursor: pointer;
width: auto;
}
.preingreso-filter-chip-active svg {
display: block;
margin-top: 5px;
}
.preingreso-filter-chip {
padding: 6px 16px 6px 8px;
height: 33px;
border: 1px solid var(--color-light-blue-6);
border-radius: 8px;
flex: none;
flex-grow: 0;
cursor: pointer;
width: auto;
}
.preingreso-filter-chip.disabled {
pointer-events: none;
opacity: 0.4;
}
.preingreso-filter-chip svg {
display: none;
}
.preingreso-filter-chip-text-format {
font-family: 'Roboto';
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 21px;
display: flex;
align-items: center;
text-align: center;
letter-spacing: 0.5px;
color: var(--color-blue);
}
.preingreso-subcontainer {
width: 595px;
}
.preingreso-text-lined {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 21px;
letter-spacing: 0.4px;
text-decoration-line: line-through;
color: var(--color-gray);
flex: none;
order: 0;
flex-grow: 0;
}
.preingreso-step-full-container {
position: relative;
background-color: transparent;
border-radius: 50%;
border: 2px solid #4CAF50;
width: 38px;
height: 38px;
}
.preingreso-step-full-container .preingreso-step-full-container-info {
position: absolute;
left: 6.5px;
top: 7px;
font-size: 14px;
font-weight: 700;
font-family: Roboto;
}
.preingreso-step-half-container {
position: relative;
background-color: transparent;
border-radius: 50%;
border: 2px solid #B7B7B7;
border-top-color: #4CAF50;
border-right-color: #4CAF50;
width: 38px;
height: 38px;
transform: rotate(45deg);
}
.preingreso-step-half-container .preingreso-step-half-container-info {
position: absolute;
left: 6.5px;
top: 7px;
font-size: 14px;
font-weight: 700;
font-family: Roboto;
transform: rotate(-45deg);
}
.preingresp-buscador-icono-wrapper {
width: 40px;
height: 40px;
border: 1px solid var(--color-light-2);
cursor: pointer;
}
.preingreso-guardar-remitente {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0 12px 0 18px;
border-radius: 8px;
background-color: var(--color-white);
}
.preingreso-guardar-remitente .filled {
display: none;
}
.preingreso-guardar-remitente.active {
background-color: var(--color-light-6);
}
.preingreso-guardar-remitente.active .outlined {
display: none;
}
.preingreso-guardar-remitente.active .filled {
display: block;
}
.preingreso-modal.modal-starting-position-right {
right: -532px;
}
.preingreso-modal {
position: absolute;
top: 0;
height: 100%;
width: 531px;
padding: 24px;
transition: all 0.6s ease;
}
.preingreso-modal .contect-editable-text {
border-radius: 8px;
background-color: var(--color-white);
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 5px 5px 5px 15px;
}
.preingreso-modal .contect-editable-text.bg-hover-light-blue-5:hover {
border-radius: 8px;
background-color: var(--color-light-blue-5);
}
.preingreso-modal-bottons-wrapper {
position: fixed;
bottom: 10px;
width: 483px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
background-color: var(--color-white);
}
.preingreso-modal-filter-chip-active {
padding: 6px 16px 6px 8px;
gap: 8px;
height: 32px;
background: #E6F6E7;
border: 1px solid #C2E7C5;
border-radius: 8px;
flex: none;
align-self: stretch;
flex-grow: 0;
cursor: pointer;
}
.preingreso-modal-filter-chip-active::before {
content: url("../img/check_green.svg");
}
.preingreso-modal-filter-chip {
padding: 6px 16px;
gap: 8px;
height: 33px;
border: 1px solid #FFCBBC;
border-radius: 8px;
flex: none;
flex-grow: 0;
cursor: pointer;
}
.preingreso-modal-filter-chip .preingreso-modal-filter-chip-text-format {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 21px;
display: flex;
align-items: center;
text-align: center;
letter-spacing: 0.5px;
color: var(--color-red);
}
.preingreso-modal-filter-chip-active .preingreso-modal-filter-chip-text-format {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 21px;
display: flex;
align-items: center;
text-align: center;
letter-spacing: 0.5px;
color: var(--color-light-green);
}
.preingreso-alert-message {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 27px;
padding: 6px 8px 6px 16px;
width: 506px;
height: 46px;
background: var(--color-black);
box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.14), 0px 1px 10px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.2);
border-radius: 8px;
}
.preingreso-alert-message .info {
width: 357px;
height: auto;
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 21px;
letter-spacing: 0.25px;
color: var(--color-white);
flex: none;
order: 0;
flex-grow: 1;
}
.preingreso-alert-message .button {
width: 66px;
height: auto;
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 14px;
display: flex;
align-items: center;
text-align: center;
letter-spacing: 0.5px;
color: #FFDAD2;
flex: none;
order: 0;
flex-grow: 1;
}
.preingreso-select-all {
border-radius: 8px;
height: 48px;
width: 228px;
padding: 5px;
}
.preingreso-select-all:hover {
background: rgba(103, 103, 103, 0.12);
}
.preingreso-select-all.shadow-red:hover {
background: rgba(103, 103, 103, 0.12);
}
.preingreso-text-resultado {
display: flex;
flex-direction: row;
align-items: center;
justify-content: start;
font-family: Roboto, sans-serif;
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 21px;
color: var(--color-dark);
width: 100%;
height: 65px;
padding: 10px 10px 10px 20px;
cursor: pointer;
}
.preingreso-text-resultado:hover {
background: rgba(103, 103, 103, 0.08);
border-radius: 8px;
}
.preingreso-text-resultado img.selected {
display: none;
}
.preingreso-text-resultado img.default {
display: block;
}
.preingreso-text-resultado.selected img.selected {
display: block;
}
.preingreso-text-resultado.selected img.default {
display: none;
}
.preingreso-buscador-alias {
font-family: Roboto, sans-serif;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 21px;
color: var(--color-gray);
}
.preingreso-text-resultado.selected {
background: var(--color-blue)13;
border-radius: 8px;
width: 100%;
height: 65px;
color: var(--color-blue);
}
.preingreso-grid-cards-container {
display: grid;
grid-template-rows: auto auto auto;
grid-template-columns: 394.33px 394.33px 394.33px;
grid-gap: 16px;
}
.preingreso-text-resultado.selected .preingreso-buscador-alias {
color: var(--color-blue);
}
.map-modal-preingreso {
width: 648px;
height: 400px;
margin-top: 25px;
}
.sub-title-modal-preingreso {
color: var(--color-gray);
font-size: 12px;
text-transform: uppercase;
font-weight: 500;
margin-top: 30px;
margin-bottom: 30px;
}
.search-elements {
max-height: 233px;
width: 100%;
overflow-y: scroll;
}
.search-elements::-webkit-scrollbar {
width: 8px !important;
}
.search-elements::-webkit-scrollbar-track {
/*box-shadow: inset 0 0 2px #333; */
background-color: #FAFAFA;
border-radius: 10px;
border: 0px !important;
}
.search-elements::-webkit-scrollbar-thumb {
background: #D9D9D9 !important;
opacity: 0.6;
border-radius: 4px !important;
}
.search-elements::-webkit-scrollbar-thumb:hover {
background: rgba(51, 51, 51, 1) !important;
}
.preingreso-recepcion-date-container {
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
padding: 16px;
gap: 16px;
width: 189.17px;
height: 74px;
background: #FFFFFF;
border: 1px solid #E5E5E5;
border-radius: 8px;
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 21px;
display: flex;
align-items: center;
letter-spacing: 0.1px;
color: var(--color-gray);
--color: var(--color-gray);
}
.preingreso-recepcion-date-container .filled {
display: none;
}
.preingreso-recepcion-date-container:hover {
cursor: pointer;
}
.preingreso-recepcion-date-container.active {
background-color: var(--color-light-blue-5);
box-shadow: 0px 4px 8px 3px rgb(0 0 0 / 15%), 0px 1px 3px rgb(0 0 0 / 30%);
border: 1px solid var(--color-light-blue-7);
color: var(--color-blue);
}
.preingreso-recepcion-date-container.active .filled {
display: block;
--color: var(--color-blue);
}
.preingreso-recepcion-date-container.active .outlined {
display: none;
}
.preingreso-options-list {
display: flex;
flex-direction: column;
align-items: flex-start;
position: absolute;
background: var(--color-white);
box-shadow: 0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px rgba(0, 0, 0, 0.3);
border-radius: 8px;
}
.preingreso-options-list.position-1 {
right: 10px;
top: 40px;
z-index: 3;
width: 167px;
}
.preingreso-options-list.position-2 {
right: -25px;
top: 2px;
z-index: 3;
width: 200px;
}
.preingreso-options-list.position-3 {
left: -10px;
top: 10px;
z-index: 3;
width: 237px;
}
.preingreso-options-list.position-4 {
left: -120px;
z-index: 3;
width: 237px;
}
.preingreso-options-list .icon-wrapper {
height: 24px;
width: 24px;
}
.preingreso-options-list-item {
color: var(--color-gray);
font-family: "Roboto";
font-size: 16px;
font-weight: 400;
line-height: 28px;
}
.preingreso-options-list-item:hover {
background-color: rgba(103, 103, 103, 0.08);
border-radius: 8px;
}
.preingreso-options-list-item .preingreso-check-item {
display: none;
}
.preingreso-options-list-item.active {
background-color: rgba(103, 103, 103, 0.12);
border-radius: 8px;
color: var(--color-dark);
}
.preingreso-options-list-item.active:hover {
background-color: rgba(103, 103, 103, 0.12);
border-radius: 8px;
color: var(--color-dark);
}
.preingreso-options-list-item.active .preingreso-check-item {
display: block;
}
.preingreso-options-list-item.size-1 {
height: 48px;
width: 100%;
}
.preingreso-options-list-item.size-2 {
height: 59px;
width: 100%;
}
/* .margin-title-preingreso{
margin-top: 23px;
margin-left: 122px;
} */
.hover-shadow {
position: relative;
height: 40px;
width: 40px;
cursor: pointer;
transition: all 0.7s ease;
}
.hover-shadow .center-position-1 {
position: absolute;
top: 11px;
left: 9px;
}
.hover-shadow .center-position-2 {
position: absolute;
top: 10px;
left: 10px;
}
.hover-shadow .center-position-3 {
position: absolute;
top: 11px;
left: 11px;
}
.hover-shadow .center-position-4 {
position: absolute;
top: 12px;
left: 10px;
}
.hover-shadow .center-position-5 {
position: absolute;
top: 20px;
left: 15px;
}
.hover-shadow:hover {
background-color: rgba(0, 0, 0, 0.048);
border-radius: 50%;
}
.hover-shadow.red:hover {
background-color: var(--color-light-red-3);
border-radius: 50%;
}
.custom-tab-preingreso {
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
background-color: var(--color-white);
border-radius: 8px;
padding: 0px 10px 0px 18px;
border: 1px solid var(--color-light-2);
transition: all 0.4s ease;
}
.custom-tab-preingreso .radio .check {
position: absolute;
height: 20px;
width: 20px;
background-color: transparent;
border: 2px solid var(--color-gray);
border-radius: 50%;
}
.custom-tab-preingreso .radio .check:after {
top: 3px;
left: 3px;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--color-gray);
}
.custom-tab-preingreso .shadow-radio:hover {
background-color: var(--color-light-4);
}
.custom-tab-preingreso.focus .radio .check {
position: absolute;
height: 20px;
width: 20px;
background-color: transparent;
border: 2px solid var(--color-light-blue);
border-radius: 50%;
}
.custom-tab-preingreso.focus .radio .check:after {
top: 3px;
left: 3px;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--color-light-blue);
}
.custom-tab-preingreso.focus .shadow-radio:hover {
background-color: var(--color-light-blue-5);
}
.custom-tab-preingreso .info {
height: 67px;
}
.custom-tab-preingreso .info.size-x-1 {
width: 487.5px;
}
.custom-tab-preingreso .info.size-x-2 {
width: 282.33px;
}
.custom-tab-preingreso p {
color: var(--color-dark-black);
}
.custom-tab-preingreso p+p {
color: var(--color-dark);
}
.custom-tab-preingreso svg.outlined {
display: block;
}
.custom-tab-preingreso svg.filled {
display: none;
}
.custom-tab-preingreso.disabled {
opacity: 0.5;
pointer-events: none;
}
.custom-tab-preingreso.disabled p {
color: var(--color-dark-black);
}
.custom-tab-preingreso.disabled p+p {
color: var(--color-dark);
}
.custom-tab-preingreso.disabled svg.outlined {
display: block;
}
.custom-tab-preingreso.disabled svg.filled {
display: none;
}
.custom-tab-preingreso.focus {
background-color: var(--color-light-blue-5);
box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3);
border: 1px solid var(--color-light-blue-7);
}
.custom-tab-preingreso.focus p {
color: var(--color-dark-blue-3);
}
.custom-tab-preingreso.focus p+p {
color: var(--color-dark-blue-2);
}
.custom-tab-preingreso.focus svg.outlined {
display: none;
}
.custom-tab-preingreso.focus svg.filled {
display: block;
}
.custom-tab-preingreso.size-y-1 {
height: 99px;
}
.custom-tab-preingreso.size-y-2 {
height: 65px;
}
.custom-tab-preingreso.size-y-3 {
height: 151px;
}
.custom-tab-preingreso.size-y-4 {
height: 48px;
}
.custom-tab-preingreso.size-x-1 {
width: 599.5px;
}
.custom-tab-preingreso.size-x-2 {
width: 394.33px;
}
.custom-tab-preingreso.size-x-3 {
width: 389px;
}
.custom-tab-preingreso.size-x-4 {
width: 264px;
}
.custom-tab-panels-preingreso {
width: inherit;
height: auto;
}
.custom-tab-panel-preingreso {
display: none;
}
.custom-tab-panel-preingreso.active {
display: block;
}
.preingreso-card-remitente {
width: 100%;
height: 357px;
padding: 24px;
background: #FFFFFF;
border: 1px solid #F1F1F1;
border-radius: 8px;
}
.preingreso-card-remitente .body {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
gap: 24px;
width: 100%;
height: 100%;
}
.preingreso-card-remitente .body .info {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
gap: 8px;
width: 100%;
height: 100%;
}
.preingreso-contact-card {
background: var(--color-white);
width: 100%;
border-radius: 8px;
border: 1px solid var(--color-light-5);
transition: all 0.4s ease;
}
.preingreso-contact-card .preingreso-comuna-no-disponible {
display: none;
}
.preingreso-contact-card.disabled {
opacity: 0.35;
pointer-events: none;
}
.preingreso-contact-card.disabled .preingreso-comuna-no-disponible {
padding-top: 16px;
padding-right: 16px;
display: block;
}
.preingreso-contact-card.active {
background-color: var(--color-light-blue-5);
box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3);
border: 1px solid var(--color-light-blue-7);
}
.preingreso-contact-card .info {
display: flex;
flex-direction: column;
width: 100%;
padding: 0px 0px 16px 20px;
border-radius: 8px;
overflow: hidden;
}
.preingreso-contact-card .contact-name {
font-weight: 600;
font-family: Roboto, sans-serif;
font-size: 16px;
color: var(--color-black);
}
.preingreso-contact-card .contact-other-info {
font-weight: 400;
font-family: Roboto, sans-serif;
font-size: 12px;
margin-bottom: 3px;
color: var(--color-black);
}
.preingreso-contact-card.active .contact-name {
color: var(--color-dark-blue-3);
}
.preingreso-contact-card.active .contact-other-info {
color: var(--color-blue);
}
.preingreso-contact-card.size-x-1 {
width: 394.33px;
}
.preingreso-opciones-de-envios {
/* width: 48px; */
height: 48px;
border: 1px solid var(--color-light-gray-2);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.preingreso-opciones-de-envios.disabled {
opacity: 0.35;
pointer-events: none;
}
.preingreso-opciones-de-envios:hover .preingreso-tooltip {
display: block;
}
.preingreso-opciones-de-envios.disabled:hover .preingreso-tooltip {
display: none;
}
.preingreso-tooltip {
position: relative;
display: none;
transition: all 0.3s ease;
}
.preingreso-tooltip .preingreso-simple-tooltip {
position: absolute;
padding: 4px 12px;
height: 29px;
background: #201A19;
opacity: 0.6;
border-radius: 4px;
text-align: center;
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 21px;
letter-spacing: 0.4px;
color: var(--color-light-3);
z-index: 10;
}
.preingreso-tooltip .preingreso-tooltip-pico {
position: absolute;
border-bottom: 14px solid var(--color-dark);
border-right: 8px solid transparent;
border-left: 8px solid transparent;
width: 0px;
transition: all 0.6s ease;
}
.preingreso-tooltip .preingreso-tooltip-body {
position: absolute;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 16px;
gap: 16px;
background-color: var(--color-dark);
width: 343px;
height: auto;
border-radius: 8px;
z-index: 10;
}
.preingreso-tooltip.first-message .preingreso-tooltip-pico {
top: 50px;
left: -75px;
}
.preingreso-tooltip.other-messages .preingreso-tooltip-pico {
left: 60px;
}
.preingreso-tooltip.first-message .preingreso-tooltip-body {
top: 64px;
left: -120px;
}
.preingreso-tooltip.other-messages .preingreso-tooltip-body {
top: 14px;
left: calc(11.5vw - 60% - 10rem);
}
.bubble {
position: relative;
height: 16px;
width: 16px;
border-radius: 50%;
}
.bubble .notification-value {
position: absolute;
top: 0px;
left: 5px
}
.bubble.bg-red {
background: var(--color-red-2);
}
.bubble .text {
position: absolute;
}
.subcontainer-preingreso>ul li {
padding-right: 5px;
}
.preingreso-li {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
padding-left: 11px;
margin-left: 8px;
width: 500px;
height: 102px;
background: var(--color-white);
border-radius: 8px;
flex: none;
flex-grow: 0;
transition: all 0.4s ease;
}
.preingreso-li.selected {
border: 1px solid var(--color-light-gray);
background-color: var(--color-light-gray-2);
}
.preingreso-li.success {
border: 1px solid var(--color-light-green);
}
.preingreso-li.success.selected {
background-color: var(--color-light-green-2);
}
.preingreso-mobile-li {
display: flex;
flex-direction: row;
align-items: center;
padding-left: 16px;
padding-right: 16px;
justify-content: space-between;
max-width: 1215px;
height: 102px;
background: var(--color-white);
border-radius: 8px;
flex: none;
flex-grow: 0;
}
.preingreso-li .pasos-wrapper {
position: relative;
top: -16px;
width: auto;
}
.preingreso-li .paso-inicial {
position: absolute;
flex: none;
order: 0;
flex-grow: 0;
}
.preingreso-li .paso-inicial .body {
padding: 16px 0px;
width: 120px;
height: 86px;
cursor: pointer;
}
.preingreso-li .paso-inicial .info {
display: flex;
flex-direction: column;
align-items: center;
}
.preingreso-li .paso-inicial .info .primary-text {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 14px;
letter-spacing: 0.1px;
width: 88px;
text-align: center;
}
.preingreso-li .pasos-siguientes {
position: absolute;
border-radius: 8px;
width: 286px;
height: 72px;
transition: all 0.6s ease;
}
.preingreso-li .pasos-siguientes .body {
width: 286px;
height: 72px;
padding: 0 10px 0 8px;
display: flex;
flex-direction: row;
align-items: center;
cursor: pointer;
}
.preingreso-li .pasos-siguientes .info {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 180px;
margin-left: 10px;
margin-right: 17px;
}
.preingreso-li .pasos-siguientes .info .primary-text {
font-family: 'Roboto';
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 21px;
letter-spacing: 0.1px;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.preingreso-li .pasos-siguientes .info .secondary-text {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 21px;
letter-spacing: 0.5px;
text-transform: uppercase;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.preingreso-li .pasos-siguientes .info .secondary-text-2 {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 21px;
letter-spacing: 0.4px;
text-transform: none;
}
.preingreso-li .pasos-siguientes.two {
left: 124px;
}
.preingreso-li .pasos-siguientes.three {
left: 124px;
}
.preingreso-li .pasos-siguientes.four {
left: 124px;
}
.preingreso-li .pasos-siguientes.five {
left: 124px;
}
/*.preingreso-li .pasos-wrapper .hover-shadow.options {
top: 15px;
left: 124px;
}*/
.preingreso-li .pasos-wrapper .hover-shadow svg {
position: absolute;
top: 11px;
left: 10px;
}
.preingreso-li .pasos-wrapper .hover-shadow .list-options {
position: absolute;
top: -7px;
right: 0px;
}
.preingreso-li .pasos-wrapper .hover-shadow .list-options svg {
position: relative;
top: 0px;
right: 0px;
}
.preingreso-li .disabled {
pointer-events: none;
opacity: 0.35;
}
.preingreso-li .disabled.pasos-siguientes .primary-text {
color: var(--color-dark-black);
}
.preingreso-li .disabled.pasos-siguientes .secondary-text {
color: var(--color-dark-black);
}
.preingreso-li .disabled.pasos-siguientes .primary-text.filled {
display: none;
}
.preingreso-li .disabled.pasos-siguientes .secondary-text.filled {
display: none;
}
.preingreso-li .disabled svg.outlined {
display: block;
--color: var(--color-gray);
}
.preingreso-li .disabled svg.filled {
display: none;
}
.preingreso-li .disabled svg.separator {
--color: var(--color-gray);
}
.preingreso-li .enable:hover {
background-color: rgba(103, 103, 103, 0.08);
}
.preingreso-li .enable.paso-inicial .primary-text {
color: var(--color-dark);
}
.preingreso-li .enable.paso-inicial .primary-text.filled {
display: none;
}
.preingreso-li .enable.pasos-siguientes .primary-text {
color: var(--color-dark-black);
}
.preingreso-li .enable.pasos-siguientes .secondary-text {
color: var(--color-dark-black);
}
.preingreso-li .enable.pasos-siguientes .primary-text.filled {
display: none;
}
.preingreso-li .enable.pasos-siguientes .secondary-text.filled {
display: none;
}
.preingreso-li .enable svg.outlined {
display: block;
--color: var(--color-gray);
}
.preingreso-li .enable svg.filled {
display: none;
}
.preingreso-li .enable svg.separator {
--color: var(--color-gray);
}
.preingreso-li .focus {
background-color: rgba(103, 103, 103, 0.08);
}
.preingreso-li .focus.paso-inicial .primary-text {
color: var(--color-dark);
}
.preingreso-li .focus.paso-inicial .primary-text.filled {
display: none;
}
.preingreso-li .focus.pasos-siguientes .primary-text {
color: var(--color-dark-black);
}
.preingreso-li .focus.pasos-siguientes .secondary-text {
color: var(--color-dark-black);
}
.preingreso-li .focus.pasos-siguientes .primary-text.filled {
display: none;
}
.preingreso-li .focus.pasos-siguientes .secondary-text.filled {
display: none;
}
.preingreso-li .focus svg.outlined {
display: block;
--color: var(--color-gray);
}
.preingreso-li .focus svg.filled {
display: none;
}
.preingreso-li .focus svg.separator {
--color: var(--color-gray);
}
.preingreso-li .paso-inicial.filled .primary-text {
color: var(--color-dark-blue-2);
}
.preingreso-li .paso-inicial.filled .primary-text {
display: none;
}
.preingreso-li .paso-inicial.filled .primary-text.filled {
display: block;
}
.preingreso-li .paso-inicial.filled:hover {
background-color: var(--color-light-blue-5);
}
.preingreso-li .pasos-siguientes.filled:hover {
background-color: var(--color-light-blue-5);
}
.preingreso-li .filled.pasos-siguientes .primary-text {
color: var(--color-dark-blue-3);
}
.preingreso-li .filled.pasos-siguientes .secondary-text {
color: var(--color-dark-blue-3);
}
.preingreso-li .filled.pasos-siguientes .secondary-text-2 {
color: var(--color-light-blue-2);
}
.preingreso-li .filled.pasos-siguientes .primary-text {
display: none;
}
.preingreso-li .filled.pasos-siguientes .primary-text.filled {
display: block;
}
.preingreso-li .filled.pasos-siguientes .secondary-text {
display: none;
}
.preingreso-li .filled.pasos-siguientes .secondary-text.filled {
display: block;
}
.preingreso-li .filled svg.outlined {
display: none;
}
.preingreso-li .filled svg.filled {
display: block;
--color: var(--color-blue);
}
.preingreso-li .filled svg.separator {
--color: var(--color-blue);
}
.preingreso-li .paso-inicial.success:hover {
background-color: var(--color-light-green-3);
}
.preingreso-li .pasos-siguientes.success:hover {
background-color: var(--color-light-green-3);
}
.preingreso-li .success.paso-inicial .primary-text {
color: var(--color-green);
}
.preingreso-li .success.paso-inicial .primary-text {
display: none;
}
.preingreso-li .success.paso-inicial .primary-text.filled {
display: block;
}
.preingreso-li .success.pasos-siguientes .primary-text {
color: var(--color-dark-green);
}
.preingreso-li .success.pasos-siguientes .secondary-text {
color: var(--color-dark-green);
}
.preingreso-li .success.pasos-siguientes .primary-text {
display: none;
}
.preingreso-li .success.pasos-siguientes .primary-text.filled {
display: block;
}
.preingreso-li .success.pasos-siguientes .secondary-text {
display: none;
}
.preingreso-li .success.pasos-siguientes .secondary-text.filled {
display: block;
}
.preingreso-li .success.pasos-siguientes .secondary-text-2 {
color: var(--color-light-green);
}
.preingreso-li .success svg.outlined {
display: none;
}
.preingreso-li .success svg.filled {
display: block;
--color: var(--color-light-green);
}
.preingreso-li .success svg.separator {
--color: var(--color-light-green);
}
.preingreso-li .warning {
background-color: var(--color-light-yellow);
}
.preingreso-li .warning .primary-text {
color: var(--color-dark-yellow);
}
.preingreso-li .warning .secondary-text {
color: var(--color-yellow);
}
.preingreso-li .warning .primary-text.filled {
display: none;
}
.preingreso-li .warning .secondary-text.filled {
display: none;
}
.preingreso-li .warning .secondary-text-2 {
color: var(--color-yellow);
}
.preingreso-li .warning svg.outlined {
display: none;
}
.preingreso-li .warning svg.filled {
display: block;
--color: var(--color-yellow);
}
.preingreso-li .warning svg.separator {
--color: var(--color-dark-yellow);
}
.preingreso-li .error {
background-color: var(--color-light-red);
}
.preingreso-li .error .primary-text {
color: var(--color-dark-red);
}
.preingreso-li .error .secondary-text {
color: var(--color-dark-red);
}
.preingreso-li .error .secondary-text-2 {
color: var(--color-dark-red);
}
.preingreso-li .error .primary-text.filled {
display: none;
}
.preingreso-li .error .secondary-text.filled {
display: none;
}
.preingreso-li .error svg.outlined {
display: none;
}
.preingreso-li .error svg.filled {
display: block;
--color: var(--color-red-2);
}
.preingreso-li .error svg.separator {
--color: var(--color-dark-red);
}
ul.preingreso-beneficios-o-cupones-card {
list-style: none;
width: 100%;
padding: 0;
margin: 0;
}
ul.preingreso-beneficios-o-cupones-card li {
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: center;
padding: 16px;
gap: 16px;
width: 483px;
/* height: 121px; */
background: #FFFFFF;
border: 1px solid #F1F1F1;
border-radius: 8px;
cursor: pointer;
}
ul.preingreso-beneficios-o-cupones-card li~li {
margin-top: 8px;
}
ul.preingreso-beneficios-o-cupones-card li .info {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 0px;
gap: 4px;
width: 307px;
/* height: 89px; */
}
ul.preingreso-beneficios-o-cupones-card li .info .texto-uno {
font-size: 12px;
line-height: 14px;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--color-gray);
margin-bottom: 0;
}
ul.preingreso-beneficios-o-cupones-card li .info .texto-dos {
font-size: 16px;
line-height: 21px;
letter-spacing: 0.1px;
color: var(--color-light-gray-4);
margin-bottom: 0;
}
ul.preingreso-beneficios-o-cupones-card li .info .texto-tres {
font-weight: 400;
font-size: 12px;
line-height: 21px;
letter-spacing: 0.4px;
color: var(--color-light-green-4);
margin-bottom: 0;
}
ul.preingreso-beneficios-o-cupones-card li .info .texto-tres .prefix {
font-weight: 500;
font-size: 16px;
letter-spacing: 0.1px;
}
ul.preingreso-beneficios-o-cupones-card li .info .texto-cuatro {
font-size: 12px;
font-weight: 400;
line-height: 21px;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--color-gray);
margin-bottom: 0;
}
ul.preingreso-beneficios-o-cupones-card li.active {
background: linear-gradient(0deg, rgba(0, 51, 160, 0.08), rgba(0, 51, 160, 0.08)), #FFFFFF;
border: 1px solid #C3C9ED;
box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3);
}
ul.preingreso-beneficios-o-cupones-card li.active .info .texto-uno {
color: var(--color-blue);
}
ul.preingreso-beneficios-o-cupones-card li.active .info .texto-dos {
color: var(--color-dark-blue-3);
}
ul.preingreso-beneficios-o-cupones-card li.active .info .texto-tres {
color: var(--color-dark-blue-2);
}
ul.preingreso-beneficios-o-cupones-card li.active .info .texto-tres .prefix {
color: var(--color-dark-blue-3);
}
ul.preingreso-beneficios-o-cupones-card li.active .info .texto-cuatro {
color: var(--color-blue);
}
.preingreso-medios-de-pago {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 24px;
gap: 24px;
background-color: var(--color-white);
border: 1px solid var(--color-light-2);
border-radius: 8px;
}
.preingreso-medios-de-pago ul {
list-style: none;
width: 100%;
padding: 0;
margin: 0;
}
.preingreso-medios-de-pago ul li {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 12px 18px;
border-radius: 8px;
}
.preingreso-medios-de-pago ul li~li {
margin-top: 4px;
}
.preingreso-medios-de-pago ul li.active {
background-color: rgba(103, 103, 103, 0.12);
;
}
.preingreso-medios-de-pago ul li:hover {
background-color: var(--color-light-gray-2);
}
.preingreso-medios-de-pago ul li .primary-text {
font-family: Roboto;
font-size: 16px;
font-weight: 600;
color: var(--color-gray);
}
.preingreso-medios-de-pago ul li .secondary-text {
font-family: Roboto;
font-size: 12px;
font-weight: 400;
color: var(--color-gray);
}
.subcontainer-preingreso>ul {
box-sizing: border-box;
margin-left: -48px;
list-style: none;
}
.subcontainer-preingreso>ul li {
padding-right: 5px;
}
.subcontainer-preingreso>ul.carrito {
box-sizing: border-box;
margin-left: -40px;
list-style: none;
}
.subcontainer-preingreso>ul.carrito li {
display: flex;
flex-direction: column;
align-items: end;
width: 100%;
box-sizing: border-box;
padding-right: 0;
}
ul.carrito li .preingreso-li .pasos-wrapper {
top: -36px;
gap: 4px;
}
ul.carrito li .preingreso-li {
padding-left: 3px;
}
ul.carrito li .preingreso-li .pasos-siguientes {
position: absolute;
border-radius: 8px;
min-width: 137px;
width: calc(80vw - 73.5% - 9.5rem);
max-width: 234.5px;
height: 72px;
transition: all 0.6s ease;
}
ul.carrito li .preingreso-li .pasos-siguientes .body {
width: 100%;
max-width: 234.5px;
padding: unset;
}
ul.carrito .preingreso-li .pasos-siguientes.one {
right: 0px;
left: unset;
z-index: 10;
}
ul.carrito li .preingreso-li .pasos-siguientes.two {
right: 0px;
left: unset;
z-index: 20;
}
ul.carrito li .preingreso-li .pasos-siguientes.three {
right: 0px;
left: unset;
z-index: 30;
}
ul.carrito li .preingreso-li .pasos-siguientes.four {
right: 0px;
left: unset;
z-index: 40;
}
ul.carrito li .preingreso-li .hover-shadow:nth-child(1) {
z-index: 20;
}
ul.carrito li .preingreso-li .pasos-wrapper .hover-shadow.options {
position: sticky;
z-index: 40;
}
ul li .preingreso-li {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
padding-left: 11px;
margin-left: 8px;
width: 600px;
height: 102px;
background: var(--color-white);
border-radius: 8px;
flex: none;
flex-grow: 0;
transition: all 0.4s ease;
}
ul li .preingreso-li.selected {
border: 1px solid var(--color-light-gray);
background-color: var(--color-light-gray-2);
}
ul li .preingreso-li.success {
border: 1px solid var(--color-light-green);
}
ul li .preingreso-li.success.selected {
background-color: var(--color-light-green-2);
}
ul li .preingreso-mobile-li {
display: flex;
flex-direction: row;
align-items: center;
padding-left: 16px;
padding-right: 16px;
justify-content: space-between;
max-width: 1215px;
height: 102px;
background: var(--color-white);
border-radius: 8px;
flex: none;
flex-grow: 0;
}
ul li .preingreso-li .pasos-wrapper {
position: relative;
top: -16px;
width: 100%;
display: flex;
justify-content: start;
align-items: center;
gap: 8px;
transition: all 2s ease;
}
ul li .preingreso-li .paso-inicial {
position: absolute;
flex: none;
order: 0;
flex-grow: 0;
background-color: var(--color-white);
top: -6.5px
}
ul li .preingreso-li .paso-inicial .body {
padding: 16px 0px;
width: 120px;
height: 86px;
cursor: pointer;
}
ul li .preingreso-li .paso-inicial .info {
display: flex;
flex-direction: column;
align-items: center;
}
ul li .preingreso-li .paso-inicial .info .primary-text {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 14px;
letter-spacing: 0.1px;
width: 88px;
text-align: center;
}
ul li .preingreso-li.selected .pasos-siguientes,
ul li .preingreso-li.selected .paso-inicial {
background-color: transparent;
}
ul li .preingreso-li .pasos-siguientes {
position: absolute;
top: 0;
border-radius: 8px;
min-width: 137px;
width: calc(100vw - 73.5% - 7.7rem);
max-width: 286px;
height: 72px;
background-color: var(--color-white);
}
ul li .preingreso-li .pasos-siguientes .body {
width: 100%;
max-width: 286px;
height: 72px;
padding: 0 10px 0 8px;
display: flex;
flex-direction: row;
align-items: center;
cursor: pointer;
}
ul li .preingreso-li .pasos-siguientes .info {
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 26px;
width: 100%;
max-width: 180px;
margin-left: 10px;
margin-right: 17px;
}
ul li .preingreso-li .pasos-siguientes .info .primary-text {
font-family: 'Roboto';
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 21px;
letter-spacing: 0.1px;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
ul li .preingreso-li .pasos-siguientes .info .secondary-text {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 21px;
letter-spacing: 0.5px;
text-transform: uppercase;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
ul li .preingreso-li .pasos-siguientes .info .secondary-text-2 {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 21px;
letter-spacing: 0.4px;
text-transform: none;
}
ul li .preingreso-li .pasos-siguientes.two {
left: 124px;
}
ul li .preingreso-li .pasos-siguientes.three {
left: 124px;
}
ul li .preingreso-li .pasos-siguientes.four {
left: 124px;
}
ul li .preingreso-li .pasos-siguientes.five {
left: 124px;
}
ul li .preingreso-li .pasos-wrapper .hover-shadow.options {
right: 8px;
}
ul li .preingreso-li .pasos-wrapper .hover-shadow svg {
position: absolute;
top: 11px;
left: 10px;
}
ul li .preingreso-li .pasos-wrapper .hover-shadow .list-options {
position: absolute;
top: -7px;
right: 0px;
}
ul li .preingreso-li .pasos-wrapper .hover-shadow .list-options svg {
position: relative;
top: 0px;
right: 0px;
}
ul li .preingreso-li .disabled {
pointer-events: none;
opacity: 0.35;
}
ul li .preingreso-li .disabled.pasos-siguientes .primary-text {
color: var(--color-dark-black);
}
ul li .preingreso-li .disabled.pasos-siguientes .secondary-text {
color: var(--color-dark-black);
}
ul li .preingreso-li .disabled.pasos-siguientes .primary-text.filled {
display: none;
}
ul li .preingreso-li .disabled.pasos-siguientes .secondary-text.filled {
display: none;
}
ul li .preingreso-li .disabled svg.outlined {
display: block;
--color: var(--color-gray);
}
ul li .preingreso-li .disabled svg.filled {
display: none;
}
ul li .preingreso-li .disabled svg.separator {
--color: var(--color-gray);
}
ul li .preingreso-li .enable:hover {
background-color: rgba(103, 103, 103, 0.08);
}
ul li .preingreso-li .enable.paso-inicial .primary-text {
color: var(--color-dark);
}
ul li .preingreso-li .enable.paso-inicial .primary-text.filled {
display: none;
}
ul li .preingreso-li .enable.pasos-siguientes .primary-text {
color: var(--color-dark-black);
}
ul li .preingreso-li .enable.pasos-siguientes .secondary-text {
color: var(--color-dark-black);
}
ul li .preingreso-li .enable.pasos-siguientes .primary-text.filled {
display: none;
}
ul li .preingreso-li .enable.pasos-siguientes .secondary-text.filled {
display: none;
}
ul li .preingreso-li .enable svg.outlined {
display: block;
--color: var(--color-gray);
}
ul li .preingreso-li .enable svg.filled {
display: none;
}
ul li .preingreso-li .enable svg.separator {
--color: var(--color-gray);
}
ul li .preingreso-li .focus {
background-color: rgba(103, 103, 103, 0.08);
}
ul li .preingreso-li .focus.paso-inicial .primary-text {
color: var(--color-dark);
}
ul li .preingreso-li .focus.paso-inicial .primary-text.filled {
display: none;
}
ul li .preingreso-li .focus.pasos-siguientes .primary-text {
color: var(--color-dark-black);
}
ul li .preingreso-li .focus.pasos-siguientes .secondary-text {
color: var(--color-dark-black);
}
ul li .preingreso-li .focus.pasos-siguientes .primary-text.filled {
display: none;
}
ul li .preingreso-li .focus.pasos-siguientes .secondary-text.filled {
display: none;
}
ul li .preingreso-li .focus svg.outlined {
display: block;
--color: var(--color-gray);
}
ul li .preingreso-li .focus svg.filled {
display: none;
}
ul li .preingreso-li .focus svg.separator {
--color: var(--color-gray);
}
ul li .preingreso-li .paso-inicial.filled .primary-text {
color: var(--color-dark-blue-2);
}
ul li .preingreso-li .paso-inicial.filled .primary-text {
display: none;
}
ul li .preingreso-li .paso-inicial.filled .primary-text.filled {
display: block;
}
ul li .preingreso-li .paso-inicial.filled:hover {
background-color: var(--color-light-blue-5);
}
ul li .preingreso-li .pasos-siguientes.filled:hover {
background-color: var(--color-light-blue-5);
}
ul li .preingreso-li .filled.pasos-siguientes .primary-text {
color: var(--color-dark-blue-3);
}
ul li .preingreso-li .filled.pasos-siguientes .secondary-text {
color: var(--color-dark-blue-3);
}
ul li .preingreso-li .filled.pasos-siguientes .secondary-text-2 {
color: var(--color-light-blue-2);
}
ul li .preingreso-li .filled.pasos-siguientes .primary-text {
display: none;
}
ul li .preingreso-li .filled.pasos-siguientes .primary-text.filled {
display: block;
}
ul li .preingreso-li .filled.pasos-siguientes .secondary-text {
display: none;
}
ul li .preingreso-li .filled.pasos-siguientes .secondary-text.filled {
display: block;
}
ul li .preingreso-li .filled svg.outlined {
display: none;
}
ul li .preingreso-li .filled svg.filled {
display: block;
--color: var(--color-blue);
}
ul li .preingreso-li .filled svg.separator {
--color: var(--color-blue);
}
ul li .preingreso-li .paso-inicial.success:hover {
background-color: var(--color-light-green-3);
}
ul li .preingreso-li .pasos-siguientes.success:hover {
background-color: var(--color-light-green-3);
}
ul li .preingreso-li .success.paso-inicial .primary-text {
color: var(--color-green);
}
ul li .preingreso-li .success.paso-inicial .primary-text {
display: none;
}
ul li .preingreso-li .success.paso-inicial .primary-text.filled {
display: block;
}
ul li .preingreso-li .success.pasos-siguientes .primary-text {
color: var(--color-dark-green);
}
ul li .preingreso-li .success.pasos-siguientes .secondary-text {
color: var(--color-dark-green);
}
ul li .preingreso-li .success.pasos-siguientes .primary-text {
display: none;
}
ul li .preingreso-li .success.pasos-siguientes .primary-text.filled {
display: block;
}
ul li .preingreso-li .success.pasos-siguientes .secondary-text {
display: none;
}
ul li .preingreso-li .success.pasos-siguientes .secondary-text.filled {
display: block;
}
ul li .preingreso-li .success.pasos-siguientes .secondary-text-2 {
color: var(--color-light-green);
}
ul li .preingreso-li .success svg.outlined {
display: none;
}
ul li .preingreso-li .success svg.filled {
display: block;
--color: var(--color-light-green);
}
ul li .preingreso-li .success svg.separator {
--color: var(--color-light-green);
}
ul li .preingreso-li .warning {
background-color: var(--color-light-yellow);
}
ul li .preingreso-li .warning .primary-text {
color: var(--color-dark-yellow);
}
ul li .preingreso-li .warning .secondary-text {
color: var(--color-yellow);
}
ul li .preingreso-li .warning .primary-text.filled {
display: none;
}
ul li .preingreso-li .warning .secondary-text.filled {
display: none;
}
ul li .preingreso-li .warning .secondary-text-2 {
color: var(--color-yellow);
}
ul li .preingreso-li .warning svg.outlined {
display: none;
}
ul li .preingreso-li .warning svg.filled {
display: block;
--color: var(--color-yellow);
}
ul li .preingreso-li .warning svg.separator {
--color: var(--color-dark-yellow);
}
ul li .preingreso-li .error {
background-color: var(--color-light-red);
}
ul li .preingreso-li .error .primary-text {
color: var(--color-dark-red);
}
ul li .preingreso-li .error .secondary-text {
color: var(--color-dark-red);
}
ul li .preingreso-li .error .secondary-text-2 {
color: var(--color-dark-red);
}
ul li .preingreso-li .error .primary-text.filled {
display: none;
}
ul li .preingreso-li .error .secondary-text.filled {
display: none;
}
ul li .preingreso-li .error svg.outlined {
display: none;
}
ul li .preingreso-li .error svg.filled {
display: block;
--color: var(--color-red-2);
}
ul li .preingreso-li .error svg.separator {
--color: var(--color-dark-red);
}
.top-bar-preingreso {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0px 24px;
/* gap: 80px; */
width: 100%;
height: 72px;
background: var(--color-white);
position: fixed;
top: 0;
z-index: 20;
}
.top-bar-preingreso .options {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
gap: 80px;
}
.top-bar-preingreso .disabled {
opacity: 0.35;
pointer-events: none;
}
.top-bar-preingreso-forms {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0px 24px;
position: relative;
width: 100%;
height: 72px;
left: 0px;
top: 0px;
background: var(--color-white);
}
.top-bar-preingreso-forms .disabled {
opacity: 0.35;
pointer-events: none;
}
.top-bar-preingreso-mobile {
position: relative;
top: 0;
left: 0;
display: flex;
flex-direction: row;
justify-content: flex-end;
height: 64px;
width: 100%;
align-items: center;
padding: 0px 24px;
gap: 40px;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 1px 2px rgba(0, 0, 0, 0.3);
}
.preingreso-bottom-bar {
position: fixed;
z-index: 40;
bottom: 0px;
width: 100%;
height: 77px;
padding: 16px 24px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background: var(--color-white);
}
.preingreso-envios-general-options {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-top: 32px;
margin-bottom: 16px;
flex: none;
order: 1;
align-self: stretch;
flex-grow: 0;
}
/* ESTILO PREINGRESO HECHOS POR ALEJANDRO UTILIZANDO BEM PARA SERVICIOS, CARRO DE COMPRA Y COMPROBANTE */
/*SERVICIOS*/
.content__servicio-item {
display: flex;
min-height: 143px;
border: 1px solid var(--color-light-2);
border-radius: 8px;
justify-content: space-between;
transition: all 0.4s ease;
background: var(--color-white);
border: 1px solid var(--color-light-2);
height: 100%;
}
.content__servicio-item--valor {
width: 100%;
max-width: 28.16%;
display: flex;
flex-direction: column;
justify-content: center;
border-right: 1px solid var(--color-light-red-5);
}
.content__servicio-item--info {
width: 100%;
max-width: 81%;
}
.content__servicio-item--check {
display: flex;
justify-content: end;
width: 100%;
max-width: 19%;
margin-right: 4px;
}
.servicio-item-text--valor {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 14px;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--color-gray);
}
.servicio-item-text--descuento {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 21px;
letter-spacing: 0.4px;
text-decoration-line: line-through;
color: var(--color-gray);
min-height: 21px;
}
.servicio-item-text--precio {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-size: 22px;
line-height: 28px;
color: var(--color-black);
}
.servicio-item-text--porcentaje-descuento {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 21px;
letter-spacing: 0.4px;
color: var(--color-light-green);
min-height: 21px;
}
.servicio-item-text--tipo-viaje {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 21px;
letter-spacing: 0.1px;
color: var(--color-black);
}
.servicio-item-text--direccion {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 21px;
letter-spacing: 0.4px;
color: var(--color-black);
}
.servicio-item-text--dias-habiles {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 21px;
letter-spacing: 0.4px;
color: var(--color-black);
}
.content__servicio-item--check .shadow-radio {
margin-top: -8px;
}
.servicio-item-text--mas-rapido {
border-radius: 8px;
border: 1px solid var(--color-light-blue-6);
width: fit-content;
}
.servicio-item-text--mas-economico {
border-radius: 8px;
border: 1px solid var(--color-light-green-5);
width: fit-content;
}
.servicio-item-text--pago-en-destino {
border-radius: 8px;
border: 1px solid var(--color-yellow);
width: fit-content;
}
.content__info-and-check-and-velocidad {
display: flex;
width: 100%;
max-width: 70.8%;
flex-direction: column;
justify-content: space-between;
}
.content__info-and-check {
display: flex;
}
.servicio-item-text-tag.rapido {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 21px;
letter-spacing: 0.5px;
color: var(--color-blue);
}
.servicio-item-text-tag.economico {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 21px;
letter-spacing: 0.5px;
color: var(--color-light-green) !important;
}
.servicio-item-text-tag.pago-en-destino {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 21px;
letter-spacing: 0.5px;
color: var(--color-yellow) !important;
}
/*active*/
.content__servicio-item.active {
background-color: var(--color-light-blue-5);
box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3);
border: 1px solid var(--color-light-blue-7);
}
.content__servicio-item.rapido .content__rapido,
.content__servicio-item.economico .content__masbarato,
.content__servicio-item.pago-en-destino .content__pago-en-destino {
display: block !important;
}
.content__servicio-item.active p,
.content__servicio-item.active span {
color: var(--color-blue);
}
.content__servicio-item.active .servicio-item-text--mas-rapido {
background: rgba(0, 51, 160, 0.12);
}
.content__servicio-item.active .servicio-item-text--mas-economico {
background: var(--color-light-green-5);
}
.content__servicio-item.active .servicio-item-text--pago-en-destino {
background: var(--color-light-yellow-2);
}
/*FIN SERVICIOS*/
/*CARRO DE COMPRAS*/
.col-4-de-16 {
flex: 0 0 25%;
max-width: 25%;
}
.col-12-de-16 {
flex: 0 0 75%;
max-width: 75%;
}
/*Contenedores*/
.carroDeCompra__hr {
border: none;
height: 1px;
background: rgba(33, 33, 33, 0.08);
}
.carroDeCompra__card {
background: var(--color-white);
border: 1px solid var(color-light-2);
border-radius: 8px;
padding: 1em 1.5em;
}
.carroDeCompra__card--green {
background: var(--color-white);
border: 1px solid var(color-light-2);
border-radius: 8px;
padding: 1em 1.5em;
}
.carroDeCompra__content-convenio {
/*justify-content: space-evenly;*/
}
/*textos*/
.carroDeCompra__title--resumen-pago {
font-weight: 600;
font-size: 22px;
line-height: 28px;
color: var(--color-dark-black);
}
.carroDeCompra__subtitle--resumen-pago {
font-weight: 600;
font-size: 16px;
line-height: 21px;
letter-spacing: 0.1px;
color: var(--color-dark-black);
}
.carroDeCompra__text--datos-generales {
font-weight: 400;
font-size: 14px;
line-height: 21px;
letter-spacing: 0.25px;
color: var(--color-dark-black);
}
.carroDeCompra__text--respuesta-datos-generales {
font-weight: 700;
font-size: 14px;
line-height: 28px;
letter-spacing: 0.1px;
color: var(--color-gray);
}
.carroDeCompra__text--subtotal {
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 21px;
letter-spacing: 0.1px;
color: var(--color-dark-black);
}
.carroDeCompra__text--respuesta-subtotal {
font-weight: 700;
font-size: 14px;
line-height: 28px;
letter-spacing: 0.1px;
color: var(--color-dark-black);
}
.carroDeCompra__text--descuento {
font-weight: 400;
font-size: 14px;
line-height: 21px;
letter-spacing: 0.25px;
color: var(--color-light-green);
}
.carroDeCompra__text--total-descuento {
font-weight: 700;
font-size: 14px;
line-height: 28px;
letter-spacing: 0.1px;
color: var(--color-light-green);
}
.carroDeCompra__check-content-title {
font-weight: 600;
font-size: 16px;
line-height: 21px;
letter-spacing: 0.1px;
color: var(--color-dark-green);
}
.carroDeCompra__check-content-subtitle {
font-weight: 500;
font-size: 12px;
line-height: 14px;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--color-dark-green);
}
/*botones*/
.carroDeCompra__datos-generales--btn {
border: 1px solid var(--color-gray);
border-radius: 100px;
padding: 12px 0;
cursor: pointer;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 14px;
display: flex;
align-items: center;
letter-spacing: 0.5px;
color: var(--color-gray);
}
.carroDeCompra__datos-generales--btn.icono {
gap: 10px;
}
.carroDeCompra__datos-generales--btn:hover {
background: var(--color-light-4);
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 14px;
display: flex;
align-items: center;
letter-spacing: 0.5px;
color: var(--color-gray);
text-decoration: none;
}
.carroDeCompra__datos-generales--content-ico-btn {
width: 16px;
}
.carroDeCompra__check-content--cross {
cursor: pointer;
}
/*flecha*/
.carroDeCompra__collapse.collapsed .shadow-flecha-acordion svg {
filter: grayscale(100%) hue-rotate(130deg);
transform: rotate(3.142rad);
}
.carroDeCompra__collapse .shadow-flecha-acordion {
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.carroDeCompra__collapse .shadow-flecha-acordion:hover {
background: var(--color-light-red-6);
}
.carroDeCompra__collapse.collapsed .shadow-flecha-acordion:hover {
background: var(--color-light-4);
}
/*Resumen de pago*/
.carroDeCompra__total-pago {
background: var(--color-light-blue-6);
border-radius: 8px;
}
.carroDeCompra__total-pago--text-total {
font-weight: 700;
font-size: 16px;
line-height: 28px;
color: var(--color-blue);
}
.carroDeCompra__total-pago--text {
font-family: 'Roboto';
font-style: normal;
font-weight: 600;
font-size: 22px;
line-height: 21px;
letter-spacing: 0.5px;
color: var(--color-blue);
}
/*envios agregados*/
.carroDeCompra__content-todo--envios-agregados {
width: 100%;
display: flex;
}
.carroDeCompra__item--envios-agregados {
border: 1px solid var(--color-light-green);
border-radius: 8px;
}
.carroDeCompra__content-svg--envios-agregados {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.carroDeCompra__content--envios-agregados {
gap: 15px;
border-radius: 8px;
width: 100%;
}
.carroDeCompra__content--envios-agregados:hover {
background-color: var(--color-light-green-6);
}
.carroDeCompra__content--envios-agregados-title {
font-weight: 600;
font-size: 16px;
line-height: 21px;
letter-spacing: 0.1px;
color: var(--color-dark-green);
margin-bottom: 0;
}
.carroDeCompra__content--envios-agregados-subtitle {
font-weight: 500;
font-size: 12px;
line-height: 14px;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--color-dark-green);
margin-bottom: 0;
}
.carroDeCompra__content--envios-agregados-subtitle span {
font-weight: 400;
font-size: 12px;
line-height: 21px;
letter-spacing: 0.4px;
color: var(--color-light-green);
margin-bottom: 0;
}
.carroDeCompra__content--svg-eliminar {
width: 63px;
text-align: center;
cursor: pointer;
}
/*layout*/
.col-4-de-16 {
flex: 0 0 25%;
max-width: 25%;
}
.col-12-de-16 {
flex: 0 0 75%;
max-width: 75%;
}
/*Contenedores*/
.carroDeCompra__hr {
border: none;
height: 1px;
background: rgba(33, 33, 33, 0.08);
}
.carroDeCompra__card {
background: #FFFFFF;
border: 1px solid #F1F1F1;
border-radius: 8px;
padding: 1em 1.5em;
}
.carroDeCompra__card--green {
background: #FFFFFF;
border: 1px solid #F1F1F1;
border-radius: 8px;
padding: 1em 1.5em;
}
.carroDeCompra__content-convenio {
/*justify-content: space-evenly;*/
}
/*textos*/
.carroDeCompra__title--resumen-pago {
font-weight: 600;
font-size: 22px;
line-height: 28px;
color: #212121;
}
.carroDeCompra__subtitle--resumen-pago {
font-weight: 600;
font-size: 16px;
line-height: 21px;
letter-spacing: 0.1px;
color: #212121;
}
.carroDeCompra__text--datos-generales {
font-weight: 400;
font-size: 14px;
line-height: 21px;
letter-spacing: 0.25px;
color: #212121;
}
.carroDeCompra__text--respuesta-datos-generales {
font-weight: 700;
font-size: 14px;
line-height: 28px;
letter-spacing: 0.1px;
color: #676767;
}
.carroDeCompra__text--subtotal {
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 21px;
letter-spacing: 0.1px;
color: #212121;
}
.carroDeCompra__text--respuesta-subtotal {
font-weight: 700;
font-size: 14px;
line-height: 28px;
letter-spacing: 0.1px;
color: #212121;
}
.carroDeCompra__text--descuento {
font-weight: 400;
font-size: 14px;
line-height: 21px;
letter-spacing: 0.25px;
color: #37994C;
}
.carroDeCompra__text--total-descuento {
font-weight: 700;
font-size: 14px;
line-height: 28px;
letter-spacing: 0.1px;
color: #37994C;
}
.carroDeCompra__check-content-title {
font-weight: 600;
font-size: 16px;
line-height: 21px;
letter-spacing: 0.1px;
color: #257636;
}
.carroDeCompra__check-content-subtitle {
font-weight: 500;
font-size: 12px;
line-height: 14px;
letter-spacing: 0.5px;
text-transform: uppercase;
color: #257636;
}
/*botones*/
.carroDeCompra__datos-generales--btn {
border: 1px solid #676767;
border-radius: 100px;
padding: 12px 0;
cursor: pointer;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 14px;
display: flex;
align-items: center;
letter-spacing: 0.5px;
color: #676767;
}
.carroDeCompra__datos-generales--btn.icono {
gap: 10px;
}
.carroDeCompra__datos-generales--btn:hover {
background: rgba(103, 103, 103, 0.08);
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 14px;
display: flex;
align-items: center;
letter-spacing: 0.5px;
color: #676767;
text-decoration: none;
}
.carroDeCompra__datos-generales--content-ico-btn {
width: 16px;
}
.carroDeCompra__check-content--cross {
cursor: pointer;
}
/*flecha*/
.carroDeCompra__collapse.collapsed .shadow-flecha-acordion svg {
filter: grayscale(100%) hue-rotate(130deg);
transform: rotate(3.142rad);
}
.carroDeCompra__collapse .shadow-flecha-acordion {
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.carroDeCompra__collapse .shadow-flecha-acordion:hover {
background: rgba(214, 21, 0, 0.08);
}
.carroDeCompra__collapse.collapsed .shadow-flecha-acordion:hover {
background: rgba(103, 103, 103, 0.08);
}
/*Resumen de pago*/
.carroDeCompra__total-pago {
background: #E7EAF8;
border-radius: 8px;
}
.carroDeCompra__total-pago--text-total {
font-weight: 700;
font-size: 16px;
line-height: 28px;
color: #0033A0;
}
.carroDeCompra__total-pago--text {
font-family: 'Roboto';
font-style: normal;
font-weight: 600;
font-size: 22px;
line-height: 21px;
letter-spacing: 0.5px;
color: #0033A0;
}
/*checkbox*/
.carroDeCompra__checkbox {
appearance: none;
border: 1px solid #212121;
border-radius: 2px;
height: 13px;
width: 13px;
cursor: pointer;
}
.carroDeCompra__checkbox:checked {
background-color: #717171;
border: 1px solid #717171;
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
.carroDeCompra__checkbox--seleccionar-todo {
appearance: none;
border: 1px solid #676767;
border-radius: 2px;
height: 20px;
width: 20px;
cursor: pointer;
}
.carroDeCompra__checkbox--seleccionar-todo:checked {
background-color: #717171;
border: 1px solid #717171;
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
.carroDeCompra__checkbox-text--seleccionar-todo {
font-weight: 400;
font-size: 16px;
line-height: 28px;
color: #676767;
}
.carroDeCompra__content-checkbox--shadow {
width: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.carroDeCompra__checkbox--shadow {
height: 40px;
width: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.carroDeCompra__checkbox--shadow:hover {
background: rgba(103, 103, 103, 0.08);
}
/*envios agregados*/
.carroDeCompra__content-todo--envios-agregados {
width: 100%;
display: flex;
}
.carroDeCompra__item--envios-agregados {
border: 1px solid #37994C;
border-radius: 8px;
}
.carroDeCompra__content-svg--envios-agregados {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.carroDeCompra__content--envios-agregados {
gap: 15px;
border-radius: 8px;
width: 100%;
}
.carroDeCompra__content--envios-agregados:hover {
background-color: #eff7f1;
}
.carroDeCompra__content--envios-agregados-title {
font-weight: 600;
font-size: 16px;
line-height: 21px;
letter-spacing: 0.1px;
color: #257636;
margin-bottom: 0;
}
.carroDeCompra__content--envios-agregados-subtitle {
font-weight: 500;
font-size: 12px;
line-height: 14px;
letter-spacing: 0.5px;
text-transform: uppercase;
color: #257636;
margin-bottom: 0;
}
.carroDeCompra__content--envios-agregados-subtitle span {
font-weight: 400;
font-size: 12px;
line-height: 21px;
letter-spacing: 0.4px;
color: #37994C;
margin-bottom: 0;
}
.carroDeCompra__content--svg-eliminar {
width: 63px;
text-align: center;
cursor: pointer;
}
/*FIN CARRO DE COMPRAS*/
/*COMPROBANTE*/
.comprobante__card {
background: var(--color-white);
border: 1px solid var(--color-light-2);
border-radius: 8px;
padding: 1em 1.5em;
}
.comprobante__card {
background: var(--color-white);
border-radius: 8px;
padding: .5rem 1rem;
height: 100%;
}
.comprobante__card.border--1px {
border: 1px solid var(--color-light-2);
}
.comprobante__card .comprobante__card--empty {
display: flex;
}
.comprobante__card.filled .comprobante__card--text-body {
display: block;
}
.comprobante__card.filled .comprobante__card--empty {
display: none;
}
.comprobante__check-content {
width: 20px;
}
/*flecha*/
.comprobante__collapse.collapsed .shadow-flecha-acordion svg {
filter: grayscale(100%) hue-rotate(130deg);
transform: rotate(3.142rad);
}
.comprobante__collapse .shadow-flecha-acordion {
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.comprobante__collapse .shadow-flecha-acordion:hover {
background: var(--color-light-red-6);
}
.comprobante__collapse.collapsed .shadow-flecha-acordion:hover {
background: var(--color-light-4);
}
/*textos*/
/* .comprobante__text--datos-generales {
font-weight: 400;
font-size: 14px;
line-height: 21px;
letter-spacing: 0.25px;
color: var(--color-dark-black);
} */
/* .comprobante__text--respuesta-datos-generales {
font-weight: 700;
font-size: 14px;
line-height: 28px;
letter-spacing: 0.1px;
color: var(--color-gray);
} */
/*botones*/
.comprobante__datos-generales--btn {
border: 1px solid var(--color-gray);
border-radius: 100px;
padding: 12px 0;
cursor: pointer;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 14px;
display: flex;
align-items: center;
letter-spacing: 0.5px;
color: var(--color-gray);
}
.comprobante__datos-generales--btn:hover {
background: var(--color-light-4);
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 14px;
display: flex;
align-items: center;
letter-spacing: 0.5px;
color: var(--color-gray);
text-decoration: none;
}
/*Resumen de pago*/
.comprobante__total-pago {
background: var(--color-light-blue-6);
border-radius: 8px;
}
.comprobante__total-pago--text-total {
font-weight: 700;
font-size: 16px;
line-height: 28px;
color: var(--color-blue);
}
.comprobante__total-pago--text {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 21px;
letter-spacing: 0.5px;
color: var(--color-blue);
}
#collapseResumen span.descuento {
color: var(--color-light-green);
}
.comprobante__hr {
border: none;
height: 1px;
background: var(--color-light-red-5);
}
.comprobante__text--subtotal {
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 21px;
letter-spacing: 0.1px;
color: var(--color-dark-black);
}
.comprobante__text--respuesta-subtotal {
font-weight: 700;
font-size: 14px;
line-height: 28px;
letter-spacing: 0.1px;
color: var(--color-dark-black);
}
.comprobante__text--descuento {
font-weight: 400;
font-size: 14px;
line-height: 21px;
letter-spacing: 0.25px;
color: var(--color-light-green);
}
.comprobante__text--total-descuento {
font-weight: 700;
font-size: 14px;
line-height: 28px;
letter-spacing: 0.1px;
color: var(--color-light-green);
}
/*tags informativos*/
.comprobante__img-info {
display: flex;
align-items: center;
justify-content: center;
}
.comprobante__img-info--img {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
}
.comprobante__img-info--info p {
margin-bottom: 0;
}
.comprobante__img-info--info a,
.comprobante__img-info--info a:hover {
text-decoration: none;
color: var(--color-blue);
}
.comprobante__img-info--text-paso-a-paso {
font-weight: 500;
font-size: 12px;
line-height: 14px;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--color-gray);
}
.comprobante__img-info--text-retiro-a-domicilio {
font-weight: 500;
font-size: 16px;
line-height: 21px;
letter-spacing: 0.1px;
color: var(--color-dark-black);
}
.comprobante__text--pasoApaso-check {
font-weight: 400;
font-size: 14px;
line-height: 21px;
letter-spacing: 0.25px;
color: var(--color-dark);
}
.comprobante__text--content-pasoApaso-check {
width: 20px;
}
.comprobante__text--pasoApaso-recomendacion,
.comprobante__text--pasoApaso-recomendacion:hover {
font-weight: 500;
font-size: 14px;
line-height: 14px;
letter-spacing: 0.5px;
color: var(--color-blue);
text-decoration: none;
cursor: pointer;
}
/*content text cards header - body*/
.comprobante__card--text-header {
font-weight: 600;
font-size: 16px;
line-height: 21px;
letter-spacing: 0.1px;
color: var(--color-dark);
}
.comprobante__card--empty {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
gap: 0;
}
.comprobante__card--text-body p {
font-weight: 400;
font-size: 14px;
line-height: 21px;
letter-spacing: 0.25px;
color: var(--color-dark-black);
margin-bottom: 5px;
width: 100%;
max-width: 415px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.comprobante__card--text-body p:first-child {
font-weight: 600;
font-size: 16px;
line-height: 21px;
letter-spacing: 0.1px;
margin-top: 10px;
margin-bottom: 10px;
}
.comprobante__hr.set-1 {
margin-right: -15px;
margin-left: -15px;
}
/*content comprobante */
.comprobante__card--blue {
background: var(--color-light-blue-6);
border-radius: 8px;
padding: 0.8em 1.5em;
display: flex;
justify-content: space-between;
}
.comprobante__card--blue-content-items {
display: flex;
justify-content: space-between;
}
.comprobante__card--blue-items {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.comprobante__card--blue-items span {
margin-right: 1em;
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 21px;
letter-spacing: 0.5px;
color: var(--color-blue);
}
.comprobante__card--blue-spacing {
width: 40px;
}
/*destino*/
.comprobante__content-todo--envios-agregados {
width: 100%;
display: flex;
}
.comprobante__content--envios-agregados {
gap: 15px;
border-radius: 8px;
width: 100%;
height: 72px;
}
.comprobante__content--envios-agregados:hover {
background-color: var(--color-light-4);
}
.comprobante__content-svg--envios-agregados {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.comprobante__content--envios-agregados-title {
margin-bottom: 4px;
font-weight: 600;
font-size: 16px;
line-height: 21px;
letter-spacing: 0.1px;
color: var(--color-dark-black);
}
.comprobante__content--envios-agregados-subtitle {
margin-bottom: 0;
font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 14px;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--color-dark-black);
}
.comprobante__content--envios-agregados-subtitle span {
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 21px;
letter-spacing: 0.4px;
color: var(--color-light-gray-4);
}
/*FIN COMPROBANTE*/
/* FIN ESTILO PREINGRESO HECHOS POR ALEJANDRO UTILIZANDO BEM PARA SERVICIOS, CARRO DE COMPRA Y COMPROBANTE */
/* FIN ESTILOS DE PREINGRESO */
/* --- CODIGO POSTAL --- */
.codigo-postal-container {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: center;
padding: 24px 0px;
}
.codigo-postal-subcontainer-wrapper {
width: 1128px;
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 24px;
}
.codigo-postal-subcontainer {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
gap: 24px;
width: 408px;
}
.codigo-postal-map {
width: 648px;
height: 615px;
}
.codigo-postal-card {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 24px;
width: 456px;
height: auto;
background: var(--color-white);
box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3);
border-radius: 8px;
}
.custom-tab-codigo-postal {
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
background-color: var(--color-white);
border-radius: 8px;
padding: 2px 10px 0px 5px;
border: 1px solid var(--color-light-2);
}
.custom-tab-codigo-postal:hover {
background-color: var(--color-light-4);
}
.copy-button #tooltip-copy {
display: none;
}
.copy-button:hover #tooltip-copy {
display: block;
}
.codigo-postal-title {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
gap: 16px;
width: 408px;
}
.codigo-postal-tooltip {
display: flex;
position: absolute;
top: -20px;
right: -90px;
width: 161px;
height: 54px;
background:
var(--color-dark);
border-radius: 8px;
}
.codigo-postal-modal {
justify-content: center;
z-index: 60;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(32, 26, 25, 0.32);
}
.codigo-postal-modal-card {
display: flex;
flex-direction: column;
align-items: flex-end;
padding: 0px 0px 16px;
align-self: center;
position: relative;
left: calc(50% - 164px);
top: calc(50% - 144px);
width: 328px;
height: 288px;
background: var(--color-white);
box-shadow: 0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px rgba(0, 0, 0, 0.3);
border-radius: 8px;
}
.codigo-postal-gray-container {
background: #F1F1F1;
border-radius: 8px;
padding: 8px 16px;
height: 44px;
width: 100%;
}
.codigo-postal-numero {
text-align: center;
color: var(--color-black);
font-family: 'Roboto';
font-size: 22px;
font-weight: 500;
}
.codigo-postal-custom-tabs-container {
width: 100%;
height: auto;
}
.codigo-postal-custom-tabs-container .codigo-postal-custom-tabs {
list-style: none;
padding: 0;
width: 100%;
}
.codigo-postal-custom-tabs-container .codigo-postal-custom-tabs .custom-tab {
cursor: pointer;
width: 100%;
padding: 0px;
margin: 0px;
transition: all .5s ease;
}
.codigo-postal-custom-tabs-container .codigo-postal-custom-tabs .tab.disabled-new {
cursor: not-allowed;
}
.codigo-postal-custom-tabs-container .codigo-postal-custom-tabs .custom-tab .custom-tab-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0px;
height: 72px;
color: var(--color-dark);
border-bottom: 1px solid var(--color-dark);
}
.codigo-postal-custom-tabs-container .codigo-postal-custom-tabs .custom-tab.active .custom-tab-content {
color: var(--color-red);
border-bottom: 1px solid var(--color-red);
}
.codigo-postal-custom-tabs-container .custom-tab-panels {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.codigo-postal-custom-tabs-container .custom-tab-panels .custom-tab-panel {
display: none;
}
.codigo-postal-custom-tabs-container .custom-tab-panels .custom-tab-panel.active {
display: block;
}
/* --- FIN CODIGO POSTAL --- */
/* ESTILOS ENROLAMIENTO */
.enrolamiento-container {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
}
.enrolamiento-subcontainer-left {
display: flex;
flex-direction: column;
align-items: center;
flex-basis: 531px;
padding: 32px 16px;
gap: 32px;
left: 0px;
top: 0px;
background: var(--color-white);
}
.enrolamiento-subcontainer-right {
display: flex;
flex-direction: row;
flex-basis: calc(100% - 531px);
flex: 1;
width: 100%;
background: var(--color-red);
overflow: hidden;
}
.enrolamiento-subcontainer-right img {
height: 100%;
}
.enrolamiento-subcontainer-right .carousel-inner {
height: 100%;
}
.enrolamiento-subcontainer-right .carousel-inner .carousel-item {
height: 100%;
}
.enrolamiento-width-panel {
width: 343px;
}
.enrolamiento-max-height-panel {
max-height: calc(100% - 235px);
overflow-y: auto;
}
.enrolamiento-max-height-panel-form {
max-height: calc(100% - 235px);
}
.enrolamiento-max-height-panel-form.hidde-y-overflow {
overflow-y: auto;
}
.enrolamiento-max-height-panel-form.hidde-x-overflow {
overflow-x: hidden;
}
.enrolamiento-width-panel .row {
width: 373px;
margin-left: -15px;
}
.enrolamiento-width-panel.panel-margin-top-1 {
margin-top: 288px;
}
.enrolamiento-width-panel.panel-margin-top-2 {
margin-top: 213px;
}
.enrolamiento-width-panel.panel-margin-top-3 {
margin-top: 147px;
}
.enrolamiento-topic {
margin-bottom: 32px;
}
.enrolamiento-topic-question {
margin-bottom: 16px;
}
.enrolamiento-topic-image-margin {
margin-right: 35px;
}
.enrolamiento-top-logo {
position: fixed;
top: 42px
}
.enrolamiento-footer {
position: fixed;
}
.enrolamiento-display-row-form {
display: flex;
flex-direction: row;
gap: 24px;
width: 100%;
}
.enrolamiento-width-panel .password-strength-list {
list-style: none;
padding: 33px 27px;
width: 100%;
height: 280px;
background: var(--color-white);
box-shadow: 0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px rgba(0, 0, 0, 0.3);
border-radius: 8px;
/* position: absolute;
z-index: 10; */
}
.predictor-results-absolute {
position: absolute;
z-index: 10;
width: calc(100% - 6px);
display: flex;
flex-direction: row;
justify-content: center;
}
.enrolamiento-width-panel .password-strength-list-item {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: 14px;
margin-bottom: 20px;
}
.enrolamiento-light-blue-circle {
background-color: #DBE1FF;
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.enrolamiento-show-email-container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 4px 8px 4px 4px;
width: 251px;
height: 32px;
background: #FDFBFF;
border: 1px solid #E7EAF8;
border-radius: 8px;
}
.enrolamiento-show-email-container:hover {
background-color: #E7ECF8;
}
.enrolamiento-shadow-container {
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
width: 100%;
height: 48px;
border-radius: 8px;
padding: 5px;
}
.enrolamiento-shadow-container:hover {
background-color: rgba(0, 0, 0, 0.048);
}
.enrolamiento-hover-shadow {
position: relative;
height: 38px;
width: 38px;
cursor: pointer;
}
.enrolamiento-hover-shadow.red:hover {
background-color: var(--color-light-red-3);
border-radius: 50%;
}
.enrolamiento-hover-shadow.gray:hover {
background-color: rgba(0, 0, 0, 0.049);
border-radius: 50%;
}
/* FIN ESTILOS ENROLAMIENTO */
/* Large desktop */
/* @media (min-width: 1200px) {
} */
/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
.btn-basic {
/*width: 201.5px;
width: 159px;
height: 41px;*/
}
.form-buttons-container {
display: flex;
flex-direction: row;
justify-content: space-between;
}
}
/* Nest Hub Max*/
/* Desktops and laptops ----------- */
@media only screen and (max-width : 1280px) {
.btn-basic {
/* width: 201.5px;
width: 159px;
height: 41px;*/
}
.form-buttons-container {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.enrolamiento-width-panel.panel-margin-top-1 {
margin-top: 156px;
}
.enrolamiento-width-panel.panel-margin-top-2 {
margin-top: 125px;
}
.enrolamiento-width-panel.enrolamiento-footer.inscripcion_aliado {
bottom: 16px !important;
}
.enrolamiento-width-panel.panel-margin-top-3 {
margin-top: 104px;
}
.enrolamiento-max-height-panel-form {
max-height: calc(100% - 200px);
overflow-y: auto;
}
}
/* horizontal: IPad Air */
@media only screen and (min-device-width : 1025px) and (max-device-width : 1200px) {
.container-section-max-1440 {
padding: 34px 25px;
}
.sucursales-details-subcontainer {
padding: 89px 25px 5px;
}
.sucursales-details-subcontainer.volver {
padding: 19px 25px 5px;
}
.btn-search-sucursales-mobile-position {
left: 25px;
width: 456px;
}
.sucursales-right-side {
width: 648px;
height: 615px;
}
.sucursales-no-result {
top: 0px;
left: 0px;
}
.mobile-view-only {
display: none;
}
.desktop-vew-only {
display: block;
}
.map-position {
left: 0px;
}
.enrolamiento-width-panel.panel-margin-top-3 {
margin-top: 104px;
}
.enrolamiento-max-height-panel-form {
max-height: calc(100% - 200px);
overflow-y: auto;
}
}
/* vertical: Nest Hub
horizontal: IPad Mini */
@media only screen and (min-device-width : 980px) and (max-device-width : 1024px) {
.container-section-max-1440 {
padding: 34px 4.5px;
}
.sucursales-details-subcontainer {
padding: 89px 4.5px 5px;
}
.sucursales-details-subcontainer.volver {
padding: 19px 4.5px 5px;
}
.btn-search-sucursales-mobile-position {
left: 4.5px;
width: 456px;
}
.sucursales-right-side {
width: 648px;
height: 615px;
}
.sucursales-no-result {
top: 0px;
left: 0px;
}
.mobile-view-only {
display: none;
}
.desktop-view-only {
display: block;
}
.map {
width: 528px;
height: 500px;
}
.map-position {
left: 0px;
}
.enrolamiento-width-panel.panel-margin-top-1 {
margin-top: 156px;
}
.enrolamiento-max-height-panel {
max-height: calc(100% - 150px);
overflow-y: auto;
}
.enrolamiento-width-panel.panel-margin-top-3 {
margin-top: 85px;
}
.enrolamiento-max-height-panel-form {
max-height: calc(100% - 150px);
overflow-y: auto;
}
.enrolamiento-max-height-panel-form-confirm-password {
max-height: calc(100% - 150px);
overflow-y: auto;
}
.enrolamiento-width-panel.panel-margin-top-2 {
margin-top: 85px;
height: 350px;
}
.enrolamiento-width-panel.enrolamiento-footer {
position: fixed;
bottom: 16px !important;
}
.enrolamiento-width-panel .list-absolute {
position: absolute;
z-index: 10;
width: 100%;
padding: 1px;
}
.codigo-postal-subcontainer-wrapper {
width: 1000px;
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 24px;
}
}
/* vertical: Surface Pro 7, Nest Hub, Ipad Mini, Ipad Air
horizontal: Samsung Galaxy S20 Ultra, Samsung Galaxy A51/71, Iphone XR */
@media only screen and (min-device-width : 768px) and (max-device-width : 979px) {
.container-section-max-1440 {
padding: 34px 156px;
}
.sucursales-details-subcontainer {
padding: 89px 156px 5px;
}
.sucursales-details-subcontainer.volver {
padding: 19px 156px 5px;
}
.btn-search-sucursales-mobile-position {
left: 156px;
width: 456px;
}
.sucursales-right-side {
width: 648px;
height: 615px;
}
.sucursales-no-result {
top: 0px;
left: 0px;
}
.map {
width: 100%;
height: 280px;
}
.envios-general-options {
width: 100%;
}
.preingreso-li {
height: 72px;
}
.mobile-view-only {
display: block;
}
.codigo-postal-container {
display: block;
padding: 24px 16px;
width: 100%;
height: 100%;
min-height: 640px
}
.codigo-postal-datos-width {
width: 100%;
}
.codigo-postal-title {
display: block;
width: 100%;
}
.codigo-postal-card {
display: block;
padding: 0px;
width: 100%;
height: 100%;
min-height: 640px;
box-shadow: none;
}
.codigo-postal-subcontainer-wrapper {
width: 100%;
gap: 0px;
height: 100%;
justify-content: center;
}
.codigo-postal-mobile-position-sticky-bottom {
position: sticky;
bottom: 16px;
margin-top: 100%;
}
.mobile-mb-32px {
margin-bottom: 32px;
}
.mobile-mb-24px {
margin-bottom: 24px;
}
.mobile-mb-16px {
margin-bottom: 16px;
}
.mobile-mb-8px {
margin-bottom: 8px;
}
.enrolamiento-subcontainer-left {
flex-basis: 100%;
}
.enrolamiento-footer {
bottom: 32px !important;
}
.enrolamiento-width-panel.panel-margin-top-3 {
margin-top: 147px;
}
.enrolamiento-display-row-form {
flex-direction: column;
}
.enrolamiento-width-panel .list-absolute {
position: absolute;
z-index: 10;
width: 100%;
padding: 1px;
}
.map-position {
margin-left: 156px;
}
.desktop-view-only {
display: none;
}
.btn-basic {
/* width: 201.5px;
width: 159px;
height: 41px;*/
}
.form-buttons-container {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.modal-dialog-pago-impuestos-notification {
position: fixed;
/*width: 100%;
left: calc(20% - 230px);*/
bottom: 50%;
top: calc(50% - 250px);
}
.new-term-divisor .new-term-notification-external-line {
height: 1px;
width: 195px;
background-color: rgba(33, 33, 33, 0.08);
}
.popup-form-title.terms-and-conditions {
width: 516px;
margin-bottom: 1.8rem;
}
.modal-dialog-new-terms-and-conditions-notification {
position: fixed;
width: 100%;
left: calc(5% - 110px);
bottom: 50%;
top: calc(50% - 250px);
}
.modal-dialog-terms-and-conditions {
position: fixed;
width: 100%;
left: calc(5% - 165px);
bottom: 50%;
top: calc(32% - 250px);
}
.modal-content-terms-and-conditions {
margin-left: calc(50% - 160px);
width: 554px;
height: 920px;
}
.modal-text-terms-and-conditions-body {
height: 870px;
width: 513px;
}
.popup-form-title.terms-and-conditions {
width: 100%;
}
.popup-form.notification-dimension {
width: 554px;
height: auto;
}
.popup-form-footer.notification {
flex-direction: column;
text-align: left;
padding-left: 50px;
}
}
/* Landscape phone to portrait tablet */
/* horizontal: Surface Duo, Iphone SE, Galaxy S8+, Galaxy Fold */
@media (min-width: 645px) and (max-width: 767px) {
.container-space-around {
padding-left: 10%;
padding-right: 10%;
}
.container-section-max-1440 {
width: 100%;
padding: 34px 130px;
}
.sucursales-details-subcontainer {
padding: 89px 130px 5px;
}
.sucursales-details-subcontainer.volver {
padding: 19px 130px 5px;
}
.btn-search-sucursales-mobile-position {
left: 130px;
width: 456px;
}
.btn-basic {
/* width: 201.5px;
width: 159px;
height: 41px;*/
}
.sucursales-right-side-details {
width: 100%;
}
.map {
width: 100%;
height: 280px;
}
.envios-general-options {
width: 100%;
}
.preingreso-li {
height: 72px;
}
.mobile-view-only {
display: block;
}
.codigo-postal-container {
display: block;
padding: 24px 16px;
width: 100%;
height: 100%;
min-height: 640px
}
.codigo-postal-datos-width {
width: 100%;
}
.codigo-postal-title {
display: block;
width: 100%;
}
.codigo-postal-card {
display: block;
padding: 0px;
width: 100%;
height: 100%;
min-height: 640px;
box-shadow: none;
}
.codigo-postal-subcontainer-wrapper {
width: 100%;
gap: 0px;
height: 100%;
justify-content: center;
}
.codigo-postal-mobile-position-sticky-bottom {
position: sticky;
bottom: 16px;
margin-top: 100%;
}
.mobile-mb-32px {
margin-bottom: 32px;
}
.mobile-mb-24px {
margin-bottom: 24px;
}
.mobile-mb-16px {
margin-bottom: 16px;
}
.mobile-mb-8px {
margin-bottom: 8px;
}
.enrolamiento-subcontainer-left {
flex-basis: 100%;
}
.enrolamiento-footer {
bottom: 32px !important;
}
.enrolamiento-display-row-form {
flex-direction: column;
}
.enrolamiento-width-panel .list-absolute {
position: absolute;
z-index: 10;
width: 100%;
padding: 1px;
}
.desktop-view-only {
display: none;
}
.map-position {
margin-left: 130px;
}
.modal-dialog-pago-impuestos-notification {
position: fixed;
width: 100%;
left: calc(20% - 230px);
top: calc(50% - 250px);
}
.new-term-divisor .new-term-notification-external-line {
height: 1px;
width: 195px;
background-color: rgba(33, 33, 33, 0.08);
}
.popup-form-title.terms-and-conditions {
width: 516px;
margin-bottom: 1.8rem;
}
.modal-dialog-new-terms-and-conditions-notification {
position: fixed;
width: 100%;
left: calc(5% - 200px);
bottom: 50%;
top: calc(50% - 250px);
}
.modal-dialog-terms-and-conditions {
position: fixed;
width: 100%;
left: calc(5% - 165px);
bottom: 50%;
top: calc(32% - 250px);
}
.modal-content-terms-and-conditions {
margin-left: calc(50% - 160px);
width: 554px;
height: 920px;
}
.modal-text-terms-and-conditions-body {
height: 870px;
width: 513px;
}
.popup-form-title.terms-and-conditions {
width: 100%;
}
.popup-form.notification-dimension {
width: 554px;
height: auto;
}
.popup-form-footer.notification {
flex-direction: column;
text-align: left;
padding-left: 50px;
}
}
/*vertical: Surface Duo --- */
/*antes tenia (min-width: 500px) and (max-width: 640px)*/
@media (min-width: 500px) and (max-width: 644px) {
.container-space-around {
padding-left: 10%;
padding-right: 10%;
}
.container-section-max-1440 {
padding: 34px 40px;
}
.sucursales-details-subcontainer {
padding: 89px 40px 5px;
}
.sucursales-details-subcontainer.volver {
padding: 19px 40px 5px;
}
.btn-search-sucursales-mobile-position {
left: 40px;
width: 456px;
}
.btn-basic {
/* width: 201.5px;
width: 159px;
height: 41px; */
}
.sucursales-right-side-details {
width: 100%;
}
.map {
width: 100%;
height: 280px;
}
.envios-general-options {
width: 100%;
}
.preingreso-li {
height: 72px;
}
.mobile-view-only {
display: block;
}
.codigo-postal-container {
display: block;
padding: 24px 16px;
width: 100%;
height: 100%;
min-height: 640px
}
.codigo-postal-datos-width {
width: 100%;
}
.codigo-postal-title {
display: block;
width: 100%;
}
.codigo-postal-card {
display: block;
padding: 0px;
width: 100%;
height: 100%;
min-height: 640px;
box-shadow: none;
}
.codigo-postal-subcontainer-wrapper {
width: 100%;
gap: 0px;
height: 100%;
justify-content: center;
}
.codigo-postal-mobile-position-sticky-bottom {
position: sticky;
bottom: 16px;
margin-top: 100%;
}
.mobile-mb-32px {
margin-bottom: 32px;
}
.mobile-mb-24px {
margin-bottom: 24px;
}
.mobile-mb-16px {
margin-bottom: 16px;
}
.mobile-mb-8px {
margin-bottom: 8px;
}
.enrolamiento-subcontainer-left {
flex-basis: 100%;
}
.enrolamiento-width-panel.panel-margin-top-2 {
margin-top: 85px;
height: 435px;
}
.enrolamiento-width-panel.panel-margin-top-3 {
margin-top: 104px;
height: 470px;
overflow-y: auto;
}
.enrolamiento-max-height-panel-form {
max-height: calc(100% - 150px);
overflow-y: auto;
}
.enrolamiento-width-panel.enrolamiento-footer {
position: fixed;
bottom: 16px !important;
}
.enrolamiento-display-row-form {
flex-direction: column;
}
.enrolamiento-width-panel .list-absolute {
position: absolute;
z-index: 10;
width: 100%;
padding: 1px;
}
.desktop-view-only {
display: none;
}
.map-position {
margin-left: 40px;
}
.modal-dialog-pago-impuestos-notification {
position: fixed;
width: 100%;
left: calc(20% - 230px);
top: calc(50% - 250px);
}
.new-term-divisor .new-term-notification-external-line {
height: 1px;
width: 195px;
background-color: rgba(33, 33, 33, 0.08);
}
.popup-form-title.terms-and-conditions {
width: 516px;
margin-bottom: 1.8rem;
}
.modal-dialog-new-terms-and-conditions-notification {
position: fixed;
width: 100%;
left: calc(5% - 200px);
bottom: 50%;
top: calc(50% - 250px);
}
.modal-dialog-terms-and-conditions {
position: fixed;
width: 100%;
left: calc(5% - 165px);
bottom: 50%;
top: calc(32% - 250px);
}
.modal-content-terms-and-conditions {
margin-left: calc(50% - 160px);
width: 554px;
height: 920px;
}
.modal-text-terms-and-conditions-body {
height: 870px;
width: 513px;
}
.popup-form-title.terms-and-conditions {
width: 100%;
}
.popup-form.notification-dimension {
width: 554px;
height: auto;
}
.popup-form-footer.notification {
flex-direction: column;
text-align: left;
padding-left: 50px;
}
}
/* Landscape phones and down */
/* vertical: Pixel 5, Iphone 12 Pro*/
/*antes tenia max-width: 480px*/
@media (max-width: 499px) {
.container-section {
width: 100%;
padding: 16px 10px;
}
.container-section-max-1440 {
width: 100%;
padding: 34px 16px;
}
.sucursales-details-subcontainer {
padding: 89px 16px 5px;
}
.sucursales-details-subcontainer.volver {
padding: 19px 16px 5px;
}
.btn-search-sucursales-mobile-position {
left: 16px;
padding-left: 10px;
padding-right: 10px;
}
.sucursales-right-side {
width: 100%;
}
.sucursales-right-side-details {
width: 100%;
}
.sucursal-results-margin {
margin: 250px 0px;
}
.sucursal-details-colum {
width: 100%;
}
.map {
width: 100%;
height: 280px;
}
.envios-general-options {
width: 100%;
}
.preingreso-li {
height: 72px;
}
.mobile-view-only {
display: block;
}
.codigo-postal-container {
display: block;
padding: 24px 16px;
width: 100%;
height: 100%;
min-height: 640px
}
.codigo-postal-datos-width {
width: 100%;
}
.codigo-postal-title {
display: block;
width: 100%;
}
.codigo-postal-card {
display: block;
padding: 0px;
width: 100%;
height: 100%;
min-height: 640px;
box-shadow: none;
}
.codigo-postal-subcontainer-wrapper {
width: 100%;
gap: 0px;
height: 100%;
justify-content: center;
}
.codigo-postal-mobile-position-sticky-bottom {
position: sticky;
bottom: 16px;
margin-top: 100%;
}
.mobile-mb-32px {
margin-bottom: 32px;
}
.mobile-mb-24px {
margin-bottom: 24px;
}
.mobile-mb-16px {
margin-bottom: 16px;
}
.mobile-mb-8px {
margin-bottom: 8px;
}
.enrolamiento-subcontainer-left {
flex-basis: 100%;
}
.enrolamiento-width-panel.panel-margin-top-2 {
margin-top: 85px;
height: 600px;
}
.enrolamiento-width-panel.enrolamiento-footer {
position: fixed;
bottom: 16px !important;
}
.enrolamiento-display-row-form {
flex-direction: column;
}
.enrolamiento-width-panel .list-absolute {
position: absolute;
z-index: 10;
width: 100%;
padding: 1px;
}
.desktop-view-only {
display: none;
}
.sucursal-results-colum {
width: 100%;
top: 300px;
}
.sucursal-details-colum {
width: 100%;
}
.title-sucursales-width-auto {
width: 100%;
}
.sub-title-sucursales-width-auto {
width: 100%;
}
.sucursales-no-result {
top: 0px;
left: 0px;
}
.sucursales-no-result-icon {
position: relative;
top: 38px;
left: 65px;
width: 230px;
}
.sucursales-circle-dimensions {
height: 230px;
width: 230px;
}
.sucursales-image-position {
position: absolute;
top: 30px;
left: 30px
}
.width-search-sucursal {
width: 100%;
}
.filtro_resultados {
display: flex;
flex-wrap: nowrap;
width: inherit;
overflow-y: scroll;
}
.btn-search {
width: 100%;
}
.map {
width: 100%;
height: 280px;
}
.modal-dialog {
width: 97%;
left: -12px;
}
.message.snackbar {
width: 370px;
}
.message-section-left {
width: 343px;
}
.message-section-right {
width: 343px;
}
.btn-new-direccion {
padding: 10px 0px 10px 0px;
width: 230px;
}
.btn-basic {
/* width: 201.5px;
width: 159px;
height: 41px;*/
}
.form-buttons-container {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.container-form {
margin-left: 0px;
width: 100%;
}
.container-space-around {
padding-left: 0%;
padding-right: 0%;
}
.modal-text-terms-and-conditions-body {
width: 100%;
}
.new-term-divisor .new-term-notification-external-line {
width: 30%;
}
.new-term-divisor .new-term-notification-word {
left: 35%;
}
.popup-form-title.terms-and-conditions {
width: 100%;
}
.popup-form.notification-dimension {
width: 85%;
}
.popup-form-footer.notification {
flex-direction: column;
text-align: left;
padding-left: 50px;
}
.modal-dialog-pago-impuestos-notification {
position: fixed;
left: calc(15% - 77px);
top: calc(50% - 250px);
}
.modal-content-terms-and-conditions {
width: 85%;
height: 750px;
}
.modal-dialog-terms-and-conditions {
position: fixed;
left: calc(15% - 65px);
top: calc(35% - 250px);
}
.modal-dialog-new-terms-and-conditions-notification {
position: fixed;
left: calc(15% - 80px);
top: calc(50% - 250px);
}
.top-right-notification {
padding-top: 10px;
}
.headers {
display: flex;
flex-direction: column;
justify-content: space-between;
}
[data-tooltip]:before {
left: -400%;
width: 250px;
height: auto;
}
}
/* vertical: Samsung Galaxy S20 Ultra, Samsung Galaxy A51/71, Iphone XR */
@media only screen and (min-device-width : 400px) and (max-device-width : 420px) {
.container-section-max-1440 {
width: 100%;
padding: 34px 16px;
}
.sucursales-details-subcontainer {
padding: 89px 16px 5px;
}
.sucursales-details-subcontainer.volver {
padding: 19px 16px 5px;
}
.btn-search-sucursales-mobile-position {
left: 16px;
padding-left: 10px;
padding-right: 10px;
}
.sucursales-right-side {
width: 100%;
}
.sucursales-right-side-details {
width: 100%;
}
.sucursal-results-colum {
width: 100%;
top: 320px;
}
.sucursal-details-colum {
width: 100%;
}
.map {
width: 100%;
height: 280px;
}
.envios-general-options {
width: 100%;
}
.preingreso-li {
height: 72px;
}
.mobile-view-only {
display: block;
}
.codigo-postal-container {
display: block;
padding: 24px 16px;
width: 100%;
height: 100%;
min-height: 640px
}
.codigo-postal-datos-width {
width: 100%;
}
.codigo-postal-title {
display: block;
width: 100%;
}
.codigo-postal-card {
display: block;
padding: 0px;
width: 100%;
height: 100%;
min-height: 640px;
box-shadow: none;
}
.codigo-postal-subcontainer-wrapper {
width: 100%;
gap: 0px;
height: 100%;
justify-content: center;
}
.codigo-postal-mobile-position-sticky-bottom {
position: sticky;
bottom: 16px;
margin-top: 100%;
}
.mobile-mb-32px {
margin-bottom: 32px;
}
.mobile-mb-24px {
margin-bottom: 24px;
}
.mobile-mb-16px {
margin-bottom: 16px;
}
.mobile-mb-8px {
margin-bottom: 8px;
}
.enrolamiento-subcontainer-left {
flex-basis: 100%;
}
.enrolamiento-footer {
bottom: 32px !important;
}
.enrolamiento-display-row-form {
flex-direction: column;
}
.enrolamiento-width-panel .list-absolute {
position: absolute;
z-index: 10;
width: 100%;
padding: 1px;
}
.desktop-view-only {
display: none;
}
.title-sucursales-width-auto {
width: 100%;
}
.sub-title-sucursales-width-auto {
width: 100%;
}
.sucursales-no-result {
top: 0px;
left: 0px;
}
.sucursales-no-result-icon {
position: relative;
top: 38px;
left: 75px;
height: 230px;
width: 230px;
}
.sucursales-circle-dimensions {
height: 230px;
width: 230px;
}
.sucursales-image-position {
position: absolute;
top: 30px;
left: 30px
}
.width-search-sucursal {
width: 100%;
}
.filtro_resultados {
display: flex;
flex-wrap: nowrap;
width: inherit;
overflow-y: scroll;
}
.btn-search {
width: 100%;
}
.map {
width: 100%;
height: 280px;
}
.modal-text-terms-and-conditions-body {
width: 100%;
height: 100%;
}
.new-term-divisor .new-term-notification-external-line {
width: 30%;
}
.new-term-divisor .new-term-notification-word {
left: 35%;
}
.popup-form-title.terms-and-conditions {
width: 100%;
}
.modal-dialog-pago-impuestos-notification {
position: fixed;
left: calc(18% - 95px);
top: calc(50% - 250px);
}
.modal-dialog-terms-and-conditions {
position: fixed;
left: calc(20% - 100px);
top: calc(30% - 250px);
}
.modal-dialog-new-terms-and-conditions-notification {
position: fixed;
left: calc(18% - 108px);
top: calc(50% - 250px);
}
.popup-form.notification-dimension {
width: 85%;
}
.popup-form-footer.notification {
flex-direction: column;
text-align: left;
padding-left: 60px;
}
.modal-content-terms-and-conditions {
width: 85%;
height: 854px;
}
[data-tooltip]:before {
left: -300%;
width: 250px;
height: auto;
}
.message.snackbar {
width: 390px;
}
.message-section-left {
width: 300px;
}
.message-section-right {
width: 60px;
}
}
/* vertical: Samsung Galaxy S8+, Iphone SE, */
@media only screen and (min-device-width : 320px) and (max-device-width : 389px) {
.container-section {
width: 100%;
padding: 16px 25px;
}
.container-form {
width: 100%;
margin-left: 0px;
}
.container-space-around {
padding-left: 0%;
padding-right: 0%;
}
.container-section-max-1440 {
width: 100%;
padding: 34px 22px;
}
.sucursales-details-subcontainer {
padding: 89px 22px 5px;
}
.sucursales-details-subcontainer.volver {
padding: 19px 22px 5px;
}
.btn-search-sucursales-mobile-position {
left: 22px;
padding-left: 10px;
padding-right: 10px;
}
.sucursales-right-side {
width: 100%;
}
.sucursales-right-side-details {
width: 100%;
}
.sucursal-details-colum {
width: 100%;
}
.map {
width: 100%;
height: 280px;
}
.envios-general-options {
width: 100%;
}
.preingreso-li {
height: 72px;
}
.mobile-view-only {
display: block;
}
.codigo-postal-container {
display: block;
padding: 24px 16px;
width: 100%;
height: 100%;
min-height: 640px
}
.codigo-postal-datos-width {
width: 100%;
}
.codigo-postal-title {
display: block;
width: 100%;
}
.codigo-postal-card {
display: block;
padding: 0px;
width: 100%;
height: 100%;
min-height: 640px;
box-shadow: none;
}
.codigo-postal-subcontainer-wrapper {
width: 100%;
gap: 0px;
height: 100%;
justify-content: center;
}
.codigo-postal-mobile-position-sticky-bottom {
position: sticky;
bottom: 16px;
margin-top: 100%;
}
.mobile-mb-32px {
margin-bottom: 32px;
}
.mobile-mb-24px {
margin-bottom: 24px;
}
.mobile-mb-16px {
margin-bottom: 16px;
}
.mobile-mb-8px {
margin-bottom: 8px;
}
.enrolamiento-subcontainer-left {
flex-basis: 100%;
}
.enrolamiento-width-panel {
width: 100%;
}
.enrolamiento-width-panel.panel-margin-top-2 {
margin-top: 80px;
height: 410px;
}
.enrolamiento-width-panel.panel-margin-top-3 {
margin-top: 75px;
height: 470px;
overflow-y: auto;
}
.enrolamiento-width-panel.enrolamiento-footer {
position: fixed;
left: 16px !important;
width: calc(100% - 32px) !important;
bottom: 16px !important;
}
.enrolamiento-display-row-form {
flex-direction: column;
}
.enrolamiento-width-panel .list-absolute {
position: absolute;
z-index: 10;
width: 100%;
padding: 1px;
}
.desktop-view-only {
display: none;
}
.sucursal-results-colum {
width: 100%;
top: 310px;
}
.sucursal-details-colum {
width: 100%;
}
.sucursal-detailss-colum {
width: 445px;
top: 360px;
}
.title-sucursales-width-auto {
width: 100%;
}
.sub-title-sucursales-width-auto {
width: 100%;
}
.sucursales-no-result {
top: 0px;
left: 0px;
}
.sucursales-no-result-icon {
position: relative;
top: 38px;
left: 60px;
height: 230px;
width: 230px;
}
.sucursales-circle-dimensions {
height: 230px;
width: 230px;
}
.sucursales-image-position {
position: absolute;
top: 30px;
left: 30px
}
.width-search-sucursal {
width: 100%;
}
.filtro_resultados {
display: flex;
flex-wrap: nowrap;
width: inherit;
overflow-y: scroll;
}
.btn-search {
width: 100%;
}
.message.snackbar {
width: 310px;
}
.message-section-left {
width: 250px;
}
.message-section-right {
width: 60px;
}
.top-right-notification {
padding-top: 10px;
}
.headers {
display: flex;
flex-direction: column;
}
.modal-text-terms-and-conditions-body {
width: 100%;
height: 100%;
}
.new-term-divisor .new-term-notification-external-line {
width: 30%;
}
.new-term-divisor .new-term-notification-word {
left: 33%;
}
.popup-form-title.terms-and-conditions {
width: 100%;
}
.modal-content-terms-and-conditions {
width: 85%;
height: 630px;
}
.modal-dialog-terms-and-conditions {
position: fixed;
left: calc(8% - 22px);
top: calc(40% - 250px);
}
.popup-form.notification-dimension {
width: 85%;
}
.modal-dialog-pago-impuestos-notification {
position: fixed;
left: calc(3% - 28px);
top: calc(50% - 250px);
}
.modal-dialog-new-terms-and-conditions-notification {
position: fixed;
left: calc(3% - 18px);
top: calc(50% - 250px);
}
.popup-form-footer.notification {
flex-direction: column;
text-align: left;
padding-left: 60px;
}
[data-tooltip]:before {
left: -600%;
width: 250px;
height: auto;
}
.btn-basic {
/* width: 100%;
width: 159px;
margin-bottom: 8px;*/
}
.form-buttons-container {
display: flex;
flex-direction: column;
align-items: center;
padding: 15px;
width: 100%;
height: 41px;
}
.union-line {
width: calc(30% - 10px);
}
}
/* Smartphones (landscape) -----------
@media only screen and (min-width : 321px) {
} */
/* Smartphones (portrait) ----------- */
/* vertical: Galaxy Fold */
@media only screen and (max-width : 320px) {
.form-buttons-container {
display: flex;
flex-direction: column;
align-items: center;
padding: 15px;
width: 100%;
height: 41px;
}
.container-form {
margin-left: 0px;
width: 100%;
}
.sucursales-details-subcontainer.volver {
padding: 19px 22px 5px;
}
.btn-search-sucursales-mobile-position {
left: 22px;
padding-left: 10px;
padding-right: 10px;
}
.sucursales-right-side {
width: 100%;
}
.sucursales-right-side-details {
width: 100%;
}
.sucursal-details-colum {
width: 100%;
}
.map {
width: 100%;
height: 280px;
}
.enrolamiento-width-panel {
width: 100%;
}
.enrolamiento-width-panel.panel-margin-top-2 {
margin-top: 85px;
height: 400px;
}
.enrolamiento-width-panel.panel-margin-top-3 {
margin-top: 65px;
height: 400px;
}
.enrolamiento-width-panel.enrolamiento-footer.inscripcion_aliado {
bottom: 16px !important;
}
.enrolamiento-mini-mobile-ditribution {
display: flex;
flex-direction: column !important;
align-items: flex-start;
gap: 8px;
}
.enrolamiento-display-row-form {
flex-direction: column;
}
.enrolamiento-width-panel .list-absolute {
position: absolute;
z-index: 10;
width: 100%;
padding: 1px;
}
.enrolamiento-max-height-panel-form-confirm-password {
max-height: 420px;
overflow-y: auto;
}
.btn-basic.btn-small-big {
width: calc(100% - 32px);
}
.btn-basic.btn-small-big-2 {
width: 180px;
}
.envios-general-options {
width: 100%;
}
.preingreso-li {
height: 72px;
}
.mobile-view-only {
display: block;
}
.codigo-postal-container {
display: block;
padding: 24px 16px;
width: 100%;
height: 100%;
min-height: 640px
}
.codigo-postal-datos-width {
width: 100%;
}
.codigo-postal-title {
display: block;
width: 100%;
}
.codigo-postal-card {
display: block;
padding: 0px;
width: 100%;
height: 100%;
min-height: 640px;
box-shadow: none;
}
.codigo-postal-subcontainer-wrapper {
width: 100%;
gap: 0px;
height: 100%;
justify-content: center;
}
.codigo-postal-mobile-position-sticky-bottom {
position: sticky;
bottom: 16px;
margin-top: 100%;
}
.mobile-mb-32px {
margin-bottom: 32px;
}
.mobile-mb-24px {
margin-bottom: 24px;
}
.mobile-mb-16px {
margin-bottom: 16px;
}
.mobile-mb-8px {
margin-bottom: 8px;
}
.enrolamiento-subcontainer-left {
flex-basis: 100%;
}
.enrolamiento-footer {
bottom: 32px !important;
}
.desktop-view-only {
display: none;
}
.title-sucursales-width-auto {
width: 100%;
}
.sub-title-sucursales-width-auto {
width: 230px;
}
.sucursales-no-result {
top: 0px;
left: 0px;
}
.sucursales-no-result-icon {
position: relative;
top: 38px;
left: 10px
}
.sucursales-circle-dimensions {
height: 230px;
width: 230px;
}
.sucursales-image-position {
position: absolute;
top: 30px;
left: 30px
}
.width-search-sucursal {
width: 100%;
}
.mt-badge-info {
margin-top: 8px;
}
.filtro_resultados {
display: flex;
flex-wrap: nowrap;
width: inherit;
overflow-y: scroll;
}
.btn-search {
width: 100%;
}
.message.snackbar {
width: 260px;
}
.message-section-left {
width: 200px;
}
.message-section-right {
width: 50px;
}
.modal-dialog {
width: 97%;
left: 9px;
}
.popup-form.default-dimension {
width: 270px;
height: auto;
}
.popup-form-group-material input {
width: 195px;
}
.popup-form-group-material label {
width: 237px;
}
.popup-form-group-material label .postfijo {
right: 5px;
}
.popup-form-footer {
gap: 0;
}
.modal-dialog .max-modal-body-height.size-y-1 {
height: 300px;
}
[data-tooltip]:before {
left: -875%;
width: 250px;
height: auto;
}
.union-line {
width: calc(27% - 20px);
}
.modal-text-terms-and-conditions-body {
width: 100%;
}
.new-term-divisor .new-term-notification-external-line {
width: 21%;
}
.new-term-divisor .new-term-notification-word {
left: 25.5%;
}
.popup-form-title.terms-and-conditions {
width: 100%;
}
.popup-form.notification-dimension {
width: 85%;
}
.popup-form-footer.notification {
flex-direction: column;
text-align: left;
padding-left: 50px;
}
.popup-form.notification-pago-impuestos-dimension {
width: 240px;
}
.modal-dialog-pago-impuestos-notification {
position: fixed;
left: calc(38% - 76px);
top: calc(50% - 250px);
}
.modal-content-terms-and-conditions {
width: 85%;
height: 600px;
}
.modal-dialog-terms-and-conditions {
position: fixed;
left: calc(38% - 66px);
top: calc(40% - 235px);
}
.modal-dialog-new-terms-and-conditions-notification {
position: fixed;
left: calc(38% - 76px);
top: calc(50% - 250px);
}
}
/* iPads (portrait and landscape) ----------- */
/* iPads (landscape) ----------- */
/* @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
} */
/* iPads (portrait) ----------- */
/* @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
} */
/* Portrait tablet to landscape and desktop */
/* @media (min-width: 768px) and (max-width: 979px) {
} */
/* iPhone 4 and high pixel ratio devices ----------- */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {}
/*seteando estilos*/
.container-preingreso {
min-width: 0;
;
}
/**/
.creacion-envio-content__btn {
display: flex;
align-items: center;
gap: 5px;
width: 100%;
}
.creacion-envio__btn {
flex-grow: 1 !important;
width: 100% !important;
max-width: 100% !important;
flex: auto !important;
min-width: 0 !important;
}
.creacion-envio__btn .body {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
ul li .preingreso-li .pasos-siguientes {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
ul li .preingreso-li {
padding: 0;
margin: 0;
transition: all 1s ease;
}
.preingreso-tipoEnvios__content-check {
width: 13%;
max-width: 70px;
}
.preingreso-tipoEnvios__content-buttons {
width: 74% !important;
flex-grow: 1;
}
.preingreso-tipoEnvios__content-multiple-select {
width: 13%;
max-width: 70px;
}
.owl-carousel .owl-item:last-child {
padding-right: 0;
/* Elimina el margen derecho del último elemento */
}
.owl-stage {
display: flex;
align-items: center;
}
/*código para páginadores*/
.navigation-container {
background-color: white;
display: flex;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
}
.owl-prev,
.owl-next {
max-width: 40px;
flex-grow: 1;
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
height: 40px;
background-color: unset;
cursor: pointer;
}
.owl-prev:active,
.owl-next:active {
background-color: rgba(0, 0, 0, 0.048);
}
.pagination-container {
align-items: center;
justify-content: center;
display: flex;
flex-grow: 1;
gap: 13px;
}
.navigation-container.disabled {
display: none;
}
/*dots*/
.owl-dot {
all: unset;
width: 8px;
height: 8px;
border-radius: 50%;
background: #E5E5E5;
}
.owl-dot.active {
width: 16px;
height: 16px;
background: #A4A4A4;
}
html {
margin-left: 0 !important;
}
.preingreso-tipoEnvios__content-multiple-select,
.preingreso-tipoEnvios__content-check {
display: flex;
justify-content: center;
}
.subcontainer-preingreso>ul li {
padding-right: 0 !important;
}
@media (min-width:1000px) {
.creacion-envio-content__btn {
display: flex !important;
}
.creacion-envio__btn.paso-inicial {
max-width: 140px !important;
}
.navigation-container {
display: none;
}
}
.preingreso-li {
background-color: rgba(255, 255, 255, 0);
}
.li-creaciones-de-envio {
background-color: white;
}
@media (max-width:1000px) {
.li-creaciones-de-envio {
border-radius: 8px;
}
.creacion-envio__btn {
position: static !important;
transition: all 0s ease;
}
ul li .preingreso-li {
width: 100%;
height: 100%;
}
.camposValidos .preingreso-li.success.selected {
border: none;
}
.navigation-container {
background: #ffffff00;
border-radius: 8px;
}
}
#envios {
margin: 0 !important;
padding: 0 !important;
}
ul li .preingreso-li .paso-inicial {
top: -27.5px;
}
ul li .preingreso-li .pasos-siguientes {
top: -16px;
}
/*remitente*/
@media (max-width:1000px) {
.remitente__content-card {
flex-direction: column;
}
.custom-tabs-container .custom-tabs.mb-24px {
flex-direction: column;
}
.custom-tab-preingreso .info.size-x-2 {
width: 100%;
}
.custom-tabs.mb-40px {
flex-direction: column;
}
.custom-tab-preingreso .info.size-x-1 {
width: 100%;
}
.custom-tab-preingreso .info {
height: 100%;
}
.alert {
height: fit-content;
}
.preingreso-grid-cards-container {
display: flex;
flex-direction: column;
}
.content__title {
width: auto;
display: flex;
justify-content: space-between;
}
.preingreso-subcontainer {
width: 100%
}
.preingreso-modal.modal-starting-position-right {
width: 100%;
}
.preingreso-modal-bottons-wrapper {
width: 86%;
}
.btn-basic btn-large-2 btn-color-red {
width: 100%;
}
.content__li-btn-habilitar {
width: 100%;
}
.content__li-btn-habilitar label {
justify-content: space-between;
}
.custom-tab-preingreso.size-y-1 {
height: 135px;
max-width: 540px;
}
.content__btn-comunas-disponibles {
flex-direction: column;
gap: 1em;
}
.display-flex-row-start.mb-4 {
padding-right: 0 !important;
}
.preingreso-grid-cards-container label {
width: 100% !important;
}
.display-flex-row-start.mb-4 {
flex-direction: column;
}
.display-flex-row-start.mb-4 .col-6 {
max-width: 100%;
width: 100%;
}
#preingreso-sucursal-details .display-flex-row-start {
flex-direction: column;
}
#preingreso-sucursal-details .display-flex-row-start .col-6.p-0 {
max-width: 100%;
width: 100%;
}
#preingreso-sucursal-details {
padding-right: 0 !important;
}
.preingreso-map-wrapper {
width: 100% !important;
}
.preingreso-map-wrapper .preingreso-map {
width: 100% !important;
}
.d-flex.justify-content-end.container-preingreso-paso-width .btn-basic {
width: 100% !important;
}
.contnt__widthfijo-tomobile {
width: 100% !important;
}
.mt-4.alert.bg-light-blue.mb-32px p.color-dark-blue-3.m-0 {
width: 80%;
padding: 10px;
}
ul li .preingreso-li .pasos-wrapper {
position: static !important;
}
}
ul li .preingreso-li .pasos-wrapper {
position: static !important;
}
ul li .preingreso-li .pasos-siguientes .info {
margin-left: 0 !important;
margin-right: 0 !important;
}
ul.carrito li .preingreso-li .pasos-siguientes .body {
gap: 5px;
}
.gap1em {
gap: 1em;
}
footer.correos-footer {
display: none;
}
.display-flex {
display: flex;
}
/*carrito de compra*/
@media (max-width:1000px) {
.col-12-de-16.mobile {
width: 100%;
min-width: 100%;
max-width: 100%;
flex: unset;
}
.container-preingreso-carrito {
min-width: 0;
}
.row.w-100.preingreso-container-position {
padding: 95px 18px 150px 26px !important;
margin: 0 !important;
}
#carrito_con_envios .navigation-container {
width: 100%;
}
.mobile.preingreso-bottom-bar {
flex-direction: column;
height: unset !important;
z-index: 500;
}
.mobile.preingreso-bottom-bar .d-flex.justify-content-end {
width: 100% !important;
}
.mobile.preingreso-bottom-bar .d-flex.justify-content-end .btn-basic {
width: 100%;
}
.mobile.carroDeCompra__total-pago {
width: 100%;
margin-bottom: 16px;
}
#fixedOverlay-pago-mobile,
.fixedOverlay-tipoDePago-mobile {
z-index: 400;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.25);
display: none;
transition: opacity 0.5s ease;
}
#fixedOverlay-pago-mobile.open,
.fixedOverlay-tipoDePago-mobile {
display: block;
}
.col-4-de-16.mobile {
width: 100%;
min-width: 100%;
max-width: 100%;
flex: unset;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #f1f1f1;
overflow: hidden;
max-height: 0;
transition: max-height 0.5s ease;
z-index: 401;
}
.col-4-de-16.mobile.open {
max-height: 100%;
}
.btn-vermas-vermenosCarrito {
display: flex;
text-decoration: none !important;
width: 100%;
height: 39px;
border-radius: 100px;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 21px;
letter-spacing: 0.5px;
align-items: center;
justify-content: center;
cursor: pointer;
color: #676767;
}
.btn-vermas-vermenosCarrito:hover {
background-color: #eaeaea;
}
.d-none-mobile {
display: none;
}
.btn-basic.btn-large.btn-border-blue.display-flex-row-center.cursor-pointer.mobile {
border: none;
background: none;
justify-content: end;
}
.btn-basic.btn-large.btn-border-blue.display-flex-row-center.cursor-pointer.mobile .font-size-16 {
display: none;
}
.btn-basic.btn-large.btn-border-blue.display-flex-row-center.cursor-pointer.mobile svg {
width: 24px;
height: 24px;
}
.owl-carousel .animated {
animation-duration: 0.5s !important;
}
.ul li .preingreso-li .paso-inicial {
background: none;
}
.ul li .preingreso-li .pasos-siguientes {
background: none;
}
.navigation-container.uno .owl-dot:first-child,
.navigation-container.dos .owl-dot:nth-child(2),
.navigation-container.tres .owl-dot:nth-child(3),
.navigation-container.cuatro .owl-dot:nth-child(4),
.navigation-container.cinco .owl-dot:nth-child(5) {
background-color: #0033A0;
}
.preingreso-li {
border: none !important;
background: none !important;
}
.li-creaciones-de-envio.selected {
border: 1px solid var(--color-light-gray);
background-color: var(--color-light-gray-2);
}
ul li .preingreso-li.success {
border: none;
}
ul li.success {
border: 1px solid var(--color-light-green) !important;
}
.li-creaciones-de-envio.camposValidos {
border: 1px solid var(--color-light-green);
border-radius: 8px;
}
.li-creaciones-de-envio.camposValidos.selected {
background-color: var(--color-light-green-2);
}
.li-creaciones-de-envio.camposValidos .owl-dot {
background-color: var(--color-light-green);
}
.comprobante__content-todo--envios-agregados .comprobante__content--envios-agregados,
.comprobante__card--blue-content-items .display-flex-colum-center {
display: none !important;
}
.comprobante__content-todo--envios-agregados .comprobante__content--envios-agregados:last-child {
display: flex !important;
}
.comprobante__card--blue-items {
justify-content: start;
}
.flex-direction-column-mobile {
flex-direction: column;
}
.custom-tab-panel-preingreso .display-flex-row-space-between .preingreso-recepcion-date-container {
width: 100%;
margin-bottom: 10px;
}
.m-w-100 {
width: 100% !important;
}
.text__filtrar-por {
color: #262626;
font-family: Roboto;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 21px;
margin-bottom: 0;
letter-spacing: 0.1px;
}
.text__limpiar-filtro {
color: #D61500;
font-family: Roboto;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 14px;
/* 100% */
letter-spacing: 0.5px;
margin-bottom: 0;
}
.text__title-filtro {
color: #676767;
font-family: Roboto;
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 14px;
letter-spacing: 0.5px;
text-transform: uppercase;
margin-bottom: 0;
padding-bottom: 8px;
padding-top: 16px;
}
.text__title-filtro:first-child {
padding-top: 0;
}
.content__text-filtros {
padding-bottom: 16px;
}
.hr-filtro-mobile {
width: 80px;
height: 4px;
margin: 12px auto 16px auto;
border-radius: 8px;
background: #E5E5E5;
}
.btn-filtro-mobile {
display: flex;
text-decoration: none !important;
width: 100%;
height: 39px;
border: 1px solid #D61500;
border-radius: 100px;
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 14px;
align-items: center;
letter-spacing: 0.5px;
justify-content: center;
cursor: pointer;
color: #fff;
background: #D61500;
margin-top: 16px;
margin-bottom: 24px;
}
.btn-filtro-mobile:hover,
.btn-filtro-mobile:focus {
color: #fff;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 1px 2px rgba(0, 0, 0, 0.3);
}
.preingreso-envios-general-options .display-flex-row-start {
flex-wrap: wrap
}
#alertPagoEnDestino {
flex-basis: 100%;
margin-left: 0 !important;
margin-top: 10px;
}
#alertPagoEnDestino svg {
width: 60px;
}
.li-carrito-de-compra {
background-color: white;
border-radius: 8px;
border: 1px solid var(--color-light-green);
}
.li-carrito-de-compra.selected {
background-color: var(--color-light-green-2);
}
.li-carrito-de-compra .owl-dot {
background-color: var(--color-light-green);
}
.col-4-de-16.mobile.oculto-escritorio {
border-radius: 8px 8px 0px 0px;
background: #FBFBFB;
padding-left: 16px;
padding-right: 16px;
}
.oculto-mobile {
display: none !important;
}
.carroDeCompra__card {
padding-bottom: 171px !important;
}
.li-creaciones-de-envio {
min-height: 143px;
}
.display-flex-row-start.preingreso-select-all.mr-41 {
margin-right: 10px !important;
}
}
.preingreso-options-list-item.size-1.display-flex-row-start {
padding: 10px;
}
@media (min-width:1000px) {
.btn-vermas-vermenosCarrito {
display: none !important;
}
.mobile.carroDeCompra__total-pago {
display: none !important;
}
#fixedOverlay-pago-mobile {
display: none;
}
.comprobante__card--blue-spacing svg {
display: none;
}
.oculto-escritorio {
display: none;
}
.li-creaciones-de-envio {
background: #00000000;
}
}
/*css para arreglar animación */
.creacion-envio-content__btn,
.preingreso-tipoEnvios__content-buttons {
height: 100%;
}
.preingreso-tipoEnvios__content-buttons {
display: flex;
align-items: center;
}
.creacion-envio__btn {
position: relative !important;
top: 0 !important;
left: 0 !important;
}
/*ocultar header*/
.header__content-fixed,
.spacing-header,
.header__secondary-nav {
/*display: none !important;*/
}
/* NUEVOS TOOLTIP */
.nuevo-tooltip {
position: relative;
}
.nuevo-tooltip.disabled {
opacity: inherit;
pointer-events: all;
}
.nuevo-tooltip.disabled svg,
.nuevo-tooltip.disabled .texto {
opacity: 0.35;
}
.nuevo-tooltip:hover .tooltip__texto {
top: calc(100% + 10px);
opacity: 100%;
}
.nuevo-tooltip .tooltip__texto {
opacity: 0;
position: absolute;
pointer-events: none;
margin-left: 0;
top: 200%;
background: #474747;
width: 343px;
transition: 0.3s ease all;
font-size: 14px;
padding: 16px;
box-sizing: border-box;
border-radius: 8px;
text-align: left;
color: #fff;
z-index: 9;
}
.nuevo-tooltip .tooltip__texto::before {
position: absolute;
content: ' ';
height: 20px;
width: 10px;
top: -20px;
left: calc(50% - 10px);
border-bottom: 10px solid #474747;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
}
.nuevo-tooltip .texto {
display: none;
color: #676767;
}
/* FIN NUEVOS TOOLTIP */
/* BOTONES CORREOS */
#manuales {
gap: 8px;
width: 100%;
}
#manuales .btn-outline-azul {
border: 1px solid #0033A0;
color: #0033A0;
padding: 12px 24px;
font-family: 'Roboto', sans-serif;
font-size: 14px;
width: 100%;
}
#manuales .btn-outline-azul:hover {
background: rgba(52, 86, 193, 0.08);
}
@media screen and (min-width: 768px) {
#manuales {
width: fit-content;
}
#manuales .btn-outline-azul {
width: 262px;
}
}
/* FIN BOTONES CORREOS */
/* NUEVA TABLA */
#header-tabla {
display: none;
transition: 0.3s ease all;
width: 100%;
}
#header-tabla .contenido {
background: #E7EAF8;
padding: 8px 0;
gap: 8px;
display: flex;
margin: 0 auto 8px auto;
border-radius: 8px;
}
#header-tabla .contenido .empty-space {
width: 13%;
max-width: 70px;
}
#header-tabla .contenido .titulo-tabla {
display: flex;
flex: 1 1 278px;
padding: 6px 16px;
justify-content: center;
align-items: center;
}
#header-tabla .contenido .titulo-tabla:first-child {
flex: 1 1 130px;
}
#header-tabla .contenido .titulo-tabla p {
color: #0033A0;
font-family: Roboto;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 21px;
letter-spacing: 0.5px;
}
@media screen and (min-width: 768px) {
#header-tabla {
display: block;
}
}
/* FIN NUEVA TABLA */
/* PRODUCTOS DENTRO DE TIPO ENVIO */
/* #contenedor-cards-productos {
gap: 1rem;
} */
#contenedor-cards-productos * {
transition: 0.3s ease all;
}
/* #contenedor-cards-productos article {
background: var(--color-white);
border: 1px solid var(--color-light-2);
border-radius: 8px;
}
#contenedor-cards-productos article .contact-card {
background: inherit;
}
#contenedor-cards-productos article .contact-card .contact-card-info {
background: inherit;
}
*/
#contenedor-cards-productos article.active .contact-card {
box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3);
border: 1px solid var(--color-light-blue-7);
}
#contenedor-cards-productos .contact-card .contact-card-info {
background: inherit;
}
#contenedor-cards-productos article .radio .check-active {
display: none;
}
#contenedor-cards-productos article.active .contact-card {
background: var(--color-light-blue-5);
}
#contenedor-cards-productos article.active .radio .check-active {
display: block;
}
#contenedor-cards-productos article.active .radio .check-inactive {
display: none;
}
#filter-option {
height: 50vh;
overflow: auto;
}
/* FIN PRODUCTOS DENTRO DE TIPO ENVIO */
/* ESTILOS PERSONALIZADOS PARA SELECT2 */
#categoria_productoWrapper * {
transition: 0.3s ease all;
}
#categoria_productoWrapper.form-group-material {
overflow: hidden;
display: flex;
flex-flow: wrap;
justify-content: center;
align-items: center;
position: relative;
}
#categoria_productoWrapper.form-group-material .select2-selection {
background: inherit;
outline: none;
border: none;
border-bottom: 1px solid #ced4da;
border-radius: 0;
height: 55px;
display: flex;
align-items: center;
}
#categoria_productoWrapper.form-group-material .select2-selection__rendered {
color: transparent;
margin-bottom: -10px;
}
#categoria_productoWrapper.form-group-material .select2-selection__arrow {
top: inherit;
height: inherit;
margin-right: 10px;
}
#categoria_productoWrapper.form-group-material label.text-label {
position: absolute;
top: 16px;
left: 30px;
right: 0;
margin-left: auto;
margin-right: auto;
width: 100%;
pointer-events: none;
padding: 0 10px;
box-sizing: border-box;
transition: 0.3s ease all;
}
#categoria_productoWrapper.form-group-material .simbolos {
position: absolute;
right: 30px;
margin-left: auto;
margin-right: auto;
width: 40px;
height: 25px;
pointer-events: none;
}
#categoria_productoWrapper.form-group-material .simbolos .form-input-material-postfijo-valid,
#categoria_productoWrapper.form-group-material .simbolos .form-input-material-postfijo-no-valid {
position: absolute;
bottom: -40px;
transition: 0.3s ease all;
}
#categoria_productoWrapper.form-group-material.activo .select2-selection__rendered {
color: #212529;
}
#categoria_productoWrapper.form-group-material.activo label {
font-size: 0.7rem;
top: 0px;
left: 0;
}
#categoria_productoWrapper.form-group-material.activo.valido {
background: rgba(55, 153, 76, 0.08);
border-bottom: 1px solid var(--color-light-green);
}
#categoria_productoWrapper.form-group-material.activo.valido .select2-selection {
border-bottom: 1px solid var(--color-light-green);
}
#categoria_productoWrapper.form-group-material.activo.valido .select2-selection__arrow b {
border-color: var(--color-light-green) transparent transparent transparent;
}
#categoria_productoWrapper.form-group-material.activo.valido label {
color: var(--color-light-green);
}
#categoria_productoWrapper.form-group-material.activo.valido .simbolos .form-input-material-postfijo-valid {
bottom: 0;
}
#categoria_productoWrapper.form-group-material.activo.invalido {
background: var(--color-light-red-2);
border-bottom: 1px solid var(--color-red-2);
}
#categoria_productoWrapper.form-group-material.activo.invalido .select2-selection {
background: var(--color-light-red-2);
border-bottom: 1px solid var(--color-red-2);
}
#categoria_productoWrapper.form-group-material.activo.invalido .select2-selection__arrow b {
border-color: var(--color-red-2) transparent transparent transparent;
}
#categoria_productoWrapper.form-group-material.activo.invalido label {
color: var(--color-red-2);
}
#categoria_productoWrapper.form-group-material.activo.invalido .simbolos .form-input-material-postfijo-no-valid {
bottom: 0;
}
#categoria_productoWrapper .select2 {
width: 100% !important;
padding: 0 10px 0px 40px;
}
/* FIN ESTILOS PERSONALIZADOS PARA SELECT2 */
.button-ordenar-por.activo .iconos .check,
.button-filtrar-por.activo .iconos .check {
display: block;
}
.button-ordenar-por.activo .iconos .sort,
.button-filtrar-por.activo .iconos .sort {
display: none;
}
.button-ordenar-por .iconos .check,
.button-filtrar-por .iconos .check {
display: none;
margin: 0 15px;
}
.iconos svg path {
fill: #676767;
}
.opt-filter.activo:before {
content: '';
border: 1px solid #dc3545;
width: 10px;
height: 10px;
margin: 0 10px 0 0;
}
.alertaOculta {
position: fixed;
bottom: 0;
transform: translateY(100%);
transition: transform 0.3s ease-in-out;
display: flex;
flex-direction: row;
align-items: center;
padding: 6px 16px !important;
margin: 0px;
border-radius: 8px !important;
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 21px;
width: 90vw;
z-index: 10;
}
.contenedor_guardar-como-producto {
font-family: Roboto;
}
.contenedor_guardar-como-producto #controlProductos .titulo {
font-size: 16px;
}
.contenedor_guardar-como-producto #controlProductos .bajada {
color: var(--color-gray);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 21px;
letter-spacing: 0.25px;
}
.contenedor_guardar-como-producto.enabled #controlProductos {
display: none !important;
}
.contenedor_guardar-como-producto.disabled #guardarComoProducto {
pointer-events: none;
opacity: 0.4;
}
/* ESTILOS PERSONALIZADOS PARA INPUTS EN MOBILE BAJO 320PX */
@media only screen and (max-width: 320px) {
.input-type-number-personalizado-subwrapper {
display: flex !important;
flex-flow: wrap;
justify-content: center !important;
gap: 0.5rem;
border-radius: 4px;
}
.input-type-number-personalizado-subwrapper .input-type-number-personalizado {
width: 100% !important;
}
}