/**
* Estilos generales
*/
html{
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-size-adjust: none;
}
body {
background: #ffffff;
text-size-adjust: none;
/*
IMPORTANTE! Es obligatorio para adaptar el toolbar en el iPhone X y que se visualice correctamente
*/
/*padding-top: constant(safe-area-inset-top);*/ /* iOS 11.0 */
/*padding-top: env(safe-area-inset-top);*/ /* iOS 11.2 */
}
/*
* IMPORTANTE !! Esto es obligatorio para adaptar el total de la pantalla al iPhone X
*/
view-main{
/*padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);*/
}
/* iPhone 8 y SE 2020 */
@media only screen
and (device-width : 375px)
and (device-height : 667px)
and (-webkit-device-pixel-ratio : 2) {
.framework7-root{height:667px}
html.with-statusbar.device-ios .panel, html.with-statusbar.ios:not(.device-ios):not(.device-android) .panel {
height: 100%;
top:0;
}
html.with-statusbar.device-ios .panel, html.with-statusbar.ios:not(.device-ios):not(.device-android) .panel .page {
padding-top: 22px;
}
.navbar {
height: calc(constant(safe-area-inset-bottom) + 65px) !important;
height: calc(env(safe-area-inset-bottom) + 65px) !important;
left: 0;
bottom: 0;
}
.toolbar {
height: calc(constant(safe-area-inset-bottom) + 50px) !important;
height: calc(env(safe-area-inset-bottom) + 50px) !important;
left: 0;
bottom: 0;
}
.ios .toolbar-inner {
padding: 8px 8px;
height: auto;
}
.ios .toolbar.tabbar.button-big {
height: calc(constant(safe-area-inset-bottom) + 68px) !important;
height: calc(env(safe-area-inset-bottom) + 68px) !important;
}
.ios .navbar-inner {
height: 100%;
padding-top: 25px;
}
html.with-statusbar.device-ios .framework7-root, html.with-statusbar.ios:not(.device-ios):not(.device-android) .framework7-root { padding-top: 0;}
html.with-statusbar .statusbar {display: none;}
.page-content {
padding-top: 60px !important;
}
.page-content.login-screen-content{
padding-top: 10px !important;
}
.ios .view-popup, .ios .smart-select-popup{
margin-top: 30px;
height: 95%;
}
}
/* iPhone X y XS */
@media only screen
and (device-width : 375px)
and (device-height : 812px)
and (-webkit-device-pixel-ratio : 3)
and (orientation : landscape) {
.framework7-root{height:375px}
.page-content{padding-left: 44px;padding-right: 44px;}
.navbar {
height: calc(constant(safe-area-inset-bottom) + 22px) !important;
height: calc(env(safe-area-inset-bottom) + 22px) !important;
left: 0;
bottom: 0;
}
.toolbar {
height: calc(constant(safe-area-inset-bottom) + 44px) !important;
height: calc(env(safe-area-inset-bottom) + 44px) !important;
left: 0;
bottom: 0;
}
.ios .toolbar-inner {
padding: 8px 44px;
height: auto;
}
.ios .navbar-inner {
height: 100%;
padding-top: 11px;
}
html.with-statusbar.device-ios .framework7-root, html.with-statusbar.ios:not(.device-ios):not(.device-android) .framework7-root { padding-top: 0;}
html.with-statusbar .statusbar {display: none;}
}
@media only screen
and (device-width : 375px)
and (device-height : 812px)
and (-webkit-device-pixel-ratio : 3)
and (orientation : portrait) {
.framework7-root{height:812px}
html.with-statusbar.device-ios .panel, html.with-statusbar.ios:not(.device-ios):not(.device-android) .panel {
height: 100%;
top:0;
}
html.with-statusbar.device-ios .panel, html.with-statusbar.ios:not(.device-ios):not(.device-android) .panel .page {
padding-top: 22px;
}
.navbar-general {
height: calc(constant(safe-area-inset-bottom) + 44px) !important;
height: calc(env(safe-area-inset-bottom) + 44px) !important;
left: 0;
bottom: 0;
}
.toolbar {
height: calc(constant(safe-area-inset-bottom) + 36px) !important;
height: calc(env(safe-area-inset-bottom) + 36px) !important;
left: 0;
bottom: 0;
}
#toolbarMain .tab-link{
margin-top: -5px;
}
#toolbarMain .tab-link.active {
margin-top: -10px;
z-index: 1000;
}
.ios .toolbar-inner {
padding: 8px 8px;
height: auto;
}
.ios .navbar-general .navbar-inner {
height: 100%;
margin-top: 10px;
padding-top: 15px;
}
.ios #tab-notifications.tab-link.active .badge{
position: absolute;
right: 25%;
top: 8px;
}
.ios .toolbar.tabbar.button-big {
height: calc(constant(safe-area-inset-bottom) + 65px) !important;
height: calc(env(safe-area-inset-bottom) + 65px) !important;
}
.ios .navbar-inner {
height: 100%;
padding-top: 30px;
}
html.with-statusbar.device-ios .framework7-root, html.with-statusbar.ios:not(.device-ios):not(.device-android) .framework7-root { padding-top: 0;}
html.with-statusbar .statusbar {display: none;}
.page-content {
padding-top: 75px !important;
}
.page-content.login-screen-content{
padding-top: 15px !important;
}
}
/* iPhone XR, XS Max y 11 */
@media only screen
and (device-width : 414px)
and (device-height : 896px)
and (-webkit-device-pixel-ratio : 2)
and (orientation : landscape),
screen
and (device-width : 414px)
and (device-height : 896px)
and (-webkit-device-pixel-ratio : 3)
and (orientation : landscape){
.framework7-root{height:414px}
.page-content{padding-left: 44px;padding-right: 44px;}
.navbar {
height: calc(constant(safe-area-inset-bottom) + 22px) !important;
height: calc(env(safe-area-inset-bottom) + 22px) !important;
left: 0;
bottom: 0;
}
.toolbar {
height: calc(constant(safe-area-inset-bottom) + 44px) !important;
height: calc(env(safe-area-inset-bottom) + 44px) !important;
left: 0;
bottom: 0;
}
.ios .toolbar-inner {
padding: 8px 44px;
height: auto;
}
.ios .navbar-inner {
height: 100%;
padding-top: 11px;
}
html.with-statusbar.device-ios .framework7-root, html.with-statusbar.ios:not(.device-ios):not(.device-android) .framework7-root { padding-top: 0;}
html.with-statusbar .statusbar {display: none;}
}
@media only screen
and (device-width : 414px)
and (device-height : 896px)
and (-webkit-device-pixel-ratio : 2)
and (orientation : portrait),
screen
and (device-width : 414px)
and (device-height : 896px)
and (-webkit-device-pixel-ratio : 3)
and (orientation : portrait){
.framework7-root{height:896px}
html.with-statusbar.device-ios .panel, html.with-statusbar.ios:not(.device-ios):not(.device-android) .panel {
height: 100%;
top:0;
}
html.with-statusbar.device-ios .panel, html.with-statusbar.ios:not(.device-ios):not(.device-android) .panel .page {
padding-top: 22px;
}
.navbar-general {
height: calc(constant(safe-area-inset-bottom) + 56px) !important;
height: calc(env(safe-area-inset-bottom) + 56px) !important;
left: 0;
bottom: 0;
}
.toolbar {
height: calc(constant(safe-area-inset-bottom) + 36px) !important;
height: calc(env(safe-area-inset-bottom) + 36px) !important;
left: 0;
bottom: 0;
}
#toolbarMain .tab-link{
margin-top: -5px;
}
#toolbarMain .tab-link.active {
margin-top: -10px;
z-index: 1000;
}
.ios .toolbar-inner {
padding: 8px 8px;
height: auto;
}
.ios .navbar-general .navbar-inner {
height: 100%;
margin-top: 10px;
padding-top: 15px;
}
.ios #tab-notifications.tab-link.active .badge{
position: absolute;
right: 25%;
top: 8px;
}
.ios .toolbar.tabbar.button-big {
height: calc(constant(safe-area-inset-bottom) + 44px) !important;
height: calc(env(safe-area-inset-bottom) + 44px) !important;
}
html.with-statusbar.device-ios .framework7-root, html.with-statusbar.ios:not(.device-ios):not(.device-android) .framework7-root { padding-top: 0;}
html.with-statusbar .statusbar {display: none;}
.page-content {
padding-top: 75px !important;
}
.page-content.login-screen-content{
padding-top: 15px !important;
}
}
/* iPhone 12 y 12 Pro */
@media only screen
and (device-width : 390px)
and (device-height : 844px)
and (-webkit-device-pixel-ratio : 3)
and (orientation : landscape){
.framework7-root{height:390px}
.page-content{padding-left: 44px;padding-right: 44px;}
.navbar {
height: calc(constant(safe-area-inset-bottom) + 22px) !important;
height: calc(env(safe-area-inset-bottom) + 22px) !important;
left: 0;
bottom: 0;
}
.toolbar {
height: calc(constant(safe-area-inset-bottom) + 44px) !important;
height: calc(env(safe-area-inset-bottom) + 44px) !important;
left: 0;
bottom: 0;
}
.ios .toolbar-inner {
padding: 8px 44px;
height: auto;
}
.ios .navbar-inner {
height: 100%;
padding-top: 20px;
}
.ios .view-popup, .ios .smart-select-popup{
margin-top: 35px;
height: 95%;
}
html.with-statusbar.device-ios .framework7-root, html.with-statusbar.ios:not(.device-ios):not(.device-android) .framework7-root { padding-top: 0;}
html.with-statusbar .statusbar {display: none;}
}
@media only screen
and (device-width : 390px)
and (device-height : 844px)
and (-webkit-device-pixel-ratio : 3)
and (orientation : portrait){
.framework7-root{height:844px}
html.with-statusbar.device-ios .panel, html.with-statusbar.ios:not(.device-ios):not(.device-android) .panel {
height: 100%;
top:0;
}
html.with-statusbar.device-ios .panel, html.with-statusbar.ios:not(.device-ios):not(.device-android) .panel .page {
padding-top: 22px;
}
.navbar-general {
height: calc(constant(safe-area-inset-bottom) + 48px) !important;
height: calc(env(safe-area-inset-bottom) + 48px) !important;
left: 0;
bottom: 0;
}
.toolbar {
height: calc(constant(safe-area-inset-bottom) + 44px) !important;
height: calc(env(safe-area-inset-bottom) + 44px) !important;
left: 0;
bottom: 0;
}
#toolbarMain .tab-link{
margin-top: -5px;
}
#toolbarMain .tab-link.active {
margin-top: -10px;
z-index: 1000;
}
.ios .toolbar-inner {
padding: 8px 8px;
height: auto;
}
.ios .navbar-general .navbar-inner {
height: 100%;
margin-top: 10px;
padding-top: 15px;
}
.ios #tab-notifications.tab-link.active .badge{
position: absolute;
right: 25%;
top: 8px;
}
.ios .toolbar.tabbar.button-big {
height: calc(constant(safe-area-inset-bottom) + 22px) !important;
height: calc(env(safe-area-inset-bottom) + 22px) !important;
}
.ios .button.button-big.button-up-toolbar {
position: absolute;
bottom: 10%;
left: 0;
}
.ios .view-popup, .ios .smart-select-popup{
margin-top: 35px;
height: 95%;
}
html.with-statusbar.device-ios .framework7-root, html.with-statusbar.ios:not(.device-ios):not(.device-android) .framework7-root { padding-top: 0;}
html.with-statusbar .statusbar {display: none;}
.page-content {
padding-top: 75px !important;
}
.page-content.login-screen-content{
padding-top: 15px !important;
}
}
/* iPhone 12 Pro Max */
@media only screen
and (device-width : 428px)
and (device-height : 926px)
and (-webkit-device-pixel-ratio : 3)
and (orientation : landscape){
.framework7-root{height:428px}
body {
/*
IMPORTANTE! Es obligatorio para adaptar el toolbar en el iPhone X y que se visualice correctamente
*/
padding-top: constant(safe-area-inset-top); /* iOS 11.0 */
padding-top: env(safe-area-inset-top); /* iOS 11.2 */
}
.ios .view-popup, .ios .smart-select-popup{
margin-top: 35px;
height: 95%;
}
html.with-statusbar.device-ios .framework7-root, html.with-statusbar.ios:not(.device-ios):not(.device-android) .framework7-root { padding-top: 0;}
html.with-statusbar .statusbar {display: none;}
}
@media only screen
and (device-width : 428px)
and (device-height : 926px)
and (-webkit-device-pixel-ratio : 3)
and (orientation : portrait){
.framework7-root{height:926px}
body {
/*
IMPORTANTE! Es obligatorio para adaptar el toolbar en el iPhone X y que se visualice correctamente
*/
padding-top: constant(safe-area-inset-top); /* iOS 11.0 */
padding-top: env(safe-area-inset-top); /* iOS 11.2 */
}
.ios .view-popup, .ios .smart-select-popup{
margin-top: 35px;
height: 95%;
}
html.with-statusbar.device-ios .framework7-root, html.with-statusbar.ios:not(.device-ios):not(.device-android) .framework7-root { padding-top: 0;}
html.with-statusbar .statusbar {display: none;}
.page-content {
padding-top: 75px !important;
}
.page-content.login-screen-content{
padding-top: 15px !important;
}
}
/* iPhone 14 Pro Max */
@media only screen
and (device-width : 430px)
and (device-height : 932px)
and (-webkit-device-pixel-ratio : 3)
and (orientation : landscape){
.framework7-root{height:430px}
body {
/*
IMPORTANTE! Es obligatorio para adaptar el toolbar en el iPhone X y que se visualice correctamente
*/
padding-top: constant(safe-area-inset-top); /* iOS 11.0 */
padding-top: env(safe-area-inset-top); /* iOS 11.2 */
}
.ios .view-popup, .ios .smart-select-popup{
margin-top: 35px;
height: 95%;
}
html.with-statusbar.device-ios .framework7-root, html.with-statusbar.ios:not(.device-ios):not(.device-android) .framework7-root { padding-top: 0;}
html.with-statusbar .statusbar {display: none;}
}
@media only screen
and (device-width : 430px)
and (device-height : 932px)
and (-webkit-device-pixel-ratio : 3)
and (orientation : portrait){
.framework7-root{height:932px}
html.with-statusbar.device-ios .panel, html.with-statusbar.ios:not(.device-ios):not(.device-android) .panel {
height: 100%;
top:0;
}
html.with-statusbar.device-ios .panel, html.with-statusbar.ios:not(.device-ios):not(.device-android) .panel .page {
padding-top: 22px;
}
.navbar-general {
height: calc(constant(safe-area-inset-bottom) + 48px) !important;
height: calc(env(safe-area-inset-bottom) + 48px) !important;
left: 0;
bottom: 0;
}
.toolbar {
height: calc(constant(safe-area-inset-bottom) + 44px) !important;
height: calc(env(safe-area-inset-bottom) + 44px) !important;
left: 0;
bottom: 0;
}
#toolbarMain .tab-link{
margin-top: -5px;
}
#toolbarMain .tab-link.active {
margin-top: -10px;
z-index: 1000;
}
.ios .toolbar-inner {
padding: 8px 8px;
height: auto;
}
.ios .navbar-general .navbar-inner {
height: 100%;
margin-top: 10px;
padding-top: 15px;
}
.ios #tab-notifications.tab-link.active .badge{
position: absolute;
right: 25%;
top: 8px;
}
.ios .toolbar.tabbar.button-big {
height: calc(constant(safe-area-inset-bottom) + 22px) !important;
height: calc(env(safe-area-inset-bottom) + 22px) !important;
}
.ios .button.button-big.button-up-toolbar {
position: absolute;
bottom: 10%;
left: 0;
}
.ios .view-popup, .ios .smart-select-popup{
margin-top: 35px;
height: 95%;
}
html.with-statusbar.device-ios .framework7-root, html.with-statusbar.ios:not(.device-ios):not(.device-android) .framework7-root { padding-top: 0;}
html.with-statusbar .statusbar {display: none;}
.page-content {
padding-top: 75px !important;
}
.page-content.login-screen-content{
padding-top: 15px !important;
}
}
/*iPhone 8 */
/*@media only screen
and (device-width : 375px)
and (device-height : 667px)
and (-webkit-device-pixel-ratio : 2)
and (orientation : portrait) {
.framework7-root{height:667px}
html.with-statusbar.device-ios .panel, html.with-statusbar.ios:not(.device-ios):not(.device-android) .panel {
height: 100%;
top:0;
}
html.with-statusbar.device-ios .panel, html.with-statusbar.ios:not(.device-ios):not(.device-android) .panel .page {
padding-top: 22px;
}
.navbar {
height: calc(constant(safe-area-inset-bottom) + 65px) !important;
height: calc(env(safe-area-inset-bottom) + 65px) !important;
left: 0;
bottom: 0;
}
.toolbar {
height: calc(constant(safe-area-inset-bottom) + 50px) !important;
height: calc(env(safe-area-inset-bottom) + 50px) !important;
left: 0;
bottom: 0;
}
.ios .toolbar-inner {
padding: 8px 8px;
height: auto;
}
.ios .toolbar.tabbar.button-big {
height: calc(constant(safe-area-inset-bottom) + 68px) !important;
height: calc(env(safe-area-inset-bottom) + 68px) !important;
}
.ios .navbar-inner {
height: 100%;
padding-top: 25px;
}
html.with-statusbar.device-ios .framework7-root, html.with-statusbar.ios:not(.device-ios):not(.device-android) .framework7-root { padding-top: 0;}
html.with-statusbar .statusbar {display: none;}
.page-content {
padding-top: 60px !important;
}
.page-content.login-screen-content{
padding-top: 10px !important;
}
}*/
/* iPhone X y XS */
/*@media only screen
and (device-width : 375px)
and (device-height : 812px)
and (-webkit-device-pixel-ratio : 3)
and (orientation : landscape) {
.framework7-root{height:375px}
.page-content{padding-left: 44px;padding-right: 44px;}
.navbar {
height: calc(constant(safe-area-inset-bottom) + 22px) !important;
height: calc(env(safe-area-inset-bottom) + 22px) !important;
left: 0;
bottom: 0;
}
.toolbar {
height: calc(constant(safe-area-inset-bottom) + 44px) !important;
height: calc(env(safe-area-inset-bottom) + 44px) !important;
left: 0;
bottom: 0;
}
.ios .toolbar-inner {
padding: 8px 44px;
height: auto;
}
.ios .navbar-inner {
height: 100%;
padding-top: 11px;
}
html.with-statusbar.device-ios .framework7-root, html.with-statusbar.ios:not(.device-ios):not(.device-android) .framework7-root { padding-top: 0;}
html.with-statusbar .statusbar {display: none;}
}
@media only screen
and (device-width : 375px)
and (device-height : 812px)
and (-webkit-device-pixel-ratio : 3)
and (orientation : portrait) {
.framework7-root{height:812px}
html.with-statusbar.device-ios .panel, html.with-statusbar.ios:not(.device-ios):not(.device-android) .panel {
height: 100%;
top:0;
}
html.with-statusbar.device-ios .panel, html.with-statusbar.ios:not(.device-ios):not(.device-android) .panel .page {
padding-top: 22px;
}
.navbar {
height: calc(constant(safe-area-inset-bottom) + 38px) !important;
height: calc(env(safe-area-inset-bottom) + 38px) !important;
left: 0;
bottom: 0;
}
.toolbar {
height: calc(constant(safe-area-inset-bottom) + 36px) !important;
height: calc(env(safe-area-inset-bottom) + 36px) !important;
left: 0;
bottom: 0;
}
.ios .toolbar-inner {
padding: 8px 8px;
height: auto;
}
.ios .toolbar.tabbar.button-big {
height: calc(constant(safe-area-inset-bottom) + 65px) !important;
height: calc(env(safe-area-inset-bottom) + 65px) !important;
}
.ios .navbar-inner {
height: 100%;
padding-top: 30px;
}
html.with-statusbar.device-ios .framework7-root, html.with-statusbar.ios:not(.device-ios):not(.device-android) .framework7-root { padding-top: 0;}
html.with-statusbar .statusbar {display: none;}
.page-content {
padding-top: 75px !important;
}
.page-content.login-screen-content{
padding-top: 15px !important;
}
}*/
/* iPhone XR, XS Max y 11*/
/*@media only screen
and (device-width : 414px)
and (device-height : 896px)
and (-webkit-device-pixel-ratio : 2)
and (orientation : landscape),
screen
and (device-width : 414px)
and (device-height : 896px)
and (-webkit-device-pixel-ratio : 3)
and (orientation : landscape){
.framework7-root{height:414px}
.page-content{padding-left: 44px;padding-right: 44px;}
.navbar {
height: calc(constant(safe-area-inset-bottom) + 22px) !important;
height: calc(env(safe-area-inset-bottom) + 22px) !important;
left: 0;
bottom: 0;
}
.toolbar {
height: calc(constant(safe-area-inset-bottom) + 44px) !important;
height: calc(env(safe-area-inset-bottom) + 44px) !important;
left: 0;
bottom: 0;
}
.ios .toolbar-inner {
padding: 8px 44px;
height: auto;
}
.ios .navbar-inner {
height: 100%;
padding-top: 11px;
}
html.with-statusbar.device-ios .framework7-root, html.with-statusbar.ios:not(.device-ios):not(.device-android) .framework7-root { padding-top: 0;}
html.with-statusbar .statusbar {display: none;}
}
@media only screen
and (device-width : 414px)
and (device-height : 896px)
and (-webkit-device-pixel-ratio : 2)
and (orientation : portrait),
screen
and (device-width : 414px)
and (device-height : 896px)
and (-webkit-device-pixel-ratio : 3)
and (orientation : portrait){
.framework7-root{height:896px}
html.with-statusbar.device-ios .panel, html.with-statusbar.ios:not(.device-ios):not(.device-android) .panel {
height: 100%;
top:0;
}
html.with-statusbar.device-ios .panel, html.with-statusbar.ios:not(.device-ios):not(.device-android) .panel .page {
padding-top: 22px;
}
.navbar {
height: calc(constant(safe-area-inset-bottom) + 38px) !important;
height: calc(env(safe-area-inset-bottom) + 38px) !important;
left: 0;
bottom: 0;
}
.toolbar {
height: calc(constant(safe-area-inset-bottom) + 36px) !important;
height: calc(env(safe-area-inset-bottom) + 36px) !important;
left: 0;
bottom: 0;
}
.ios .toolbar-inner {
padding: 8px 8px;
height: auto;
}
.ios .toolbar.tabbar.button-big {
height: calc(constant(safe-area-inset-bottom) + 65px) !important;
height: calc(env(safe-area-inset-bottom) + 65px) !important;
}
.ios .navbar-inner {
height: 100%;
padding-top: 30px;
}
html.with-statusbar.device-ios .framework7-root, html.with-statusbar.ios:not(.device-ios):not(.device-android) .framework7-root { padding-top: 0;}
html.with-statusbar .statusbar {display: none;}
.page-content {
padding-top: 75px !important;
}
.page-content.login-screen-content{
padding-top: 15px !important;
}
}*/
/* iPhone 12, 12 Pro*/
/*@media only screen
and (device-width : 390px)
and (device-height : 844px)
and (-webkit-device-pixel-ratio : 3)
and (orientation : landscape){
.framework7-root{height:390px}
.page-content{padding-left: 44px;padding-right: 44px;}
.navbar {
height: calc(constant(safe-area-inset-bottom) + 22px) !important;
height: calc(env(safe-area-inset-bottom) + 22px) !important;
left: 0;
bottom: 0;
}
.toolbar {
height: calc(constant(safe-area-inset-bottom) + 44px) !important;
height: calc(env(safe-area-inset-bottom) + 44px) !important;
left: 0;
bottom: 0;
}
.ios .toolbar-inner {
padding: 8px 44px;
height: auto;
}
.ios .navbar-inner {
height: 100%;
padding-top: 11px;
}
html.with-statusbar.device-ios .framework7-root, html.with-statusbar.ios:not(.device-ios):not(.device-android) .framework7-root { padding-top: 0;}
html.with-statusbar .statusbar {display: none;}
}
@media only screen
and (device-width : 390px)
and (device-height : 844px)
and (-webkit-device-pixel-ratio : 3)
and (orientation : portrait){
.framework7-root{height:844px}
html.with-statusbar.device-ios .panel, html.with-statusbar.ios:not(.device-ios):not(.device-android) .panel {
height: 100%;
top:0;
}
html.with-statusbar.device-ios .panel, html.with-statusbar.ios:not(.device-ios):not(.device-android) .panel .page {
padding-top: 22px;
}
.navbar {
height: calc(constant(safe-area-inset-bottom) + 38px) !important;
height: calc(env(safe-area-inset-bottom) + 38px) !important;
left: 0;
bottom: 0;
}
.toolbar {
height: calc(constant(safe-area-inset-bottom) + 36px) !important;
height: calc(env(safe-area-inset-bottom) + 36px) !important;
left: 0;
bottom: 0;
}
.ios .toolbar-inner {
padding: 8px 8px;
height: auto;
}
.ios .toolbar.tabbar.button-big {
height: calc(constant(safe-area-inset-bottom) + 56px) !important;
height: calc(env(safe-area-inset-bottom) + 56px) !important;
}
.ios .navbar-inner {
height: 100%;
padding-top: 30px;
}
html.with-statusbar.device-ios .framework7-root, html.with-statusbar.ios:not(.device-ios):not(.device-android) .framework7-root { padding-top: 0;}
html.with-statusbar .statusbar {display: none;}
.page-content {
padding-top: 75px !important;
}
.page-content.login-screen-content{
padding-top: 15px !important;
}
}*/
/* iPhone 14 Pro, 15 y 16 */
@media only screen
and (device-width : 393px)
and (device-height : 852px)
and (-webkit-device-pixel-ratio : 3)
and (orientation : landscape){
.framework7-root{height:393px}
.page-content{padding-left: 44px;padding-right: 44px;}
.navbar {
height: calc(constant(safe-area-inset-bottom) + 22px) !important;
height: calc(env(safe-area-inset-bottom) + 22px) !important;
left: 0;
bottom: 0;
}
.toolbar {
height: calc(constant(safe-area-inset-bottom) + 44px) !important;
height: calc(env(safe-area-inset-bottom) + 44px) !important;
left: 0;
bottom: 0;
}
.ios .toolbar-inner {
padding: 8px 44px;
height: auto;
}
.ios .navbar-inner {
height: 100%;
padding-top: 20px;
}
.ios .view-popup, .ios .smart-select-popup{
margin-top: 35px;
height: 95%;
}
html.with-statusbar.device-ios .framework7-root, html.with-statusbar.ios:not(.device-ios):not(.device-android) .framework7-root { padding-top: 0;}
html.with-statusbar .statusbar {display: none;}
}
@media only screen
and (device-width : 393px)
and (device-height : 852px)
and (-webkit-device-pixel-ratio : 3)
and (orientation : portrait){
.framework7-root{height:852px}
html.with-statusbar.device-ios .panel, html.with-statusbar.ios:not(.device-ios):not(.device-android) .panel {
height: 100%;
top:0;
}
html.with-statusbar.device-ios .panel, html.with-statusbar.ios:not(.device-ios):not(.device-android) .panel .page {
padding-top: 22px;
}
.navbar-general {
height: calc(constant(safe-area-inset-bottom) + 48px) !important;
height: calc(env(safe-area-inset-bottom) + 48px) !important;
left: 0;
bottom: 0;
}
.toolbar {
height: calc(constant(safe-area-inset-bottom) + 44px) !important;
height: calc(env(safe-area-inset-bottom) + 44px) !important;
left: 0;
bottom: 0;
}
#toolbarMain .tab-link{
margin-top: -5px;
}
#toolbarMain .tab-link.active {
margin-top: -10px;
z-index: 1000;
}
.ios .toolbar-inner {
padding: 8px 8px;
height: auto;
}
.ios .navbar-general .navbar-inner {
height: 100%;
margin-top: 10px;
padding-top: 15px;
}
.ios #tab-notifications.tab-link.active .badge{
position: absolute;
right: 25%;
top: 8px;
}
.ios .toolbar.tabbar.button-big {
height: calc(constant(safe-area-inset-bottom) + 22px) !important;
height: calc(env(safe-area-inset-bottom) + 22px) !important;
}
.ios .button.button-big.button-up-toolbar {
position: absolute;
bottom: 10%;
left: 0;
}
.ios .view-popup, .ios .smart-select-popup{
margin-top: 35px;
height: 95%;
}
html.with-statusbar.device-ios .framework7-root, html.with-statusbar.ios:not(.device-ios):not(.device-android) .framework7-root { padding-top: 0;}
html.with-statusbar .statusbar {display: none;}
.page-content {
padding-top: 75px !important;
}
.page-content.login-screen-content{
padding-top: 15px !important;
}
}
/***************************************************/
/********* COMPATIBILIDAD ANDROID 14 Y 15 **********/
/***************************************************/
/* Altura conocida del toolbar (ajusta si difiere en tu app) */
:root {
--toolbar-h: 56px;
}
/* Bump inferior por defecto (se recalcula por JS) */
:root {
--bottom-bump: 12px;
}
/* ===== NAVBAR (arriba) / TOOLBAR (abajo) ===== */
body.androidfix {
padding-top: 44px;
background-color: #150D64; /* El mismo color azul de tu navbar */
box-sizing: border-box;
}
/* Empuje inferior para toolbar/área de gestos */
body.androidfix .toolbar {
margin-bottom: max(env(safe-area-inset-bottom, 0px), var(--bottom-bump));
}
/* ===== Actions / Sheets de Framework7 ===== */
body.androidfix .actions-modal,
body.androidfix .actions {
padding-bottom: max(env(safe-area-inset-bottom, 0px), var(--bottom-bump));
max-height: calc(100svh - max(env(safe-area-inset-bottom, 0px), var(--bottom-bump)));
}
body.androidfix .actions-modal .actions-group:last-child,
body.androidfix .actions .actions-group:last-child,
body.androidfix .actions-modal .actions-button:last-child,
body.androidfix .actions .actions-button:last-child,
body.androidfix .actions-modal .actions-label:last-child,
body.androidfix .actions .actions-label:last-child {
margin-bottom: max(env(safe-area-inset-bottom, 0px), var(--bottom-bump));
}
body.androidfix .sheet-modal {
padding-bottom: max(env(safe-area-inset-bottom, 0px), var(--bottom-bump));
max-height: calc(100svh - max(env(safe-area-inset-bottom, 0px), var(--bottom-bump)));
}
body.androidfix .sheet-modal .sheet-modal-inner,
body.androidfix .sheet-modal .page-content {
padding-bottom: max(env(safe-area-inset-bottom, 0px), var(--bottom-bump));
}
/* ===== Botón flotante ===== */
body.androidfix .floating-button {
position: fixed;
right: 16px;
bottom: calc(var(--toolbar-h, 56px) + max(env(safe-area-inset-bottom, 0px), var(--bottom-bump, 16px)) + 12px);
z-index: 11000;
}
/* ===== Notificaciones F7 arriba del navbar ===== */
body.androidfix .notifications,
body.androidfix .notification-container {
position: fixed;
top: calc(max(env(safe-area-inset-top, 0px), 44px) + 8px);
left: env(safe-area-inset-left, 0px);
right: env(safe-area-inset-right, 0px);
z-index: 11010;
}
body.androidfix .notification,
body.androidfix .notifications .notification {
margin-top: 8px;
}
/* =========================================================
REGLAS ESPECÍFICAS: TELÉFONO vs TABLET
========================================================= */
/* ===== TELÉFONO: View popup con navbar-fixed (EXCEPTO smart-select) ===== */
body.androidfix-phone .view.view-popup.navbar-fixed:not(.smart-select-popup) {
position: fixed;
left: 0;
right: 0;
top: calc(max(env(safe-area-inset-top, 0px), 44px));
height: calc(100svh - max(env(safe-area-inset-top, 0px), 44px));
will-change: transform, top, height;
}
/* Variante cuando va como .popup > .view.view-popup (EXCEPTO smart-select) */
body.androidfix-phone .popup:not(.smart-select-popup) .view.view-popup.navbar-fixed {
top: calc(max(env(safe-area-inset-top, 0px), 44px));
height: calc(100svh - max(env(safe-area-inset-top, 0px), 44px));
}
/* ===== TELÉFONO: Popups de tipo formulario (EXCEPTO smart-select) ===== */
body.androidfix-phone .popup.popup-form:not(.smart-select-popup) {
position: fixed;
left: 0;
right: 0;
top: calc(max(env(safe-area-inset-top, 0px), 44px));
height: calc(100svh - max(env(safe-area-inset-top, 0px), 44px));
will-change: transform, top, height;
}
/* ===== TELÉFONO: SMART-SELECT - Reglas específicas ===== */
/* Smart-select popup: ocupa toda la pantalla desde arriba */
body.androidfix-phone .popup.smart-select-popup {
height: 100vh !important;
padding-top: max(env(safe-area-inset-top, 0px), 44px) !important;
box-sizing: border-box !important;
}
/* View dentro del smart-select */
body.androidfix-phone .popup.smart-select-popup .view {
height: 100%;
}
/* Navbar del smart-select: visible en la parte superior */
body.androidfix-phone .popup.smart-select-popup .navbar {
position: relative;
top: 0;
}
/* Page-content del smart-select: altura correcta */
body.androidfix-phone .popup.smart-select-popup .page-content {
height: calc(100% - 44px); /* 44px = altura navbar */
}
/* ===== TABLET: deja a F7 controlar tamaño/posición ===== */
body.androidfix-tablet .view.view-popup.navbar-fixed,
body.androidfix-tablet .popup.popup-form {
top: 0;
height: 100%;
}
body.androidfix-tablet .popup.smart-select-popup {
top: 0;
height: 100%;
padding-top: 0;
}
/* ===== Botones encima del toolbar ===== */
body.androidfix .button-up-toolbar,
body.androidfix button.button-up-toolbar {
position: fixed !important;
bottom: calc(var(--toolbar-h, 56px) + max(env(safe-area-inset-bottom, 0px), var(--bottom-bump)) + 1px) !important;
left: 0;
right: 0;
margin: 0 auto;
z-index: 10500;
}
/* Si el botón tiene un ancho específico y necesita centrarse */
body.androidfix .button-up-toolbar.button-big,
body.androidfix button.button-up-toolbar.button-big {
max-width: calc(100% - 32px);
width: auto;
}
.statusbar-overlay{
background: #FFFFFF;
color:white;
}
.corporativo {
/*color: #011680;*/
color: #fe4646; /* rojo de onap */
}
.loader-background {
width: 100%;
height: 100%;
position: relative; /* Cambiamos de absolute a relative */
background-color: #eaeaea4a;
z-index: 9999;
}
.loader {
border: 8px solid #f3f3f3;
border-radius: 50%;
border-top: 8px solid #150D64;
width: 100px;
height: 100px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
position:absolute;
/* Ponemos el valor de left, bottom, right y top en 0 */
left: 0;
bottom: 0;
right: 0;
top: 0%;
margin: auto; /* Centramos vertical y horizontalmente */
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Safari */
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
.page-content{
overflow-x: hidden;
overflow-y: auto;
}
iframe{
height: 0;
max-height: 100%;
max-width: 100%;
min-height: 100%;
min-width: 100%;
width: 0;
}
.bg-white {
background-color: #FFFFFF;
}
.bg-corporativo {
background-color: #150D64;
/*background-color: #fe4646;*/ /* rojo de onap */
}
button.corporativo, .button.corporativo {
background-color: #150D64;
/*background-color: #fe4646;*/ /* rojo de onap */
color: #ffffff;
border: 1px solid #150D64;
/*border: 1px solid #fe4646;*/ /* rojo de onap */
height: 48px;
}
.buttons-row button, .buttons-row .button {
border: 1px solid #150D64;
/*border: 1px solid #fe4646;*/ /* rojo de onap */
background-color: transparent;
color: #150D64;
/*color: #fe4646;*/ /*rojo de onap*/
}
.buttons-row button.active, .button.active {
background-color: #150D64;
color: #fff;
}
.hide {
display: none !important;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.text-bold {
font-weight: bold;
}
.text-normal {
font-weight: normal;
}
.capitalize {
text-transform: capitalize !important;
}
.id-title{
font-size: 24px;
}
.list-block {
font-size: inherit;
}
.content-block {
color: #555;
}
.content-block .control-label {
color: #555;
font-weight: bold;
}
.inline {
display: inline-block;
}
.pull-right {
float: right;
}
.pull-left {
float: left;
}
.clear {
clear: both;
}
.data-table {
/*border-collapse: collapse;*/
}
form .item-input span.readonly {
opacity: 0.7;
}
form .content-block{
margin: 15px 0;
}
form.list-block{
margin: 15px 0;
}
form .list-block textarea {
border: 1px solid #c8c7cc;
background-color: #fff;
border-radius: 3px;
font-size: 12px;
padding: 6px 8px;
}
form .required::placeholder {
color: red;
opacity: 1; /* Firefox */
}
.standard-input{
border: 1px solid #ccc;
width: 70%;
padding: 2px;
}
.alert-messages .badge{
position: absolute;
right: 2%;
top: 2px;
font-family: 'Nunito Sans', sans-serif;
font-size: 12px;
line-height: 15px;
padding: 1px 5px;
}
@media screen and (max-height: 1366px) {
form .card-header{
min-height: 52px;
font-size: 22px;
}
form .smart-select{
min-height: 52px;
font-size: 22px;
}
form .list-block textarea {
font-size: 17px;
}
form.searchbar {
margin-top:10px;
}
.standard-input{
line-height: 38px;
font-size: 22px;
}
button.corporativo, .button.corporativo, button.secundary {
font-size: 24px;
}
button.corporativo, .button.corporativo {
height: 70px;
line-height: 70px;
}
.toolbar.tabbar.button-big {
height: 100px!important;
}
.toolbar.tabbar .row .button.secundary {
height: 90px!important;
}
}
@media screen and (max-height: 1024px) {
form .card-header{
min-height: 52px;
font-size: 22px;
}
form .smart-select{
min-height: 52px;
font-size: 22px;
}
form .list-block textarea {
font-size: 17px;
}
form.searchbar {
margin-top:10px;
}
.standard-input{
line-height: 38px;
font-size: 22px;
}
button.corporativo, .button.corporativo, button.secundary {
font-size: 24px;
}
button.corporativo, .button.corporativo {
height: 70px;
line-height: 70px;
}
.toolbar.tabbar.button-big {
height: 80px!important;
}
.toolbar.tabbar .row .button.secundary {
height: 70px!important;
}
}
@media screen and (max-height: 992px) {
form .card-header{
min-height: 52px;
font-size: 22px;
}
form .smart-select{
min-height: 52px;
font-size: 22px;
}
form .list-block textarea {
font-size: 17px;
}
form.searchbar {
margin-top:10px;
}
.standard-input{
line-height: 38px;
font-size: 20px;
}
button.corporativo, .button.corporativo, button.secundary {
font-size: 18px;
}
button.corporativo, .button.corporativo {
height: 60px;
line-height: 60px;
}
.toolbar.tabbar.button-big {
height: 70px!important;
}
.toolbar.tabbar .row .button.secundary {
height: 60px!important;
}
}
@media screen and (max-height : 820px) {
form .card-header{
min-height: 42px;
font-size: 16px;
}
form .smart-select{
min-height: 42px;
font-size: 16px;
}
form .list-block textarea {
font-size: 14px;
}
.standard-input{
line-height: 24px;
font-size: 16px;
}
button.corporativo, .button.corporativo, button.secundary {
font-size: 18px;
}
button.corporativo, .button.corporativo {
height: 49px;
line-height: 49px;
}
.toolbar.tabbar.button-big {
height: 70px!important;
}
.toolbar.tabbar .row .button.secundary {
height: 49px!important;
}
}
@media screen and (max-height: 670px) {
form .card-header{
min-height: 42px;
font-size: 16px;
}
form .smart-select{
min-height: 42px;
font-size: 16px;
}
form .list-block textarea {
font-size: 14px;
}
.standard-input{
line-height: 24px;
font-size: 16px;
}
button.corporativo, .button.corporativo, button.secundary {
font-size: 18px;
}
button.corporativo, .button.corporativo {
height: 49px;
line-height: 49px;
}
.toolbar.tabbar.button-big {
height: 56px!important;
}
.toolbar.tabbar .row .button.secundary {
height: 49px!important;
}
}
@media screen and (max-height: 600px) {
form .card-header{
min-height: 42px;
font-size: 16px;
}
form .smart-select{
min-height: 42px;
font-size: 16px;
}
form .list-block textarea {
font-size: 14px;
}
.standard-input{
line-height: 24px;
font-size: 16px;
}
button.corporativo, .button.corporativo, button.secundary {
font-size: 17px;
}
button.corporativo, .button.corporativo {
height: 48px;
line-height: 48px;
}
.toolbar.tabbar.button-big {
height: 55px!important;
}
.toolbar.tabbar .row .button.secundary {
height: 48px!important;
}
/*.list-block .item-content{
height: 38px;
min-height: 38px;
}*/
}
.pdfobject-container { height: 30rem; border: 1rem solid rgba(0,0,0,.1); }
.relative {
position: relative;
}
.block-separator{
margin-bottom:5px;
}
.ion-icon-large {
font-size: 22px;
}
.line-icon-large {
font-size: 22px;
vertical-align: middle;
}
.toolbar .line-icon-large{
font-size: 26px;
}
.datePicker{
background: #FFFFFF;
}
.text-logged{
text-align:right;
margin-right:3px;
}
.text-user-logged{
color:#2E64FE;
}
.loader-center{
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
font-size:60px;
}
.selectorDate i{
font-size:48px;
}
.selectorDate input[type="date"]{
text-align:center;
min-height:35px;
font-size: 36px;
}
.push-notification{
background:#555555;
color:#000000;
}
/*
* Estilos generales, para tablet
*/
/*
* Estilos generales, para tablet
*/
@media screen and (max-width: 1024px) {
body{
font-size:20px;
}
.button {
font-size:17px;
line-height: 52px;
height: 54px;
}
.button.button-big {
font-size: 22px;
line-height: 66px;
height: 66px;
}
.tab-link.button{
line-height: 57px;
}
.tab-link.button i{
font-size: 42px;
}
.list-block.media-list .item-title, .list-block li.media-item .item-title, .list-block .item-after {
font-size: 24px;
}
.item-link .item-content .item-inner .item-title{
font-size:24px;
max-width: 500px;
}
.list-block .item-subtitle {
font-size:20px;
}
.floating-button{
bottom: 100px!important;
width: 70px!important;
height: 70px!important;
font-size:30px!important;
z-index:90;
}
.badge{
font-size:22px;
}
}
@media screen and (max-width: 992px) {
body{
font-size:18px;
}
.button {
font-size:17px;
line-height: 46px;
height: 48px;
}
.button.button-big {
font-size: 18px;
line-height: 52px;
height: 54px;
}
.button.button-big.button-up-toolbar {
position: absolute;
bottom: 5%;
left: 0;
}
.tab-link.button{
line-height: 43px;
}
.tab-link.button i{
font-size: 28px;
}
.list-block.media-list .item-title, .list-block li.media-item .item-title, .list-block .item-after {
font-size: 16px;
}
.item-link .item-content .item-inner .item-title{
font-size:16px;
max-width: 500px;
}
.list-block .item-subtitle {
font-size:16px;
}
.text-logged{
font-size: 22px;
}
.input-group .buttonsupdown{
text-align: center;
width: 91%;
padding-top: 5px;
margin-left: 5px;
font-size: 32px;
}
input[type = "date"],input[type = "time"],input[type = "datetime"]{
min-height: 52px;
font-size: 24px;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
}
.ion.lg{
font-size:22px;
}
.hidden-phone{
display:table-cell;
}
.label-checkbox{
font-size: 20px;
}
.floating-button{
bottom: 90px!important;
width: 70px!important;
height: 70px!important;
font-size:20px!important;
z-index:90;
}
.smart-select .item-content .item-inner .item-after{
width: 500px;
}
.badge{
font-size:16px;
}
}
@media screen and (max-height: 900px) {
body{
font-size:16px;
}
.floating-button{
bottom: 95px!important;
width: 70px!important;
height: 70px!important;
font-size:20px!important;
z-index:90;
}
.smart-select .item-content .item-inner .item-after{
width: 350px;
}
}
@media screen and (max-height: 850px) {
body{
font-size:15px;
}
.floating-button{
bottom: 80px!important;
width: 70px!important;
height: 70px!important;
font-size:18px!important;
z-index:90;
}
.smart-select .item-content .item-inner .item-after{
width: 350px;
}
}
@media screen and (max-height: 700px) {
body{
font-size:15px;
}
.button {
font-size:16px;
height: 30px;
}
.button.button-big {
font-size: 17px;
line-height: 44px;
height: 44px;
}
.button.button-big.button-up-toolbar {
position: absolute;
bottom: 8%;
left: 0;
}
.tab-link.button{
line-height: 32px;
}
.tab-link.button i{
font-size: 22px;
margin-top: 1px;
}
.buttons-row .button{
height: 36px;
}
.list-block.media-list .item-title, .list-block li.media-item .item-title, .list-block .item-after {
font-size: 14px;
}
.list-block .item-subtitle {
font-size:13px;
}
.text-logged{
font-size: 17px;
}
.input-group .buttonsupdown{
text-align: center;
width: 91%;
padding-top: 5px;
margin-left: 5px;
font-size: 24px;
}
input[type = "date"],input[type = "time"],input[type = "datetime"]{
min-height: 35px;
font-size: 16px;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
}
.ion.lg{
font-size:12px;
}
.hidden-phone{
display:none;
}
.label-checkbox{
font-size: 14px;
}
.item-link .item-content .item-inner .item-title{
font-size:14px;
max-width: 250px;
}
.floating-button{
bottom: 70px;
width: 70px!important;
height: 70px!important;
font-size:16px!important;
z-index:90;
}
.smart-select .item-content .item-inner .item-after{
width: 200px;
}
.smart-select .item-phone_line-defecto .item-inner .item-after{
width: 250px!important;
}
.badge{
font-size:13px;
}
}
@media screen and (max-width: 350px) {
body{
font-size:15px;
}
.tab-link.button{
line-height: 28px;
}
.tab-link.button i{
font-size: 22px;
margin-top: 1px;
}
.buttons-row .button{
height: 32px;
}
.item-link .item-content .item-inner .item-title{
font-size:14px;
max-width: 200px;
}
.smart-select .item-content .item-inner .item-after{
width: 300px;
}
.smart-select .item-phone_line-defecto .item-inner .item-after{
width: 230px!important;
}
.badge{
font-size:13px;
}
}
/* ========================================================================== */
/**
* Landing
*/
.view[data-page="landing"] .navbar {
display: none;
}
.page[data-page="landing"] {
/*background-color: #011680;*/
/*background-color: #fe4646;*/ /* rojo de onap */
}
/* ========================================================================== */
/**
* Login
*/
.view[data-page="login"] .navbar {
display: none;
}
@media screen and (max-width: 1024px) {
.page-content.login-screen-content.login {
background: url('../img/login-background-tablet.png') no-repeat;background-size: 100%;
}
.page-content.login-screen-content.register {
background: url('../img/login-background-tablet.png') no-repeat;background-size: 100%;
}
.logo {
margin: 0 auto;
/*width: 220px;*/
}
.logo img {
width: auto;
}
.checkRememberPassword{
font-size:18px;
top:5px;
width: 400px!important;
left: 10px;
}
}
@media screen and (max-width: 992px) {
.page-content.login-screen-content.login {
background: url('../img/login-background-tablet.png') no-repeat;background-size: 100%;
}
.page-content.login-screen-content.register {
background: url('../img/login-background-tablet.png') no-repeat;background-size: 100%;
}
.logo {
margin: 0 auto;
/*width: 220px;*/
}
.logo img {
width: auto;
}
.checkRememberPassword{
font-size:18px;
top:5px;
width: 400px!important;
left: 10px;
}
}
@media screen and (max-width: 600px) {
.page-content.login-screen-content.login {
background: url('../img/login-background.png') no-repeat;background-size: 100%;
}
.page-content.login-screen-content.register {
background: url('../img/login-background.png') no-repeat;background-size: 100%;
}
.logo {
margin: 0 auto;
/*width: 90px;*/
}
.logo img {
width: auto;
max-height: 120px;
}
.checkRememberPassword{
font-size:14px;
top:5px;
width: 400px!important;
left: 10px;
}
}
.logo {
text-align: center;
}
.titleModeApp {
margin: 0 auto;
width: 180px;
color: #fe4646;
}
/*#form-login input:read-only {
background-color: yellow;
}
#form-login input:-moz-read-only {
background-color: yellow;
}*/
/* ========================================================================== */
/**
* Token
*/
.view[data-page="token"] .navbar {
display: none;
}
#form-token .item-media {
font-size: 17px;
min-width: 15px;
}
#form-token .item-input {
margin-left: 15px;
}
/* ========================================================================== */
/**
* Mode use App
*/
.view[data-page="mode"] .navbar {
display: none;
}
#form-mode .item-media {
font-size: 17px;
min-width: 15px;
}
#form-mode .item-input {
margin-left: 15px;
}
/* ========================================================================== */
/**
* Login PIN
*/
@media screen and (max-width: 1024px) {
.pin-row {
text-align: center;
width: 40%;
margin: 0 auto;
margin-top:150px;
}
.pin-row-2 {
text-align: center;
width: 40%;
margin: 0 auto;
margin-top:10px;
}
}
@media screen and (max-width: 992px) {
.pin-row {
text-align: center;
width: 40%;
margin: 0 auto;
margin-top:150px;
}
.pin-row-2 {
text-align: center;
width: 40%;
margin: 0 auto;
margin-top:10px;
}
}
/* On screens that are 600px or less, set the background color to olive */
@media screen and (max-width: 600px) {
.pin-row {
text-align: center;
width: 70%;
margin: 0 auto;
/*margin-top:120px;*/
}
.pin-row-2 {
text-align: center;
width: 70%;
margin: 0 auto;
margin-top:10px;
}
}
.pin-code {
border-bottom: 2px solid black;
width:60px;
height:70px;
font-size: 62px;
font-weight: bold;
}
.pin-button {
border: 1px solid black;
width: 60px;
height: 60px;
border-radius: 5px;
}
.pin-button button {
font-size: 36px;
font-weight: bold;
margin: 0 auto;
width: 100%;
height: 100%;
border-color: #1C1C1C;
color: #1C1C1C;
}
/* ========================================================================== */
/**
* Navbar
*/
.navbar {
border-bottom: none;
background-color: #150D64;
/*background-color: #fe4646;*/ /* rojo de onap */
color: #ffffff;
}
@media screen and (max-width: 992px) {
.navbar, .toolbar {
font-size: 26px;
height: 54px;
}
}
@media screen and (max-width: 600px) {
.navbar, .toolbar {
font-size: 17px;
height: 44px;
}
}
.navbar a.link {
color: #ffffff;
}
.navbar a.link i {
font-size: 24px;
}
.navbar span.logo {
display: block;
height: 40px;
/*width: 60%;*/
width: auto;
}
.navbar span.logo > img {
/*width: 100%;*/
height: 40px;
}
.navbar .titulo {
text-transform: uppercase;
font-size: 22px;
/*font-weight: bold;*/
line-height: 1.1;
}
/* ========================================================================== */
/**
* Preloader
*/
.content-block.loader {
margin-top: 50px;
}
span.preloader {
width:42px;
height:42px;
left: 50%;
position: relative;
}
/* ========================================================================== */
/**
* Páginas (page)
*/
.page {
background: #fff;
/*background-color: #efeff4;*/
/*background-color: #f6f6ef;*/
/*background-color: #f7f7f8;*/
color: #363636;
}
.page-title {
color: #555;
font-size: 14px;
line-height: 1.1;
padding: 20px 15px;
position: relative;
text-transform: uppercase;
white-space: nowrap;
text-overflow: ellipsis;
font-weight: bold;
}
@media screen and (max-width: 992px) {
.page-title {
font-size: 20px;
}
}
@media screen and (max-width: 600px) {
.page-title {
font-size: 14px;
}
}
.page-no-content {
color: #555;
padding: 0 15px;
}
.page.toolbar-fixed {
padding-bottom: 64px;
}
/* ========================================================================== */
/**
* Toolbar
*/
.toolbar.tabbar .row {
width: 100%;
}
.toolbar.tabbar .row .button {
width: 100%;
}
.toolbar.tabbar.button-big {
height: 64px;
}
/* ========================================================================== */
/**
* Botones
*/
.button {
border-radius: 3px;
}
.col-100 .button {
width: 100%;
}
.content-block .button {
width: 100%;
}
.button.button-fill.bg-purple, .button.button-fill.color-purple {
background: #9c27b0 none repeat scroll 0 0;
color: #fff;
}
.button-action .row .button{
width: 100%;
}
/* ========================================================================== */
/*
Android optimization hacks
*/
html.android .navbar-from-right-to-center .left.sliding .back.link .icon,
html.android .navbar-from-center-to-right .left.sliding .back.link .icon,
html.android .navbar-from-center-to-left .left.sliding .back.link .icon,
html.android .navbar-from-left-to-center .left.sliding .back.link .icon {
-webkit-transition-duration: 200ms;
transition-duration: 200ms;
}
html.android .navbar-from-right-to-center .sliding,
html.android .navbar-from-center-to-right .sliding,
html.android .navbar-from-center-to-left .sliding,
html.android .navbar-from-left-to-center .sliding {
-webkit-transition-duration: 200ms;
transition-duration: 200ms;
}
html.android .page-from-right-to-center {
-webkit-animation: pageFromRightToCenterDegrade 200ms forwards;
animation: pageFromRightToCenterDegrade 200ms forwards;
}
html.android .page-from-center-to-right {
-webkit-animation: pageFromCenterToRightDegrade 200ms forwards;
animation: pageFromCenterToRightDegrade 200ms forwards;
}
html.android .page-on-left {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
html.android .page-from-center-to-left {
-webkit-animation: emptyAnimation 50ms forwards;
animation: emptyAnimation 50ms forwards;
}
html.android .page-from-left-to-center {
-webkit-animation: emptyAnimation 50ms forwards;
animation: emptyAnimation 50ms forwards;
}
@-webkit-keyframes emptyAnimation {
to {
opacity: 1;
}
}
@keyframes emptyAnimation {
to {
opacity: 1;
}
}
html.android .label-switch input[type="checkbox"] + .checkbox {
-webkit-transition-duration: 0ms;
transition-duration: 0ms;
}
html.android .label-switch input[type="checkbox"] + .checkbox:before {
-webkit-transition-duration: 0ms;
transition-duration: 0ms;
}
html.android .label-switch input[type="checkbox"] + .checkbox:after {
-webkit-transition-duration: 0ms;
transition-duration: 0ms;
}
html.android .list-block .list-group-title {
display: none;
}
/* ========================================================================== */
/**
* Listado de pedidos (queue)
*/
.queue-content .item-media {
width: 10px;
}
.queue-content .item-subtitle {
color: #808080;
}
i[class*="estado_"] {
color: #5ac8fa;
}
i.estado_P {
color: #ff9500;
}
i.estado_T {
color: #ff3b30;
}
i.estado_F {
color: #4cd964;
}
/* ========================================================================== */
/**
* Listado de comprobación de pedidos (checkin)
*/
/*i.asignado {
color: #ff3b30;
}
i.sin_asignar {
color: #4cd964;
}*/
/* ========================================================================== */
/**
* Detalle de pedido
*/
.order-content .item-header {
display: flex;
}
.order-content .header-text {
padding: 0 15px;
}
.order-content .page-title .col-100 {
white-space: normal;
}
@media screen and (max-width: 992px) {
.order-content .data-table {
/*margin: 10px 0;*/
font-size: 15px;
}
}
@media screen and (max-width: 600px) {
.order-content .data-table {
/*margin: 10px 0;*/
font-size: 11px;
}
}
.order-content .data-table thead th {
white-space: normal;
height: 24px;
padding: 0 5px;
}
.order-content .data-table th,
.order-content .data-table td {
padding: 4px;
height: 28px;
}
.order-content .data-table-orders td {
height: 10px;
}
/* ========================================================================== */
/**
* Formulario de picking
*/
.picking-content {
/*padding-bottom: 250px;*/
}
.picking-content .data-table {
font-size: 12px;
}
.picking-content .list-block {
margin: 0;
padding: 0 10px;
}
.picking-content .list-group {
border: 1px solid #c8c7cc;
border-radius: 3px;
margin: 10px 0;
}
.picking-content .list-group ul {
padding-bottom: 10px;
}
.picking-content .list-block ul {
border-bottom: none;
border-top: none;
}
.picking-content .list-block .item-content {
padding: 0 12px;
/*height: 30px;*/
height: inherit;
}
/*.picking-content .list-block ul::after, .picking-content .list-block ul::before {
background-color: #fff;
}*/
.picking-content .list-block .item-content {
min-height: 30px;
}
.picking-content .list-block .item-content .item-inner {
min-height: 25px;
}
.picking-content .list-block .item-inner .subtitle2 {
display:block;
}
table td .subtitle2 {
display:block;
}
#picking-list td{
font-size:12px;
padding-left:10px;
padding-right: 10px;
}
.picking-content .list-block .item-inner {
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
border-bottom: none;
}
.picking-content .list-block .item-title {
font-size: 12px;
white-space: normal;
overflow: visible;
padding: 5px 0;
}
.picking-content .list-block .item-title span.control-label {
color: #8e8e93;
margin-right: 5px;
}
.picking-content .list-block .form-control {
border: 1px solid #c8c7cc;
padding: 8px 12px 6px 12px;
}
.picking-content .list-block input[type="text"].form-control,
.picking-content .list-block input[type="number"].form-control {
height: 36px;
font-size: 12px;
text-align: right;
}
.picking-content .list-block .form-group {
padding: 10px 0;
}
.picking-content .list-block textarea {
/*margin-top: 15px;
padding-bottom: 50px;*/
border: 1px solid #c8c7cc;
background-color: #fff;
border-radius: 3px;
font-size: 12px;
padding: 6px 8px;
}
.picking-content .list-block select.form-control {
background-color: transparent;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D\'0%200%2060%20120\'%20xmlns%3D\'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg\'%3E%3Cpath%20d%3D\'m60%2061.5-38.25%2038.25-9.75-9.75%2029.25-28.5-29.25-28.5%209.75-9.75z\'%20transform%3D\'translate(115%2C%2030)%20rotate(90)\'%20fill%3D\'%23c7c7cc\'%2F%3E%3C%2Fsvg%3E");
background-position: calc(100% - 15px) center;
background-repeat: no-repeat;
background-size: 20px 20px;
border: 1px solid #ccc;
font-size: 12px;
max-height: 30px;
padding: 0 30px 0 10px;
margin-left: 5px;
width: auto;
}
/*
.picking-content .list-block select.form-control:after {
background-color: #c8c7cc;
bottom: 0;
content: "";
display: block;
height: 1px;
left: 0;
position: absolute;
right: auto;
top: auto;
transform-origin: 50% 100% 0;
width: 100%;
z-index: 15;
}*/
.picking-content a.action-link {
font-size: 14px;
font-weight: bold;
}
.picking-content a.checkin {
color: #fe4646;
margin-right: 15px;
display: inline-block;
}
.picking-content a.delete {
color: #8e8e93;
font-weight: normal;
}
.picking-content a.delete i.ion {
font-size: 17px;
margin-right: 5px;
}
.picking-content a.error {
color: #8e8e93;
font-weight: normal;
}
.picking-content a.error i.ion {
font-size: 17px;
margin-right: 5px;
}
.picking-content .list-block .form-control.col-xs {
/*width: 25%;*/
}
.form-control.col-xs {
width: 25%;
}
#bultos-table {
background-color: #fff;
padding: 0 5px;
}
#bultos-table tbody {
font-size: 12px;
}
#bultos-table.data-table th, #bultos-table.data-table td,.detail-linea.data-table th, .detail-linea.data-table td {
height: 24px;
padding: 0 5px;
}
.content-detail-linea{
width: 100%;
background: #efeff4;
border: 1px solid #8e8e93;
}
#bultos-table.data-table tbody td::before {
display: none;
}
/* Botón para cambiar modo de visualización */
.change-view {
display: block;
font-size: 32px;
text-align: center;
padding: 5px 10px;
/*color: red;*/
}
.change-view.active {
color: red;
}
.hand-error-light{
color:#FE2E2E!important;
}
/* ========================================================================== */
/**
* Listado de checkin de checkin
*/
/*.checkin-content .item-inner i.ion-record {
color: #ff3b30;
}
.checkin-content .item-inner i.ion-record.half-checked {
color: #ff9500;
}*/
/* ========================================================================== */
/**
* Formulario de checkin
*/
.checkin-form.list-block {
font-size: 12px;
}
.checkin-form.list-block .item-title {
font-weight: bold;
color: #fe4646;
font-size: 12px;
}
.checkin-form.list-block .item-subtitle {
white-space: normal;
padding: 6px 0;
font-size: 12px;
}
.checkin-form.list-block .item-text {
height: auto;
font-size: 12px;
}
.checkin-form.list-block .item-text span.label {
}
.checkin-form .item-text > span.item,
.checkin-form .item-after > span.item {
padding: 0 5px 0 0;
margin: 0 5px 0 0;
border-right: 1px solid;
}
.checkin-form .item-text > span.item:last-child,
.checkin-form .item-after > span.item:last-child {
border-right: none;
}
.checkin-form .item .title:after {
content: ':';
}
.checkin-form .item .value {
color: #333;
}
.checkin-form .item .value.featured {
color: #fe4646;
}
.checkin-form .observacionescomp {
padding: 0 5px;
}
.checkin-form textarea {
background-color: #fff;
border: 1px solid #c8c7cc;
border-radius: 3px;
font-size: 12px;
padding: 6px 8px;
}
.checkin-form input[type="text"] {
background-color: #fff;
border: 1px solid #c8c7cc;
border-radius: 3px;
font-size: 12px;
margin-left:5px;
padding: 0 5px;
}
.checkin-form .input-group{
float: right;
width: 150px;
}
.checkin-form .input-group-btn:first-child > .btn, .checkin-form .input-group-btn:first-child > .btn-group {
margin-right: -7px;
}
.checkin-form a.error {
color: #8e8e93;
font-weight: normal;
}
.checkin-form a.error i.ion {
font-size: 17px;
margin-right: 5px;
}
.checkin-form a.checkin {
color: #fe4646;
}
.checkin-form a.checkin.action-link {
color: #007aff;
}
/*
Listado de OT
*/
i.estado_0 {
color: #ff3b30;
}
i.estado_1 {
color: #ff9500;
}
i.estado_2 {
color: #ff9500;
}
i.estado_3 {
color: #4cd964;
}
i.estado_4 {
color: #000000;
}
i.estado_5 {
color: #4cd964;
}
.list-block .item-text{
height:21px!important;
}
.list-block .item-title-extra{
width:100px;
margin-left:55px;
}
/*.ot-pending{
border-left: 10px solid red;
margin-bottom:5px;
}*/
.ot-transit{
border-left: 10px solid orange;
margin-bottom:5px;
}
/*.ot-finished{
border-left: 10px solid #4cd964;
margin-bottom:5px;
}
.ot-canceled{
border-left: 10px solid #A4A4A4;
margin-bottom:5px;
}*/
/*Estados especiales para mostrar la confirmación de recepción y el SLA de la OT */
.ot-finished.ot-finished{
border-left: 10px solid #4cd964;
border-right: 10px solid #4cd964;
margin-bottom:5px;
}
.ot-pending.ot-pending{
border-left: 10px solid red;
border-right: 10px solid red;
margin-bottom:5px;
}
.ot-finished.ot-pending{
border-left: 10px solid #4cd964;
border-right: 10px solid red;
margin-bottom:5px;
}
.ot-pending.ot-finished{
border-left: 10px solid red;
border-right: 10px solid #4cd964;
margin-bottom:5px;
}
/*
Detalle de OT
*/
.detail-ot{
margin:15px;
}
.detail-ot #divDetailOT{
padding:8px;
border:1px solid grey;
font-weight: normal;
}
.detail-ot #divDetailOT .badge{
line-height: 32px;
border-radius: 32px;
font-size: 10px;
font-weight: bold;
margin-top: -5px;
}
.detail-ot .button-action{
margin-top:10px;
}
.detail-ot .button-action .button{
text-align:left;
line-height: 20px;
}
.detail-ot .button-action .button.center{
text-align:center;
}
.detail-ot .button-action img{
height: 30px;
vertical-align: middle;
}
.detail-ot .button-action span{
margin-left:15px;
}
.detail-ot .content-block{
margin: 15px 0;
padding: 0;
font-weight: bold;
}
.detail-ot .content-block .list-block{
margin: 5px 0;
font-weight: normal;
}
/*.detail-ot .icon-doc-pdf{
background: transparent url(../img/icons-extensions.png) repeat scroll -1px -1px;
width: 22px;
height: 28px;
}*/
@media screen and (max-height: 1370px) {
.detail-ot button[data-action="transfer"]{
height: 50px;
}
#toolbarDetailOT {
height: 170px!important;
}
}
@media screen and (max-height: 1024px) {
.detail-ot button[data-action="transfer"]{
height: 50px;
}
#toolbarDetailOT {
height: 160px!important;
}
}
@media screen and (max-height: 900px) {
.detail-ot button[data-action="transfer"]{
height: 40px;
}
#toolbarDetailOT {
height: 140px!important;
}
}
@media screen and (max-height: 820px) {
.detail-ot button[data-action="transfer"]{
height: 35px;
}
#toolbarDetailOT {
height: 130px!important;
}
}
@media screen and (max-height: 670px) {
.detail-ot button[data-action="transfer"]{
height: 35px;
}
#toolbarDetailOT {
height: 115px!important;
}
}
.history-button{
float:right;
margin-top: -8px;
}
@media screen and (max-width: 992px) {
.history-button{
font-size:70px;
}
}
@media screen and (max-width: 600px) {
.history-button{
font-size:40px;
}
}
/*
Listado de horas de OT
*/
.lines-content{
padding-bottom: 40px;
}
i.estado_HP {
color: #ff3b30;
}
i.estado_HF {
color: #4cd964;
}
@media screen and (max-width: 992px) {
.ot_new {
margin-top: 10px;
}
.oportunity_new {
margin-top: 10px;
}
}
@media screen and (max-width: 600px) {
}
/*
Listado de materiales de OT
*/
i.estado_MP {
color: #ff3b30;
}
i.estado_MF {
color: #4cd964;
}
/*
Nueva OT
*/
.ot_new .list-block textarea {
border: 1px solid #c8c7cc;
background-color: #fff;
border-radius: 3px;
font-size: 12px;
padding: 6px 8px;
}
@media screen and (max-width: 992px) {
/*#form-line .card-header{
min-height: 65px;
font-size: 22px;
}*/
.ot_new .list-block textarea {
font-size: 17px;
}
}
@media screen and (max-width: 600px) {
/*#form-line .card-header{
min-height: 45px;
font-size: 16px;
}*/
.ot_new .list-block textarea {
font-size: 12px;
}
}
/*
Nueva línea de horas de OT
*/
.ot_lines input[type="time"]{
width: 30%;
font-size: 18px;
}
.ot_lines #horas{
width: 30%;
font-size: 18px;
text-align: center;
}
@media screen and (max-width: 992px) {
.ot_lines #horas{
height: 40px;
font-size: 18px;
}
}
@media screen and (max-width: 600px) {
.ot_lines #horas{
height: 32px;
font-size: 16px;
}
}
.page-breadcrumb{
margin: 15px;
display: flex;
}
.page-breadcrumb .active{
font-weight: bold;
}
.page-breadcrumb .separator{
margin: 0 5px;
opacity: 0.7;
}
.page-breadcrumb .inactive{
opacity: 0.7;
}
/*
Nueva línea de piezas de diagnóstico
*/
#form-piece .width_all{
font-size: 18px;
min-height: 35px;
width: 100%;
border: 1px solid #c8c7cc;
}
/*
Campos de cierre de OT
*/
.close-fields input[type="text"],.close-fields input[type="number"],.close-fields input[type="date"],.close-fields input[type="time"]{
font-size: 18px;
min-height: 35px;
border: 1px solid #c8c7cc;
}
.close-fields input[type="checkbox"]{
height: 18px;
width: 18px;
}
/*
Lista de tareas/citas
*/
.task-list i.estado_R {
color: #ff9500;
}
.task-list i.estado_P {
color: #ff3b30;
}
#form-task textarea {
border: 1px solid #c8c7cc;
background-color: #fff;
border-radius: 3px;
font-size: 12px;
padding: 6px 8px;
}
#form-task select{
font-size:16px;
padding: 6px 8px;
}
@media screen and (max-width: 992px) {
#form-task.card-header{
min-height: 65px;
font-size: 22px;
}
#form-task .list-block textarea {
font-size: 17px;
}
}
@media screen and (max-width: 600px) {
#form-task .card-header{
min-height: 45px;
font-size: 16px;
}
#form-task .list-block textarea {
font-size: 12px;
}
}
/*
CRM
Nueva Oportunidad de venta
*/
.oportunity_new .list-block textarea {
border: 1px solid #c8c7cc;
background-color: #fff;
border-radius: 3px;
font-size: 12px;
padding: 6px 8px;
}
@media screen and (max-width: 992px) {
.oportunity_new .list-block textarea {
font-size: 17px;
}
}
@media screen and (max-width: 600px) {
.oportunity_new .list-block textarea {
font-size: 12px;
}
}
/* ========================================================================== */
/**
* input-group (basado en bootstrap)
*/
.input-group {
border-collapse: separate;
display: table;
position: relative;
}
.input-group-btn {
font-size: 0;
position: relative;
white-space: nowrap;
}
.input-group-addon, .input-group-btn {
vertical-align: middle;
white-space: nowrap;
width: 1%;
}
.input-group .form-control, .input-group-addon, .input-group-btn {
display: table-cell;
}
.input-group-btn:first-child > .btn, .input-group-btn:first-child > .btn-group {
margin-right: -2px;
}
.input-group-btn:last-child > .btn, .input-group-btn:last-child > .btn-group {
margin-left: -1px;
}
@media screen and (max-width: 992px) {
.input-group-btn > .btn {
position: relative;
height: 46px;
padding: 6px 20px;
font-size: 20px;
}
}
@media screen and (max-width: 600px) {
.input-group-btn > .btn {
position: relative;
height: 36px;
padding: 6px 12px;
font-size: 14px;
}
}
.input-group .form-control {
float: left;
margin-bottom: 0;
position: relative;
/*width: 100%;*/
z-index: 2;
}
.btn {
-moz-user-select: none;
background-image: none;
border: 1px solid transparent;
/*border-radius: 4px;*/
cursor: pointer;
display: inline-block;
font-weight: 400;
line-height: 1.42857;
margin-bottom: 0;
text-align: center;
touch-action: manipulation;
vertical-align: middle;
white-space: nowrap;
}
.btn-white {
background: white none repeat scroll 0 0;
border: 1px solid #ccc;
color: inherit;
}
.input-group-addon {
position: relative;
background-color: #eee;
color: #555;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding: 0 8px;
text-align: center;
}
/* ========================================================================== */
/**
* MARGINS & PADDINGS
*/
.m-none {
margin: 0 !important;
}
.m-xs {
margin: 5px;
}
.m-sm {
margin: 10px;
}
.m-md {
margin: 20px;
}
.m-lg {
margin: 30px;
}
.m-xl {
margin: 50px;
}
.m-t-none {
margin-top: 0;
}
.m-t-xxs {
margin-top: 1px;
}
.m-t-xs {
margin-top: 5px;
}
.m-t-sm {
margin-top: 10px;
}
.m-t {
margin-top: 15px;
}
.m-t-md {
margin-top: 20px;
}
.m-t-lg {
margin-top: 30px;
}
.m-t-xl {
margin-top: 40px;
}
.m-b-none {
margin-bottom: 0;
}
.m-b-xxs {
margin-bottom: 1px;
}
.m-b-xs {
margin-bottom: 5px;
}
.m-b-sm {
margin-bottom: 10px;
}
.m-b {
margin-bottom: 15px;
}
.m-b-md {
margin-bottom: 20px;
}
.m-b-lg {
margin-bottom: 30px;
}
.m-b-xl {
margin-bottom: 40px;
}
.m-t-none {
margin-right: 0;
}
.m-r-xxs {
margin-right: 1px;
}
.m-r-xs {
margin-right: 5px;
}
.m-r-sm {
margin-right: 10px;
}
.m-r {
margin-right: 15px;
}
.m-r-md {
margin-right: 20px;
}
.m-r-lg {
margin-right: 30px;
}
.m-r-xl {
margin-right: 40px;
}
.p-none {
padding: 0 !important;
}
.p-xs {
padding: 10px;
}
.p-sm {
padding: 15px;
}
.p-m {
padding: 20px;
}
.p-md {
padding: 25px;
}
.p-lg {
padding: 30px;
}
.p-xl {
padding: 40px;
}
.p-t-none {
padding-top: 0;
}
.p-b-none {
padding-bottom: 0;
}
.p-l-xs {
padding-left: 10px;
}
.p-l-sm {
padding-left: 15px;
}
/* ========================================================================== */
/**
* Labels
*/
span.label {
border-radius: 3px;
display: inline-block;
font-size: 0.8em;
font-weight: bold;
padding: 3px 8px;
text-align: center;
text-shadow: none;
vertical-align: baseline;
white-space: nowrap;
}
.label-warning {
background-color: #f8ac59;
color: #ffffff;
}
.label-danger {
background-color: #ed5565;
color: #ffffff;
}
.label-info {
background-color: #23c6c8;
color: #ffffff;
}
.label-plain {
border: 1px solid #8e8e93;
font-weight: normal !important;
}
/*
* Badges
*/
span.badge {
line-height: 17px;
}
.badge-info-light{
background-color: #E6E6E6;
color: #000000;
}
.badge.color-red {
background-color: #FE2E2E;
color: #fff;
}
.badge.color-orange {
background-color: #ff9500;
color: #fff;
}
.badge.color-green {
background-color: #4cd964;
color: #fff;
}
/* ========================================================================== */
/**
* Colores
*/
.txt-info {
color: #23c6c8;
}
.txt-danger {
color: #ed5565;
}
.txt-warning {
color: #f8ac59;
}
.txt-plain {
color: #8e8e93;
}
/* ========================================================================== */
/**
* Checkbox
*/
label.label-checkbox input[type="checkbox"]:checked + .item-media i.icon-form-checkbox {
background-color: green;
}
label.label-checkbox input[type="checkbox"]:disabled + .item-media i.icon-form-checkbox {
background-color: #ccc;
}
/* ========================================================================== */
/**
* Formulario de códigos de barras
*/
#barcode-form .list-block {
padding: 0;
}
#barcode-form .list-block .item-inner {
width: auto;
}
#chk_verify{
margin: 6px;
height: 20px;
width: 20px;
}
/* ========================================================================== */
/**
* seleccion de empresa : listado de empresas disponibles
*/
.onap-company {
border: 1px solid #ccc;
border-radius: 7px;
background: #fff;
color: #fff;
font-size: 18px;
text-align: center;
padding: 7px 12px;
margin: 10px;
padding: 5px;
height: 150px;
}
/* ========================================================================== */
/**
* Home: listado de aplicaciones disponibles
*/
.onap-app {
border: 1px solid #ccc;
border-radius: 7px;
background: #FFFFFF;
color: #1C1C1C;
font-size: 18px;
text-align: center;
padding: 7px 12px;
line-height: 48px;
margin-bottom: 14px;
}
@media screen and (max-width: 992px) {
.onap-app {
font-size: 22px;
}
}
@media screen and (max-width: 600px) {
.onap-app {
font-size: 18px;
}
}
.onap-app .icon {
margin-top: 10px;
font-size: 32px;
}
.onap-app i {
}
.onap-app .title {
text-transform: uppercase;
font-weight: bold;
}
/* ========================================================================== */
/**
* Panel lateral
*/
.panel {
background-color: #fefefe;
}
.panel .list-block .item-content {
padding-left: 0;
}
.panel .list-block .item-title.label {
width: 45%;
}
.linkPersonal{
font-size: 16px;
font-weight: bold;
text-decoration: underline;
}
/* ========================================================================== */
/**
* Listado de inventarios
*/
.inventory .list-block .list-group-title {
font-weight: bold;
text-transform: uppercase;
padding-bottom: 15px;
padding-top: 15px;
}
/*
.inventory .list-block ul {
border-top: none;
border-bottom: none;
}*/
/*
.inventory li.h2 {
background-color: white;
border-bottom: 1px solid #ccc;
color: #000;
font-size: 15px;
font-weight: 500;
line-height: 22px;
padding: 20px 15px 0;
}
*/
/*
.inventory .list-block .inventory-data .title {
color: #000;
font-weight: 300;
}*/
.inventory .list-block .inventory-data .description {
color: #555;
font-size: 13px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.inventory .floating-button {
font-size: 18px;
}
/* ========================================================================== */
/**
* Inventario: Nuevo
*/
#form-inve .list-block input[type="text"], .list-block input[type="date"], .list-block input[type="datetime-local"], .list-block select {
font-size: 14px;
}
#form-inve .list-block .item-inner {
margin-left: 5px;
}
#form-inve .item-title.label {
font-weight: bold;
text-transform: uppercase;
}
#form-inve .item-media i {
font-size: 24px;
min-width: 24px;
}
/* ========================================================================== */
/**
* Inventario: Formulario
*/
#form-inve .searchbar {
background-color: #ddd;
border-bottom: none;
}
#lineinve-list .item-content .item-title .title {
display: block;
font-weight: bold;
line-height: 24px;
}
#lineinve-list .item-content .item-title .subtitle {
}
#lineinve-list .item-content .item-title .subtitle2 {
font-size:12px;
display:block;
}
/* ========================================================================== */
/**
* Inventario: Formulario de línea
*/
/*.lineinve-form input[type="number"], .lineinve-form input[type="text"] {
display: inline-block;
width: auto;
}
*/
.lineinve-form .list-block ul{
border-top :0;
border-bottom: 0;
}
.barcode {
border: 1px solid #ccc;
border-radius: 4px;
display: inline-block;
max-width: 28px;
padding: 5px 4px 0;
vertical-align: middle;
}
.barcode img {
width: 100%;
}
.article .card-header {
justify-content: normal;
}
.lineinve-form .card-header.text-center {
display: block;
}
.article input[type="text"] {
border: 1px solid #ccc;
border-radius: 0;
font-size: 14px;
line-height: 23px;
padding: 6px 8px;
margin-right: 5px;
}
/* Tabla de resultados de búsqueda de artículo*/
#search-list > tbody{
font-size:10px;
}
.article .item-title {
white-space: normal;
color: #6d6d72;
}
/*
.article-img {
width: 64px;
}*/
.article-img img {
width: 50%;
}
.lineinve-form .touchspin input[type="text"] {
border: none;
font-size: 15px;
font-weight: bold;
line-height: 23px;
margin: 0 5px;
padding: 6px 12px;
text-align: center;
width: 90%;
}
.lineinve-form .input-group-btn {
z-index: 3;
}
/* ========================================================================== */
/**
* Conteo: Formulario de línea
*/
#linecounting-list .subtitle{
font-size: 12px;
margin-left: 40px;
}
.item-data-filled {
background-color: #F79F81!important;
}
.item-data-filled-recuento1 {
background-color: #F5DA81!important;
}
.item-data-filled-recuento2 {
background-color: #F79F81!important;
}
.valueRecuento1{
color: #F5DA81;
}
.valueRecuento2{
color:#F79F81;
}
.location-special-input{
text-align:center;
width: 70px;
position:absolute;
left: 140px;
font-size: 24px;
border:1px #A4A4A4 solid;
text-transform:uppercase;
}
.location-special-input-touchspin{
text-align:center;
width: 70px;
height: 32px;
font-size: 24px;
border:1px #A4A4A4 solid;
text-transform:uppercase;
}
.location-special-touchspin{
position:absolute;
left: 105px;
top: 5px;
}
/* ========================================================================== */
/**
* Search bar
*/
/*
* Popup small center screen
*/
.popup-small-center {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
/* ========================================================================== */
/**
* Listado de entradas
*/
.entry .floating-button {
font-size: 18px;
bottom: 50px;
}
#entry-list {
font-size: 12px;
}
#entry-list tbody td{
padding-left: 8px;
padding-right: 8px;
}
/* ========================================================================== */
/**
* Inventario: Nuevo
*/
/*
* Ventana de documentación
*/
.icon-doc-pdf{
background: transparent url(../img/icons-extensions.png) repeat scroll -1px -1px;
width: 32px;
height: 38px;
}
/* ========================================================================== */
/**
* User-config
*/
.page-user-provider .content-block{
margin: 20px 0;
}
/* ========================================================================== */
/**
* Listado de notificaciones
*/
#notifications-list .item-content .item-media {
font-size: 20px;
}
#notifications-list .item-content.read {
background: #F2F2F2;
}
#notifications-list .item-content .item-title.noread{
font-size: 14px;
font-weight: bold;
}
#notifications-list .item-content .item-subtitle.noread{
font-size: 15px;
font-weight: bold;
}
#notifications-list .item-content .item-after .badge {
font-family: 'Nunito Sans', sans-serif;
font-size: 12px;
line-height: 15px;
height:17px;
padding: 1px 5px;
}
#tab-notifications .badge {
position: absolute;
right: 25%;
top: 2px;
font-family: 'Nunito Sans', sans-serif;
font-size: 12px;
line-height: 15px;
padding: 1px 5px;
}
/*
* Ventana de notificacion/conversacion
*/
.timeline-date-inside{
text-align: right;
font-size:11px;
}
.timeline-sides .timeline-item-left{
float:left;
}
.timeline-sides .timeline-item-right{
float:right;
}
.toolbar-notification-detail{
width: 100%;
}
.toolbar-notification-detail .col-notification-detail{
display:flex;
}
.toolbar-notification-detail .col-notification-detail input,.toolbar-notification-detail .col-notification-detail textarea{
border: 1px solid #d8d8d8;
padding: 5px;
border-radius: 5px;
margin-right: 1px;
width: 85%;
}
.toolbar-notification-detail .col-notification-detail button{
width: 15%;
}
@media screen and (max-height: 992px) {
.page-notification-detail{
padding-bottom: 80px;
}
.navbar-inner, .toolbar-inner.toolbar-inner-notification-detail{
padding: 8px;
}
}
@media screen and (max-height: 700px) {
.page-notification-detail{
padding-bottom: 80px;
}
.navbar-inner, .toolbar-inner.toolbar-inner-notification-detail{
padding: 8px;
}
}
@media screen and (max-height: 600px) {
.page-notification-detail{
padding-bottom: 70px;
}
.navbar-inner, .toolbar-inner.toolbar-inner-notification-detail{
padding: 0 8px;
}
}
/* =========================== */
/* ======== DASHBOARD ======== */
/* =========================== */
/* ======== CARDS DE RESUMEN ======== */
.cards{
display:grid;
grid-template-columns: repeat(auto-fit,minmax(160px,1fr));
gap:14px;
}
.card{
background:white;
padding:16px;
border-radius:14px;
box-shadow:0 2px 6px rgba(0,0,0,0.06);
border:1px solid #e8e8e8;
transition:0.2s;
}
.card:hover{
box-shadow:0 3px 10px rgba(0,0,0,0.1);
transform:translateY(-1px);
}
.card-title{
font-size:13px;
color:#555;
margin-bottom:8px;
line-height:1.3em;
}
.card-number{
font-size:28px;
font-weight:700;
color:#1a3263;
}
/* ======== PLANNING MODERNO ======== */
.planning-box{
margin-top:26px;
background:white;
padding:12px;
border-radius:14px;
box-shadow:0 2px 6px rgba(0,0,0,0.06);
border:1px solid #e8e8e8;
}
.planning-title{
margin:0 0 16px;
font-size:18px;
font-weight:700;
}
/* Tabla moderna tipo GRID */
.planning-table{
width:100%;
border-collapse:separate;
border-spacing:0;
font-size:12px;
border-radius:10px;
overflow:hidden;
}
.planning-table thead{
background:#1a3263;
color:white;
}
.planning-table th{
padding:12px 8px;
font-weight:600;
text-align:center;
letter-spacing:0.3px;
}
.planning-table td{
padding:8px 8px;
text-align:center;
background:white;
border-bottom:1px solid #e7e7e7;
color:#333;
}
.planning-table tr:last-child td{
border-bottom:none;
}
/* Zebra suave para filas */
.planning-table tr:nth-child(even) td{
background:#fafbff;
}
/* Badges opcionales dentro de celdas (si hubiera estados) */
/*.badge{
background:#1a3263;
color:white;
padding:3px 8px;
border-radius:8px;
font-size:12px;
font-weight:600;
display:inline-block;
}*/