/* CSS personalizado para APP PRESUPUESTO */ /**************************************** GAMA DE COLORES ****************************************/ /* Rojo Oscuro: DD0000 rgb(221, 0, 0) */ /* Gris: 999999 rgb(153,153,153) */ /* Rojo Medio: F3A6A6 rgb(243,166,166) */ /* Rojo Claro: F9D2D2 rgb(249,210,210) */ /* Rojo Muy Claro: FDEDED rgb(253,237,237) */ /* Beige: CB9D61 rgb(203,157, 97) */ /************************************ MODIFICADOS DE syle-home ***********************************/ /******************************************* GENERALES *******************************************/ body .divLoading { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0,0,0,0.75); } body .divLoading { display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 111111111; } body .divLoading span { margin-bottom: 40px; font-size: 50px; color: #FFFFFF; font-weight: 600; } body .divLoading i.fa-spinner { font-size: 100px; color: #FFFFFF; } body .divLoading .divResult { padding: 15px 30px; border: solid 2px #FFFFFF; border-radius: 20px; text-align: center; } body .divLoading .divResult span { margin: 20px 0px; font-size: 24px; color: #FFFFFF; display: block; line-height: 120%; } body .divLoading .divResult.ok { background: #239B56; } body .divLoading .divResult.ko { background: var(--color1-hex); } body .divLoading .divResult:before { margin: 20px 0px; font-family: "FontAwesome"; font-size: 60px; color: #FFFFFF; display: block; line-height: normal; } body .divLoading .divResult.ok:before { content: "\f058"; } body .divLoading .divResult.ko:before { content: "\f071"; } @media (max-width: 780px) { body .divLoading span { margin-bottom: 30px; font-size: 40px; } body .divLoading i.fa-spinner { font-size: 80px; } body .divLoading .divResult { margin: 0px 30px; } body .divLoading .divResult span { margin: 15px 0px; font-size: 20px; } body .divLoading .divResult:before { margin: 15px 0px; font-size: 50px; } } @media (max-width: 580px) { body .divLoading span { margin-bottom: 25px; font-size: 35px; } body .divLoading i.fa-spinner { font-size: 70px; } body .divLoading .divResult span { margin: 10px 0px; font-family: var(--font-family-narrow); } body .divLoading .divResult:before { margin: 10px 0px; } } @media (max-width: 380px) { body .divLoading span { margin-bottom: 20px; font-size: 30px; } body .divLoading i.fa-spinner { font-size: 60px; } body .divLoading .divResult { margin: 0px 20px; } body .divLoading .divResult span { font-size: 18px; } body .divLoading .divResult:before { font-size: 40px; } } /*************************************** #rowAppPresupuesto **************************************/ #rowAppPresupuesto * { -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } #rowAppPresupuesto .divAppPresupuesto { padding: 0px 40px; } #rowAppPresupuesto .divPresupuesto { margin: auto; max-width: 1280px; } @media (max-width: 980px) { #rowAppPresupuesto .divAppPresupuesto { padding: 0px 30px; } } @media (max-width: 780px) { #rowAppPresupuesto .divAppPresupuesto { padding: 0px 25px; } } @media (max-width: 580px) { #rowAppPresupuesto .divAppPresupuesto { padding: 0px 20px; } } /***** IDIOMA *****/ #rowAppPresupuesto .divSeleccionIdioma { -webkit-transition: none; transition: none; } #rowAppPresupuesto .divIdiomas { display: flex; flex-wrap: wrap; justify-content: center; } #rowAppPresupuesto .divIdioma { margin: 20px; padding: 40px 20px; width: calc((100% - 120px) / 3); } #rowAppPresupuesto .divIdioma { display: flex; flex-direction: column; align-items: center; text-align: center; cursor: pointer; } #rowAppPresupuesto .divIdioma .divSubtitulo { height: 100px; font-size: 28px; font-weight: 700; color: #000000; line-height: 120%; } #rowAppPresupuesto .divIdioma .divTitulo { margin: 30px 0px; font-size: 50px; font-weight: 800; color: #000000; line-height: 120%; } #rowAppPresupuesto .divIdioma .divImagen { margin-top: auto; max-width: 200px; line-height: 0px; } #rowAppPresupuesto .divIdioma .divImagen { filter: grayscale(1) opacity(0.7); } #rowAppPresupuesto .divIdioma:hover { transform: scale(1.1); } #rowAppPresupuesto .divIdioma:hover .divTitulo { color: var(--color1-hex); } #rowAppPresupuesto .divIdioma:hover .divSubtitulo { color: var(--color1-hex); } #rowAppPresupuesto .divIdioma:hover .divImagen { filter: none !important; } #rowAppPresupuesto .divIdioma.selected { cursor: default; } #rowAppPresupuesto .divIdioma.selected .divTitulo { color: var(--color1-hex); } #rowAppPresupuesto .divIdioma.selected .divSubtitulo { color: var(--color1-hex); } #rowAppPresupuesto .divIdioma.selected .divImagen { filter: none !important; } #rowAppPresupuesto .divIdioma.selected:hover { transform: none; } #rowAppPresupuesto .divSeleccionIdioma .divBoton { margin: auto; padding: 10px 20px 12px 20px; width: fit-content; font-size: 30px; font-weight: 600; color: #FFFFFF; } #rowAppPresupuesto .divSeleccionIdioma .divBoton { background: var(--color1-hex); border-radius: 15px; box-shadow: 0px 2px 5px rgba(0,0,0,0.7); cursor: pointer; } #rowAppPresupuesto .divSeleccionIdioma .divBoton:hover { transform: scale(1.1); } #rowAppPresupuesto .divSeleccionIdioma .divBoton.disable { background: var(--color2-hex); opacity: 0.5; cursor: not-allowed; } #rowAppPresupuesto .divSeleccionIdioma .divBoton.disable:hover { transform: none; } @media (max-width: 1380px) { #rowAppPresupuesto .divIdioma { padding: 30px 20px; } #rowAppPresupuesto .divIdioma .divSubtitulo { height: 90px; font-size: 24px; } #rowAppPresupuesto .divIdioma .divTitulo { margin: 20px 0px; font-size: 40px; } #rowAppPresupuesto .divIdioma .divImagen { max-width: 180px; } } @media (max-width: 1180px) { #rowAppPresupuesto .divIdioma { margin: 10px; padding: 20px; width: calc((100% - 60px) / 3); } #rowAppPresupuesto .divIdioma .divSubtitulo { height: 75px; font-size: 20px; } #rowAppPresupuesto .divIdioma .divTitulo { font-size: 32px; } #rowAppPresupuesto .divIdioma .divImagen { max-width: 160px; } #rowAppPresupuesto .divSeleccionIdioma .divBoton { font-size: 24px; } } @media (max-width: 980px) { #rowAppPresupuesto .divIdioma { padding: 0px; } #rowAppPresupuesto .divIdioma .divSubtitulo { height: 65px; font-size: 18px; } #rowAppPresupuesto .divIdioma .divTitulo { font-size: 28px; } #rowAppPresupuesto .divIdioma .divImagen { max-width: 120px; } #rowAppPresupuesto .divSeleccionIdioma .divBoton { margin-top: 20px; padding: 8px 20px 10px 20px; font-size: 20px; border-radius: 10px; } } @media (max-width: 780px) { #rowAppPresupuesto .divIdioma .divSubtitulo { height: 60px; font-family: var(--font-family-extra-narrow); font-size: 16px; } #rowAppPresupuesto .divIdioma .divTitulo { font-size: 24px; } #rowAppPresupuesto .divIdioma .divImagen { max-width: 100px; } #rowAppPresupuesto .divSeleccionIdioma .divBoton { font-size: 18px; } } @media (max-width: 580px) { #rowAppPresupuesto .divSeleccionIdioma { margin-top: -20px; } #rowAppPresupuesto .divIdiomas { flex-direction: column; } #rowAppPresupuesto .divIdioma { margin: 15px 0px; width: 100%; flex-wrap: wrap; flex-direction: row-reverse; justify-content: center; } #rowAppPresupuesto .divIdioma .divImagen { margin-top: 0px; max-width: 80px; } #rowAppPresupuesto .divIdioma .divTitulo { margin: 0px; width: 160px; } #rowAppPresupuesto .divIdioma .divSubtitulo { margin-bottom: 10px; width: 100%; height: auto; font-family: var(--font-family-normal); } #rowAppPresupuesto .divSeleccionIdioma .divBoton { width: 300px; font-size: 20px; text-align: center; line-height: 120%; } } @media (max-width: 380px) { #rowAppPresupuesto .divIdioma { margin: 0px 0px 20px 0px; } #rowAppPresupuesto .divIdioma .divImagen { max-width: 60px; } #rowAppPresupuesto .divIdioma .divTitulo { font-size: 20px; } #rowAppPresupuesto .divSeleccionIdioma .divBoton { width: 100%; font-size: 18px; } } /***** PASOS - PESTAÑAS *****/ #rowAppPresupuesto .divPestañas { display: flex; align-items: center; } #rowAppPresupuesto .divPestaña { position: relative; width: calc(100% / 7); display: flex; flex-direction: column; align-items: center; cursor: default; } #rowAppPresupuesto .divPestaña:before { content: ""; position: absolute; top: 50%; left: 0px; transform: translateY(-50%); width: 100%; height: 4px; background: var(--color1-hex); } #rowAppPresupuesto .divPestaña:first-of-type:before { width: 50%; left: 50%; } #rowAppPresupuesto .divPestaña:last-of-type:before { width: 50%; } #rowAppPresupuesto .divPestaña .divTitulo { height: 50px; font-family: var(--font-family-extra-narrow); font-size: 20px; font-weight: 700; color: #E5CEB0; } #rowAppPresupuesto .divPestaña .divTitulo { display: flex; align-items: center; justify-content: center; text-align: center; line-height: 100%; } #rowAppPresupuesto .divPestaña .divNumero { position: relative; padding-bottom: 2px; width: 48px; height: 48px; font-size: 30px; font-weight: 700; color: var(--colorBeige-hex); z-index: 1; } #rowAppPresupuesto .divPestaña .divNumero { background: #E5CEB0; border: solid 4px #E5CEB0; border-radius: 50%; display: flex; align-items: center; justify-content: center; } #rowAppPresupuesto .divPestaña .divTexto { padding-top: 5px; height: 50px; font-family: var(--font-family-narrow); font-size: 16px; font-weight: 600; color: #E5CEB0; } #rowAppPresupuesto .divPestaña .divTexto { display: flex; align-items: center; justify-content: center; text-align: center; line-height: 100%; } #rowAppPresupuesto .divPestaña.active .divTitulo { color: var(--color1-hex); } #rowAppPresupuesto .divPestaña.active .divNumero { color: #000000; background: #FFFFFF; border: solid 4px var(--color1-hex); } #rowAppPresupuesto .divPestaña.active .divTexto { color: #FFFFFF; } @media (max-width: 1380px) { #rowAppPresupuesto .divPestaña .divTitulo { font-size: 18px; letter-spacing: -0.1px; } } @media (max-width: 1180px) { #rowAppPresupuesto .divPestaña .divTitulo { padding: 0px 10px 10px 10px; letter-spacing: normal; } #rowAppPresupuesto .divPestaña .divTexto { font-size: 14px; } } @media (max-width: 980px) { #rowAppPresupuesto .divPestaña .divTitulo { font-size: 16px; } #rowAppPresupuesto .divPestaña .divNumero { padding-bottom: 0px; width: 40px; height: 40px; font-size: 28px; } #rowAppPresupuesto .divPestaña .divTexto { padding: 2px; font-family: var(--font-family-extra-narrow); } } @media (max-width: 780px) { #rowAppPresupuesto .divPestañas { margin-top: 20px; } #rowAppPresupuesto .divPestaña:before { top: 65px; transform: none; } #rowAppPresupuesto .divPestaña .divTitulo { padding: 10px 0px 0px 0px; font-size: 18px; writing-mode: vertical-rl; transform: rotate(180deg); justify-content: left; text-align: left; } #rowAppPresupuesto .divPestaña .divNumero { width: 35px; height: 35px; font-size: 24px; } #rowAppPresupuesto .divPestaña .divTexto { display: none; } } @media (max-width: 580px) { #rowAppPresupuesto .divPestaña .divTitulo { font-size: 16px; } #rowAppPresupuesto .divPestaña .divNumero { width: 30px; height: 30px; font-size: 20px; } } @media (max-width: 380px) { #rowAppPresupuesto .divPestaña:before { top: 61px; } #rowAppPresupuesto .divPestaña .divTitulo { padding: 5px 0px 0px 0px; font-size: 14px; } #rowAppPresupuesto .divPestaña .divNumero { width: 24px; height: 24px; font-size: 18px; } } /***** PASOS - GENERAL *****/ #rowAppPresupuesto .divPasos { display: none; -webkit-transition: none; transition: none; } #rowAppPresupuesto .divContenedorPasos { position: relative; margin-top: 60px; } #rowAppPresupuesto .divPaso { position: absolute; top: 0px; left: 100vw; width: 100%; -webkit-transition: none; transition: none; display: none; } #rowAppPresupuesto .divCabecera { text-align: center; color: #000000; } #rowAppPresupuesto .divCabecera .divTitulo { font-size: 60px; font-weight: 800; line-height: 100%; } #rowAppPresupuesto .divCabecera .divSubtitulo { margin-top: 10px; font-size: 35px; font-weight: 600; line-height: 120%; } #rowAppPresupuesto .divOpciones { margin-top: 40px; display: flex; flex-wrap: wrap; justify-content: center; } #rowAppPresupuesto .divOpcion { margin: 20px; padding: 40px 20px; width: calc(25% - 40px); background: #000000; border: solid 8px #000000; border-radius: 30px; } #rowAppPresupuesto .divOpcion { display: flex; flex-direction: column; align-items: center; text-align: center; cursor: pointer; } #rowAppPresupuesto .divOpcion .divTitulo { margin-bottom: 10px; font-size: 34px; font-weight: 800; color: #FFFFFF; line-height: 100%; } #rowAppPresupuesto .divOpcion .divSubtitulo { margin-bottom: 10px; font-size: 20px; font-weight: 700; color: #FFFFFF; line-height: 120%; } #rowAppPresupuesto .divOpcion .divImagen { margin-top: auto; max-width: 200px; line-height: 0px; } #rowAppPresupuesto .divOpcion .divImagen { filter: brightness(2) grayscale(1); } #rowAppPresupuesto .divOpcion .divTextarea { margin-top: auto; width: 100%; height: 160px; } #rowAppPresupuesto .divOpcion .divTextarea textarea { padding: 10px 15px; width: 100%; height: 100%; font-size: 20px; color: #000000; border: none; border-radius: 5px; } #rowAppPresupuesto .divOpcion:hover { border-color: var(--color1-hex); transform: scale(1.1); box-shadow: 0px 0px 40px #FFFFFF; } #rowAppPresupuesto .divOpcion:hover .divTitulo { color: var(--color1-hex); } #rowAppPresupuesto .divOpcion:hover .divSubtitulo { color: var(--color1-hex); } #rowAppPresupuesto .divOpcion:hover .divImagen { filter: none !important; } #rowAppPresupuesto .divOpcion.selected { border-color: var(--color1-hex); cursor: default; } #rowAppPresupuesto .divOpcion.selected .divTitulo { color: var(--color1-hex); } #rowAppPresupuesto .divOpcion.selected .divSubtitulo { color: var(--color1-hex); } #rowAppPresupuesto .divOpcion.selected .divImagen { filter: none !important; } #rowAppPresupuesto .divOpcion.selected:hover { transform: none; box-shadow: none; } #rowAppPresupuesto .divOpcion.disabled { opacity: 0.2; cursor: default; } #rowAppPresupuesto .divOpcion.disabled:hover { border-color: #000000; box-shadow: none; transform: none; } #rowAppPresupuesto .divOpcion.disabled:hover .divTitulo { color: #FFFFFF; } #rowAppPresupuesto .divOpcion.disabled:hover .divSubtitulo { color: #FFFFFF; } #rowAppPresupuesto .divOpcion.disabled:hover .divImagen { filter: brightness(2) grayscale(1) !important; } #rowAppPresupuesto .divForm { margin: 40px auto 0px auto; } #rowAppPresupuesto .divForm .divFields { margin: 20px; padding: 40px; background: #000000; border-radius: 30px; display: flex; flex-wrap: wrap; justify-content: space-between; } #rowAppPresupuesto .divForm .divField { margin-bottom: 20px; } #rowAppPresupuesto .divForm .divField label { margin-bottom: 10px; font-size: 24px; color: #FFFFFF; display: block; } #rowAppPresupuesto .divForm .divField input { padding: 10px 15px; width: 100%; font-size: 24px; color: #000000; border: none; border-radius: 5px; } #rowAppPresupuesto .divForm .divField input[type="checkbox"] { margin-right: 10px; padding: 0px; flex: 0 0 24px; height: 24px; } #rowAppPresupuesto .divForm .divField select { padding: 10px 15px; width: 100%; font-size: 24px; color: #000000; border: none; border-radius: 5px; } #rowAppPresupuesto .divForm .divFieldLabel { margin-bottom: 15px; width: 100%; font-size: 30px; color: #FFFFFF; border-bottom: solid 1px; } @media (max-width: 1380px) { #rowAppPresupuesto .divContenedorPasos { margin-top: 50px; } #rowAppPresupuesto .divCabecera .divTitulo { font-size: 50px; } #rowAppPresupuesto .divCabecera .divSubtitulo { font-size: 30px; } #rowAppPresupuesto .divOpciones { margin-top: 30px; } #rowAppPresupuesto .divOpcion { margin: 15px; padding: 30px 20px; width: calc(25% - 30px); border-radius: 25px; } #rowAppPresupuesto .divOpcion .divTitulo { font-size: 30px; } #rowAppPresupuesto .divOpcion .divSubtitulo { font-size: 18px; } #rowAppPresupuesto .divForm .divFields { border-radius: 25px; } } @media (max-width: 1180px) { #rowAppPresupuesto .divContenedorPasos { margin-top: 40px; } #rowAppPresupuesto .divCabecera .divTitulo { font-size: 40px; } #rowAppPresupuesto .divCabecera .divSubtitulo { font-size: 24px; } #rowAppPresupuesto .divOpciones { margin-top: 20px; } #rowAppPresupuesto .divOpcion { margin: 10px; padding: 20px; width: calc(25% - 20px); border-radius: 20px; } #rowAppPresupuesto .divOpcion .divTitulo { font-size: 24px; } #rowAppPresupuesto .divOpcion .divSubtitulo { font-size: 16px; } #rowAppPresupuesto .divOpcion:hover { box-shadow: 0px 0px 30px #FFFFFF; } #rowAppPresupuesto .divOpcion .divTextarea { height: 140px; } #rowAppPresupuesto .divOpcion .divTextarea textarea { font-size: 18px; } #rowAppPresupuesto .divForm .divFields { border-radius: 20px; } } @media (max-width: 980px) { #rowAppPresupuesto .divContenedorPasos { margin-top: 30px; } #rowAppPresupuesto .divCabecera .divTitulo { font-size: 32px; } #rowAppPresupuesto .divCabecera .divSubtitulo { font-size: 20px; } #rowAppPresupuesto .divOpcion { margin: 5px; width: calc(33.33% - 10px); border-width: 4px; border-radius: 15px; } #rowAppPresupuesto .divOpcion .divTitulo { margin-bottom: 5px; } #rowAppPresupuesto .divOpcion .divSubtitulo { margin-bottom: 5px; } #rowAppPresupuesto .divOpcion:hover { transform: scale(1.05); box-shadow: 0px 0px 20px #FFFFFF; } #rowAppPresupuesto .divForm { margin: 25px auto 0px auto; } #rowAppPresupuesto .divOpcion .divTextarea textarea { padding: 8px 10px; } #rowAppPresupuesto .divForm .divFields { padding: 30px; border-radius: 15px; } #rowAppPresupuesto .divForm .divField { margin-bottom: 15px; } #rowAppPresupuesto .divForm .divField label { margin-bottom: 5px; font-size: 20px; } #rowAppPresupuesto .divForm .divField input { padding: 8px 10px; font-size: 20px; } #rowAppPresupuesto .divForm .divField input[type="checkbox"] { flex: 0 0 20px; height: 20px; } #rowAppPresupuesto .divForm .divField select { padding: 8px 10px; font-size: 20px; } #rowAppPresupuesto .divForm .divFieldLabel { font-size: 24px; } } @media (max-width: 780px) { #rowAppPresupuesto .divContenedorPasos { margin-top: 20px; } #rowAppPresupuesto .divCabecera .divTitulo { font-size: 28px; } #rowAppPresupuesto .divCabecera .divSubtitulo { font-size: 18px; } #rowAppPresupuesto .divOpcion { padding: 15px; width: calc(50% - 10px); } #rowAppPresupuesto .divOpcion .divTitulo { font-size: 20px; } #rowAppPresupuesto .divOpcion .divSubtitulo { font-size: 14px; } #rowAppPresupuesto .divOpcion .divImagen { max-width: 150px; } #rowAppPresupuesto .divOpcion .divTextarea { height: 100px; } #rowAppPresupuesto .divOpcion .divTextarea textarea { font-size: 16px; } #rowAppPresupuesto .divForm .divFields { padding: 20px; } #rowAppPresupuesto .divForm .divField { margin-bottom: 10px; } #rowAppPresupuesto .divForm .divField label { font-size: 18px; } #rowAppPresupuesto .divForm .divField input { font-size: 18px; } #rowAppPresupuesto .divForm .divField input[type="checkbox"] { margin-right: 8px; flex: 0 0 18px; height: 18px; } #rowAppPresupuesto .divForm .divField select { font-size: 18px; } #rowAppPresupuesto .divForm .divFieldLabel { margin-bottom: 10px; font-size: 20px; } } @media (max-width: 580px) { #rowAppPresupuesto .divCabecera .divTitulo { font-size: 24px; } #rowAppPresupuesto .divCabecera .divSubtitulo { font-size: 16px; } #rowAppPresupuesto .divOpcion .divTitulo { font-size: 18px; } #rowAppPresupuesto .divOpcion .divSubtitulo { font-size: 13px; } #rowAppPresupuesto .divOpcion .divImagen { max-width: 125px; } #rowAppPresupuesto .divOpcion .divTextarea textarea { font-size: 14px; } #rowAppPresupuesto .divForm .divFields { margin: 20px 5px; padding: 15px; } #rowAppPresupuesto .divForm .divField label { font-size: 16px; } #rowAppPresupuesto .divForm .divField input { font-size: 16px; } #rowAppPresupuesto .divForm .divField input[type="checkbox"] { margin-right: 5px; flex: 0 0 16px; height: 16px; } #rowAppPresupuesto .divForm .divField select { font-size: 16px; } #rowAppPresupuesto .divForm .divFieldLabel { font-size: 18px; } } @media (max-width: 380px) { #rowAppPresupuesto .divCabecera .divTitulo { font-size: 20px; } #rowAppPresupuesto .divCabecera .divSubtitulo { font-size: 14px; } #rowAppPresupuesto .divOpciones { margin-top: 10px; } #rowAppPresupuesto .divOpcion { padding: 10px; width: 100%; border-radius: 10px; } #rowAppPresupuesto .divOpcion .divTitulo { font-size: 20px; } #rowAppPresupuesto .divOpcion .divSubtitulo { font-size: 14px; } #rowAppPresupuesto .divOpcion .divImagen { max-width: 100px; } #rowAppPresupuesto .divOpcion .divTextarea { height: 80px; } #rowAppPresupuesto .divOpcion .divTextarea textarea { padding: 6px 8px; font-size: 13px; } #rowAppPresupuesto .divForm .divField label { font-size: 14px; } #rowAppPresupuesto .divForm .divField input { padding: 6px 8px; font-size: 14px; } #rowAppPresupuesto .divForm .divField select { padding: 6px 8px; font-size: 14px; } #rowAppPresupuesto .divForm .divFieldLabel { font-size: 16px; } } /***** PASO 1 - ORGANIZADOR *****/ #rowAppPresupuesto .divPaso1 .divImagen { filter: brightness(20) grayscale(1); } @media (max-width: 980px) { #rowAppPresupuesto .divPaso1 .divOpcion { width: calc(50% - 10px); } } @media (max-width: 380px) { #rowAppPresupuesto .divPaso1 .divOpcion { width: 100%; } } /***** PASO 2 - FECHAS Y LOCALIZACIÓN *****/ #rowAppPresupuesto .divPaso2 .divForm { width: 600px; } #rowAppPresupuesto .divPaso2 .divFieldFechaInicio { width: calc(50% - 10px); } #rowAppPresupuesto .divPaso2 .divFieldFin { width: calc(50% - 10px); } #rowAppPresupuesto .divPaso2 .divFieldPais { width: 100%; } #rowAppPresupuesto .divPaso2 .divFieldRegion { width: 100%; } #rowAppPresupuesto .divPaso2 .divFieldCiudad { width: 100%; } @media (max-width: 780px) { #rowAppPresupuesto .divPaso2 .divForm { width: 500px; } } @media (max-width: 580px) { #rowAppPresupuesto .divPaso2 .divForm { width: 100%; } #rowAppPresupuesto .divPaso2 .divFieldFechaInicio { width: 100%; } #rowAppPresupuesto .divPaso2 .divFieldFin { width: 100%; } } /***** PASO 3 - GENERO MUSICAL *****/ #rowAppPresupuesto .divPaso3 .divOpcionC .divImagen { filter: brightness(2) grayscale(1); } #rowAppPresupuesto .divPaso3 .divOpcionC:hover .divImagen { filter: brightness(2) grayscale(0) !important; } #rowAppPresupuesto .divPaso3 .divOpcionC.selected .divImagen { filter: brightness(2) !important; } #rowAppPresupuesto .divPaso3 .divOpcionD .divSubtitulo { margin-bottom: 20px; } @media (max-width: 980px) { #rowAppPresupuesto .divPaso3 .divOpcionD { width: 100%; } #rowAppPresupuesto .divPaso3 .divOpcionD .divTextarea { height: 80px; } } @media (max-width: 780px) { #rowAppPresupuesto .divPaso3 .divOpcionD { width: calc(50% - 10px); } #rowAppPresupuesto .divPaso3 .divOpcionD .divTextarea { height: 100px; } } @media (max-width: 380px) { #rowAppPresupuesto .divPaso3 .divOpcionD { width: 100%; } #rowAppPresupuesto .divPaso3 .divOpcionD .divTextarea { height: 80px; } } /***** PASO 4 - PRESUPUESTO *****/ :root { --inputWidth: calc(100% - 30px); --rangeGap: 40px; } #rowAppPresupuesto .divPaso4 .divFields { justify-content: center; } #rowAppPresupuesto .divPaso4 .divFieldRider { display: flex; align-items: flex-start; } #rowAppPresupuesto .divPaso4 .divFieldRider input { margin-top: 5px; } #rowAppPresupuesto .divPaso4 .divFieldRider label { line-height: 120%; white-space: nowrap; } #rowAppPresupuesto .divPaso4 .divFieldRange { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; } #rowAppPresupuesto .divPaso4 .divFieldRange .divRangeValue { position: relative; width: var(--inputWidth); text-align: center; } #rowAppPresupuesto .divPaso4 .divFieldRange .divRangeValue .divTexto1 { font-size: 24px; font-weight: 600; color: #FFFFFF; } #rowAppPresupuesto .divPaso4 .divFieldRange .divRangeValue .divValue { font-size: 40px; font-weight: 700; color: var(--color1-hex); line-height: 120%; } #rowAppPresupuesto .divPaso4 .divFieldRange .divRangeValue .divTexto2 { font-size: 20px; font-style: italic; color: var(--colorBeige-hex); display: block; } #rowAppPresupuesto .divPaso4 .divFieldRange .divRangeValue .divArrow { position: absolute; top: 127px; left: 0px; transform: translateX(-20px); width: var(--rangeGap); height: var(--rangeGap); } #rowAppPresupuesto .divPaso4 .divFieldRange .divRangeValue .divArrow { font-size: 40px; display: flex; align-items: center; justify-content: center; pointer-events: none; transition: none; } #rowAppPresupuesto .divPaso4 .divFieldRange input { margin: calc(var(--rangeGap) * 2) 0px var(--rangeGap) 0px; padding: 0px; width: var(--inputWidth); height: 10px; transition: none; cursor: pointer; } #rowAppPresupuesto .divPaso4 .divFieldRange input { background: rgba(255,255,255,0.6); background-image: linear-gradient(var(--color1-hex),var(--color1-hex)); -webkit-appearance: none; } #rowAppPresupuesto .divPaso4 .divFieldRange input { background-repeat: no-repeat; background-size: 0% 100%; border: none; border-radius: 5px; } #rowAppPresupuesto .divPaso4 .divFieldRange input:focus { outline: none; } #rowAppPresupuesto .divPaso4 .divFieldRange input::-webkit-slider-thumb { margin-top: calc(var(--rangeGap) * -2); width: calc(var(--rangeGap) * 1.5); height: calc(var(--rangeGap) * 1.5); } #rowAppPresupuesto .divPaso4 .divFieldRange input::-moz-range-thumb { margin-top: calc(var(--rangeGap) * -2); width: calc(var(--rangeGap) * 1.5); height: calc(var(--rangeGap) * 1.5); } #rowAppPresupuesto .divPaso4 .divFieldRange input::-ms-thumb { margin-top: calc(var(--rangeGap) * -2); width: calc(var(--rangeGap) * 1.5); height: calc(var(--rangeGap) * 1.5); } #rowAppPresupuesto .divPaso4 .divFieldRange input::-webkit-slider-thumb { background: #FFFFFF; border: solid 4px var(--color1-hex); border-radius: 50%; -webkit-appearance: none; } #rowAppPresupuesto .divPaso4 .divFieldRange input::-moz-range-thumb { background: #FFFFFF; border: solid 4px var(--color1-hex); border-radius: 50%; -webkit-appearance: none; } #rowAppPresupuesto .divPaso4 .divFieldRange input::-ms-thumb { background: #FFFFFF; border: solid 4px var(--color1-hex); border-radius: 50%; -webkit-appearance: none; } #rowAppPresupuesto .divPaso4 .divFieldRange .divRangeDatalist { width: 100%; display: flex; justify-content: space-between; } #rowAppPresupuesto .divPaso4 .divFieldRange .divRangeDatalist div { position: relative; width: 90px; font-size: 24px; font-weight: 600; color: #FFFFFF; text-align: center; white-space: nowrap; } #rowAppPresupuesto .divPaso4 .divFieldRange .divRangeDatalist div:before { content: ""; position: absolute; top: calc(var(--rangeGap) * -1); left: calc(50% - 2px); width: 4px; height: var(--rangeGap); } #rowAppPresupuesto .divPaso4 .divFieldRange .divRangeDatalist div:before { background: var(--color1-hex); display: block; } #rowAppPresupuesto .divPaso4 .divFieldNota { margin-bottom: 0px; width: 100%; font-size: 20px; font-style: italic; color: var(--colorBeige-hex); text-align: center; line-height: 120%; } @media (max-width: 1180px) { :root { --inputWidth: calc(100% - 20px); --rangeGap: 30px; } #rowAppPresupuesto .divPaso4 .divFieldRange .divRangeValue .divTexto1 { font-size: 24px; } #rowAppPresupuesto .divPaso4 .divFieldRange .divRangeValue .divValue { font-size: 40px; } #rowAppPresupuesto .divPaso4 .divFieldRange .divRangeValue .divTexto2 { font-size: 20px; } #rowAppPresupuesto .divPaso4 .divFieldRange .divRangeValue .divArrow { top: 123px; transform: translateX(-21px); font-size: 30px; } #rowAppPresupuesto .divPaso4 .divFieldRange .divRangeDatalist div { width: 75px; font-size: 20px; } #rowAppPresupuesto .divPaso4 .divFieldNota { max-width: 480px; } } @media (max-width: 1080px) { #rowAppPresupuesto .divPaso4 .divFieldRange .divRangeValue .divArrow { transform: translateX(-18px); } #rowAppPresupuesto .divPaso4 .divFieldRange .divRangeDatalist div { width: 68px; } } @media (max-width: 980px) { :root { --inputWidth: calc(100% - 20px); --rangeGap: 25px; } #rowAppPresupuesto .divPaso4 .divFieldRider input { margin-top: 2px; } #rowAppPresupuesto .divPaso4 .divFieldRider label { font-size: 18px; } #rowAppPresupuesto .divPaso4 .divFieldRange .divRangeValue .divTexto1 { font-size: 20px; } #rowAppPresupuesto .divPaso4 .divFieldRange .divRangeValue .divValue { font-size: 35px; } #rowAppPresupuesto .divPaso4 .divFieldRange .divRangeValue .divTexto2 { font-size: 18px; } #rowAppPresupuesto .divPaso4 .divFieldRange .divRangeValue .divArrow { top: 108px; transform: translateX(-16px); font-size: 24px; } #rowAppPresupuesto .divPaso4 .divFieldRange .divRangeDatalist div { width: 62px; font-family: var(--font-family-extra-narrow); font-size: 18px; } #rowAppPresupuesto .divPaso4 .divFieldNota { max-width: 420px; font-size: 18px; } } @media (max-width: 880px) { #rowAppPresupuesto .divPaso4 .divFieldRange .divRangeValue .divArrow { transform: translateX(-14px); } #rowAppPresupuesto .divPaso4 .divFieldRange .divRangeDatalist div { width: 55px; } } @media (max-width: 780px) { :root { --inputWidth: calc(100% - 15px); --rangeGap: 20px; } #rowAppPresupuesto .divPaso4 .divFields { margin: 20px 10px; } #rowAppPresupuesto .divPaso4 .divFieldRider label { font-size: 16px; } #rowAppPresupuesto .divPaso4 .divFieldRange .divRangeValue .divTexto1 { font-size: 18px; } #rowAppPresupuesto .divPaso4 .divFieldRange .divRangeValue .divValue { font-size: 30px; } #rowAppPresupuesto .divPaso4 .divFieldRange .divRangeValue .divTexto2 { font-size: 16px; } #rowAppPresupuesto .divPaso4 .divFieldRange .divRangeValue .divArrow { top: 95px; transform: translateX(-10px); font-size: 20px; } #rowAppPresupuesto .divPaso4 .divFieldRange .divRangeDatalist div { width: 45px; font-size: 16px; } #rowAppPresupuesto .divPaso4 .divFieldNota { max-width: 280px; font-size: 16px; } } @media (max-width: 680px) { #rowAppPresupuesto .divPaso4 .divFieldRider label { width: 260px; white-space: normal; text-align: justify; } #rowAppPresupuesto .divPaso4 .divFieldRange .divRangeValue .divArrow { transform: translateX(-9px); } #rowAppPresupuesto .divPaso4 .divFieldRange .divRangeDatalist div { font-weight: 300; } } @media (max-width: 580px) { :root { --inputWidth: calc(100% - 10px); --rangeGap: 20px; } #rowAppPresupuesto .divPaso4 .divFields { margin: 20px 0px; } #rowAppPresupuesto .divPaso4 .divFieldRider input { margin-top: 0px; } #rowAppPresupuesto .divPaso4 .divFieldRider label { width: 225px; font-size: 14px; } #rowAppPresupuesto .divPaso4 .divFieldRange .divRangeValue .divTexto1 { font-size: 16px; } #rowAppPresupuesto .divPaso4 .divFieldRange .divRangeValue .divValue { font-size: 24px; } #rowAppPresupuesto .divPaso4 .divFieldRange .divRangeValue .divTexto2 { font-size: 14px; } #rowAppPresupuesto .divPaso4 .divFieldRange .divRangeValue .divArrow { top: 83px; transform: translateX(-7px); font-size: 18px; } #rowAppPresupuesto .divPaso4 .divFieldRange input::-webkit-slider-thumb { border-width: 2px; } #rowAppPresupuesto .divPaso4 .divFieldRange input::-moz-range-thumb { border-width: 2px; } #rowAppPresupuesto .divPaso4 .divFieldRange input::-ms-thumb { border-width: 2px; } #rowAppPresupuesto .divPaso4 .divFieldRange .divRangeDatalist div { width: 35px; font-size: 14px; } #rowAppPresupuesto .divPaso4 .divFieldNota { margin-bottom: 10px; max-width: 225px; font-size: 14px; } } @media (max-width: 480px) { :root { --inputWidth: 100%; --rangeGap: 20px; } #rowAppPresupuesto .divPaso4 .divFieldRange { position: relative; } #rowAppPresupuesto .divPaso4 .divFieldRange .divRangeValue { margin-bottom: 160px; } #rowAppPresupuesto .divPaso4 .divFieldRange .divRangeValue .divArrow { top: 91px; left: 45.5vw; transform: rotate(90deg); font-size: 20px; z-index: 1; } #rowAppPresupuesto .divPaso4 .divFieldRange input { margin: 0px; width: 300px; transform: rotate(90deg); } #rowAppPresupuesto .divPaso4 .divFieldRange input::-webkit-slider-thumb { margin-top: calc(var(--rangeGap) * -2.5); } #rowAppPresupuesto .divPaso4 .divFieldRange input::-moz-range-thumb { margin-top: calc(var(--rangeGap) * -2.5); } #rowAppPresupuesto .divPaso4 .divFieldRange input::-ms-thumb { margin-top: calc(var(--rangeGap) * -2.5); } #rowAppPresupuesto .divPaso4 .divFieldRange .divRangeDatalist { position: absolute; top: 85px; transform: translateX(-60px); width: 60px; height: 300px; flex-direction: column; align-items: flex-end; } #rowAppPresupuesto .divPaso4 .divFieldRange .divRangeDatalist div { width: 60px; font-family: var(--font-family-normal); font-size: 16px; } #rowAppPresupuesto .divPaso4 .divFieldRange .divRangeDatalist div:before { top: 11px; left: 65px; width: 20px; height: 2px; } #rowAppPresupuesto .divPaso4 .divFieldNota { margin-top: 150px; } } @media (max-width: 380px) { :root { --inputWidth: 100%; --rangeGap: 20px; } #rowAppPresupuesto .divPaso4 .divFieldRange .divRangeValue { margin-bottom: 140px; } #rowAppPresupuesto .divPaso4 .divFieldRange .divRangeValue .divArrow { top: 96px; left: 44.5vw; } #rowAppPresupuesto .divPaso4 .divFieldRange input { width: 250px; } #rowAppPresupuesto .divPaso4 .divFieldRange .divRangeDatalist { height: 255px; } #rowAppPresupuesto .divPaso4 .divFieldNota { margin-top: 130px; } } /***** PASO 5 - TIPO DE ESPECTÁCULO *****/ #rowAppPresupuesto .divPaso5 .divOpcionC .divSubtitulo { margin-bottom: 20px; } @media (max-width: 780px) { #rowAppPresupuesto .divPaso5 .divOpcionC { width: 100%; } #rowAppPresupuesto .divPaso5 .divOpcionC .divTextarea { height: 80px; } } /***** PASO 6 - TIPO DE ARTISTA *****/ #rowAppPresupuesto .divPaso6 .divOpcion { position: relative; } #rowAppPresupuesto .divPaso6 .divOpcion .divNotaDisable { position: absolute; bottom: 0px; left: 0px; padding: 10px; width: 100%; } #rowAppPresupuesto .divPaso6 .divOpcion .divNotaDisable { font-family: var(--font-family-extra-narrow); font-size: 18px; font-weight: 500; } #rowAppPresupuesto .divPaso6 .divOpcion .divNotaDisable { background: #FFFFFF; border-radius: 24px; line-height: 100%; letter-spacing: -1px; } #rowAppPresupuesto .divPaso6 .divOpcionesGrupo .divOpcionA .divImagen { filter: brightness(2) grayscale(1) opacity(0.75); } #rowAppPresupuesto .divPaso6 .divOpcionesGrupo .divOpcionA.disabled:hover .divImagen { filter: brightness(2) grayscale(1) opacity(0.75) !important; } #rowAppPresupuesto .divPaso6 .divOpcionesGrupo .divOpcionC .divImagen { filter: brightness(2) grayscale(1) opacity(0.75); } #rowAppPresupuesto .divPaso6 .divOpcionesGrupo .divOpcionC.disabled:hover .divImagen { filter: brightness(2) grayscale(1) opacity(0.75) !important; } #rowAppPresupuesto .divPaso6 .divOpcionesGrupo .divOpcionE .divImagen { filter: brightness(1.5) grayscale(1) opacity(0.75); } #rowAppPresupuesto .divPaso6 .divOpcionesGrupo .divOpcionE.disabled:hover .divImagen { filter: brightness(1.5) grayscale(1) opacity(0.75) !important; } #rowAppPresupuesto .divPaso6 .divOpcionesFestival .divOpcionA .divImagen { filter: brightness(1.5) grayscale(1) opacity(0.75); } #rowAppPresupuesto .divPaso6 .divOpcionesFestival .divOpcionA.disabled:hover .divImagen { filter: brightness(1.5) grayscale(1) opacity(0.75) !important; } #rowAppPresupuesto .divPaso6 .divOpcionesFestival .divOpcionB .divImagen { filter: brightness(1.5) grayscale(1) opacity(0.75); } #rowAppPresupuesto .divPaso6 .divOpcionesFestival .divOpcionB.disabled:hover .divImagen { filter: brightness(1.5) grayscale(1) opacity(0.75) !important; } #rowAppPresupuesto .divPaso6 .divOpcionesFestival .divOpcionC .divImagen { filter: brightness(1.5) grayscale(1) opacity(0.75); } #rowAppPresupuesto .divPaso6 .divOpcionesFestival .divOpcionC.disabled:hover .divImagen { filter: brightness(1.5) grayscale(1) opacity(0.75) !important; } #rowAppPresupuesto .divPaso6 .divOpcionesFestival .divOpcionD .divImagen { filter: brightness(1.5) grayscale(1) opacity(0.75); } #rowAppPresupuesto .divPaso6 .divOpcionesFestival .divOpcionD.disabled:hover .divImagen { filter: brightness(1.5) grayscale(1) opacity(0.75) !important; } #rowAppPresupuesto .divPaso6 .divOpcionesFestival .divOpcionF .divImagen { filter: brightness(1.5) grayscale(1) opacity(0.75); } #rowAppPresupuesto .divPaso6 .divOpcionesFestival .divOpcionF.disabled:hover .divImagen { filter: brightness(1.5) grayscale(1) opacity(0.75) !important; } #rowAppPresupuesto .divPaso6 .divOpcionesFestival .divOpcionG .divImagen { filter: brightness(3) grayscale(1); } #rowAppPresupuesto .divPaso6 .divOpcionesFestival .divOpcionG.disabled:hover .divImagen { filter: brightness(3) grayscale(1) !important; } #rowAppPresupuesto .divPaso6 .divOpcionH .divSubtitulo { margin-bottom: 20px; } @media (max-width: 1180px) { #rowAppPresupuesto .divPaso6 .divOpcion .divNotaDisable { border-radius: 16px; } } @media (max-width: 980px) { #rowAppPresupuesto .divPaso6 .divOpcion .divNotaDisable { border-radius: 12px; } } @media (max-width: 780px) { #rowAppPresupuesto .divPaso6 .divOpcion .divNotaDisable { padding: 8px; font-size: 16px; letter-spacing: normal; } } @media (max-width: 580px) { #rowAppPresupuesto .divPaso6 .divOpcion .divNotaDisable { font-size: 14px; } } @media (max-width: 980px) { #rowAppPresupuesto .divPaso6 .divOpcionH { width: calc(66.66% - 10px); } } @media (max-width: 780px) { #rowAppPresupuesto .divPaso6 .divOpcionH { width: calc( 50% - 10px); } } @media (max-width: 380px) { #rowAppPresupuesto .divPaso6 .divOpcionH { width: 100%; } } /***** PASO 7 - DATOS DE CONTACTO *****/ #rowAppPresupuesto .divPaso7 .divForm { width: 700px; } #rowAppPresupuesto .divPaso7 .divFields label img { margin: 0px 10px 0px 5px; width: 40px; } #rowAppPresupuesto .divPaso7 .divFieldNombre { width: calc(65% - 10px); } #rowAppPresupuesto .divPaso7 .divFieldTelefono { width: calc(35% - 10px); } #rowAppPresupuesto .divPaso7 .divFieldMail { width: 100%; } #rowAppPresupuesto .divPaso7 .divFieldContactoWhatsApp { width: calc(50% - 10px); display: flex; align-items: center; } #rowAppPresupuesto .divPaso7 .divFieldContactoTelefono { width: calc(50% - 10px); display: flex; align-items: center; } #rowAppPresupuesto .divPaso7 .divFieldContactoWeChat { width: calc(50% - 10px); display: flex; align-items: center; } #rowAppPresupuesto .divPaso7 .divFieldContactoMail { width: calc(50% - 10px); display: flex; align-items: center; } #rowAppPresupuesto .divPaso7 .divFieldContactoWhatsApp label { margin-bottom: 0px; display: flex; align-items: center; } #rowAppPresupuesto .divPaso7 .divFieldContactoTelefono label { margin-bottom: 0px; display: flex; align-items: center; } #rowAppPresupuesto .divPaso7 .divFieldContactoWeChat label { margin-bottom: 0px; display: flex; align-items: center; } #rowAppPresupuesto .divPaso7 .divFieldContactoMail label { margin-bottom: 0px; display: flex; align-items: center; } #rowAppPresupuesto .divPaso7 .divFieldPreferenciaDia { margin: 10px 0px 0px 0px; width: calc(60% - 10px); } #rowAppPresupuesto .divPaso7 .divFieldPreferenciaMañana { width: calc(40% - 10px); height: 30px; display: flex; align-items: center; } #rowAppPresupuesto .divPaso7 .divFieldPreferenciaTarde { margin: -22px 0px 0px auto; width: calc(40% - 10px); height: 30px; display: flex; align-items: center; } #rowAppPresupuesto .divPaso7 .divFieldPreferenciaMañana label { margin-bottom: 0px; display: initial; } #rowAppPresupuesto .divPaso7 .divFieldPreferenciaTarde label { margin-bottom: 0px; display: initial; } @media (max-width: 980px) { } @media (max-width: 780px) { #rowAppPresupuesto .divPaso7 .divForm { width: 100%; } #rowAppPresupuesto .divPaso7 .divFields { margin: 20px 5px; } #rowAppPresupuesto .divPaso7 .divFields label img { width: 35px; } #rowAppPresupuesto .divPaso7 .divFieldNombre { width: calc(70% - 10px); } #rowAppPresupuesto .divPaso7 .divFieldTelefono { width: calc(30% - 10px); } } @media (max-width: 580px) { #rowAppPresupuesto .divPaso7 .divFields label img { margin: 0px 5px 0px 0px; width: 30px; } #rowAppPresupuesto .divPaso7 .divFieldNombre { width: 100%; } #rowAppPresupuesto .divPaso7 .divFieldTelefono { width: 100%; } #rowAppPresupuesto .divPaso7 .divFieldLabel { width: 100%; letter-spacing: -0.5px; } #rowAppPresupuesto .divPaso7 .divFieldPreferenciaDia { width: calc(55% - 5px); } #rowAppPresupuesto .divPaso7 .divFieldPreferenciaMañana { width: calc(45% - 5px); } #rowAppPresupuesto .divPaso7 .divFieldPreferenciaTarde { width: calc(45% - 5px); } } @media (max-width: 380px) { #rowAppPresupuesto .divPaso7 .divFields label img { width: 24px; } #rowAppPresupuesto .divPaso7 .divFieldPreferenciaDia { margin: 5px 0px 10px 0px; width: 100%; } #rowAppPresupuesto .divPaso7 .divFieldPreferenciaMañana { width: calc(55% - 5px); } #rowAppPresupuesto .divPaso7 .divFieldPreferenciaTarde { margin: 0px 0px 10px 0px; width: calc(45% - 5px); } } /***** PASO 8 - CONFIRMACION *****/ #rowAppPresupuesto .divPaso8 .divDatos { margin-top: 40px; display: flex; flex-wrap: wrap; justify-content: center; } #rowAppPresupuesto .divPaso8 .divDato { margin: 20px; width: calc(25% - 40px); } #rowAppPresupuesto .divPaso8 .divTituloPaso { font-family: var(--font-family-narrow); font-size: 28px; font-weight: 900; color: var(--color1-hex); text-align: center; letter-spacing: -0.5px; } #rowAppPresupuesto .divPaso8 .divResult { margin-top: 10px; padding: 20px; height: 340px; background: #DDDDDD; border: solid 2px var(--color1-hex); border-radius: 20px; } #rowAppPresupuesto .divPaso8 .divResult { display: flex; flex-direction: column; align-items: center; text-align: center; cursor: default; } #rowAppPresupuesto .divPaso8 .divResult .divTitulo { font-size: 30px; font-weight: 800; color: #000000; line-height: 100%; } #rowAppPresupuesto .divPaso8 .divResult .divTitulo { height: calc(30px * 3); -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } #rowAppPresupuesto .divPaso8 .divResult .divImagen { margin-top: auto; max-width: 200px; line-height: 0px; } #rowAppPresupuesto .divPaso8 .divResult .divImagen.texto { margin-top: 0px; padding: 10px; width: 100%; max-width: none; height: 100%; font-size: 20px; font-weight: 700; } #rowAppPresupuesto .divPaso8 .divResult .divImagen.texto { background: #FFFFFF; text-align: left; line-height: 120%; overflow-y: scroll; } #rowAppPresupuesto .divPaso8 .divResult .divField { margin-bottom: 5px; } #rowAppPresupuesto .divPaso8 .divResult .divLabel { font-family: var(--font-family-narrow); font-size: 16px; font-weight: 600; color: var(--color1-hex); text-align: left; } #rowAppPresupuesto .divPaso8 .divResult .divValue { padding: 2px 5px; font-size: 20px; font-weight: 700; color: #000000; background: #FFFFFF; text-align: left; } #rowAppPresupuesto .divPaso8 .divDatoFechasLocalizacion .divResult { display: block; } #rowAppPresupuesto .divPaso8 .divDatoPresupuesto .divResult .divLabel { margin-bottom: 15px; font-size: 20px; text-align: center; line-height: 120%; } #rowAppPresupuesto .divPaso8 .divDatoPresupuesto .divResult .divValue { margin: auto; padding: 5px 10px; width: fit-content; } #rowAppPresupuesto .divPaso8 .divDatoPresupuesto .divResult .divFieldPresupuesto { margin-top: 30px; } #rowAppPresupuesto .divPaso8 .divDatoPresupuesto .divResult .divFieldPresupuesto .divValue { font-size: 36px; } #rowAppPresupuesto .divPaso8 .divDatoDatosContacto { width: calc(50% - 40px); } #rowAppPresupuesto .divPaso8 .divDatoDatosContacto .divResult .divFields { display: flex; flex-wrap: wrap; justify-content: space-between; } #rowAppPresupuesto .divPaso8 .divDatoDatosContacto .divResult .divFields .divValue { padding: 5px 10px; } #rowAppPresupuesto .divPaso8 .divDatoDatosContacto .divResult .divFieldNombre { width: calc(65% - 10px); } #rowAppPresupuesto .divPaso8 .divDatoDatosContacto .divResult .divFieldTelefono { width: calc(35% - 10px); } #rowAppPresupuesto .divPaso8 .divDatoDatosContacto .divResult .divFieldMail { width: 100%; } #rowAppPresupuesto .divPaso8 .divDatoDatosContacto .divResult .divFieldMedios { width: calc(50% - 10px); } #rowAppPresupuesto .divPaso8 .divDatoDatosContacto .divResult .divFieldMedios .divValue { height: 130px; } #rowAppPresupuesto .divPaso8 .divDatoDatosContacto .divResult .divFieldDia { width: calc(50% - 10px); } #rowAppPresupuesto .divPaso8 .divDatoDatosContacto .divResult .divFieldDia .divValue { height: 130px; } @media (max-width: 1380px) { #rowAppPresupuesto .divPaso8 .divDatos { margin-top: 30px; } #rowAppPresupuesto .divPaso8 .divDato { margin: 15px; width: calc(25% - 30px); } #rowAppPresupuesto .divPaso8 .divTituloPaso { font-size: 24px; } #rowAppPresupuesto .divPaso8 .divResult { height: 325px; } #rowAppPresupuesto .divPaso8 .divResult .divTitulo { font-size: 24px; height: calc(24px * 3); } #rowAppPresupuesto .divPaso8 .divResult .divImagen.texto { font-size: 18px; } #rowAppPresupuesto .divPaso8 .divResult .divValue { font-size: 18px; } #rowAppPresupuesto .divPaso8 .divDatoPresupuesto .divResult .divLabel { font-size: 18px; } #rowAppPresupuesto .divPaso8 .divDatoPresupuesto .divResult .divFieldPresupuesto .divValue { font-size: 30px; } #rowAppPresupuesto .divPaso8 .divDatoDatosContacto { width: calc(50% - 30px); } } @media (max-width: 1180px) { #rowAppPresupuesto .divPaso8 .divDatos { margin-top: 20px; } #rowAppPresupuesto .divPaso8 .divDato { margin: 10px; width: calc(25% - 20px); } #rowAppPresupuesto .divPaso8 .divTituloPaso { font-size: 20px; } #rowAppPresupuesto .divPaso8 .divResult { padding: 15px 20px; height: 300px; } #rowAppPresupuesto .divPaso8 .divResult .divTitulo { font-size: 20px; height: calc(20px * 3); } #rowAppPresupuesto .divPaso8 .divResult .divImagen.texto { font-size: 16px; } #rowAppPresupuesto .divPaso8 .divResult .divValue { font-size: 16px; } #rowAppPresupuesto .divPaso8 .divDatoPresupuesto .divResult .divLabel { margin-bottom: 10px; font-size: 16px; } #rowAppPresupuesto .divPaso8 .divDatoPresupuesto .divResult .divFieldPresupuesto { margin-top: 20px; } #rowAppPresupuesto .divPaso8 .divDatoPresupuesto .divResult .divFieldPresupuesto .divValue { font-size: 24px; } #rowAppPresupuesto .divPaso8 .divDatoDatosContacto { width: calc(50% - 20px); } #rowAppPresupuesto .divPaso8 .divDatoDatosContacto .divResult .divFieldMedios .divValue { height: 125px; } #rowAppPresupuesto .divPaso8 .divDatoDatosContacto .divResult .divFieldDia .divValue { height: 125px; } } @media (max-width: 980px) { #rowAppPresupuesto .divPaso8 .divDato { margin: 5px 5px 15px 5px; width: calc(33.33% - 10px); } #rowAppPresupuesto .divPaso8 .divResult { padding: 15px; border-radius: 15px; } #rowAppPresupuesto .divPaso8 .divDatoDatosContacto { width: 100%; } } @media (max-width: 780px) { #rowAppPresupuesto .divPaso8 .divDato { width: calc(50% - 10px); } #rowAppPresupuesto .divPaso8 .divDatoDatosContacto { width: 100%; } } @media (max-width: 580px) { #rowAppPresupuesto .divPaso8 .divTituloPaso { font-size: 18px; letter-spacing: normal; } #rowAppPresupuesto .divPaso8 .divResult { height: 285px; } #rowAppPresupuesto .divPaso8 .divResult .divTitulo { font-size: 18px; height: calc(18px * 3); } #rowAppPresupuesto .divPaso8 .divResult .divImagen.texto { font-size: 14px; } #rowAppPresupuesto .divPaso8 .divResult .divValue { font-size: 14px; } #rowAppPresupuesto .divPaso8 .divDatoPresupuesto .divResult .divFieldPresupuesto { margin-top: 15px; } #rowAppPresupuesto .divPaso8 .divDatoPresupuesto .divResult .divFieldPresupuesto .divValue { font-size: 20px; } #rowAppPresupuesto .divPaso8 .divDatoDatosContacto .divResult .divFieldMedios .divValue { height: 115px; } #rowAppPresupuesto .divPaso8 .divDatoDatosContacto .divResult .divFieldDia .divValue { height: 115px; } } @media (max-width: 480px) { #rowAppPresupuesto .divPaso8 .divDatos { margin-top: 10px; } #rowAppPresupuesto .divPaso8 .divDato { width: 100%; } #rowAppPresupuesto .divPaso8 .divTituloPaso { font-size: 20px; } #rowAppPresupuesto .divPaso8 .divResult { border-radius: 10px; height: auto; } #rowAppPresupuesto .divPaso8 .divResult .divTitulo { font-size: 20px; height: calc(20px * 3); } #rowAppPresupuesto .divPaso8 .divResult .divImagen.texto { font-size: 16px; } #rowAppPresupuesto .divPaso8 .divResult .divValue { font-size: 16px; } #rowAppPresupuesto .divPaso8 .divDatoPresupuesto .divResult .divLabel { font-size: 18px; } #rowAppPresupuesto .divPaso8 .divDatoPresupuesto .divResult .divFieldPresupuesto .divValue { font-size: 24px; } #rowAppPresupuesto .divPaso8 .divDatoDatosContacto .divResult .divFieldNombre { width: calc(60% - 5px); } #rowAppPresupuesto .divPaso8 .divDatoDatosContacto .divResult .divFieldTelefono { width: calc(40% - 5px); } #rowAppPresupuesto .divPaso8 .divDatoDatosContacto .divResult .divFieldMedios { width: calc(50% - 5px); } #rowAppPresupuesto .divPaso8 .divDatoDatosContacto .divResult .divFieldMedios .divValue { height: 100px; } #rowAppPresupuesto .divPaso8 .divDatoDatosContacto .divResult .divFieldDia { width: calc(50% - 5px); } #rowAppPresupuesto .divPaso8 .divDatoDatosContacto .divResult .divFieldDia .divValue { height: 100px; } } @media (max-width: 380px) { #rowAppPresupuesto .divPaso8 .divResult .divImagen.texto { font-size: 14px; } #rowAppPresupuesto .divPaso8 .divResult .divLabel { font-size: 14px; } #rowAppPresupuesto .divPaso8 .divResult .divValue { font-size: 14px; } #rowAppPresupuesto .divPaso8 .divDatoPresupuesto .divResult .divLabel { font-size: 16px; } #rowAppPresupuesto .divPaso8 .divDatoPresupuesto .divResult .divFieldPresupuesto .divValue { font-size: 20px; } #rowAppPresupuesto .divPaso8 .divDatoDatosContacto .divResult .divFieldNombre { width: 100%; } #rowAppPresupuesto .divPaso8 .divDatoDatosContacto .divResult .divFieldTelefono { width: 100%; } #rowAppPresupuesto .divPaso8 .divDatoDatosContacto .divResult .divFieldMedios { width: 100%; } #rowAppPresupuesto .divPaso8 .divDatoDatosContacto .divResult .divFieldMedios .divValue { height: auto; } #rowAppPresupuesto .divPaso8 .divDatoDatosContacto .divResult .divFieldDia { width: 100%; } #rowAppPresupuesto .divPaso8 .divDatoDatosContacto .divResult .divFieldDia .divValue { height: auto; } } /***** PASOS - NAV *****/ #rowAppPresupuesto .divNav { display: flex; align-items: center; justify-content: center; } #rowAppPresupuesto .divNav .divBoton { margin: 20px; flex: 0 0 280px; height: 70px; font-size: 30px; color: #000000; background: #FFFFFF; cursor: pointer; } #rowAppPresupuesto .divNav .divBoton { border-radius: 15px; box-shadow: 0px 2px 5px rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; } #rowAppPresupuesto .divNav .divBoton span { padding-bottom: 6px; } #rowAppPresupuesto .divNav .divBoton:hover { transform: scale(1.1); } #rowAppPresupuesto .divNav .divBoton.disable { color: #FFFFFF; background: var(--color2-hex); opacity: 0.5; cursor: not-allowed; } #rowAppPresupuesto .divNav .divBoton.disable:hover { transform: none; } #rowAppPresupuesto .divNav .divBotonAnterior:before { content: ""; margin-right: 10px; width: 50px; height: 50px; display: block; } #rowAppPresupuesto .divNav .divBotonAnterior:before { background-image: url("/wp-content/themes/norteflamenco/images/app-presupuesto/anterior.png"); background-repeat: no-repeat; background-size: contain; } #rowAppPresupuesto .divNav .divBotonAnterior.disable:before { filter: brightness(2) grayscale(1); } #rowAppPresupuesto .divNav .divBotonSiguiente:after { content: ""; margin-left: 10px; width: 100px; height: 50px; display: block; } #rowAppPresupuesto .divNav .divBotonSiguiente:after { background-image: url("/wp-content/themes/norteflamenco/images/app-presupuesto/siguiente.png"); background-repeat: no-repeat; background-size: contain; } #rowAppPresupuesto .divNav .divBotonSiguiente.disable:after { filter: brightness(2) grayscale(1); } #rowAppPresupuesto .divNav .divBotonEnviar { flex: 0 0 480px; color: #FFFFFF; background: var(--color1-hex); } #rowAppPresupuesto .divNav .divBotonEnviar:after { content: ""; margin-left: 10px; width: 100px; height: 50px; display: block; filter: brightness(5) grayscale(1); } #rowAppPresupuesto .divNav .divBotonEnviar:after { background-image: url("/wp-content/themes/norteflamenco/images/app-presupuesto/siguiente.png"); background-repeat: no-repeat; background-size: contain; } @media (max-width: 980px) { #rowAppPresupuesto .divNav .divBoton { margin: 20px; flex: 0 0 260px; height: 65px; font-size: 24px; } #rowAppPresupuesto .divNav .divBoton { border-radius: 10px; } #rowAppPresupuesto .divNav .divBotonAnterior:before { width: 45px; height: 45px; } #rowAppPresupuesto .divNav .divBotonSiguiente:after { width: 90px; height: 45px; } #rowAppPresupuesto .divNav .divBotonEnviar { flex: 0 0 400px; } } @media (max-width: 780px) { #rowAppPresupuesto .divNav .divBoton { margin: 15px 10px; flex: 0 0 200px; height: 60px; font-size: 20px; } #rowAppPresupuesto .divNav .divBoton span { padding-bottom: 4px; } #rowAppPresupuesto .divNav .divBotonAnterior:before { width: 40px; height: 40px; } #rowAppPresupuesto .divNav .divBotonSiguiente:after { width: 80px; height: 40px; } #rowAppPresupuesto .divNav .divBotonEnviar { flex: 0 0 calc(100% - 240px); } #rowAppPresupuesto .divNav .divBotonEnviar:after { width: 80px; height: 40px; } } @media (max-width: 680px) { #rowAppPresupuesto .divNav .divBotonEnviar span { width: 130px; text-align: center; line-height: 100%; } } @media (max-width: 580px) { #rowAppPresupuesto .divNav { padding: 0px 5px; justify-content: space-between; } #rowAppPresupuesto .divNav .divBoton { margin: 15px 0px; flex: 0 0 170px; height: 50px; font-size: 18px; } #rowAppPresupuesto .divNav .divBoton span { padding-bottom: 2px; } #rowAppPresupuesto .divNav .divBotonAnterior:before { margin-right: 5px; width: 35px; height: 35px; } #rowAppPresupuesto .divNav .divBotonSiguiente:after { margin-left: 5px; width: 70px; height: 35px; } #rowAppPresupuesto .divNav .divBotonEnviar { flex: 0 0 calc(100% - 190px); } #rowAppPresupuesto .divNav .divBotonEnviar span { width: 100px; } } @media (max-width: 480px) { #rowAppPresupuesto .divNav .divBoton { flex: 0 0 calc(50% - 10px); } #rowAppPresupuesto .divNav .divBotonAnterior:before { width: 30px; height: 30px; } #rowAppPresupuesto .divNav .divBotonSiguiente:after { width: 60px; height: 30px; } #rowAppPresupuesto .divNav .divBotonEnviar:after { display: none; } #rowAppPresupuesto .divNav .divBotonEnviar span { font-weight: 600; } } @media (max-width: 380px) { #rowAppPresupuesto .divNav { flex-wrap: wrap; justify-content: center; } #rowAppPresupuesto .divNav .divBoton { margin: 15px 10px; flex: 0 0 calc(50% - 20px); } #rowAppPresupuesto .divNav .divBoton span { font-size: 20px; } #rowAppPresupuesto .divNav .divBotonAnterior:before { content: "\f104"; margin-right: 0px; width: 24px; height: 24px; font-size: 30px; font-family: "FontAwesome"; background: none; } #rowAppPresupuesto .divNav .divBotonSiguiente:after { content: "\f105"; margin-left: 0px; width: 24px; height: 24px; font-size: 30px; font-family: "FontAwesome"; background: none; text-align: right; } #rowAppPresupuesto .divNav .divBotonEnviar { flex: 0 0 100%; } #rowAppPresupuesto .divNav .divBotonEnviar span { width: auto; } }