.loadingImg { height:100%; max-height:4rem; max-width:4rem; } .loadingImgSmall{ height:100%; max-height:2rem; max-width:2rem; } table { display: table; border-collapse: collapse; border-spacing: 0px; border-color: grey; } /* FONTS */ @font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: url("fontsWebSymbols/Material-Icons.woff2") format('woff2'); } .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 20px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; } @font-face { font-family: "Ionicons"; src: url("fontsWebSymbols/ionicons.eot?v=2.0.0"); src: url("fontsWebSymbols/ionicons.eot?v=2.0.0#iefix") format("embedded-opentype"), url("fontsWebSymbols/ionicons.ttf?v=2.0.0") format("truetype"), url("fontsWebSymbols/ionicons.woff?v=2.0.0") format("woff"), url("fontsWebSymbols/ionicons.svg?v=2.0.0#Ionicons") format("svg"); font-weight: normal; font-style: normal; } .fuenteIonicons { font-family: 'Ionicons'; font-size: 2rem; } @font-face { font-family: 'LineAwesome'; src: url('fontsWebSymbols/line-awesome.eot?v=1.1.'); src: url('fontsWebSymbols/line-awesome.eot??v=1.1.#iefix') format('embedded-opentype'), url('fontsWebSymbols/line-awesome.woff2?v=1.1.') format('woff2'), url('fontsWebSymbols/line-awesome.woff?v=1.1.') format('woff'), url('fontsWebSymbols/line-awesome.ttf?v=1.1.') format('truetype'), url('fontsWebSymbols/line-awesome.svg?v=1.1.#fa') format('svg'); font-weight: normal; font-style: normal; } .fuenteLineAwesome { font-family: 'LineAwesome'; font-size: 2rem; } @font-face { font-family: 'Pe-icon-7-stroke'; src:url('fontsWebSymbols/Pe-icon-7-stroke.eot?d7yf1v'); src:url('fontsWebSymbols/Pe-icon-7-stroke.eot?#iefixd7yf1v') format('embedded-opentype'), url('fontsWebSymbols/Pe-icon-7-stroke.woff?d7yf1v') format('woff'), url('fontsWebSymbols/Pe-icon-7-stroke.ttf?d7yf1v') format('truetype'), url('fontsWebSymbols/Pe-icon-7-stroke.svg?d7yf1v#Pe-icon-7-stroke') format('svg'); font-weight: normal; font-style: normal; } .fuentePe-icon-7-stroke { font-family: 'Pe-icon-7-stroke'; font-size: 2rem; } @font-face { font-family: 'Pe-icon-set-food'; src: url("fontsWebSymbols/pe-icon-set-food.eot?4p3rw6"); src: url("fontsWebSymbols/pe-icon-set-food.eot?4p3rw6#iefix") format("embedded-opentype"), url("fontsWebSymbols/pe-icon-set-food.ttf?4p3rw6") format("truetype"), url("fontsWebSymbols/pe-icon-set-food.woff?4p3rw6") format("woff"), url("fontsWebSymbols/pe-icon-set-food.svg?4p3rw6#pe-icon-set-food") format("svg"); font-weight: normal; font-style: normal; } .fuentePe-icon-set-food { font-family: 'Pe-icon-set-food'; font-size: 2rem; } @font-face { font-family: 'Pe-icon-7-filled'; src:url('fontsWebSymbols/Pe-icon-7-filled.eot?kinggk'); src:url('fontsWebSymbols/Pe-icon-7-filled.eot?#iefixkinggk') format('embedded-opentype'), url('fontsWebSymbols/Pe-icon-7-filled.woff?kinggk') format('woff'), url('fontsWebSymbols/Pe-icon-7-filled.ttf?kinggk') format('truetype'), url('fontsWebSymbols/Pe-icon-7-filled.svg?kinggk#Pe-icon-7-filled') format('svg'); font-weight: normal; font-style: normal; } .fuentePe-icon-7-filled { font-family: 'Pe-icon-7-filled'; font-size: 2rem; } @font-face { font-family: 'Pe-icon-7-weather'; src:url('fontsWebSymbols/Pe-icon-7-weather.eot?-ujaud2'); src:url('fontsWebSymbols/Pe-icon-7-weather.eot?#iefix-ujaud2') format('embedded-opentype'), url('fontsWebSymbols/Pe-icon-7-weather.woff?-ujaud2') format('woff'), url('fontsWebSymbols/Pe-icon-7-weather.ttf?-ujaud2') format('truetype'), url('fontsWebSymbols/Pe-icon-7-weather.svg?-ujaud2#Pe-icon-7-weather') format('svg'); font-weight: normal; font-style: normal; } .fuentePe-icon-7-weather { font-family: 'Pe-icon-7-weather'; font-size: 2rem; } @font-face { font-family: 'Pe-icon-social'; src:url('fontsWebSymbols/pe-icon-social.eot?-96eskg'); src:url('fontsWebSymbols/pe-icon-social.eot?#iefix-96eskg') format('embedded-opentype'), url('fontsWebSymbols/pe-icon-social.woff?-96eskg') format('woff'), url('fontsWebSymbols/pe-icon-social.ttf?-96eskg') format('truetype'), url('fontsWebSymbols/pe-icon-social.svg?-96eskg#pe-icon-social') format('svg'); font-weight: normal; font-style: normal; } .fuentePe-icon-social { font-family: 'Pe-icon-social'; font-size: 2rem; } @font-face { font-family: "foundation-icons"; src: url("fontsWebSymbols/foundation-icons.eot"); src: url("fontsWebSymbols/foundation-icons.eot?#iefix") format("embedded-opentype"), url("fontsWebSymbols/foundation-icons.woff") format("woff"), url("fontsWebSymbols/foundation-icons.ttf") format("truetype"), url("fontsWebSymbols/foundation-icons.svg#fontcustom") format("svg"); font-weight: normal; font-style: normal; } .fuenteFoundationIcons { font-family: 'foundation-icons'; font-size: 2rem; } @font-face { font-family:'FontAwesome'; src:url('fontsWebSymbols/fontawesome-webfont.eot?v=4.3.0'); src:url('fontsWebSymbols/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('fontsWebSymbols/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('fontsWebSymbols/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('fontsWebSymbols/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('fontsWebSymbols/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg'); font-weight:normal; font-style:normal } .fuenteFontAwesome { font-family: 'FontAwesome'; font-size: 1.5rem; } @font-face { font-family: 'WebSymbolsRegular'; src: url('fontsWebSymbols/websymbols-regular-webfont.eot'); src: url('fontsWebSymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'), url('fontsWebSymbols/websymbols-regular-webfont.woff') format('woff'), url('fontsWebSymbols/websymbols-regular-webfont.ttf') format('truetype'), url('fontsWebSymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg'); font-weight: normal; font-style: normal; } .fuenteWebSymbolsRegular { font-family: 'WebSymbolsRegular'; font-size: 1.5rem; } @font-face { font-family: 'SosaRegular'; src: url('fontsWebSymbols/sosa-regular-webfont.eot'); src: url('fontsWebSymbols/sosa-regular-webfont.eot?#iefix') format('embedded-opentype'), url('fontsWebSymbols/sosa-regular-webfont.woff') format('woff'), url('fontsWebSymbols/sosa-regular-webfont.ttf') format('truetype'), url('fontsWebSymbols/sosa-regular-webfont.svg#SosaRegular') format('svg'); font-weight: normal; font-style: normal; } .fuenteSosaRegular { font-family: 'SosaRegular'; font-size: 2rem; } @font-face { font-family: 'heydings_icons'; src: /* url('fontsWebSymbols/heydings_icons-webfont.woff2') format('woff2'), */ url('fontsWebSymbols/heydings_icons-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } .fuenteHeydingsIcons { font-family: 'heydings_icons'; font-size: 2rem; } @font-face { font-family: 'icon-worksregular'; src: url('fontsWebSymbols/icon-works-webfont.eot'); src: url('fontsWebSymbols/icon-works-webfont.eot?#iefix') format('embedded-opentype'), url('fontsWebSymbols/icon-works-webfont.woff') format('woff'), url('fontsWebSymbols/icon-works-webfont.ttf') format('truetype'), url('fontsWebSymbols/icon-works-webfont.svg#icon-worksregular') format('svg'); font-weight: normal; font-style: normal; } .fuenteiconWorksWebfont { font-family: 'icon-worksregular'; font-size: 2rem; } @font-face { font-family: 'modernpics'; src: /* url('fontsWebSymbols/modernpics-webfont.woff2') format('woff2'),*/ url('fontsWebSymbols/modernpics-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } .fuenteModernPics { font-family: 'modernpics'; font-size: 2.5rem; } @font-face { font-family: 'noticenotice'; src: url('fontsWebSymbols/NoticeStd-webfont.eot'); src: url('fontsWebSymbols/NoticeStd-webfont.eot?#iefix') format('embedded-opentype'), url('fontsWebSymbols/NoticeStd-webfont.woff') format('woff'), url('fontsWebSymbols/NoticeStd-webfont.ttf') format('truetype'), url('fontsWebSymbols/NoticeStd-webfont.svg#noticenotice') format('svg'); font-weight: normal; font-style: normal; } .fuentenoticenotice { font-family: 'noticenotice'; font-size: 2.5rem; } @font-face { font-family: 'noticenotice2'; src: url('fontsWebSymbols/Notice2Std-webfont.eot'); src: url('fontsWebSymbols/Notice2Std-webfont.eot?#iefix') format('embedded-opentype'), url('fontsWebSymbols/Notice2Std-webfont.woff') format('woff'), url('fontsWebSymbols/Notice2Std-webfont.ttf') format('truetype'), url('fontsWebSymbols/Notice2Std-webfont.svg#noticenotice2') format('svg'); font-weight: normal; font-style: normal; } .fuentenoticenotice2 { font-family: 'noticenotice2'; font-size: 2.5rem; } @font-face { font-family: 'noticenotice3'; src: url('fontsWebSymbols/Notice3Std-webfont.eot'); src: url('fontsWebSymbols/Notice3Std-webfont.eot?#iefix') format('embedded-opentype'), url('fontsWebSymbols/Notice3Std-webfont.woff') format('woff'), url('fontsWebSymbols/Notice3Std-webfont.ttf') format('truetype'), url('fontsWebSymbols/Notice3Std-webfont.svg#noticenotice3') format('svg'); font-weight: normal; font-style: normal; } .fuentenoticenotice3 { font-family: 'noticenotice3'; font-size: 2.5rem; } @font-face { font-family: 'entyporegular'; src: url('fontsWebSymbols/Entypo-webfont.eot'); src: url('fontsWebSymbols/Entypo-webfont.eot?#iefix') format('embedded-opentype'), url('fontsWebSymbols/Entypo-webfont.woff') format('woff'), url('fontsWebSymbols/Entypo-webfont.ttf') format('truetype'), url('fontsWebSymbols/Entypo-webfont.svg#entyporegular') format('svg'); font-weight: normal; font-style: normal; } .fuenteentyporegular { font-family: 'entyporegular'; font-size: 4rem; } @font-face { font-family: 'paymentfont'; src: url('fontsWebSymbols/paymentfont-webfont.eot'); src: url('fontsWebSymbols/paymentfont-webfont.eot?#iefix') format('embedded-opentype'), url('fontsWebSymbols/paymentfont-webfont.woff') format('woff'), url('fontsWebSymbols/paymentfont-webfont.ttf') format('truetype'), url('fontsWebSymbols/paymentfont-webfont.svg#paymentfont') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'PaymentFont'; src: url('fontsWebSymbols/paymentfont-webfont.eot'); src: url('fontsWebSymbols/paymentfont-webfont.eot?#iefix') format('embedded-opentype'), url('fontsWebSymbols/paymentfont-webfont.woff') format('woff2'), url('fontsWebSymbols/paymentfont-webfont.woff') format('woff'), url('fontsWebSymbols/paymentfont-webfont.ttf') format('truetype'), url('fontsWebSymbols/paymentfont-webfont.svg#paymentfont-webfont') format('svg'); font-weight: normal; font-style: normal; } .fuentePaymentFont { font-family: 'PaymentFont'; font-size: 1.5rem; } div[class^="fuente"] { text-decoration: none; opacity: 1.0; text-align: center; padding: .05rem; } .fontWhite { color:#fff; } .hiperlinkHover:hover { opacity: 1; cursor: pointer; transform: scale(1.1); color: #00ccff !important; /*#ccff00*/ } div[class^="fuente"]:hover { opacity: 1; cursor: pointer; transform: scale(1.5); color:#FFFBCC; /* z-index: 99999; */ } span[class^="fuente"] { /* float:left; */ text-decoration: none; color:#fff; opacity: .6; font-size: 1rem; } span[class^="fuente"]:hover { opacity: 1; cursor: pointer; transform: scale(1.3); } @font-face { font-family: 'black_jackregular'; src: url('fonts/blackjack-webfont.eot'); src: url('fonts/blackjack-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/blackjack-webfont.woff2') format('woff2'), url('fonts/blackjack-webfont.woff') format('woff'), url('fonts/blackjack-webfont.ttf') format('truetype'), url('fonts/blackjack-webfont.svg#black_jackregular') format('svg'); font-weight: normal; font-style: normal; } .letraTime { white-space: nowrap; font-size: .8rem !important; padding: .2rem; /* font-family: 'SVBasicManual'; */ } @font-face { font-family: 'cicle_gorditagordita'; src: url('fonts/Cicle_Gordita-webfont.eot'); src: url('fonts/Cicle_Gordita-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/Cicle_Gordita-webfont.woff') format('woff'), url('fonts/Cicle_Gordita-webfont.ttf') format('truetype'), url('fonts/Cicle_Gordita-webfont.svg#cicle_gorditagordita') format('svg'); font-style: normal; } @font-face { font-family: 'gentiun_basic'; src: url('fonts/GenBasR.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'A_DAY_WITHOUT_SUN'; src: url('fonts/A DAY WITHOUT SUN.otf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Merienda-Bold'; src: url('fonts/Merienda-Bold.ttf') format('truetype'); font-weight: bold; font-style: normal; } @font-face { font-family: 'Merienda-Regular'; src: url('fonts/Merienda-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'AlegreyaSC'; src: url('fonts/AlegreyaSC-Regular.otf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Alegreya'; src: url('fonts/Alegreya-Regular.otf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'AdolphusSerif'; src: url('fonts/Adolphus Serif.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Lato-BoldItalic'; src: url('fonts/Lato-BoldItalic.ttf'); font-weight: bold; font-style: normal; } @font-face { font-family: 'secret_code'; src: url('fonts/secrcode.ttf'); font-weight: normal; font-style: normal; } @font-face { font-family: 'secret_code'; src: url('fonts/secrcode.ttf'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Abastina'; src: url('fonts/abastina.otf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Philosopher-Regular'; src: url('fonts/Philosopher-Regular.ttf'); font-weight: normal; font-style: normal; } @font-face { font-family: 'nk57-monospace'; src: url('fonts/nk57-monospace-cd-bk.ttf'); font-weight: normal; font-style: normal; } @font-face { font-family: 'SVBasicManual'; src: url('fonts/SVBasicManual.ttf'); font-weight: normal; font-style: normal; } @font-face { font-family: 'TektonPro'; src: url('fonts/TektonPro-Bold.otf') format('truetype'); font-weight: normal; font-style: normal; } /* FONTS */ #searchFunct { font-family: 'Pe-icon-7-stroke'; font-size: 1.5rem; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; /*display: inline-block; */ text-decoration: inherit; position:relative; /* float:right; left center*/ margin-bottom:0rem; padding: 0rem 0.1875rem 0rem 0rem; top:0rem; color:#CCC; opacity: 1; cursor:pointer; clear:both; /* float: right; */ } #searchFunct:hover { color:#FFF; } #SF { display: inline-block; width: 100%; } * /* , *:before, *:after */ { margin: 0; /* QUITA TODOS LOS MARGENES POR DEFECTO DEL EXPLORADOR */ padding: 0; /* QUITA LOS MARGENES DE ELEMENTOS INTERNOS */ box-sizing:border-box; } *:focus { outline: none; } /* *:empty { display:none; margin:0; padding:0; border:0; } * > :first-child { margin: 0 !important; } * > :last-child { margin: 0 !important; } */ ol, ul { list-style: none } blockquote, q { quotes: none } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none } html, body, #agrupar { width:100%; min-height: 100% !important; height: 100%; /* -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; -ms-user-select:none; cursor: default; /* cursor: pointer; */ } .userData { /* padding-right: 1rem; */ } .userName { font-size:1rem; /* font:bold 1.25rem Tahoma, Verdana, sans-serif; top: -1rem; position: relative; */ font-family: 'Lato-BoldItalic'; font-size:1rem; font-weight:bold; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .userOrg { font-size:.7rem; font-family: 'Lato-BoldItalic'; opacity: 0.7; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .ccsLogo { width: 4rem; height: 4rem; margin-top: 0rem; border-radius: 3.75rem; } /*Flexbox gives us the flexiness we need. The top just stays put as there is no scrolling on the body due to the page never exceeding viewport height*/ .Top { display: block; align-items: center; justify-content: center; text-align:center; /* background-color: darkgreen; height: 3.75rem; font-size: 3rem; */ position: relative; z-index: 100; -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; -ms-user-select:none; } .Bottom { text-align: left; /* align-items: left; vertical-align:center; justify-content: center; padding: 0.3125rem 0rem 0.3125rem 0rem; height: 2.5rem; padding: .3rem 0rem; max-height: 2.5rem; */ position: relative; z-index: 100; clear: both; /* background: #CCCCCC; text-align: center; padding: 1.25rem; border-top: 0.125rem solid #999999; background: #FFFBB9; */ border: 0rem solid #999999; background-image: url(Images/NewLogo.png), url(Images/BgHead.png); background-position: left center, left center; background-repeat: no-repeat, repeat-x; opacity:0.7; background-size: 4.6875rem 4.6875rem; color:#FFFFFF; font-size:0.625rem; position: fixed; z-index: 100; bottom: 0; left: 0; width: 100%; -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; -ms-user-select:none; } .BottomSpan { opacity: 1; font-size:0.875rem; padding-left:3.5rem; /* LOGOTIPO */ padding-top:0.2rem; /* padding: 1.25rem 4.6875rem 1.25rem 1.25rem; TOP DER BOTTOM IZQ */ /* position: absolute; top: 50%; transform: translateY(-50%); */ } /*This is our main wrapping element, it's made 100vh high to ensure it is always the correct size and then moved into place and padded with negative margin and padding*/ .Container { display: flex; flex-wrap: nowrap; flex-direction: column; color:#fff; overflow: hidden; /* margin-bottom: -2.5rem; padding-bottom: 2.5rem; margin-top: -3.75rem; padding-top: 3.75rem; */ height: calc(( 100vh - 6.5rem)); position: relative; width: 100%; backface-visibility: hidden; will-change: overflow; } .ContainerWrap { display: flex; color:#fff; overflow: hidden; height: calc(( 100vh - 6.5rem)); flex-direction: row; flex-wrap: nowrap; position: relative; width: 100%; backface-visibility: hidden; will-change: overflow; } /*All the scrollable sections should overflow and be whatever height they need to be. As they are flex-items (due to being inside a flex container) they could be made to stretch full height at all times if needed. WebKit inertia scrolling is being added here for any present/future devices that are able to make use of it. */ .Left, .Middle, .Right { color: #fff; overflow: auto; height: auto; padding: .0rem; -webkit-overflow-scrolling: touch; /* -ms-overflow-style: none; */ } /*Entirely optional – just wanted to remove the scrollbar on WebKit browsers as I find them ugly*/ .Left::-webkit-scrollbar, .Middle::-webkit-scrollbar, .Right::-webkit-scrollbar { /* display: none; width: 0.75rem; */ } body { /* scrollbar-base-color: rgba(0,0,0,0.3); scrollbar-3dlight-color: rgba(0,0,0,0.3); scrollbar-highlight-color: rgba(0,0,0,0.3); scrollbar-arrow-color: rgba(0,0,0,0.3); scrollbar-shadow-color: rgba(0,0,0,0.3); scrollbar-dark-shadow-color: rgba(0,0,0,0.3); */ scrollbar-track-color: rgba(0,0,0,0.95); font-family: 'cicle_gorditagordita'; } ::-webkit-scrollbar { width: .5rem; height: .5rem; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 0.5rem rgba(120,120,120,0.75); border-radius: 0.625rem; } ::-webkit-scrollbar-thumb { border-radius: 0.625rem; -webkit-box-shadow: inset 0 0 0.5rem rgba(1, 54, 14, 0.75); } ::-webkit-resizer{ border-radius: 0.625rem; -webkit-box-shadow: inset 0 0 0.5rem rgba(120,120,120,0.5); } ::-webkit-scrollbar-corner { background: rgba(120,120,120,0.0); } /* Left and Right are set sizes while the Middle is set to flex one so it occupies all remaining space. This could be set as a width too if prefereable, perhaps using calc.*/ .Left { min-width: 17rem; /* font-family: 'Merienda-Bold'; */ /* Alegreya */ font-size:0.875rem; /* background-color: indigo; */ -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; -ms-user-select:none; min-height: 100%; position:relative; background: rgba(0, 0, 0, 0.25); padding-bottom: 3rem; } #LeftHeader { /* background-color: yellow; */ height: 0rem;/* SI SE QUIERE ENCABEZADO DE MENU */ width: 100%; } #LefBody { margin-bottom: 30px; } #LeftFooter{ bottom: 0; height: 3rem; } #LeftFooterFloat{ /* background-color: lime; height: 3rem; */ bottom: 0; left: 0; position: absolute; right: 0; padding: .5rem; } #SearchMenu span, #SearcBD span, #SearchFP span, #SearchFilter span { font-family: 'Pe-icon-7-stroke'; font-size: 1.5rem; position: absolute; top:.5rem; right:.3rem; } #SearchFilter span { font-family: 'Pe-icon-7-stroke'; font-size: 1.5rem; position: absolute; /* top:1.1rem; */ right:.2rem; } #SearchMenu, #SearcBD, #SearchFilter { width:100%; /* min-width: 11rem;*/ position: relative; } #divTrees { /* margin-top:.5rem; */ } #SearchFP { display:none; position: relative; } [id^="searchText"] { padding-right: 1.5rem; background: rgba(0, 0, 0, 0.2)!important; min-width: 5.8rem; /* max-width: 10rem; */ } .Middle { /* color:#FFFFFF;!important; padding: 1rem; height:100%; vertical-align: middle; */ /* background: white; resize: both; margin: 0 auto; padding: 1rem; auto overflow: hidden; height: 100%; */ width: 100%; flex: 1; display: flex; flex-direction: column; /* row | row-reverse | column | column-reverse;*/ text-align: center; align-items: center; justify-content: center; max-height: 100%; } .MiddleContent { /* background: black; background: rgba(255, 0, 0, 0.2); padding: 0.625rem; resize: both; background: rgba(0, 255, 0, 0.2); */ position: relative; height: 100%; width: 100%; overflow: auto; padding: .1rem .3rem .0rem .3rem; /*.5rem .5rem .0rem .5rem; */ vertical-align: top; margin: 0rem; text-align: center; } [class^="NavIds"] /* COMUNES A LOS NavIds*** */ { font-family: 'Pe-icon-7-stroke'; font-size: 1.5rem; position:relative; height: 100%; display: inline-flex; align-items: center; color:rgba(255, 255, 255, 0.5);; } .NavContent { height: 100%; width: 96%; } .NavIdsPrev { float:left; border-bottom-left-radius: 0.3125rem; border-top-left-radius: 0.3125rem; background: linear-gradient(to left, rgba(0,0,205,0), rgba(0,0,0,.5)); } .NavIdsPrev:hover { cursor: pointer; background: linear-gradient(to left, rgba(255,0,0,0), rgba(255,0,0,.5)); } .NavIdsNext { float:right; border-bottom-right-radius: 0.3125rem; border-top-right-radius: 0.3125rem; background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,.5)); } .NavIdsNext:hover { cursor: pointer; background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,.5)); } [class^="Apps"] /* COMUNES A LOS NavIds*** */ { font-family: 'Pe-icon-7-stroke'; font-size: 1.5rem; position:relative; /* height: 100%; */ display: inline-flex; align-items: center; color:rgba(255, 255, 255, 0.5); } .AppsPrev { border-bottom-left-radius: 0.3125rem; border-top-left-radius: 0.3125rem; background: linear-gradient(to left, rgba(255,255,255,0.05), rgba(255,255,255,.2)); height: 100%; display:none; } .AppsPrev:hover { cursor: pointer; background: linear-gradient(to left, rgba(255,255,255,0.1), rgba(255,255,255,.5)); } .AppsNext { border-bottom-right-radius: 0.3125rem; border-top-right-radius: 0.3125rem; background: linear-gradient(to right, rgba(255,255,255,0.05), rgba(255,255,255,.2)); height: 100%; display:none; } .AppsNext:hover { cursor: pointer; background: linear-gradient(to right, rgba(255,255,255,0.1), rgba(255,255,255,.5)); } .barOfButtons { width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; overflow: hidden; overflow-x: auto; scrollbar-width: 0rem; -ms-overflowstyle:none; justify-content: space-between; align-content: center; padding: 0rem 1rem; } .barOfButtons::-webkit-scrollbar { width: .0rem; height: .0rem; } .barNavigator { width: 100%; /* height: 100%; */ display: flex; overflow: hidden; } .Right { width: 12.5rem; background-color: violet; } #agrupar { /*background-color:rgba(0, 0, 0, 0.2);*/ } header, section, footer, aside, nav, article, figure, figcaption, hgroup { display: block; } h1 { /* font:bold 1.25rem Tahoma, Verdana, sans-serif;*/ font-family: 'Lato-BoldItalic'; font-size:1.375rem; font-weight:bold; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h2 { /* font:bold 0.875rem Tahoma, Verdana, sans-serif; */ font-family: 'cicle_gorditagordita'; font-size:1rem; font-weight:bold; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .bodyStyle { font-family: 'cicle_gorditagordita'; /* text-align:left; */ /* background: #a1d0e1; */ animation: colorchange 240s; /* animation-name followed by duration in seconds*//* you could also use milliseconds (ms) or something like 2.5s */ -webkit-animation: colorchange 240s; /* Chrome and Safari */ animation-iteration-count: infinite; } @keyframes colorchange { 0% {background-color: #665200;} 25% {background-color: #000066;} 50% {background-color: #660000;} 75% {background-color: #003300;} 100% {background-color: #665200;} } @-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */ { 0% {background-color: #665200;} 25% {background-color: #000066;} 50% {background-color: #660000;} 75% {background-color: #003300;} 100% {background-color: #665200;} } /* CASUISTICAS * {} :: Selector Universal :not(p) {} :: Selector Universal Negado a los elementos p p :: afecta todos los elementos p Clases .ClaseX {} se referencia en el html con la instruccion Class = "ClaseX" p.ClaseX {} :: solo se aplica si el elemento es un p Por Id #IdElemento {} #IdElemento SubElemento {} P#IdElemento {} Por Atributos p[name="xxx"] {} p[name^="A"] {} :: Todo elemento p que tenga el atributo name comenzado por A p[name$="A"] {} :: Todo elemento p que tenga el atributo name Termine en A p[name*="A"] {} :: Todo elemento p que tenga el atributo name que Contenga A PseudoClases p:nth-child(Idx) {} :: a todo p que sea elemento hijo y este en la posicion Idx (comienzan en 1) p:nth-child(odd) {} :: a todo p que sea elemento hijo y este en posiciones Impares p:nth-child(even) {} :: a todo p que sea elemento hijo y este en posiciones Pares p:first-child {} :: Primer Elemento Hijo p:last-child {} :: Ultimo Elemento Hijo p:only-child {} :: Solo tiene 1 Hijo ElementoPadre > ElementoHijo.Clase {} :: ElementoHijo posee el atributo Class definido a Clase y ademas tiene el elemento padre del tipo indicado. Elemento1.Clase + Elemento2 {} :: Elemento2 inmediatamente inferior al Elemento1 que posee el atributo Class definido a Clase Elemento1.Clase ~ ElementoX {} :: Aplica a todos los ElementoX Hermanos de Elemento1 [que posee el atributo Class definido a Clase] que no poseen Clase Definida */ /* tr:nth-child(even) { color: #00F; } tr:nth-child(odd) { color: #C00; } tr:nth-child(3) { color: #F90; } tr:first-child { color: #3F0; } tr:last-child { color: #FF0; } tr:only-child { color: #C3C; } */ div>p.Class1{background:#F90} tr.Class1+tr{background:#03F} td.Class1~td{ background:#6F6} #agrupar { width:100%; height:100%; margin:0rem auto; } #logo { position: absolute; right:0.625rem; } #titulos{ color: #fff; padding: 1.25rem 0.625rem 0.625rem 1.25rem; /*TOP DER BOTTOM IZQ */ position: absolute; text-align: left; } #titulos h2 { margin-top:-0.3125rem; color: #fff; opacity: 0.7; } #seccion { width:70%; margin: 1.25rem; float:left; } #columna { width: 20%; margin: 1.25rem 0rem; padding: 1.25rem; background: #CCCCCC; float:left; } article { background: #FFFBCC; border: 0.0625rem solid #999999; padding:1.25rem; margin-bottom:0.9375rem; } article footer { text-align:right; } time { color: #999999; } figcaption { font: italic 0.875rem Verdana, Geneva, sans-serif; } #cabecera { /* background: #FFFBB9; height: 4.6875rem;*/ border: 0rem solid #999999; padding: 0.2rem 0.0rem 0.0rem 1.0rem; /*TOP DER BOTTOM IZQ */ background-image: url(Images/BgHead.png); /* url(NewLogo.png), url(BgHeader.png) */ background-position: right center, left bottom; background-repeat: no-repeat, repeat-x; background-size: 100% 100%; /* auto , 100% 100% */ color:#FFFFFF; min-height: 4rem; } #menu { padding: 0rem 5rem 0rem 0rem; top: -0rem 0rem 0rem 0rem; /* background-image: url(Images/BgHeader2.png); */ background-position: left top; background-repeat: repeat; background-size: 100% 100%; color:#FFFFFF; height:3.5rem; /* 2.1875 */ text-align:right; /* left center right */ display: flex; justify-content: flex-end; /* float: right; align-items: center; */ } .ca-menu{ padding: 0rem 0.5rem 0rem 1rem; /* 80 ES EL MARGEN PARA EL LOGO */ margin: 0rem; max-width: 100%; display: flex; align-items: center; overflow: hidden; overflow-x: auto; scrollbar-width: 0rem; -ms-overflowstyle:none; /* white-space: nowrap; justify-content: flex-end; height: 3.5rem; flex-direction: row; flex-wrap: nowrap; align-content: center; */ } .ca-menu::-webkit-scrollbar { width: .0rem; height: .0rem; } .ca-menu li , .IconMenu { width: 2.8125rem; height: 2.8125rem; min-width: 2.8125rem; min-height: 2.8125rem; border: 0.125rem solid rgba(255, 255, 255, 0.2); /* overflow: hidden; */ position: relative; float:left; background-color:rgba(255, 255, 255, 0.5); margin-left:-0.625rem; margin-top: 0rem; -webkit-box-shadow: 0.0625rem 0.0625rem 0.125rem rgba(0,0,0,0.2); -moz-box-shadow: 0.0625rem 0.0625rem 0.125rem rgba(0,0,0,0.2); box-shadow: 0.0625rem 0.0625rem 0.125rem rgba(0,0,0,0.2); -webkit-border-radius: 3.75rem; -moz-border-radius: 3.75rem; border-radius: 3.75rem; -webkit-transition: all 400ms linear; -moz-transition: all 400ms linear; -o-transition: all 400ms linear; -ms-transition: all 400ms linear; transition: all 400ms linear; } .ca-menu li:last-child{ margin-right: 0rem; } .ca-menu li a{ text-align: left; width: 100%; height: 100%; display: block; color: #333; position: relative; } [class^="ca-icon"] { /* font-family: 'WebSymbolsRegular', cursive; */ font-size: 1.5rem; color: #333; line-height: 1.875rem; position: absolute; width: 100%; height: 1.875rem; left: 0rem; top: 0.4rem; text-align: center; -webkit-transition: all 400ms linear; -moz-transition: all 400ms linear; -o-transition: all 400ms linear; -ms-transition: all 400ms linear; transition: all 400ms linear; } .ca-menu li:hover, .IconMenu:hover, .ca-menu li[IsActive="0"] { border-color: #333; z-index: 998; background-color:rgba(0, 0, 0, 0.9); } .ca-menu li:hover [class^="ca-icon"], .IconMenu:hover [class^="ca-icon"] { color: #00ccff; /*#ccff00*/ font-size: 2rem; text-shadow: 0rem 0rem 0.0625rem #000; -webkit-animation: moveFromBottom 300ms ease; -moz-animation: moveFromBottom 300ms ease; -ms-animation: moveFromBottom 300ms ease; } [class^="pe-7s-"], [class*=" pe-7s-"] { display: inline-block; font-family: 'Pe-icon-7-stroke'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 1.5rem; color: #333; line-height: 1.875rem; position: absolute; width: 100%; height: 1.875rem; left: 0rem; top: -0.75rem; text-align: center; -webkit-transition: all 400ms linear; -moz-transition: all 400ms linear; -o-transition: all 400ms linear; -ms-transition: all 400ms linear; transition: all 400ms linear; } .pe-7s-album:before { content: "\e6aa"; } .pe-7s-arc:before { content: "\e6ab"; } .pe-7s-back-2:before { content: "\e6ac"; } .pe-7s-bandaid:before { content: "\e6ad"; } #Manto { height:100%; width:100%; border:0rem solid #E5E5E5; top:0rem; /* cursor: wait; */ filter: alpha(opacity=60); -moz-opacity: 0.6; opacity: 0.6; line-height:2em; background-color:#000000; z-index: 999; position: absolute; } #Manto:hover { cursor: wait; } #StrText { width:40rem; } #Icons { /* width:80%; */ } #PickTree { border:0rem solid #E5E5E5; /* cursor: wait; filter: alpha(opacity=60); -moz-opacity: 0.6; opacity: 0.6; */ background-color:rgba(255, 0, 0, 0.6); position: absolute; display: none; z-index: 1; } /* The Modal (background) */ [class^="modal"] /* COMUNES A LOS modal*** */ { position: fixed; /* Stay in place */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ background-color: rgba(0,0,0,.7); /* Black w/ opacity */ text-align: center; display: none; /* Cambia por codigo a Flex */ justify-content: center; align-items: center; max-height: 100%; overflow: hidden; } .modalBusy { z-index: 999999999; /* Sit on top */ } .modal { z-index: 998; /* Sit on top */ } .modal2 { z-index: 999; /* Sit on top */ } /* Modal Content/Box */ .contentModal { position:relative; color:#fff; max-height: 90%; max-width: 90%; overflow: auto; background-color: #111111; /* margin: 0 auto;15% auto; 15% from the top and centered */ padding: 1rem; border: 0rem solid #888; width: auto; /* 80%; Could be more or less, depending on screen size */ background:url(Images/dark_wall_75.png); /* .png _50.png */ border-radius: 0.3125rem; -moz-border-radius: 0.3125rem; -webkit-border-radius: 0.3125rem; box-shadow: 0 0 0.1875rem 0rem #000 inset, 0 0 0.3125rem 0rem #000; -moz-box-shadow: 0 0 0.1875rem 0rem #000 inset, 0 0 0.3125rem 0rem #000; -webkit-box-shadow: 0 0 0.1875rem 0rem #000 inset, 0 0 0.3125rem 0rem #000; -webkit-box-reflect: below 0.3125rem -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(75%, transparent), to(rgba(255, 255, 255, 0.2))); } /* The Close Button */ .close { color: #aaa; right:0.1rem; top:0.1rem; font-weight: bold; margin:0rem; font-family: 'Pe-icon-7-stroke'; font-size: 1.5rem; position:absolute; } .close:hover, .close:focus { color: white; text-decoration: none; cursor: pointer; } span { display:inline-block; /*padding: 0.625rem 0rem 0.625rem 0rem; text-transform:uppercase;*/ } a { color: #6699cc; } a:hover { color: #dfb11d; cursor:pointer; } input #reloj { text-align:center; background-color:rgba(255, 255, 255, 0); width: 21.875rem; padding: 0.625rem 0.625rem 0.625rem 0.625rem; border: 0; font-size: 0.875rem; margin: 0.625rem; border-radius: 0.625rem; -moz-border-radius: 0.625rem; -webkit-border-radius: 0.625rem; -webkit-background-clip: padding-box;; } /*sass variables used*/ $full:100%; $auto:0 auto; $align:center; @mixin easeme { -webkit-transition:1s ease; -moz-transition:1s ease; -o-transition:1s ease; -ms-transition:1s ease; transition:1s ease; } @mixin disable { outline:none; border:none; } fieldset { border: 0rem; /* text-align: center;*/ font: 1.5625rem; margin: 0; } fieldset .holder label, fieldset legend { visibility: visible; position: absolute; /* bottom: -7px; right: 0px; overflow: hidden; */ bottom: -6px; left: 0px; visibility: hidden; text-transform: uppercase; font-size: .7rem; float: left; margin: 0rem 0.3rem 0rem 0.25rem; padding: 0.1rem 0.5rem; color: rgba(255, 255, 255, 0.75); opacity: 1; clear: right; height: 1rem; background-color: #2d32337a; border-radius: 0.3125rem; text-overflow: ellipsis; overflow: hidden; text-shadow: #000 0rem 0.0625rem 0.125rem; } .labelTitleBox { text-overflow: ellipsis; overflow: hidden; font-size:1.1rem; padding-left: .5rem; white-space: nowrap; } .labelTitleBoxPlus { display: flex; align-items: center; justify-content: space-between; } input[type="text"],input[type="email"], input[type="password"], select, textarea, input[type="number"], input[type="checkbox"] { width:100%; font-size: .85rem; padding:0.6rem; border-radius:0.3125rem; background:rgba(0,0,0,0.2); @include disable; border:0.0625rem solid rgba(0,0,0,.1); color:#FFF; text-shadow:#000 0rem 0.0625rem 0.125rem; /* margin-bottom: .6rem; text-transform:uppercase; cursor:pointer; box-shadow:inset 0.25rem 0.375rem 0.625rem -0.25rem rgba(0,0,0,0.3), 0 0.0625rem 0.0625rem -0.0625rem rgba(255,255,255,0.3); */ clear: both; } input[type="text"], textarea { /* text-transform:capitalize; */ } option:first-child { color: #111; } option { /* */ background:rgba(0,0,0,0.5); font-size: .8rem; border:0.0125rem solid rgba(0,0,0,1); cursor:pointer; } input:not([type=range]):focus, select:focus { /* box-shadow: 0 0 0 5px rgba(21, 156, 228, 0.4); */ box-shadow:inset 0.25rem 0.375rem 0.625rem -0.25rem rgba(0,0,0,0.7), 0 0.0625rem 0.0625rem -0.0625rem rgba(255,255,255,0.3); background:rgba(0,0,0,0.3); @include easeme; } /* Change Autocomplete styles in Chrome*/ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus input:-webkit-autofill, textarea:-webkit-autofill, textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus { /* border: 0.0625rem solid #ffffcc; */ -webkit-text-fill-color: #ffffcc; -webkit-box-shadow: 0 0 0rem 62.5rem #000 inset; transition: background-color 5000s ease-in-out 0s; } input[type="text"]:disabled,input[type="email"]:disabled, input[type="password"]:disabled, select:disabled, textarea:disabled, input[type="number"]:disabled { /* background: #cccccc; border: 1px solid #999999; */ color: #FFFFFF; } input[type="submit"], input[type="button"], button[type="submit"], button[type="button"], input[type="file"] { box-shadow: 0 0 0.125rem 0 #666; -moz-box-shadow: 0 0 0.125rem 0 #666; -webkit-box-shadow: 0 0 0.125rem 0 #666; background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(237,237,237)), color-stop(0.41, rgb(180,180,180)), color-stop(1, rgb(255,255,255)) ); background: -moz-linear-gradient( center bottom, rgb(237,237,237) 0%, rgb(180,180,180) 41%, rgb(255,255,255) 100% ); border-radius:0.3125rem; @include disable; color:#000; padding:0.5rem; text-transform:uppercase; text-shadow:#FFF 0rem 0.0625rem 0.3125rem; border:0.0rem solid #000; opacity:0.8; -webkit-box-shadow: 0 0.5rem 0.375rem -0.375rem rgba(0,0,0,0.7); -moz-box-shadow: 0 0.5rem 0.375rem -0.375rem rgba(0,0,0,0.7); box-shadow: 0 0.5rem 0.375rem -0.375rem rgba(0,0,0,0.7); border-top:0.0625rem solid rgba(255,255,255,0.8)!important; margin-bottom: .6rem; /* font:0.875rem Oswald; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#28D2DE), to(#1A878F)); background-image: -webkit-linear-gradient(#28D2DE 0%, #1A878F 100%); background-image: -moz-linear-gradient(#28D2DE 0%, #1A878F 100%); background-image: -o-linear-gradient(#28D2DE 0%, #1A878F 100%); background-image: linear-gradient(#28D2DE 0%, #1A878F 100%); -webkit-box-reflect: below 0rem -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(75%, transparent), to(rgba(255,255,255,0.2))); */ } input[type="submit"]:hover, input[type="button"]:hover, button[type="submit"]:hover, button[type="button"]:hover, input[type="file"]:hover { opacity:1; cursor:pointer; } ::-webkit-input-placeholder { color: #777;/* Chrome/Opera/Safari */ } ::-moz-placeholder { color: #777;/* Firefox 19+ */ } :-ms-input-placeholder { color: #777;/* IE 10+ */ } :-moz-placeholder { color: #777;/* Firefox 18- */ } .nav a, .nav label { display: block; padding: .3rem .8rem .3rem .8rem; /*TOP DER BOTTOM IZQ */ color: #fff; background-color: rgba(21, 21, 21, 0.5); /* #151515 */ box-shadow: inset 0 -0.0625rem #1d1d1d; -webkit-transition: all .25s ease-in; transition: all .25s ease-in; text-decoration: none; /* font-family: 'Merienda-Bold'; /* Alegreya */ /* text-transform:uppercase; */ font-size:1rem; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .nav a:focus, .nav a:hover, .nav label:focus, .nav label:hover { color: rgba(255, 255, 255, .6); background: rgba(0, 0, 0, 0.6); /* #030303 */ } .nav label { cursor: pointer; /* padding-left: 1.5rem; */} .nav label:hover .FloatToLeft, .nav a:hover .FloatToLeft { opacity: 1; cursor: pointer; transform: scale(1.3); color: #00ccff; /*#ccff00*/ } /** * Styling first level lists items */ .group-list a, .group-list label { padding-left: 2.5rem; background: rgba(37, 37, 37, 0.5); /* #252525 */ box-shadow: inset 0 -0.0625rem #373737; } .group-list a:focus, .group-list a:hover, .group-list label:focus, .group-list label:hover { background: rgba(0, 0, 0, 0.5); } /* #131313 */ /** * Styling second level list items */ .sub-group-list a, .sub-group-list label { padding-left: 3.5rem; background: rgba(53, 53, 53, 0.5); /* #353535 */ box-shadow: inset 0 -0.0625rem #474747; } .sub-group-list a:focus, .sub-group-list a:hover, .sub-group-list label:focus, .sub-group-list label:hover { background: rgba(35, 35, 35, 0.5); } /* #232323*/ /** * Styling third level list items */ .sub-sub-group-list a, .sub-sub-group-list label { padding-left: 4.5rem; background: rgba(69, 69, 69, 0.5); /* #454545 */ box-shadow: inset 0 -0.0625rem #575757; } .sub-sub-group-list a:focus, .sub-sub-group-list a:hover, .sub-sub-group-list label:focus, .sub-sub-group-list label:hover { background:rgba(51, 51, 51, 0.4) ; } /* #333333 */ /** * Hide nested lists */ .group-list, .sub-group-list, .sub-sub-group-list { height: 100%; max-height: 0; overflow: hidden; -webkit-transition: max-height .5s ease-in-out; transition: max-height .5s ease-in-out; } .nav__list li a { /* padding-left: 1.5rem; */ } .nav__list ul li a { padding-left: 2rem; } .nav__list input[type=checkbox]:checked + label + ul { /* reset the height when checkbox is checked */ max-height: 62.5rem; } /* .nav__list label > span */ .nav_icon { font-family: 'WebSymbolsRegular'; float: right; -webkit-transition: -webkit-transform .65s ease; transition: transform .65s ease; } .FloatToLeft { max-width: 2rem; width: 2rem; float:left; text-align: center; } .nav__list input[type=checkbox]:checked + label :first-child { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } form { width:$full; /* text-align:center; background:rgba(255,255,255,0.2); */ } #contentCentered { /* width:20.625rem; */ text-align:center; max-height: 100%; overflow: auto; } #innerContentCentered { position:relative; width:100%; display: block; /* margin: 0 auto; padding: 0.0rem 1.25rem 0.0rem 1.25rem; margin-bottom: .5rem; */ background:url(Images/dark_wall_75.png); text-align:center; border-radius: 0.3125rem; -moz-border-radius: 0.3125rem; -webkit-border-radius: 0.3125rem; box-shadow: 0 0 0.1875rem 0rem #000 inset, 0 0 0.3125rem 0rem #000; -moz-box-shadow: 0 0 0.1875rem 0rem #000 inset, 0 0 0.3125rem 0rem #000; -webkit-box-shadow: 0 0 0.1875rem 0rem #000 inset, 0 0 0.3125rem 0rem #000; -webkit-box-reflect: below 0.3125rem -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(85%, transparent), to(rgba(255, 255, 255, 0.2))); } #divForm { /*margin-left: auto; margin-right: auto; display: inline-block; padding: 1.25rem 0rem 1.25rem 0rem ; */ overflow: auto; width:20.625rem; text-align:center; max-height: 100%; } #innerDivForm { padding: 0.0rem 0.75rem 0.0rem 0.75rem; border-radius: 0.5rem; border: 0.1rem solid rgba(70, 70, 70, 0.2); /* position:relative; width:100%; display: block; background:url(Images/dark_wall_75.png); text-align:center; padding: 0.0rem 0.75rem 0.0rem 0.75rem; margin-bottom: .5rem; border-radius: 0.3125rem; -moz-border-radius: 0.3125rem; -webkit-border-radius: 0.3125rem; box-shadow: 0 0 0.1875rem 0rem #000 inset, 0 0 0.3125rem 0rem #000; -moz-box-shadow: 0 0 0.1875rem 0rem #000 inset, 0 0 0.3125rem 0rem #000; -webkit-box-shadow: 0 0 0.1875rem 0rem #000 inset, 0 0 0.3125rem 0rem #000; margin: 0 auto; -webkit-box-reflect: below 0.3125rem -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(85%, transparent), to(rgba(255, 255, 255, 0.2))); */ /* position: relative; */ /* width: 100%; */ /* display: block; */ /* background: url(Images/dark_wall_75.png); */ /* text-align: center; */ /* margin-bottom: .5rem; */ /* -webkit-border-radius: 0.3125rem; */ /* box-shadow: 0 0 0.1875rem 0rem #000 inset, 0 0 0.3125rem 0rem #000; */ /* -moz-box-shadow: 0 0 0.1875rem 0rem #000 inset, 0 0 0.3125rem 0rem #000; */ /* -webkit-box-shadow: 0 0 0.1875rem 0rem #000 inset, 0 0 0.3125rem 0rem #000; */ /* border: azure; border: 0.1rem solid rgba(70, 70, 70, 0.2);*/ /* border-width: thin; */ } /* TREE VIEW */ .OrderIcons { /* font-family: 'FontAwesome'; */ font-size: 1.0rem; text-decoration: none; color:#fff; opacity: .6; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; display: inline-block; text-decoration: inherit; } .OrderIcons:hover { color: #00ccff; /*#ccff00*/ transform: scale(1.3); opacity: 1.0; } .betweenOptions { height: .3rem; margin: 0 0 0 0rem; padding: 0 0 0 1rem; background: url("Images/line.png") repeat-y; background-size: 1rem 10rem; background-position: 0rem -3rem; border: 0.0rem solid transparent; } .betweenOptions::before { background: url("Images/icons.png") repeat-y; background-size: 1rem 10rem; } .betweenOptions:hover { } .css-treeview ul { padding: 0; margin: 0; list-style: none; white-space: nowrap; border: 0.0rem solid transparent; background-color: rgba(0,0,0,.1); width:100%; border-radius: 0.3125rem; } .css-treeview li { padding: 0; margin: 0; list-style: none; white-space: nowrap; border: 0.0rem solid transparent; background: url("Images/line.png") repeat-y; background-size: 1rem; } .css-treeview li[IsActive="0"] { opacity: .5; background: url("Images/line.png") repeat-y; background-size: 1rem; } .css-treeview ul { padding:.5rem; } .css-treeview input { display:none; } .css-treeview { font: 1rem; /* "Segoe UI", Arial, Sans-serif */ /* -moz-user-select: none; -webkit-user-select: none; user-select: none; */ text-align:left; padding: 0rem; overflow:auto; max-height: 100%; } .css-treeview input+span { color: #fff; text-decoration: none; margin: 0 0 0 0rem; padding: 0 0 0 1.25rem; background: url("Images/icons.png") no-repeat; background-size: 1rem 10rem; background-position: 0rem -3.4rem; border: 0.0rem solid transparent; font-size: 1rem; } .css-treeview input+label::before { padding: 0 0 0 0.25rem; } .css-treeview label+span { margin: 0rem 0rem 0rem 0rem; } .css-treeview li>span+span { background: none; } .css-treeview span+span, .css-treeview label+span { padding: 0 0 0 .2rem; } .treeIcons { font-family: 'Pe-icon-7-stroke'; font-size: 1rem; text-decoration: none; color:#fff; opacity: .6; } .css-treeview span+span>a:hover, .css-treeview label+span>a:hover { color: #00ccff; /*#ccff00*/ transform: scale(1.3); opacity: 1.0; } .css-treeview li>a:hover { text-decoration: underline; } .css-treeview input+label+span+span+ul { margin: 0 0 0 0rem; padding: 0 0 0 1rem; /* background: url("Images/line.png") repeat-y; background-size: 1rem; background-position: 0rem -3rem; */ } .css-treeview input ~ ul { display: none; } .css-treeview label, .css-treeview label::before { cursor: pointer; } .Resaltar { color: #00ccff !important; } .css-treeview input:disabled + label { cursor: default; opacity: .6; } .css-treeview input:checked:not(:disabled) ~ ul { display: block; } .css-treeview li[IsActive="0"] { cursor: default; opacity: .5; } .css-treeview label, .css-treeview label::before { background: url("Images/icons.png") no-repeat; background-size: 1rem 10rem; } .css-treeview label, .css-treeview a, .css-treeview label::before { display: inline-block; height: 1rem; /* line-height: 1rem; vertical-align: middle; */ } .css-treeview label { background-position: 1.125rem 3rem; } .css-treeview label::before { content: ""; width: 1rem; margin: 0rem 0rem 0rem 0rem; /* 0 1.375rem 0 0 */ vertical-align: middle; background-position: 0 -2rem; } .css-treeview input:checked + label::before { background-position: 0 -1rem; } /* webkit adjacent element selector bugfix */ @media screen and (-webkit-min-device-pixel-ratio:0) { .css-treeview { -webkit-animation: webkit-adjacent-element-selector-bugfix infinite 1s; } @-webkit-keyframes webkit-adjacent-element-selector-bugfix { from { padding: 0; } to { padding: 0; } } } .tooltip { display: inline; position: relative; font-size:.5rem; } .tooltip:hover:after{ background: #333; background: rgba(0,0,0,.8); border-radius: 0.3125rem; bottom: 0.9375rem; color: #fff; content: attr(title); left: 20%; padding: 0.125rem 0rem; position: absolute; z-index: 998; width: 13.75rem; } .tooltip:hover:before{ border: solid; border-color: #333 transparent; border-width: 0.375rem 0.375rem 0 0.375rem; bottom: 0.9375rem; content: ""; left: 50%; position: absolute; z-index: 999; } [draggable] { -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; /* Required to make elements draggable in old WebKit */ -khtml-user-drag: element; -webkit-user-drag: element; } .over { /* border: 0.0625rem dashed rgba(255,0,0,.5); */ background: rgba(0, 0, 0, 0.2) !important; } /* TABS */ #content, #busy { display: block; /*none*/ /* background: rgba(255, 0, 0, 1); */ color: white; height: 100%; } section[id^='TabsFontsIcons_'] { padding: .2rem .2rem !important; overflow: auto; } section[id^='content'] { /* display: none; background: rgba(0, 0, 0, 0.1); overflow: auto; */ overflow: hidden; padding: 0rem .25rem; -webkit-border-radius: 0.3125rem; -moz-border-radius: 0.3125rem; border-radius: 0.3125rem; /* padding: 1.25rem 0 0; border-top: 0rem solid #ddd; height: 100%; width: 100%; max-height: 100%; min-height: 100%; border: 0.125rem solid rgba(0, 0, 0, 0.2); overflow: auto; */ } section[id^='content']:hover { /* overflow: auto; */ } input[id^='tab'] { display: none; } label[for^='tab'] { display: inline-block; margin: 0.3125rem -0.0625rem 0rem -0.0625rem; padding: 0.3125rem 0.3125rem; /* font-weight: 600; */ text-align: center; color: #999; border: 0.0625rem solid transparent; height:2rem; vertical-align: bottom; background-color: rgba(0, 0, 0, 0.15); } label[for^='tab']:before { font-family: fontawesome; font-weight: normal; margin-right: 0.625rem; } label[for^='tab']:before { /* content: '\f216'; */ } /* f1d0 f06d f044 f123 f1b3 label:before { content: '\f1cb'; } label[for*='2']:before { content: '\f17d'; } label[for*='3']:before { content: '\f16b'; } label[for*='4']:before { content: '\f1a9'; } */ label[for^='tab']:hover { color: #888; cursor: pointer; } input + label[for^='tab'] { border-bottom: 0.0625rem solid #fff; } input:checked + label[for^='tab'] { color: #fff; border: 0.0625rem solid #ddd; border-top: 0.125rem solid orange; border-bottom: 0rem solid #fff; margin: 0.3125rem 0rem 0rem 0rem; /* background-color: rgba(255, 255, 255, 0.1); */ } /* #tab0:checked ~ #content0, #tab1:checked ~ #content1, #tab2:checked ~ #content2, #tab3:checked ~ #content3, #tab4:checked ~ #content4, #tab5:checked ~ #content5, #tab6:checked ~ #content6, #tab7:checked ~ #content7, #tab8:checked ~ #content8, #tab9:checked ~ #content9, #tab10:checked ~ #content10, #tab11:checked ~ #content11, #tab12:checked ~ #content12, #tab13:checked ~ #content13, #tab14:checked ~ #content14, #tab15:checked ~ #content15 { display: block; } */ @media screen and (max-width: 40.625rem) { label[for^='tab'] { font-size: 0; } label[for^='tab']:before { margin: 0; font-size: 1.125rem; } } @media screen and (max-width: 25rem) { label[for^='tab'] { padding: 0.9375rem; } } input[class^="fuente"] { text-transform: none; text-align: center; } .showIcons { padding: .5rem; position:relative; width: 100%; height: 100%; /* display:inline; */ } .IconText { display: inline-block; width: 2rem; /* margin: .25rem; */ } .IconNumber { background: rgba(0,0,0,0.2); opacity: 0.6; font-size: .8rem; margin: .2rem; -webkit-user-select: text !important; -moz-user-select: text !important; -khtml-user-select: text !important; -ms-user-select:text !important; } /* $activeColor: #c0392b; //red */ /* $background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/13460/dark_wall.png'); */ /* .slideOne */ .slideOne { width: 3.125rem; height: 0.625rem; background: #333; margin: 1.25rem auto; position: relative; border-radius: 3.125rem; box-shadow: inset 0rem 0.0625rem 0.0625rem rgba(0, 0, 0, 0.5), 0rem 0.0625rem 0rem rgba(255, 255, 255, 0.2); } .slideOne label { display: block; width: 1rem; height: 1rem; position: absolute; top: -0.1875rem; left: -0.1875rem; cursor: pointer; background: #fcfff4; background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); border-radius: 3.125rem; box-shadow: 0rem 0.125rem 0.3125rem 0rem rgba(0, 0, 0, 0.3); -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .slideOne input[type=checkbox] { visibility: hidden; } .slideOne input[type=checkbox]:checked + label { left: 2.3125rem; } /* end .slideOne */ /* .slideTwo */ .slideTwo { width: 5rem; height: 1.875rem; background: #333; margin: 1.25rem auto; position: relative; border-radius: 3.125rem; box-shadow: inset 0rem 0.0625rem 0.0625rem rgba(0, 0, 0, 0.5), 0rem 0.0625rem 0rem rgba(255, 255, 255, 0.2); } .slideTwo:after { content: ''; position: absolute; top: 0.875rem; left: 0.875rem; height: 0.125rem; width: 3.25rem; background: #111; border-radius: 3.125rem; box-shadow: inset 0rem 0.0625rem 0.0625rem rgba(0, 0, 0, 0.5), 0rem 0.0625rem 0rem rgba(255, 255, 255, 0.2); } .slideTwo label { display: block; width: 1.375rem; height: 1.375rem; cursor: pointer; position: absolute; top: 0.25rem; z-index: 1; left: 0.25rem; background: #fcfff4; border-radius: 3.125rem; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; box-shadow: 0rem 0.125rem 0.3125rem 0rem rgba(0, 0, 0, 0.3); background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); } .slideTwo label:after { content: ''; width: 0.625rem; height: 0.625rem; position: absolute; top: 0.375rem; left: 0.375rem; background: #333; border-radius: 3.125rem; box-shadow: inset 0rem 0.0625rem 0.0625rem black, 0rem 0.0625rem 0rem rgba(255, 255, 255, 0.9); } .slideTwo input[type=checkbox] { visibility: hidden; } .slideTwo input[type=checkbox]:checked + label { left: 3.375rem; } .slideTwo input[type=checkbox]:checked + label:after { background: #27ae60; /*activeColor*/ } /* end .slideTwo */ /* .slideThree */ .slideThree { width: 5rem; height: 1.625rem; background: #333; margin: 1.25rem auto; position: relative; border-radius: 3.125rem; box-shadow: inset 0rem 0.0625rem 0.0625rem rgba(0, 0, 0, 0.5), 0rem 0.0625rem 0rem rgba(255, 255, 255, 0.2); } .slideThree:after { content: 'OFF'; color: #000; position: absolute; right: 0.625rem; z-index: 0; font: 0.75rem/1.625rem Arial, sans-serif; font-weight: bold; text-shadow: 0.0625rem 0.0625rem 0rem rgba(255, 255, 255, 0.15); } .slideThree:before { content: 'ON'; color: #27ae60; position: absolute; left: 0.625rem; z-index: 0; font: 0.75rem/1.625rem Arial, sans-serif; font-weight: bold; } .slideThree label { display: block; width: 2.125rem; height: 1.25rem; cursor: pointer; position: absolute; top: 0.1875rem; left: 0.1875rem; z-index: 1; background: #fcfff4; background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); border-radius: 3.125rem; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; box-shadow: 0rem 0.125rem 0.3125rem 0rem rgba(0, 0, 0, 0.3); } .slideThree input[type=checkbox] { visibility: hidden; } .slideThree input[type=checkbox]:checked + label { left: 2.6875rem; } /* end .slideThree */ /* .roundedOne */ .roundedOne { float:left; display:block; width: 1.5rem; height: 1.5rem; position: relative; background: #fcfff4; background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); border-radius: 3.125rem; box-shadow: inset 0rem 0.0625rem 0.0625rem white, 0rem 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5); } .roundedOne label{ width: 1.25rem; height: 1.25rem; cursor: pointer; position: absolute; left: 0.125rem; top: 0.125rem; background: -webkit-linear-gradient(top, #222222 0%, #45484d 100%); background: linear-gradient(to bottom, #222222 0%, #45484d 100%); border-radius: 3.125rem; box-shadow: inset 0rem 0.0625rem 0.0625rem rgba(0, 0, 0, 0.5), 0rem 0.0625rem 0rem white; visibility:visible; /* HACE QUE ESTE VISIBLE SIEMPRE LA MARCA DEL CHECK*/ } .roundedOne label span:after { content: ''; width: 1rem; height: 1rem; position: absolute; top: 0.125rem; left: 0.125rem; background: #27ae60; background: -webkit-linear-gradient(top, #27ae60 0%, #145b32 100%); background: linear-gradient(to bottom, #27ae60 0%, #145b32 100%); opacity: 0; border-radius: 3.125rem; box-shadow: inset 0rem 0.0625rem 0.0625rem white, 0rem 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5); } .roundedOne label span:hover::after { opacity: 0.3; } .roundedOne input[type=radio] { visibility: hidden; } .roundedOne input[type=radio]:checked + label span:after { opacity: 1; } .roundedOne+span { margin: 0.25rem; font-size:0.9rem; } /* end .roundedOne */ /* .roundedTwo */ .roundedTwo { float:left; display:block; width: 1.5rem; height: 1.5rem; position: relative; background: #fcfff4; background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); border-radius: 3.125rem; box-shadow: inset 0rem 0.0625rem 0.0625rem white, 0rem 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5); } .roundedTwo label{ width: 1.25rem; height: 1.25rem; position: absolute; top: 0.125rem; left: 0.125rem; cursor: pointer; background: -webkit-linear-gradient(top, #222222 0%, #45484d 100%); background: linear-gradient(to bottom, #222222 0%, #45484d 100%); border-radius: 3.125rem; box-shadow: inset 0rem 0.0625rem 0.0625rem rgba(0, 0, 0, 0.5), 0rem 0.0625rem 0rem white; display: block !important; visibility:visible; /* HACE QUE ESTE VISIBLE SIEMPRE LA MARCA DEL CHECK*/ } .roundedTwo label span:after { content: ''; width: 0.5625rem; height: 0.3125rem; position: absolute; top: 0.25rem; left: 0.25rem; border: 0.1875rem solid #fcfff4; border-top: none; border-right: none; background: transparent; opacity: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .roundedTwo label span:hover::after { opacity: 0.3; } .roundedTwo input[type=radio] { visibility: hidden; } .roundedTwo input[type=radio]:checked + label span:after { opacity: 1; } .roundedTwo+span { margin: 0.25rem; font-size:0.9rem; } .roundeGroup { margin: 0.5rem auto; display:inline-table; } .roundeBOX { display:block; } input[type=checkbox]:checked~.remove-check { display: none; } input[type=checkbox]:checked~#errFilterMsg { display: block; } /* end .roundedTwo */ /* .squaredOne */ .squaredOne { width: 1.75rem; height: 1.75rem; position: relative; margin: 1.25rem auto; background: #fcfff4; background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); box-shadow: inset 0rem 0.0625rem 0.0625rem white, 0rem 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5); } .squaredOne label { width: 1.25rem; height: 1.25rem; position: absolute; top: 0.25rem; left: 0.25rem; cursor: pointer; background: -webkit-linear-gradient(top, #222222 0%, #45484d 100%); background: linear-gradient(to bottom, #222222 0%, #45484d 100%); box-shadow: inset 0rem 0.0625rem 0.0625rem rgba(0, 0, 0, 0.5), 0rem 0.0625rem 0rem white; visibility:visible; /* HACE QUE ESTE VISIBLE SIEMPRE LA MARCA DEL CHECK*/ } .squaredOne label:after { content: ''; width: 1rem; height: 1rem; position: absolute; top: 0.125rem; left: 0.125rem; background: #27ae60; background: -webkit-linear-gradient(top, #27ae60 0%, #145b32 100%); background: linear-gradient(to bottom, #27ae60 0%, #145b32 100%); box-shadow: inset 0rem 0.0625rem 0.0625rem white, 0rem 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5); opacity: 0; } .squaredOne label:hover::after { opacity: 0.3; } .squaredOne input[type=checkbox] { visibility: hidden; } .squaredOne input[type=checkbox]:checked + label:after { opacity: 1; } /* end .squaredOne */ /* .squaredTwo */ .squaredTwoGroup { display:inline-flex; /* margin: 0rem 0rem .5rem 0rem; */ text-align: left; align-items: center; } .squaredTwoGroup > span { margin-left: 0.2rem; background-color: rgba(0, 0, 0, 0.25); padding: 0.41rem; border-radius: 0.3125rem; } .squaredTwo { background: rgba(0,0,0,.75); /* background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); */ /* background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); */ /* box-shadow: inset 0rem 0.0625rem 0.0625rem white, 0rem 0.0625rem 0.1875rem rgb(0 0 0 / 50%); */ border: 0.1rem solid rgba(255,255,255,0.5); } .squaredTwo label { cursor: pointer; /* background: -webkit-linear-gradient(top, #222222 0%, #45484d 100%); */ /* background: linear-gradient(to bottom, #222222 0%, #45484d 100%); */ /* box-shadow: inset 0rem 0.0625rem 0.0625rem rgb(0 0 0 / 50%), 0rem 0.0625rem 0rem white; */ /* padding: 0.3125rem 0rem 0rem 0rem; */ visibility: visible; opacity: 0; font-size: 1.5rem !important; } .squaredTwo input[type=checkbox]:checked+label { opacity: 1; color: white!important; } .squaredTwo label:hover { opacity: 0.3; } .squaredTwo input[type=checkbox] { visibility: hidden; width: 0rem !important; height: 0rem !important; float:left; } /* end .squaredTwo */ /* .squaredThree */ .squaredThree { width: 1.25rem; position: relative; margin: 1.25rem auto; } .squaredThree label { width: 1.25rem; height: 1.25rem; cursor: pointer; position: absolute; top: 0; left: 0; background: -webkit-linear-gradient(top, #222222 0%, #45484d 100%); background: linear-gradient(to bottom, #222222 0%, #45484d 100%); border-radius: 0.25rem; box-shadow: inset 0rem 0.0625rem 0.0625rem rgba(0, 0, 0, 0.5), 0rem 0.0625rem 0rem rgba(255, 255, 255, 0.4); visibility:visible; /* HACE QUE ESTE VISIBLE SIEMPRE LA MARCA DEL CHECK*/ } .squaredThree label:after { content: ''; width: 0.5625rem; height: 0.3125rem; position: absolute; top: 0.25rem; left: 0.25rem; border: 0.1875rem solid #fcfff4; border-top: none; border-right: none; background: transparent; opacity: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .squaredThree label:hover::after { opacity: 0.3; } .squaredThree input[type=checkbox] { visibility: hidden; } .squaredThree input[type=checkbox]:checked + label:after { opacity: 1; } /* end .squaredThree */ /* .squaredFour */ .squaredFour { width: 1.25rem; position: relative; margin: 1.25rem auto; font-size: 1.875rem; } .squaredFour label { width: 1.25rem; height: 1.25rem; cursor: pointer; position: absolute; top: 0; left: 0; background: #fcfff4; background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); border-radius: 0.25rem; box-shadow: inset 0rem 0.0625rem 0.0625rem white, 0rem 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5); visibility:visible; /* HACE QUE ESTE VISIBLE SIEMPRE LA MARCA DEL CHECK*/ } .squaredFour label:after { content: ''; width: 0.5625rem; height: 0.3125rem; position: absolute; top: 0.25rem; left: 0.25rem; border: 0.1875rem solid #333; border-top: none; border-right: none; background: transparent; opacity: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .squaredFour label:hover::after { opacity: 0.5; } .squaredFour input[type=checkbox] { visibility: hidden; } .squaredFour input[type=checkbox]:checked + label:after { opacity: 1; } /* end .squaredFour */ /**/ body .ondisplay section { width: 6.25rem; height: 6.25rem; background: #555; display: inline-block; position: relative; text-align: center; margin-top: 0.3125rem; border: 0.0625rem solid gray; border-radius: 0.3125rem; box-shadow: 0 0.0625rem 0.25rem rgba(0, 0, 0, 0.3), 0 0 2.5rem rgba(0, 0, 0, 0.1) inset; } body .ondisplay section:after { /* visibility: hidden; */ content: attr(title); position: absolute; width: 100%; left: 0; bottom: 0.1875rem; color: #fff; font-size: 0.75rem; font-weight: 400; -webkit-font-smoothing: antialiased; text-shadow: 0rem 0.0625rem #000; } .Search { background-color: rgba(0, 0, 0, 0.7); border: 1px solid rgba(255, 0, 0, 1); width:100%; display:inline-block; padding:2px; margin:0px; z-index:10; bottom: 0px; position: fixed; bottom: 0; } .version-List{ padding: 1rem; margin: 0rem; /* width: auto; display:inline-table; display:inline; background-color: rgba(0, 0, 0, 0.7); display: inline-block; */ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; align-content: stretch ; /*space-between*/ } .version-List li { flex-grow:1; /* si el parent es display:flex ajusta el ancho de cada item para ocupar todo el espacio de la fila...*/ border: 0.125rem solid rgba(0, 0, 0, 0.2); overflow: hidden; background-color:rgba(0, 0, 0, 0.1); margin:.2rem; border-radius: .5rem; position: relative; padding: 1rem; } .version-List li:hover { background: rgba(0,0,0,.5); } .bd-List{ padding: 0rem 0rem 0rem 0rem; margin: 0rem; /* width: auto; display:inline-table; display:inline; background-color: rgba(0, 0, 0, 0.7); display: inline-block; align-content: center; */ display: flex; flex-wrap: wrap; justify-content: space-evenly; /* flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe; */ align-items: center; align-content: stretch; /*space-between*/ flex-direction: row; height: 100%; overflow: auto; } .bd-List li { flex:0 0 10rem; /* flex-grow: 1; flex-shrink: 0; flex-basis: 10rem; */ /* flex-grow: 0 = NO RELLENA LA FILA; flex-grow: 1 = RELLENA LA FILA;*/ /* flex-grow:1; si el parent es display:flex ajusta el ancho de cada item para ocupar todo el espacio de la fila...*/ /* float:left; */ overflow: hidden; background-color:rgba(0, 0, 0, 0.1); margin:.2rem; border-radius: .5rem; position: relative; text-align: center; /* padding: 1rem 0rem 0rem 0rem; border: 0.125rem solid rgba(0, 0, 0, 0.2); width: 15rem; height: 5rem; margin-left:-0.625rem; margin-top: 0rem; -webkit-box-shadow: 0.0625rem 0.0625rem 0.125rem rgba(0,0,0,0.2); -moz-box-shadow: 0.0625rem 0.0625rem 0.125rem rgba(0,0,0,0.2); box-shadow: 0.0625rem 0.0625rem 0.125rem rgba(0,0,0,0.2); -webkit-border-radius: 3.75rem; -moz-border-radius: 3.75rem; -webkit-transition: all 400ms linear; -moz-transition: all 400ms linear; -o-transition: all 400ms linear; -ms-transition: all 400ms linear; transition: all 400ms linear; */ } .bd-List li>span:first-child { padding: .5rem .9rem; font-size: 1rem; overflow: hidden; background:rgba(0, 0, 0, 0.75); cursor: pointer; display: flex; align-items: center; justify-content: space-between; width: 100%; white-space: nowrap; border-top-right-radius:0.5rem; border-top-left-radius:0.5rem; min-height: 2.5rem; } .bd-List li span:first-child div { text-overflow: ellipsis; overflow: hidden; } .bd-List li>span:last-child { padding: .5rem .9rem; font-size: 1rem; overflow: hidden; background:rgba(0, 0, 0, 0.50); cursor: pointer; display: flex; align-items: center; justify-content: space-between; width: 100%; white-space: nowrap; border-bottom-right-radius:0.5rem; border-bottom-left-radius:0.5rem; justify-content: flex-end; } /* .bd-List li:last-child { margin-right: 0rem; } */ /* TABLES */ .table-Container { width: 99.99%; height: 100%; /* overflow: auto; */ padding: 0rem; -webkit-user-select: text !important; -moz-user-select: text !important; -khtml-user-select: text !important; -ms-user-select:text !important; } .table-fill { background: rgba(255, 255, 255, 0.0);; border-radius:0.1875rem; border-collapse: collapse; /* height: 100%; overflow: hidden; margin: auto; height: 3rem;*/ overflow: auto; padding:0.3125rem; max-width: 99.95%; width:100%; box-shadow: 0 0.3125rem 0.625rem rgba(0, 0, 0, 0.1); animation: float 5s infinite; } .table-fill-popup { width:100%; background-color:#FFF; } .TableFooterFloat{ /* background-color: lime; height: 3rem; bottom: 0; left: 0; right: 0; background:rgba(0, 255, 0, 0.5) ; border: 0.125rem solid rgba(0, 0, 0, 0.2); clear: both; position: relative; height: 2.3rem; background-color: rgba(0, 0, 0, 0.2); height: 2.7rem; padding: .2rem; display: flex; overflow:hidden; */ background: linear-gradient(to right, rgba(0,0,0,0.1), rgba(0,0,0,.6)); width:100%; -webkit-border-radius: 0.3125rem; -moz-border-radius: 0.3125rem; border-radius: 0.3125rem; } .TableFooterFloat ul{ width:29rem; } [id^="Table_"] /* COMUNES A LOS fpDrag*** */ { /* height: 100%; padding-bottom: 2.3rem; background:rgba(255, 0, 0, 0.5) ; position: relative; */ } .relatedListGroup [id^="TableDataContainer_"] /* COMUNES A LOS fpDrag*** */ { /* height: 100%; padding-bottom: 2.3rem; background:rgba(255, 0, 0, 0.5) ; position: relative; */ max-height: 17.5rem; /* 5 REGISTROS EN LISTA RELACIONADA */ } #TableHead { /* position: relative; top:0px; */ } .table-fill tbody { overflow:scroll; /* height:500px; */ } .table-data-container { overflow:auto; } .table-fill th { color:#D5DDE5; background:rgba(30, 30, 30, 0.95) ; border-bottom:0.05rem solid #9ea7af; border-right: 0.0625rem solid #343a45; font-size:.75rem; /* font-weight: 100; */ padding: .5rem .25rem; text-align:left; text-shadow: 0 0.0625rem 0.0625rem rgba(0, 0, 0, 0.1); vertical-align:middle; /* position:relative; */ /* white-space: nowrap; */ top: 0; } .table-fill thead th, .table-fill tbody th { position: sticky; } .table-fill th:first-child { border-top-left-radius:0.1875rem; } .table-fill th:last-child { border-top-right-radius:0.1875rem; border-right:none; } .table-fill tr { /* border-top: 0.0625rem solid #C1C3D1; border-bottom: 0.0625rem solid #C1C3D1; color:#242426; color:#666B85; */ color:#242426; font-size:.85rem; font-weight:normal; text-shadow: 0 0.0625rem 0.0625rem rgba(255, 255, 255, 0.1); } .table-fill > tbody > tr:hover > td { background: rgba(80, 80, 100, 0.5) ;/* #4E5066; */ color:#FFFFFF; /* border-top: 0.0625rem solid #22262e; border-bottom: 0.0625rem solid #22262e; */ } .table-fill tr:first-child { border-top:none; } .table-fill tr:last-child { border-bottom:none; } .table-fill > tbody > tr:nth-child(odd) { background: rgba(200, 200, 200, 0.5); } .table-fill > tbody > tr:nth-child(odd):hover { background:rgba(80, 80, 100, 0.7) ; } .table-fill tr:last-child td:first-child { border-bottom-left-radius:0.1875rem; } .table-fill tr:last-child td:last-child { border-bottom-right-radius:0.1875rem; } .table-fill > tbody > tr > td { padding: .25rem; text-align:left; vertical-align:middle; font-weight:300; /* font-size:.75rem; */ text-shadow: -0.0625rem -0.0625rem 0.0625rem rgba(0, 0, 0, 0.1); border-right: 0.0625rem solid rgba(0, 0, 0, 0.2) ; /* white-space: nowrap; */ max-width: 100rem; } .table-fill > tbody > tr { background: rgba(255, 255, 255, 0.5); } .table-fill-popup > tbody > tr > td { border-right: 0.0625rem solid rgba(0, 0, 0, 0.2) ; } .table-Ingredient { height: 100%; background:transparent; } .table-Ingredient > tbody > tr > td { text-align:left; padding: 0rem .25rem; vertical-align:middle; font-weight:300; font-size:.85rem; text-shadow: -0.0625rem -0.0625rem 0.0625rem rgba(0, 0, 0, 0.1); white-space: nowrap; /* border-right: 0.0625rem solid #C1C3D1; padding: .25rem; */ max-width: 100rem; } .table-fill td:first-child { /* border-right: 0rem; */ } .table-fill td:first-child { white-space: nowrap; } .table-fill tfoot { background: rgba(0, 0, 0, 0.0) ;/* #4E5066; */ color:#FFFFFF; position: sticky; bottom: 0; } .table-fill th.text-left { text-align: left; } .table-fill th.text-center { text-align: center; } .table-fill th.text-right { text-align: right; } .table-fill td.text-left { text-align: left; } .table-fill td.text-center { text-align: center; } .table-fill td.text-right { text-align: right; } .clear { clear:both; } .clearfix { height:10%; /* background-color:#309; */ max-height:40%; min-height:10%; overflow:hidden; width:100%; } .clearfix:after { content: ''; display: table; clear: both; } .barDBButtons { width:100%; display:block; /* height: 2.0rem; */ } .bdButtonsLeft { position:relative; top:0.5rem; /* float:left; */ } .bdButtonsRight { position:relative; top:.0rem; /* float:right; */ } .bdButtonsLeft button[type="button"], .bdButtonsRight button[type="button"] { width:auto; padding:0.2rem 0.5rem 0.3rem 0.5rem; text-transform:none; font-size: .85rem; } .bdButtonsLeft button[type="button"]:hover, .bdButtonsRight button[type="button"]:hover { opacity:1; cursor:pointer; } .bdButtonsLeft button[type="button"]:disabled, .bdButtonsRight button[type="button"]:disabled { border: 1px solid #999999; background: #cccccc; color: #999999; } .showDBIcons { position:relative; width: 100%; height: 100%; display:inline; } .DBIconText { display: inline-block; margin: 0rem; opacity:1 !important; } .bd-List li:hover { background: rgba(0,0,0,.5); cursor: pointer; } .bd-List li:hover div[class^="fuente"], .bd-List li:hover a { opacity: 1; cursor: pointer; transform: scale(1.3); color: #00ccff; /*#ccff00*/ } .DBIconNumber { /* background: rgba(0,0,0,.2); */ opacity: 0.6; font-size: 1rem; margin: .5rem; } .fuenteBDIcon { font-family: 'Pe-icon-7-stroke'; font-size: 2rem; } #console { height:90%; /* max-height:90%; background-color:#F90; */ min-height:50%; overflow:hidden; width:100%; position: relative; } #consoleExport { height:90%; /* background-color:#F90; overflow:auto; max-height:90%; */ min-height:50%; width:100%; } #consoleImport { height:90%; /* background-color:#F90; max-height:90%; */ min-height:50%; overflow:auto; width:100%; } #dragbarH { background-color:rgba(0, 0, 0, 0.0); height:3px; float: right; width: 100%; cursor: row-resize; z-index:997; padding-bottom: .5rem; } #dragbarH:hover { background-color:rgba(0, 0, 0, 0.3); } #ghostbarH { /* EN CODIGO width:100%; height:1px; */ background-color:rgba(0, 0, 0, .3); position:absolute; cursor: row-resize; z-index:998; } #SQLText, #pastedData { width:100%; height:100%; resize: none; } #SQLTextCopy, #ClipBoard { position:absolute; width:0px; height:0px; top:-1000px; /* display:none; */ } .iconButton { color: #000 !important; font-size: 1.25rem; padding-right: .2rem; opacity: 1 !important; } .iconButtonAnimation { display: inherit; font-size: 1.00rem; animation: spanRotare .5s; /* animation-name followed by duration in seconds*//* you could also use milliseconds (ms) or something like 2.5s */ -webkit-animation: spanRotare .5s; /* Chrome and Safari */ animation-iteration-count: infinite; } .cols3 { width:33%; display: block; margin: 0em; padding: .5rem; height: 100%; float:left; /* background-color:rgba(0, 0, 0, .3); */ } #ImportContainer { overflow: auto; width: 100%; } @keyframes spanRotare { 100% {transform: rotate(360deg);} } @-webkit-keyframes spanRotare /* Safari and Chrome - necessary duplicate */ { 100% {transform: rotate(360deg);} } /* FIN TABLES */ /* FORMATOS DE PAGINA :: INICIO */ [draggable] { -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; /* Required to make elements draggable in old WebKit */ -khtml-user-drag: element; -webkit-user-drag: element; } /* Red: rgba(255, 0, 0, 1) (Hex: #FF0000) Ornange-ish Red: rgba(226, 87, 30, 1) (Hex: #E2571E) Orange: rgba(255, 127, 0, 1) (Hex: #FF7F00) Yellow: rgba(255, 255, 0, 1) (Hex: #FFFF00) Green: rgba(0, 255, 0, 1) (Hex: #00FF00) Some Green: rgba(150, 191, 51, 1) (Hex: #96bf33) Blue: rgba(0, 0, 255, 1) (Hex: #0000FF) Indigo: rgba(75, 0, 130, 1)(Hex: #4B0082) Violet: rgba(139, 0, 255, 1) (Hex: #8B00FF) White: rgba(255, 255, 255, 1)(Hex: #ffffff) */ .overUL { /* */ background-color: rgba(0, 0, 0, .3) !important; border: 0.0625rem dashed rgba(0,0,0,.5); } .overLI { /* */ background-color: rgba(0, 0, 0, 1) !important; border: 0.0625rem dashed rgba(0,0,0,.5); } .fpHead { background-color: rgba(51, 51, 51, 0.75); border: 0.0625rem solid rgba(0, 0, 0, .5); z-index:10; position: relative; top: 0 px; /* */padding:.2rem; } .fpElements { border: 0.0625rem solid rgba(0, 0, 0, .2); width:100%; height:8rem; overflow: auto; display: none; flex-wrap: wrap; align-content:flex-start; flex-direction:column; padding:0.125rem; margin:0rem; } .fpSections { background-color: rgba(255, 255, 255, 0.1); border: 0.0625rem solid rgba(0, 0, 0, .5); min-height: 6.25rem; padding:0.125rem; /*margin-top:0.3125rem;*/ padding-bottom: 1.25rem; width:100%; display:none; } .fpRelatedList { background-color: rgba(255, 255, 255, 0.1); border: 0.0625rem solid rgba(0, 0, 0, .5); min-height: 6.25rem; padding:0.125rem; margin-bottom:1rem; display:none; margin: 0 auto; width:100%; padding-bottom: 1.25rem; /* flex-direction:column; overflow: auto; display: flex; flex-wrap: wrap; align-content:flex-start; align-items:flex-start; */ } .fpRelatedList li { display: block; } .fpButtons { background-color: rgba(255, 255, 255, 0.1); border: 0.0625rem solid rgba(0, 0, 0, .5); min-height: 1.875rem; padding:0.125rem; display:none; margin: 0 auto; width:100%; /*margin-top:0.3125rem;*/ } .fpButtonsRL { /* background-color: rgba(255, 255, 255, 0.1); border: 0.0625rem solid rgba(0, 0, 0, .5); max-width: 100%; padding-bottom: .5rem; */ display:inline-block; margin: 0 auto; width:100%; overflow: auto; } .fpTable { /* background-color:#F0F; */ /* width:33%; padding:0.3125rem; margin-top:0.3125rem; */ display: table; border-spacing: 0rem; border: 0rem solid rgba(226, 87, 30, 1); /* min-height:6.25rem; */ width:100%; border-collapse: separate; border-spacing: 0.3125rem; } .fpRow { display: table-row; width:100%; /* background-color: rgba(255, 255, 255, 0.1); border: 0.0625rem solid rgba(255, 127, 0, 1); */ } .fpCol { /* background-color:#FF0;*/ border: 0rem solid rgba(255, 255, 0, 1); width:100%; display:table-cell; padding:0rem; margin:0rem auto; height: 100%; vertical-align:top; /* left top middle */ } .fpColContent { display:block; width:100%; border: 0.0625rem solid rgba(0, 0, 0, .5); height: 100%; min-height:4rem; float:left; padding:0.125rem 0.125rem 0.625rem 0.125rem; /* display: flex; flex-wrap: wrap; align-content:flex-start; align-items:flex-start; */ } .fpColContent li { display: flex; max-width: 100%; background-color: rgba(0, 0, 0, .1); align-content: center; align-items: center; justify-content: center; min-height: 1.75rem; } .fpDragSection, .fpDragSectionMoved, .fpDragSpace, .fpDragSpaceMoved, .fpDragField, .fpDragFieldMoved, .fpDragButton, .fpDragRList, .fpDragRListMoved, .fpGroup, .fpDragControl, .fpDragControlMoved { display: inherit; position:relative; margin-bottom: 0.125rem; } [class="fpDragFieldMoved"][fieldtype="sysTextLarge"] { height:3.5rem !important; } .fpGroup { border: 0.06250rem solid rgba(255, 255, 255, .5); color:#FFF; background-color: rgba(0, 0, 0, 0.5); display:inherit; /* inline-block*/ padding:.60rem; /* margin:0.125rem; */ width: 2rem; font-size: .85rem; text-align: center !important; text-transform:uppercase; height: 100%; /* left center*/float:center; } .fpGroup span { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); transform-origin: 50% 50% 0; min-width: 5.5rem; /* transform: rotate(90deg); margin-left:-1.1rem; */ } .fpRelation { border: 0.06250rem solid rgba(139, 0, 255, .5); color:#FFF; display:inherit; /* inline-block*/ padding:0.125rem; margin-bottom: 0.125rem; /* margin:0.125rem; */ width: 8rem; font-size: .8rem; text-align: center; /* text-transform:uppercase; float:center; left center */ cursor:pointer; } .fpRelationParent { background-color: rgba(139, 0, 255, .2) !important; } .fpRelationChild { border: 0.06250rem solid rgba(0, 60, 0, 1) !important; /* background-color: rgba(0, 60, 0, 0.3) !important; */ } /* (Optional) Apply a "closed-hand" cursor during drag operation. */ .grabbable:active { cursor: grabbing; cursor: -moz-grabbing; cursor: -webkit-grabbing; } .fpDragSection, .fpDragSectionMoved { border: 0.06250rem solid rgba(150, 191, 51, .5); background-color: rgba(255, 255, 255, 0.1); } .fpDragSpace, .fpDragSpaceMoved { border: 0.06250rem solid rgba(0, 0, 255, .5); background-color: rgba(255, 255, 255, 0.1); } .fpDragField, .fpDragFieldMoved { border: 0.06250rem solid rgba(139, 0, 255, .5); background-color: rgba(255, 255, 255, 0.1); } .fpDragControl, .fpDragControlMoved { border: 0.06250rem solid rgba(51, 204, 204, .5); background-color: rgba(255, 255, 255, 0.1); } .fpDragFieldMoved, .fpDragControlMoved { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fpDragButton { border: 0.06250rem solid rgba(255, 127, 0, .5); } .fpDragRList, .fpDragRListMoved { border: 0.06250rem solid rgba(255, 255, 0, .5); } [class^="fpDrag"] /* COMUNES A LOS fpDrag*** */ { display:inherit; /* inline-block*/ padding:0.125rem; /* margin:0.125rem; background-color: rgba(255, 255, 255, 0.1); */ width: 8rem; font-size: .8rem; min-height: 1.25rem; cursor: move; /* fallback if grab cursor is unsupported */ cursor: grab; cursor: -moz-grab; cursor: -webkit-grab; background-color: rgba(0, 0, 0, .1); } /* (Optional) Apply a "closed-hand" cursor during drag operation. */ [class^="fpDrag"]:active { cursor: grabbing; cursor: -moz-grabbing; cursor: -webkit-grabbing; background-color: rgba(0, 0, 0, .1); } .fpElements li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0px; } [class*="Moved"] { width:100%; /**/ } .fpLabel { width:100%; border: 0.03125rem solid rgba(255, 255, 0, .5); padding:0.25rem; float: left; text-align: left; position: relative; min-height: 2rem; display: flex; align-items: center; font-size: 1rem; background-color: rgba(0, 0, 0, 0.1); } [class^="fp"] { -webkit-border-radius: 0.3125rem; -moz-border-radius: 0.3125rem; border-radius: 0.3125rem; } .fpIcons { font-family: 'Pe-icon-7-stroke'; font-size: 1rem; text-decoration: none; color:#FFF; opacity: 1.0; cursor: pointer; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; display: none; text-decoration: inherit; float:right; /* inline-block */ } .titlePOPUP { background-color: rgba(0, 0, 0, 0.3); color:white; text-align: left; padding:0.5rem; -webkit-border-radius: 0.3125rem; -moz-border-radius: 0.3125rem; border-radius: 0.3125rem; font-size: .85rem; /* width:100%; margin-bottom: 0.5rem; */ } .fpTitleIcons { font-family: 'Pe-icon-7-stroke'; font-size: 1rem; text-decoration: none; color:#FFF; opacity: 1.0; cursor: pointer; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; display: inline-block; text-decoration: inherit; float: right; top:.0rem; right:.0rem; } .fpIconsGroup { padding:0rem .2rem; position: absolute; top:.1rem; right:.0rem; background-color: rgba(0, 0, 0, 0.2); /* z-index: 999; height: 100%; width:100%; */ } .fpIcons:hover, .fpTitleIcons:hover { color: #00ccff; /*#ccff00*/ transform: scale(1.3); opacity: 1.0; } .fpDragSectionMoved:hover .fpIcons, .fpButtons:hover .fpIcons, .fpRelatedList:hover .fpIcons /*.fpDragSpaceMoved:hover .fpIcons, .fpDragFieldMoved:hover .fpIcons, .fpButtons .fpDragButton:hover .fpIcons, .fpDragRListMoved:hover .fpIcons */ { display: inline-block; } .fpDragSectionMoved:hover, .fpDragSection:hover, .fpDragSpace:hover, .fpDragField:hover, .fpDragButton:hover, .fpDragRList:hover, .fpDragSpaceMoved:hover, .fpDragFieldMoved:hover, .fpDragRListMoved:hover, .fpDragControl:hover, .fpDragControlMoved:hover { background-color: rgba(0, 0, 0, 0.2); /*color:rgb(166, 166, 166); z-index: 999; */ } .fpSpan { float:right; position:absolute; } .Contenido { width: 100%; height: 100%; overflow: auto; padding: 0rem; display:block; clear:both; } [class^="mSelector"] , .mSelectorCols ul li { -webkit-border-radius: 0.3125rem; -moz-border-radius: 0.3125rem; border-radius: 0.3125rem; } .mSelector { /* height:10rem; min-height: 5rem; */ width:100%; padding:0rem 0rem; clear:both; } .mSelectorSquare { /* border: 0.0625rem solid rgba(0, 0, 0, .5); background-color: rgba(0, 0, 0, 0.1); */ padding: .2rem .2rem .4rem .2rem; } [class^="mSelectorCols"] { background-color: rgba(255, 255, 255, .05); /* /* border: 0.0625rem solid rgba(255, 255, 255, .1); background-color: rgba(0, 0, 255, 0.1); border: 0.0625rem solid rgba(0, 0, 0, .5); */ width:48.5%; display:inline-block; height:100%; overflow: auto; padding:0.2rem 0.2rem; } [class^="mSelectorCols"] ul li { background-color: rgba(0, 0, 0, 0.2); /* border: 0.0625rem solid rgba(0, 0, 0, .5); */ width:100%; text-align: left; padding:0.2rem .50rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position:relative; font-size: .8rem; color:#FFF; opacity: 1; -webkit-border-radius: 0.3125rem; -moz-border-radius: 0.3125rem; border-radius: 0.3125rem; } [class^="mSelectorCols"] ul li:hover { /* background-color: rgba(0, 0, 255, 0.1); */ color:orange; } [class^="rlIcons"] { font-family: 'Pe-icon-7-stroke'; font-size: 1rem; text-decoration: none; color:#FFF; opacity: 1.0; cursor: pointer; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; display: none; text-decoration: inherit; float:right; /* inline-block */ } .rlIconsLeftVisible { display: inline-block !important; } .rlGroupIcons { margin: .05rem; padding:0rem .2rem; width:100%; height:100%; position: absolute; top:.0rem; right:.0rem; /* z-index: 999; */ } .rlGroupIcons:hover { background-color: rgba(0, 0, 0, 0.5); } .mSelectorColsRight .rlPoints+.rlGroupIcons { padding:0rem 2.2rem !important; } .rlPoints { margin: .0rem; padding:0rem .0rem; width: 2rem; height:100%; position: absolute; top:.0rem; right:.0rem; background-color:rgba(255,0,0,.15); text-align: right; display: none; /* z-index: 999; */ } .rlPointsNumber { display: flex; justify-content: flex-end; align-items: center; align-content: center; height: 100%; padding-right: 0.25rem; flex-wrap: nowrap; } .multySelect { min-width: 20rem; padding: 0.4rem; border-radius: 0.3125rem; box-shadow: inset 0.25rem 0.375rem 0.625rem -0.25rem rgb(0 0 0 / 30%), 0 0.0625rem 0.0625rem -0.0625rem rgb(255 255 255 / 30%); background: rgba(0,0,0,0.2); border: 0.0625rem solid rgba(0,0,0,.1); color: #FFF; text-shadow: #000 0rem 0.0625rem 0.3125rem; clear: both; font-family: Arial; position: relative; } .multyItem { margin-top: 0.1rem; } /* [class="multyItem"][defaultitem="1"] { border:1px solid rgba(0,255,0,.5); } [class="multyItem"][selSubOrd="1"] { border:1px solid rgba(255,255,0,.5); } */ [class^="rlIcons"]:hover { color: #00ccff; /*#ccff00*/ transform: scale(1.3); opacity: 1.0; display: inline-block; } .mSelectorColsLeft, .mSelectorColsRight { box-sizing: border-box; max-width: 100%; overflow-x: hidden; } .mSelectorColsLeft ul li:hover .rlIconsLeft { display: inline-block; } .mSelectorColsLeft ul li .rlIconsLeft .isMob { display: inline-block; } .mSelectorColsRight ul li:hover .rlIconsRight, th:hover .rlIconsRight, thead:hover .rlIconsRight, .mSelectorColsRight .rlPoints { display: inline-block; } .mSelectorColsRight ul li, .mSelectorColsLeft ul li { font-size: .8rem; padding: .4rem; } .rlIconsRight , .rlIconsLeft, .rlIconsLeftVisible { font-size: 1.2rem; margin-top: 0.3rem; } .rlIconsRight:first-child , .rlIconsLeft:first-child, .rlIconsLeftVisible:first-child { margin-right: 0.3rem; } #divFormRL { /*margin-left: auto; margin-right: auto; display: inline-block; padding: 1.25rem 0rem 1.25rem 0rem ; */ width:40rem; text-align:center; max-height: 100%; overflow: auto; } #roleIcon { font-size: 2rem !important; height: 3rem; } /* FORMATOS DE PAGINA :: FIN */ /* Horizontal */ /* 62.50% 10px; 68.75% 11px; 75.00% 12px; 81.25% 13px; 87.50% 14px; 93.75% 15px; 100% 16px */ /* @media screen and (orientation: landscape) { html { font-size: 87.50%;} } */ /* Vertical */ /* @media screen and (orientation: portrait) { html { font-size: 100.00%; } } */ /* 96 192 288 384 480 @media screen and (max-resolution: 384dpi) { html { font-size: 62.50%; } } :fullscreen { html { font-size: 62.50%;} } */ /* @media not|only mediatype and (media feature) { CSS-Code; } mediatype Value Description ------- ----------------------------------------------------- all Used for all media type devices print Used for printers screen Used for computer screens, tablets, smart-phones etc. speech Used for screenreaders that "reads" the page out loud media feature Value Description ------- ----------------------------------------------------- any-hover Does any available input mechanism allow the user to hover over elements? (added in Media Queries Level 4) any-pointer Is any available input mechanism a pointing device, and if so, how accurate is it? (added in Media Queries Level 4) aspect-ratio The ratio between the width and the height of the viewport color The number of bits per color component for the output device color-index The number of colors the device can display grid Whether the device is a grid or bitmap height The viewport height hover Does the primary input mechanism allow the user to hover over elements? (added in Media Queries Level 4) inverted-colors Is the browser or underlying OS inverting colors? (added in Media Queries Level 4) light-level Current ambient light level (added in Media Queries Level 4) max-aspect-ratio The maximum ratio between the width and the height of the display area max-color The maximum number of bits per color component for the output device max-color-index The maximum number of colors the device can display max-device-aspect-ratio The maximum ratio between the width and the height of the device max-device-height The maximum height of the device, such as a computer screen max-device-width The maximum width of the device, such as a computer screen max-height The maximum height of the display area, such as a browser window max-monochrome The maximum number of bits per "color" on a monochrome (greyscale) device max-resolution The maximum resolution of the device, using dpi or dpcm max-width The maximum width of the display area, such as a browser window min-aspect-ratio The minimum ratio between the width and the height of the display area min-color The minimum number of bits per color component for the output device min-color-index The minimum number of colors the device can display min-device-aspect-ratio The minimum ratio between the width and the height of the device min-device-width The minimum width of the device, such as a computer screen min-device-height The minimum height of the device, such as a computer screen min-height The minimum height of the display area, such as a browser window min-monochrome The minimum number of bits per "color" on a monochrome (greyscale) device min-resolution The minimum resolution of the device, using dpi or dpcm min-width The minimum width of the display area, such as a browser window monochrome The number of bits per "color" on a monochrome (greyscale) device orientation The orientation of the viewport (landscape or portrait mode) overflow-block How does the output device handle content that overflows the viewport along the block axis (added in Media Queries Level 4) overflow-inline Can content that overflows the viewport along the inline axis be scrolled (added in Media Queries Level 4) pointer Is the primary input mechanism a pointing device, and if so, how accurate is it? (added in Media Queries Level 4) resolution The resolution of the output device, using dpi or dpcm scan The scanning process of the output device scripting Is scripting (e.g. JavaScript) available? (added in Media Queries Level 4) update-frequency How quickly can the output device modify the appearance of the content (added in Media Queries Level 4) width The viewport width */ /* FORMATOS RESULTADO FINAL (INICIO) */ .fpButtonsFinal { margin: 0 auto; width:100%; display: inline-block; list-style: none; /* padding:0.500rem; border: 0.0625rem solid rgba(0, 0, 0, .5); min-height: 1.875rem; clear:both; background-color: rgba(255, 255, 255, 0.1); margin-top:0.3125rem; */ } .fpButtonFinal { border: 0.06250rem solid rgba(0, 0, 0, .5); display:inherit; /* inline-block*/ padding:0.300rem 0.125rem; /* min-width: 8rem; */ background-color: rgba(255, 255, 255, 0.1); font-size: 1.1rem; cursor: pointer; margin:0.125rem; /*EVITA QUE SEA SELECCIONABLE*/ -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; -ms-user-select:none; /* cursor: default; cursor: pointer; */ justify-content: center; color: #666; } .fpButtonFinal:hover { background-color: rgba(0, 0, 0, 0.2); color:rgb(196, 248, 6); } .fpSectionsFinal { width:100%; display:block; padding-bottom: 0.5rem; /* border: 0.0625rem solid rgba(0, 0, 0, .5); padding:0.125rem; padding-bottom: 1.25rem; in-height: 6.25rem; background-color: rgba(255, 255, 255, 0.1); margin-top:0.3125rem; */ } .fpLabelFinal2 { width:100%; padding:0.500em; text-align: left; position: relative; background: linear-gradient(to right, rgba(255,255,255,.1), rgba(255,255,255,.4)); display: flex; /* white-space: nowrap; */ flex-direction: row; justify-content: space-between; align-items: center; /* border: 0.03125rem solid rgba(255, 255, 0, .5); background-color: rgba(255, 255, 255, 0.1); float: left; */ } .fpLabelFinal { width:100%; padding:0.500em; text-align: left; position: relative; /* background: linear-gradient(to right, rgba(255,255,255,.1), rgba(255,255,255,.4));*/ background: linear-gradient(to right, rgba(0,0,0,.5), rgba(0,0,0,.1)); display: flex; /* white-space: nowrap; */ flex-direction: row; justify-content: space-between; align-items: center; /* border: 0.03125rem solid rgba(255, 255, 0, .5); background-color: rgba(255, 255, 255, 0.1); float: left; */ } .fpLabelFinal_Dark { width:100%; padding:0.500em; text-align: left; position: relative; background: linear-gradient(to right, rgba(0,0,0,.1), rgba(0,0,0,.4)); display: flex; /* white-space: nowrap; */ flex-direction: row; justify-content: space-between; align-items: center; /* border: 0.03125rem solid rgba(255, 255, 0, .5); background-color: rgba(255, 255, 255, 0.1); float: left; */ } .fpColapse_icon { font-family: 'Pe-icon-7-stroke'; float: right; -webkit-transition: -webkit-transform .35s ease; transition: transform .35s ease; font-size:1.25rem; } .fpLabelFinal input[type=checkbox]:checked + label :first-child { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .fpLabelFinal label { color: #fff; font-size:1rem; width:100%; padding: 0rem; top: 0rem; height:auto; } .fpIsClick { cursor: pointer; } .fpRowFinal { width:100%; display: table; /* margin-bottom: .5rem; background-color: rgba(255, 255, 255, 0.1); border: 0.0625rem solid rgba(255, 127, 0, 1); */ } .jsonRowFinal { width:100%; display: flex; flex-direction: column; align-items: flex-end; } .jsonRowFinalData { padding-bottom: 0.5rem; } .fpHideGroup { display: none !important; } .fpTableFinal { display: table; border-spacing: 0rem; width:100%; border-collapse: separate; border-spacing: 0.125rem; /* border: 0rem solid rgba(226, 87, 30, 1); min-height:6.25rem; background-color:#F0F; width:33%; padding:0.3125rem; margin-top:0.3125rem; */ } .fpColFinal { width:100%; display:table-cell; padding:0rem; margin:0rem auto; height: 100%; vertical-align:top; /* left top middle */ /* border: 0rem solid rgba(255, 255, 0, 1); background-color:#FF0; */ } .fpColContentFinal { display:block; width:100%; height: 100%; float:left; padding: 0.25rem 0.25rem 0.25rem 0.25rem; /* display: flex; flex-wrap: wrap; align-content:flex-start; align-items:flex-start; border: 0.0625rem solid rgba(0, 0, 0, .5); min-height:4rem; */ } .fpTitleIconsFinal { font-family: 'Pe-icon-7-stroke'; font-size: 1.2rem; text-decoration: none; color:#FFF; opacity: 1.0; cursor: pointer; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; display: inline-block; text-decoration: inherit; float:right; /* */ } .divEmpty { clear: both; max-width:100%; padding:0rem; margin:0rem auto; white-space: nowrap; } .holder { float: left; width: 100%; display: table-cell; position: relative; } .holder i { position: absolute; top: 0.3rem; right: 1.2rem; } [class^="absol"] { width: 1.5rem; display: table-cell; vertical-align:top; /* left top middle */ /* background-color: silver; */ } .fpIconsFinal { font-family: 'Pe-icon-7-stroke'; font-size: 1.5rem; text-decoration: none; color:#666; opacity: 1.0; cursor: pointer; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; /* display: inline-block; text-decoration: inherit; float:right; line-height: 1; margin-top: .3rem; */ } .whole { width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; } .fpPositionItem { margin-top: .5rem; font-size: 1rem; } .objDBName { font-size: 1.3rem; display: inline-block; padding: 0.6250rem; /* font-weight: 600; */ text-align: center; color: #666; height:2rem; vertical-align: bottom; border-bottom: 0.125rem solid orange; background-color: rgba(255, 255, 255, 0.25); line-height:.65rem; } input[readonly=readonly], textarea[readonly=readonly], select[readonly=readonly], :disabled { /* background-color:#ccc; border-:0.0625rem solid rgba(0,0,0,.1); font-style:italic; */ border-bottom: 0.0625rem ridge rgba(0,0,0,.1); border-top: 0.0625rem ridge rgba(0,0,0,.1); border-left: 0.0625rem ridge rgba(0,0,0,0); border-right: 0.0625rem ridge rgba(0,0,0,0); background:rgba(0,0,0,0.1); box-shadow:inset 0.25rem 0.375rem 0.625rem -0.25rem rgba(0,0,0,0.0), 0 0.0625rem 0.0625rem -0.0625rem rgba(255,255,255,0.0); } input[locked="1"], textarea[locked="1"], select[locked="1"], :disabled { background:rgba(255,0,0,0.1); } /* FORMATOS RESULTADO FINAL (FIN) */ /* TABLAS : INICIO */ /* TABLAS : FIN */ /* VISTAS : INICIO */ [class^="view"] { -webkit-border-radius: 0.3125rem; -moz-border-radius: 0.3125rem; border-radius: 0.3125rem; } .viewHeader { display: flex; background: linear-gradient(to right, rgba(0,0,0,.75), rgba(0,0,0,0.2)); position: relative; top: 0 px; justify-content: space-around; /* padding: .2rem; min-height: 3rem; margin-top: 0.1rem; position: relative; align-items: center; background-color: rgba(0, 0, 0, 0.2); margin-top: 0.5rem; display: block; */ width: 100%; margin: 0.1rem 0rem; } #View { font-size: 0.7rem !important; } .viewHeaderContent { display: flex; justify-content: space-between; width:100%; position: relative; /* align-items: center; overflow: hidden; flex-wrap: wrap; */ white-space: nowrap; margin: .5rem; align-items: center; } .viewSelector { display: flex; justify-content:flex-end; align-items: center; padding:.0rem .5rem .0rem .0rem; float: right; cursor: pointer; } .relatedListSelector { display: flex; /* align-items: center; background-color: rgba(255, 0, 0, 0.2); */ padding:.0rem .0rem .0rem .0rem; justify-content:flex-end; position: relative; max-width: 100%; /* overflow: hidden; */ height: 100%; } .viewOfInfo { display: flex; align-items: center; padding:0rem .0rem .0rem .5rem; float: left; max-width: 100%; /* overflow: hidden;*/ min-height: 3rem; min-width: 10rem; } .viewActions { display: flex; align-items: center; padding:.0rem .0rem .0rem .0rem; } .viewModes { display: flex; align-items: center; padding:.0rem .0rem .0rem .0rem; } .btnsBarHeader { display: flex; align-items: center; max-width: 100%; overflow:hidden; position:relative; padding-right: 1.75rem; padding-left: .75rem; min-height: 2.75rem; } .btnsBarHeader div { flex: 1 0 2rem; } .relatedListInfo { display: flex; align-items: center; /* padding:.5rem .0rem .2rem .4rem; */ float: left; } .viewSelector + #SearchFP span { top:1.2rem; } .viewToLeft { text-transform:uppercase; padding:.0rem .4rem; position: relative; } .headerObject { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color:#FFF; position:relative; display: flex; align-items: flex-start; flex-direction: column; justify-content: flex-start; z-index: 1; } .wiewFloat { float: left; } .wiewFloatR { float: right; } .cssPhone { color: #0080CC !important; cursor: pointer; } [active="1"] { color: #00ccff !important; opacity: 1.0; display: inline-block; z-index: 998; } [link="1"] { color: #0080CC !important; cursor: pointer; text-shadow: 0rem 0rem 0.01rem black; } [link="1"]:hover { color: #00ccff !important; } .ca-menu li[active="1"] { color: #0080CC !important; transform: scale(1.2); /* opacity: .8; */ /* A PETICION DE JAIRO */ display: inline-block; background-color: #FFFFFF !important; } .viewIconActionColor { background-color: rgba(0, 0, 0, 0.1)!important; border: none !important; } .viewButtonFinal { min-width: 2.3rem; height: 2.3rem; border: 0.06250rem solid rgba(0, 0, 0, .1); display:inherit; /* inline-block*/ padding:0.300rem 0.300rem; background-color: rgba(0, 0, 0, 0.2); font-size: 1.2rem; cursor: pointer; margin:0rem 0rem; /*EVITA QUE SEA SELECCIONABLE*/ -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; -ms-user-select:none; /* width: 2.3rem; cursor: default; cursor: pointer; */ } .viewSearch { display:inherit; /* inline-block*/ padding:0.000rem 0.000rem; /* height: 2.3rem; background-color: rgba(255, 255, 255, 0.1); border: 0.06250rem solid rgba(0, 0, 0, .5); float: left; */ font-size: 1.0rem; cursor: pointer; margin:0rem 0rem; } .viewButtonFinal:hover { color:rgb(166, 166, 166); } .viewIconButton { font-size: 1.5rem; opacity: 1 !important; } .viewButtonsRight { /* position:relative; padding:.9rem; float:left; */ display: flex; align-items: center; } .relatedListGroup { padding:1.0rem 0rem 0rem 0rem; } .relatedListGroup ~ .relatedListGroup { padding:0.5rem 0rem 0rem 0rem; } .relatedListBody { padding:0rem; overflow: auto; /* width: 99.99%; */ } .viewFooterMsg { height: 2.3rem; padding:0.300rem 0.300rem; font-size: .85rem; float: left; display: flex; align-items: center; color:#FFFFFF; text-align: left; /*EVITA QUE SEA SELECCIONABLE*/ -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; -ms-user-select:none; /* background-color: rgba(255, 255, 255, 0.1); cursor: pointer; margin:0rem 0rem; display:inherit; border: 0.06250rem solid rgba(0, 0, 0, .5); cursor: default; cursor: pointer; */ } .tableColLabel { height: 1.2rem; min-width: 100%; white-space: nowrap; } .tableColIcon { font-family: 'Pe-icon-7-stroke'; font-size: 1rem; text-decoration: none; color:#FFF; opacity: 1.0; cursor: pointer; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; /* visibility: hidden; */ text-decoration: inherit; float:right; position:absolute; right:0.2rem; } .tableColIcon:hover { color: #00ccff; /*#ccff00*/ transform: scale(1.3); opacity: 1.0; display: inline-block; } thead:hover .tableColIcon { /* visibility: visible; */ } /* VISTAS : FIN */ .NoSearch { width: 1%; } /* CHAT */ .chatT { font-family: 'Pe-icon-7-stroke'; text-decoration: none; cursor: pointer; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; text-decoration: inherit; /* display: none; inline-block */ } .BottomTimeZone { font-size: 1rem; width: 100%; top: .25rem; position: relative; text-align: center; /* float:right; color:#FFFFFF; opacity: 1; position: relative; top: 50%; transform: translateY(-50%); */ } .BottomDateTime { float:right; padding: 0rem .5rem; /* padding-top: .3rem; font-size: .90rem; */ } .BottomDate { font-size: .8rem; top: -.25rem; position: relative; width:100%; text-align: center; } .BottomHour { font-size: 0.9rem; font-family: 'SVBasicManual'; width:100%; text-align: center; } .BottomCopy { font-size: 1rem; font-family: 'SVBasicManual'; width:100%; text-align: center; top: .3rem; position: relative; } .BottomRemain { font-size: .8rem; font-family: 'SVBasicManual'; top: -.2rem; position: relative; width:100%; text-align: center; } .BottomRemain2 { font-size: 1rem; top: -.0rem; position: relative; text-align: center; font-family: 'Pe-icon-7-stroke'; font-size: .75rem; padding: 0.25rem 0.15rem 0rem 0rem; } .xchange { font-size: 1rem; text-align: center; top: -.3rem; position: relative; } .xchange2 { font-size: .8rem; text-align: center; top: -.3rem; position: relative; } .chatIconPpal { font-size: 1.75rem !important; } .iconPpal { float:right; color:#FFF; opacity: 1.0 ; cursor: pointer; } #chatUn { /* right:1rem; */ top:0.5rem; color:#FFF; opacity: 1.0; cursor: pointer; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; text-decoration: inherit; position: absolute; } #chatUnMs { left:2.5rem; top:1.5rem; color:#FFF; opacity: 1.0; cursor: pointer; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; text-decoration: inherit; position: absolute } /* The Modal (background) */ .chatModal { position: fixed; /* Stay in place */ z-index: 998; /* Sit on top */ right: .2rem; bottom: 2.5rem;; width: 25rem; /* Full width */ height: calc((100% - 6.5rem)*.60); /* Full height */ /* background-color: rgb(0,0,0);*/ /* Fallback color */ background-color: rgba(0,0,0,.75); /* Black w/ opacity */ text-align: center; display: none; /* Cambia por codigo a Flex */ justify-content: center; align-items: center; max-height: 100%; overflow: hidden; border: 0rem solid #888; border-radius: 0.3125rem 0.3125rem .0rem .0rem ; -moz-border-radius: 0.3125rem 0.3125rem .0rem .0rem ; -webkit-border-radius: 0.3125rem 0.3125rem .0rem .0rem ; box-shadow: 0 0 0.1875rem 0rem #000 inset, 0 0 0.3125rem 0rem #000; -moz-box-shadow: 0 0 0.1875rem 0rem #000 inset, 0 0 0.3125rem 0rem #000; -webkit-box-shadow: 0 0 0.1875rem 0rem #000 inset, 0 0 0.3125rem 0rem #000; } /* Modal Content/Box */ .chatModal-content { position:relative; color:#fff; max-height: 90%; max-width: 90%; overflow: auto; background-color: #111111; /* margin: 0 auto;15% auto; 15% from the top and centered */ padding: 1rem; border: 0rem solid #888; width: auto; /* 80%; Could be more or less, depending on screen size */ background:url(Images/dark_wall_75.png); /* .png _50.png */ border-radius: 0.3125rem; -moz-border-radius: 0.3125rem; -webkit-border-radius: 0.3125rem; box-shadow: 0 0 0.1875rem 0rem #000 inset, 0 0 0.3125rem 0rem #000; -moz-box-shadow: 0 0 0.1875rem 0rem #000 inset, 0 0 0.3125rem 0rem #000; -webkit-box-shadow: 0 0 0.1875rem 0rem #000 inset, 0 0 0.3125rem 0rem #000; -webkit-box-reflect: below 0.3125rem -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(75%, transparent), to(rgba(255, 255, 255, 0.2))); } /* ENCABEZADO - CONTENIDO VARIBLE - PIE */ .popUpModal { position: fixed; /* Stay in place */ z-index: 9999; /* Sit on top */ /* right: .2rem; bottom: 2.5rem;; height: calc((100% - 6.5rem)*.60); width: 25rem; */ /* Full width */ width:calc((100%)*1.0); height:calc((100%)*1.0); /* Full height */ /* background-color: rgb(0,0,0);*/ /* Fallback color */ background-color: rgba(0,0,0,.7); /* Black w/ opacity */ text-align: center; display: none; /* Cambia por codigo a Flex */ justify-content: center; align-items: center; max-height: 100%; overflow: hidden; } .popUpMiddle { padding: 1rem; color: #fff; background-color: rgba(32, 32, 32, 0.7); /* Black w/ opacity */ background-repeat: no-repeat; background-size: cover; background-position: center center; /* height: auto; width: 90%; height: 90%; padding: .0rem; display: block; */ overflow: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; /* row | row-reverse | column | column-reverse;*/ text-align: center; justify-content: center; align-items: center; justify-content: flex-start; max-height: 90%; min-width: 50%; max-width: 90%; border: 0rem solid #888; border-radius: 0.3125rem; -moz-border-radius: 0.3125rem; -webkit-border-radius: 0.3125rem; box-shadow: 0 0 0.1875rem 0rem #000 inset, 0 0 0.3125rem 0rem #000; -moz-box-shadow: 0 0 0.1875rem 0rem #000 inset, 0 0 0.3125rem 0rem #000; -webkit-box-shadow: 0 0 0.1875rem 0rem #000 inset, 0 0 0.3125rem 0rem #000; } .popUpHead { padding: .5rem; width:100%; text-align:center; background-color:rgba(255,255,255,.1); } .popUpSearch { padding: .5rem; width:100%; text-align:center; background-color:rgba(255,255,255,.05); } .popUpContent { /* max-height: 100%; height: 100%; text-align: center; padding: .5rem; */ width: 100%; overflow-y: auto; overflow-x: hidden; background-color: rgba(0,0,0,.2); } .popUpFoot { padding: .5rem; width: 100%; text-align: center; background-color: rgba(255,255,255,.1); } .popUpList { display:flex; white-space: nowrap; width:100%; text-align: left; padding: .25rem .5rem .25rem .5rem; text-align: left; vertical-align: middle; font-weight: 300; font-size: .85rem; text-shadow: -0.0625rem -0.0625rem 0.0625rem rgba(0, 0, 0, 0.1); color: rgba(25,25,25,1.0); border-bottom: 0.0625rem ridge rgba(0,0,0,.2); opacity: .85; } .popUpList:nth-child(even) {background: rgba(235,235,235,1.0) } /* #EBEBEB */ .popUpList:nth-child(odd) {background: rgba(255,255,255,1.0) } /* #FFF */ .popUpList:hover { opacity: 1; cursor: pointer; } .popUpList:hover span { transform: scale(1.3); } .popUpList span { padding: .0rem .0rem .0rem .50rem; } .popUpTitle { color:white; text-align: left; font-size: .90rem; /* -webkit-border-radius: 0.3125rem; -moz-border-radius: 0.3125rem; border-radius: 0.3125rem; padding:0.5rem; background-color: rgba(0, 0, 0, 0.3); width:100%; margin-bottom: 0.5rem; */ } /* ENCABEZADO - CONTENIDO VARIBLE - PIE */ /* container */ .container { padding: 5% 5%; } /* CSS talk bubble */ .talk-bubble { margin: .15rem 2rem; display: inline-block; position: relative; width: auto; height: auto; min-height: 2rem; } .lightyellow { background-color: #ffffff; } .lightgreen { background-color: #dcf8c6; } .border { border: 8px solid #666; } .round { border-radius: 0.3125rem; -webkit-border-radius: 0.3125rem; -moz-border-radius: 0.3125rem; } /* Right triangle placed top left flush. */ .tri-right.border.left-top:before { content: ' '; position: absolute; width: 0; height: 0; left: -40px; right: auto; top: -8px; bottom: auto; border: 32px solid; border-color: #666 transparent transparent transparent; } .tri-right.left-top:after{ content: ' '; position: absolute; width: 0; height: 0; left: -10px; right: auto; top: 0px; bottom: auto; border: 12px solid; border-color: #FFFFFF transparent transparent transparent; } /* Right triangle, left side slightly down */ .tri-right.border.left-in:before { content: ' '; position: absolute; width: 0; height: 0; left: -20px; right: auto; top: 1rem; bottom: auto; border: 10px solid; border-color: #FFFFFF transparent transparent transparent; } .tri-right.left-in:after{ content: ' '; position: absolute; width: 0; height: 0; left: -10px; right: auto; top: 1rem; bottom: auto; border: 6px solid; border-color: #FFF #FFF transparent transparent; } /*Right triangle, placed bottom left side slightly in*/ .tri-right.border.btm-left:before { content: ' '; position: absolute; width: 0; height: 0; left: -8px; right: auto; top: auto; bottom: -40px; border: 32px solid; border-color: transparent transparent transparent #666; } .tri-right.btm-left:after{ content: ' '; position: absolute; width: 0; height: 0; left: 0px; right: auto; top: auto; bottom: -20px; border: 22px solid; border-color: transparent transparent transparent lightyellow; } /*Right triangle, placed bottom left side slightly in*/ .tri-right.border.btm-left-in:before { content: ' '; position: absolute; width: 0; height: 0; left: 30px; right: auto; top: 1rem; bottom: -40px; border: 10px solid; border-color: #666 transparent transparent #666; } .tri-right.btm-left-in:after{ content: ' '; position: absolute; width: 0; height: 0; left: 38px; right: auto; top: 1rem; bottom: -20px; border: 6px solid; border-color: lightyellow transparent transparent lightyellow; } /*Right triangle, placed bottom right side slightly in*/ .tri-right.border.btm-right-in:before { content: ' '; position: absolute; width: 0; height: 0; left: auto; right: 30px; bottom: -40px; border: 10px solid; border-color: #666 #666 transparent transparent; } .tri-right.btm-right-in:after{ content: ' '; position: absolute; width: 0; height: 0; left: auto; right: 38px; bottom: -20px; border: 6px solid; border-color: lightyellow lightyellow transparent transparent; } /* left: -8px; right: auto; top: auto; bottom: -40px; border: 32px solid; border-color: transparent transparent transparent #666; left: 0px; right: auto; top: auto; bottom: -20px; border: 22px solid; border-color: transparent transparent transparent lightyellow; /*Right triangle, placed bottom right side slightly in*/ .tri-right.border.btm-right:before { content: ' '; position: absolute; width: 0; height: 0; left: auto; right: -8px; bottom: -40px; border: 20px solid; border-color: #666 #666 transparent transparent; } .tri-right.btm-right:after{ content: ' '; position: absolute; width: 0; height: 0; left: auto; right: 0px; bottom: -20px; border: 12px solid; border-color: lightyellow lightyellow transparent transparent; } /* Right triangle, right side slightly down*/ .tri-right.border.right-in:before { content: ' '; position: absolute; width: 0; height: 0; left: auto; right: -40px; top: 0px; bottom: auto; border: 10px solid; border-color: #666 transparent transparent #666; } .tri-right.right-in:after{ content: ' '; position: absolute; width: 0; height: 0; left: auto; right: -10px; top: 1rem; bottom: auto; border: 6px solid; border-color: #dcf8c6 transparent transparent #dcf8c6; } /* Right triangle placed top right flush. */ .tri-right.border.right-top:before { content: ' '; position: absolute; width: 0; height: 0; left: auto; right: -20px; top: -8px; bottom: auto; border: 32px solid; border-color: #666 transparent transparent transparent; } .tri-right.right-top:after{ content: ' '; position: absolute; width: 0; height: 0; left: auto; right: -10px; top: 0px; bottom: auto; border: 10px solid; border-color: #dcf8c6 transparent transparent transparent; } /* talk bubble contents */ .talktext{ padding: .5em; text-align: left; line-height: 1em; color:#000; } .talktext p{ /* remove webkit p margins */ -webkit-margin-before: 0em; -webkit-margin-after: 0em; } #divChat { width:100%; text-align:center; max-height: 100%; height: 100%; overflow: auto; } #divChatHead { padding: .5rem; width:100%; text-align:center; background-color:rgba(255,255,255,.1); } #divChatWrite { padding: .5rem; width:100%; text-align:center; background-color:rgba(255,255,255,.1); } #chatMsg { width:100%; resize: none; height: 3rem; /* height:auto; background-color: rgba(255,255,255,.1); */ } .Table { display: table; } .Row { display: table-row; } .Cell { display: table-cell; border: solid; border-width: 0rem; padding: 0.0rem 0.2rem; white-space: nowrap; vertical-align: middle; cursor: pointer; } .Cell2 { width:100%; } [class^="chatRow"] { width:100%; } .chatRowLeft { text-align:left; padding-right: 1rem; } .chatRowRight { text-align:right; padding-left:1rem; } .chatHourMinutes { float:right; color:#585858; padding-left: .5rem; font-size: .85rem; } .chatIcon { color:#000000 !important; /* 585858 */ opacity: 1 !important; padding:.3rem; } .chatImageUser{ width: 3rem; height: 3rem; padding-top: .4rem; border: 0.1rem solid rgba(255, 255, 255, 0.15); overflow: hidden; position: relative; background-color:rgba(255, 255, 255, 0.1); -webkit-border-radius: 3.75rem; -moz-border-radius: 3.75rem; border-radius: 3.75rem; /* 3.75 */ margin-top: .2rem; } .chatListSubTitle { font-size: .85rem; opacity: .5 !important; } #chatUserName { text-align: left; font-weight: bold; } #chatLastMsg { text-align: left; font-size: .75rem; overflow: hidden; max-width: 16rem; text-overflow: ellipsis; } #chatDate { color:#585858; font-family: Monospace; font-size: .85rem; } .chatUnread { font-family: Monospace; min-width: 1.5rem; height: 1.5rem; background-color: rgba(255, 0, 0, 0.75); -webkit-border-radius: 3.75rem; -moz-border-radius: 3.75rem; border-radius: 3.75rem; /* 3.75 */ padding: .15rem .5rem; } .chatUnr { font-family: Monospace; min-width: 1.5rem; height: 1.5rem; background-color: rgba(255, 0, 0, 0.75); -webkit-border-radius: 3.75rem; -moz-border-radius: 3.75rem; border-radius: 3.75rem; /* 3.75 */ padding: .3rem .5rem; font-size: .85rem; text-align: center; } [id^='divChatList_'] { background-color:rgba(255, 255, 255, 0.05); margin-top: .2rem; } #chatAudio { display: none } /* CHAT:FIN */ .ErrInput { /* color: #FF0000 !important; */ border-bottom: 0.1rem ridge rgba(0,0,0,0.0); border-top: 0.1rem ridge rgba(0,0,0,0.0); animation: blink 1s; animation-iteration-count: infinite; } @keyframes blink { 50% { border-bottom-color:rgba(255, 0, 0, 0.75); border-top-color:rgba(255,0,0,.75); } } .fileList { border-bottom: 0.0625rem ridge rgba(0,0,0,.2); border-top: 0.0625rem ridge rgba(0,0,0,.2); border-left: 0.0625rem ridge rgba(0,0,0,0); border-right: 0.0625rem ridge rgba(0,0,0,0); background:rgba(255,255,255,0.0); box-shadow:inset 0.25rem 0.375rem 0.625rem -0.25rem rgba(0,0,0,0.0), 0 0.0625rem 0.0625rem -0.0625rem rgba(255,255,255,0.0); overflow: auto; min-width:20rem; height: 40rem; /* */ } #listFiles { padding: 0rem 0rem 0rem 0rem; margin: 0rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; align-content: stretch ; /*space-between*/ width:100%; height:100%; } #listFiles li { flex-grow:1; /* si el parent es display:flex ajusta el ancho de cada item para ocupar todo el espacio de la fila...*/ /* border: 0.125rem solid rgba(0, 0, 0, 0.2); border-radius: .5rem; */ overflow: hidden; background-color:rgba(0, 0, 0, 0.5); margin:.2rem; position: relative; min-width: 10rem; } #listFiles li:hover { background-size: contain; } .overWindow2{ background-color: rgba(0, 255, 0, .3) !important; } .filePrewiew { /* width: 25rem; height: 20rem; */ height: 100%; float:left; background-repeat:no-repeat; background-size:cover; background-position: center center; border: 1px solid rgba(0,0,0,.5); margin: .25rem !important; cursor: pointer; vertical-align: middle; position:relative; } .filePrewiew p { margin-top: 25%; text-transform:uppercase; font-size: 3rem; } .pdfPrewiew { width: 100%; height: 100%; } .videoPrewiew { width: 100%; height: 100%; } .containerfileFullScreen { width: 100%; height: 100%; /* display: flex; flex-direction: column; */ text-align: center; justify-content: center; align-items: center; max-height: 100%; background-size: contain; background-color: rgba(255, 255, 255, .1) !important; } .fileFullScreen { /* max-width: 100%; max-height: 100%; display: block; max-width:100%; max-height:100%; width: auto; */ border:0px solid rgba(255,255,255,.75); } [class="filePrewiew"][selected="1"] { border:1px solid rgba(0,255,0,.5); } .overWindow{ /* */ background-color: rgba(255, 0, 0, .3) !important; } .fileIcon { font-family: 'Pe-icon-7-stroke'; font-size:1.25rem; padding: .2rem .2rem .2rem .5rem; animation-iteration-count: infinite; background-color: rgba(0, 0, 0, .5); border-bottom-right-radius: .3rem; /* 3.75 */ border-top-right-radius: .3rem; /* 3.75 */ -webkit-border-bottom-right-radius: .3rem; -webkit-border-top-right-radius: .3rem; -moz-border-bottom-right-radius: .3rem; -moz-border-top-right-radius: .3rem; position: absolute; z-index: 999; /* width:25%; float: right; animation: iconcolorchange 5s; -webkit-animation: iconcolorchange 5s; */ } .controlVideoTop { position: absolute; width:100%; top: 0rem; font-size: 1.25rem; padding: .2rem; animation-iteration-count: infinite; background-color: rgba(0, 0, 0, .5); visibility: hidden; transition: visibility 0s, opacity 0.5s linear; opacity: 0; } .controlVideoPopup[show='1'] { position: absolute; right: 0; bottom: 3rem; font-size: 1.25rem; padding: .2rem; animation-iteration-count: infinite; background-color: rgba(0, 0, 0, .5); float: right; visibility: visible !important; /* width:100%; */ transition: visibility 0s, opacity 0.5s linear; opacity: 0; } .controlVideoPopup[show='0'] { visibility: hidden !important; } .controlVideo { position: absolute; width:100%; bottom: 0rem; font-size: 1.25rem; padding: .2rem; animation-iteration-count: infinite; background-color: rgba(0, 0, 0, .5); visibility: hidden; transition: visibility 0s, opacity 0.5s linear; opacity: 0; } .controlVideoHide5s { animation: cssAnimation 5s forwards; } @keyframes cssAnimation { 0% {opacity: 1;} 90% {opacity: 1;} 100% {opacity: .0; visibility: hidden; } } .filePrewiew:hover .controlVideo, .filePrewiew:hover .controlVideoTop, .filePrewiew:hover .controlVideoPopup { visibility: visible !important; opacity: 1 !important; } @keyframes iconcolorchange { 0% {color: #000000;} 50% {color: #FFFFFF;} 100% {color: #000000;} } @-webkit-keyframes iconcolorchange /* Safari and Chrome - necessary duplicate */ { 0% {color: #000000;} 50% {color: #FFFFFF;} 100% {color: #000000;} } .cellToEllipse { position: relative; top: 0; right: 0; bottom: 0; left: 0; box-sizing: border-box; display: block; padding: 8px; width: 100%; } .cell-overflow { box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } progress { width:20rem; border: 0; height: 1.5rem; border-radius: 2rem; background-color: rgba(0, 0, 0, 0.1); } progress::-webkit-progress-bar { width:20rem; border: 0; height: 1.5rem; border-radius: 2rem; background-color: rgba(0, 0, 0, 0.1); } progress::-webkit-progress-value { width:20rem; border: 0; height: 1.5rem; border-radius: 2rem; background-color: rgba(0, 0, 0, 0.1); } progress::-moz-progress-bar { width:20rem; border: 0; height: 1.5rem; border-radius: 2rem; background-color: rgba(0, 0, 0, 0.1); } progress[value]::-webkit-progress-value { background-image: -webkit-linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .1) 33%, rgba(0,0, 0, .1) 66%, transparent 66%), -webkit-linear-gradient(top, rgba(255, 255, 255, .1), rgba(0, 0, 0, .1)), -webkit-linear-gradient(left, rgba(255, 255, 0, .5), rgba(0, 255, 0, .5), rgba(255, 0, 0, .5), rgba(0, 0, 255, .5)); border-radius: 2rem; background-size: 0rem 0rem, 100% 100%, 100% 100%; } .progressGroup { position: relative; display: block; } .progressGroup progress { } .progressGroup span { width: 100%; text-align: center; position: absolute; top: .2rem; left:0; clear: both; } input[type='range'] { display: inline-block; width: 100%; height: 1.8rem; background-color: rgba(0,0,0,0); } input[type='range']:focus { outline: none; } input[type='range'], input[type='range']::-webkit-slider-runnable-track, input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; } input[type=range]::-webkit-slider-thumb { background-color: rgba(7,7,7,0); width: 15px; height: 15px; border: 2px solid #FFF; border-radius: 50%; margin-top: -6px; } input[type=range]::-moz-range-thumb { background-color: rgba(7,7,7,0);; width: 15px; height: 15px; border: 3px solid #FFF; border-radius: 50%; } input[type=range]::-ms-thumb { background-color: rgba(7,7,7,0);; width: 20px; height: 20px; border: 3px solid #FFF; border-radius: 50%; } input[type=range]::-webkit-slider-runnable-track { background-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* linear-gradient(90deg,yellow 0%,green 25%, red 50%, blue 75% 300px); */ /* background-color: #000;*/ background-repeat: no-repeat; background-position:0% 0%; height: 4px; } input[type=range]:focus::-webkit-slider-runnable-track { outline: none; } input[type=range]::-moz-range-track { background-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* linear-gradient(90deg,yellow 0%,green 25%, red 50%, blue 75%); */ /* background-color: #000; */ background-repeat: no-repeat; height: 4px; } input[type=range]::-ms-track { /* background-color: #777; */ height: 4px; } input[type=range]::-ms-fill-lower { background-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* linear-gradient(90deg,yellow 0%,green 25%, red 50%, blue 75%); */ } input[type=range]::-ms-fill-upper { background-color: black; } .salesContent { height: 100%; } .productFamilyGroup { padding: 0rem 0.5rem; } .bd-List li[select="1"] { background-color: rgba(255,0,0, .1); } .ProductName { background: rgba(0,0,0,.625); opacity: 1; font-size: 1rem; /* border: 0.0625rem solid rgba(0, 0, 0, 0); border-radius: .5rem; padding: .3rem; margin: .5rem; */ } .addToRecip { background: rgba(0,0,0,.5); border-radius: 2.0rem; padding: 0.0rem; flex:0 0; } #TableData_Order input[id^='Qtty_'] { min-width: 4rem; font-size: 1.2rem; font-family: 'SVBasicManual'; text-align: right; background:rgba(255,255,255,0.2); color:#000; /* width: 4rem; text-shadow:#FFF 0rem 0.0625rem 0.3125rem; margin-bottom: .6rem; text-transform:uppercase; cursor:pointer; clear: both; @include disable; border:0.0625rem solid rgba(0,0,0,.1); */ } .productFamilyGroup input[type=number]::-webkit-inner-spin-button, .productFamilyGroup input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } /* input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { position: absolute; top: 0; right: 0; height: 100%; -webkit-appearance: inner-spin-button !important; width: 3rem; } */ .viewSelector .Numbers { font-size: 1.1rem; font-family: 'SVBasicManual'; text-align: right; } .clientSearchForm { display: flex; align-items: center; padding: 1rem 3rem; width:100%; text-align:center; } /* PRICE LIST */ .price-List{ padding: 0rem 0rem 0rem 0rem; margin: 0rem; display: flex; flex-wrap: wrap; justify-content: space-between; /* flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe; */ align-items: stretch; align-content: space-between; /* stretch */ } .price-List li { /* font-size: 15px; */ /*flex:0 0 10rem; flex-grow: 1; flex-shrink: 0; flex-basis: 10rem; */ /* flex-grow: 0 = NO RELLENA LA FILA; flex-grow: 1 = RELLENA LA FILA;*/ flex-grow: 1; border: 0.125rem solid rgba(0, 0, 0, 0.2); overflow: hidden; background-color:rgba(0, 0, 0, 0.1); margin:.1rem; border-radius: .5rem; position: relative; text-align: center; padding: .1rem; } #overlay { /* width:100px; height:100px; padding: 10px; */ display:none; position: absolute; background-color: black; opacity: .8; top: 0px; left: 0px; } /* COMPRAS MASIVAS */ #buyItems { font-size: .8rem; padding: 0rem 0rem 0rem 0rem; margin: 0rem; display: flex; flex-wrap: wrap; justify-content: space-evenly; align-items: center; align-content: stretch; flex-direction: row; height: 100%; overflow: auto; /* flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe; */ /* padding: 0rem 0rem 0rem 0rem; margin: 0rem; display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; align-content: center ; overflow: auto; height: 100%; align-content: flex-start; */ } #buyItems li { flex:0 0 22rem; /* flex-grow: 1; flex-shrink: 0; flex-basis: 10rem; */ /* flex-grow: 0 = NO RELLENA LA FILA; flex-grow: 1 = RELLENA LA FILA;*/ /* flex-grow:1; si el parent es display:flex ajusta el ancho de cada item para ocupar todo el espacio de la fila...*/ /* float:left; border: 0.125rem solid rgba(0, 0, 0, 0.2); */ overflow: hidden; margin:.2rem; border-radius: .5rem; position: relative; text-align: center; background:rgba(255, 255, 255, 0.1); /* padding: .5rem; 0rem 0rem 0rem 0rem; */ /* width: 15rem; height: 5rem; margin-left:-0.625rem; margin-top: 0rem; -webkit-box-shadow: 0.0625rem 0.0625rem 0.125rem rgba(0,0,0,0.2); -moz-box-shadow: 0.0625rem 0.0625rem 0.125rem rgba(0,0,0,0.2); box-shadow: 0.0625rem 0.0625rem 0.125rem rgba(0,0,0,0.2); -webkit-border-radius: 3.75rem; -moz-border-radius: 3.75rem; -webkit-transition: all 400ms linear; -moz-transition: all 400ms linear; -o-transition: all 400ms linear; -ms-transition: all 400ms linear; transition: all 400ms linear; */ } #first { position: relative; width: 100%; float:left; opacity: .5; background-repeat: no-repeat; background-size: contain; background-position: center center; } .firstBig { height: 17.5rem; background-repeat: no-repeat; background-size: cover; background-position: center center; } .firstMedium { height: 12.5rem; } .firstShort { height: 8.5rem; } #second { /* padding:.2rem; */ position: absolute; width: 100%; top:0; left:0; float:left; } .secondBig { height: 18.5rem; } .secondMedium { height: 12rem; } .secondShort { height: 8rem; } .buyName { padding: .45rem; font-size: 1rem; overflow: hidden; height: 2rem; width: 100%; background:rgba(0, 0, 0, 0.5); border-radius: .5rem; cursor: pointer; /* margin-bottom: .5rem; */ } #buyItems table { /* width:16rem; */ } #buyItems table tbody td:nth-child(2) /* :nth-child(odd) */ { background:rgba(0, 0, 0, 0.5); padding: .2rem .5rem; } .CostUnitRed { color: rgba(252,76,2, 1) !important; /*rgba(66, 0, 0, 1) rgb(255, 156, 0) text-shadow: #000 0rem 0.0rem 0.125rem;*/ } .CostUnitGreen { color: rgb(0, 255, 0) !important; /* rgb(124, 252, 0) */ } .buyNumbers { font-size: .9rem; font-family: 'SVBasicManual'; text-align: center; white-space: nowrap; } .salesNumbers { font-family: 'SVBasicManual'; text-align: right !important; /*font-size: 0.85rem; */ } .formatN { font-family: 'SVBasicManual'; text-align: right !important; /* font-size: 0.85rem !important; */ } .salesDate { font-family: 'SVBasicManual'; /* font-size: 0.85rem; */ text-align: center !important; } .wonPercent { position: absolute; width:100%; bottom:0px; border-bottom-right-radius:0.5rem; border-bottom-left-radius:0.5rem; } #first-percent { position: relative; width: 20rem; /* height: 14rem; */ float:left; opacity: 1; background-repeat: no-repeat; background-size: cover; background-position: center center; bottom: 0rem; left: 0; } #second-percent { position: absolute; width: 19rem; /* height: 14rem; */ bottom: 0rem; right:0; } #buyItems input[type=number]::-webkit-inner-spin-button, #buyItems input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } span[id^="Inventary_"] { text-align: center !important; font-family: 'SVBasicManual'; font-size: 2rem; bottom: 0rem; left: 0; position: absolute; width: 100%; background-color: rgba(0,0,0,.75); border-bottom-right-radius:0.5rem; border-bottom-left-radius:0.5rem; } .bottomCard { bottom: 0rem; left: 0; position: absolute; width: 100%; background-color: rgba(0,0,0,.75); border-bottom-right-radius:0.5rem; border-bottom-left-radius:0.5rem; min-height: 2.5rem; display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: center; } .IconsInv { padding: .3rem; font-size: 1rem; overflow: hidden; background:rgba(0, 0, 0, 0.75); cursor: pointer; display: flex; align-items: center; justify-content: space-between; width: 100%; white-space: nowrap; border-top-right-radius:0.5rem; border-top-left-radius:0.5rem; min-height: 2.5rem; } .IconsInvBtns { display: flex; align-items: center; justify-content: space-between; } .IconsInv > div { /* float:right; */ } .Qtty { width: 50%; height: 3rem; text-align: center; } .TittleProduct { width: 100%; text-align: center; background-color: rgba(0,0,0,.75); margin-top: .5rem; padding: .5rem; border-radius: 0.3125rem; -moz-border-radius: 0.3125rem; -webkit-border-radius: 0.3125rem; } .notif { color:#FFF; opacity: 1.0; cursor: pointer; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; text-decoration: inherit; position: relative; } .notifNumber { font-family: Monospace; min-width: 1.5rem; height: 1.5rem; background-color: red; -webkit-border-radius: 3.75rem; -moz-border-radius: 3.75rem; border-radius: 3.75rem; padding: .3rem .5rem; font-size: 1rem; text-align: center; position: absolute; right: -.5rem; top: 1rem; } /* ESTILOS PARA EL MODULO DE STATUS */ .statusList { padding: 0rem 0rem 0rem 0rem; margin: 0rem; display: flex; flex-wrap: wrap; justify-content: center; /* flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe; */ align-items: stretch; align-content: stretch ; /*space-between*/ height:100%; } .statusList li { /* flex:0 0 32%; padding: .2rem; */ flex-grow:1; /* flex-grow:1; si el parent es display:flex ajusta el ancho de cada item para ocupar todo el espacio de la fila...*/ /* flex-grow: 1; flex-shrink: 0; flex-basis: 10rem; */ /* flex-grow: 0 = NO RELLENA LA FILA; flex-grow: 1 = RELLENA LA FILA;*/ background: linear-gradient(to bottom, rgba(0,0,0,.3), rgba(0,0,0,0.05)); overflow: hidden; margin:.2rem; border-radius: .5rem; position: relative; text-align: center; /* height: 13rem; */ max-height: 50%; width:24%; } /* .statusList > li > span:first-child { padding: .45rem; font-size: 1rem; overflow: hidden; width: 100%; background:rgba(0, 0, 0, 0.1); border-radius: .5rem; } */ .statusList li span:nth-child(3) { font-family: 'SVBasicManual'; font-size: 1rem; bottom: 0rem; left: 0; position: absolute; width: 100%; background-color: rgba(0,0,0,.75); overflow: hidden; padding: .45rem; } #Saldo { font-family: 'SVBasicManual'; font-size: 1.2rem; text-align: center; top: .5rem; position: relative; } #Saldo>span { font-size: 0.85rem; top:-.5rem; position: relative; } div:disabled { background-color: rgba(255,0,0,.75); } /* TRASH */ .trash-List{ padding: 0rem 0rem 0rem 0rem; margin: 0rem; /* width: auto; display:inline-table; display:inline; background-color: rgba(0, 0, 0, 0.7); display: inline-block; */ display: flex; flex-wrap: wrap; justify-content: center; /* flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe; */ align-items: stretch; align-content: stretch ; /*space-between*/ } .trash-List li { display: flex; align-items: center; padding: 0rem .3rem .0rem .0rem; float: left; width: 100%; max-width: 100%; overflow: hidden; position: relative; background-color:rgba(0, 0, 0, 0.1); margin:.1rem; border-radius: .5rem; cursor: pointer; /* min-height: 3rem; */ /* min-width: 10rem; */ /* flex:0 0 10rem; */ /* flex-grow: 1; flex-shrink: 0; flex-basis: 10rem; */ /* flex-grow: 0 = NO RELLENA LA FILA; flex-grow: 1 = RELLENA LA FILA;*/ /* flex-grow:1; si el parent es display:flex ajusta el ancho de cada item para ocupar todo el espacio de la fila...*/ /* float:left; */ /* border: 0.125rem solid rgba(0, 0, 0, 0.2); overflow: hidden; position: relative; text-align: center; padding: 1rem 0rem 0rem 0rem; */ /* width: 15rem; height: 5rem; margin-left:-0.625rem; margin-top: 0rem; -webkit-box-shadow: 0.0625rem 0.0625rem 0.125rem rgba(0,0,0,0.2); -moz-box-shadow: 0.0625rem 0.0625rem 0.125rem rgba(0,0,0,0.2); box-shadow: 0.0625rem 0.0625rem 0.125rem rgba(0,0,0,0.2); -webkit-border-radius: 3.75rem; -moz-border-radius: 3.75rem; -webkit-transition: all 400ms linear; -moz-transition: all 400ms linear; -o-transition: all 400ms linear; -ms-transition: all 400ms linear; transition: all 400ms linear; */ } .trash-List li .viewToLeft { opacity: .5; } .trash-List li:hover .viewToLeft { opacity: 1; } .trash-List li div div:hover { z-index: 999; -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -o-transform: scale(1.3); -ms-transform: scale(1.3); transform: scale(1.3); } .trash-List li:hover .FloatToLeft { opacity: 1; cursor: pointer; transform: scale(1.3); color: #00ccff; /*#ccff00*/ } .trash-List li:hover { background-color:rgba(0, 0, 0, 0.3); opacity: 1; } .trash-List li[Sel="1"] { background-color:rgba(255, 255, 255, .1); opacity: 1; } .iconOnView { background-color:rgba(0, 0, 0, 0.3); transform: scale(1.3); color: #00ccff; /*#ccff00*/ border-radius: .1rem; padding:.2rem; min-width:1.5rem; min-height:1.5rem; text-align: center; } /* .ca-menu li:hover, .IconMenu:hover, .ca-menu li[IsActive="0"] { border-color: #333; z-index: 998; -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -o-transform: scale(1.3); -ms-transform: scale(1.3); transform: scale(1.3); background-color:rgba(0, 0, 0, 0.9); } */ /* TRASH */ /* PUBLICITY */ .ccsLogoPublicity { /* */ height: 4.5rem; /* margin-top: -2rem; width: 4.6875rem; text-align: center; display: block; margin-left: auto; margin-right: auto; */ position: absolute; z-index: 999; left:0px; border-radius: 3.75rem; } .ccsLogoBCV { position:absolute; height: 4rem; right: 0rem; top:-1rem; } .ccsMontoBCV { position: absolute; right: 4rem; font-size: 1.25rem; font-family: 'SVBasicManual'; top: .0rem; } .ccsFechaBCV { position:absolute; right: 4.2rem; font-size:0.75rem; font-family: 'SVBasicManual'; bottom:0.25rem; } .BottomSpanPublicity { opacity: 1; font-size:0.875rem; padding-left:3.5rem; /* LOGOTIPO */ padding-top:0rem; /* padding: 1.25rem 4.6875rem 1.25rem 1.25rem; TOP DER BOTTOM IZQ */ /* position: absolute; top: 50%; transform: translateY(-50%); */ } .cabeceraPublicity { /* background: #FFFBB9; height: 4.6875rem;*/ border: 0rem solid #999999; padding: 0.9375rem 0.0rem 0.0rem 1.0rem; /*TOP DER BOTTOM IZQ */ background-image: url(Images/BgHeadWhite.png); /* url(NewLogo.png), url(BgHeader.png) */ background-position: right center, left bottom; background-repeat: no-repeat, repeat-x; background-size: 100% 100%; /* auto , 100% 100% */ color:#FFFFFF; min-height: 6rem; } .ContainerPublicity { display: flex; overflow: hidden; height: calc(( 100vh - 2rem)); /* margin-bottom: -2.5rem; padding-bottom: 2.5rem; margin-top: -3.75rem; padding-top: 3.75rem; height: calc(( 100vh - 10.5rem)); */ position: relative; width: 100%; backface-visibility: hidden; will-change: overflow; } .BottomPublicity { /* text-align: left; align-items: left; vertical-align:center; justify-content: center; position: relative; z-index: 100; clear: both; background: #CCCCCC; text-align: center; padding: 1.25rem; border-top: 0.125rem solid #999999; background: #FFFBB9; background-size: 4.6875rem 4.6875rem; */ height: 2.5rem; border: 0rem solid #999999; /* padding: 0.3125rem 0rem 0.3125rem 0rem;*/ /*TOP DER BOTTOM IZQ */ background-image: url(Images/NewLogo.png), url(Images/BgHeadWhite.png); background-position: left center, left center; background-repeat: no-repeat, repeat-x; background-size: 4.6875rem 4.6875rem; opacity:0.7; color:#000000; font-size: 0.625rem; font-family: 'cicle_gorditagordita'; position: fixed; z-index: 100; bottom: 0; left: 0; width: 100%; -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; -ms-user-select:none; } .bodyStylePublicity { font-family: 'cicle_gorditagordita'; /* text-align:left; */ /* background: #a1d0e1; */ animation: colorchange 240s; /* animation-name followed by duration in seconds*//* you could also use milliseconds (ms) or something like 2.5s */ -webkit-animation: colorchange 240s; /* Chrome and Safari */ animation-iteration-count: infinite; } .TitleProduct { /* font:bold 0.875rem Tahoma, Verdana, sans-serif; font-size: 3rem;*/ font-family: 'TektonPro'; font-weight:normal; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .TextShadow { font-family: 'TektonPro'; font-weight:normal; text-shadow: 0 5px 3px #c4b59d,0 -2px 1px #fff; } #Vale { height:100%; width:100%; border:0rem solid #E5E5E5; top:0rem; /* cursor: wait; line-height:2em; background-color:#000000; */ filter: alpha(opacity=90); -moz-opacity: 0.9; opacity: 1; z-index: 999; position: absolute; } #Vale:hover { /* cursor: wait; */ } #ValeForm { /*margin-left: auto; margin-right: auto; display: inline-block; padding: 1.25rem 0rem 1.25rem 0rem ; overflow: auto; width:20.625rem; */ width:23rem; color:#000 !important; text-align:center; max-height: 100%; } .cellCenterNoWrap { text-align: center; white-space: nowrap; padding: 0rem .5rem; width:50%; /* */ } .fieldsShow { padding: 0rem 0rem 0rem 0rem; margin: 0rem; display: flex; flex-wrap: wrap; justify-content: center; /* flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe; */ align-content: stretch ; /*space-between*/ align-items: center; } .fieldsShowLayout { /* padding: 0.5rem 0rem 0rem 0rem;*/ margin: 0rem; display: flex; flex-wrap: wrap; justify-content: center; /* flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe; */ align-content: stretch ; /*space-between*/ align-items: center; } .fieldsShow li { flex:1 0 45%; /* flex-grow: 1; flex-shrink: 0; flex-basis: 10rem; */ /* flex-grow: 0 = NO RELLENA LA FILA; flex-grow: 1 = RELLENA LA FILA;*/ /* flex-grow:1; si el parent es display:flex ajusta el ancho de cada item para ocupar todo el espacio de la fila...*/ /* float:left; overflow: hidden; border: 0.125rem solid rgba(0, 0, 0, 0.2); background-color:rgba(0, 0, 0, 0.1); margin:.2rem; border-radius: .5rem; position: relative; text-align: center; padding: 0rem 0rem 0rem 0rem; */ } .groupShow { padding: 0rem 0rem 0rem 0rem; margin: 0rem; display: flex; flex-wrap: wrap; justify-content: space-evenly; /* flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe; */ align-content: stretch; /*space-between*/ align-items: flex-start; flex-direction: row; width:100%; } .groupShow > li { flex:1 0 45%; } .groupProductionShow { padding: 0rem 0rem 0rem 0rem; margin: 0rem; display: flex; flex-wrap: wrap; justify-content: space-evenly; /* flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe; */ align-content: stretch; /*space-between*/ align-items: flex-start; flex-direction: row; height:100%; } .groupSalesShow { padding: 0rem 0rem 0rem 0rem; margin: 0rem; display: flex; justify-content: space-evenly; /* flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe; */ align-content: stretch; /*space-between*/ flex-direction: row; flex-wrap: wrap; align-content: stretch; } .groupSalesShow > li { flex:1 0 49%; /* overflow-y: auto; */ } .groupSalesShowContent { align-items: stretch; justify-content: space-between; max-width:100%; white-space: nowrap; margin: 0rem .1rem; /* overflow: auto; display: flex; */ } .salesContent { overflow:auto; } .production-List{ padding: 0rem 0rem 0rem 0rem; margin: 0rem; display: flex; flex-wrap: wrap; justify-content: space-evenly; align-items: center; align-content: stretch; flex-direction: row; height: 100%; } .production-List li { flex:0 0 13rem; /* flex-grow: 1; flex-shrink: 0; flex-basis: 10rem; */ /* flex-grow: 0 = NO RELLENA LA FILA; flex-grow: 1 = RELLENA LA FILA;*/ overflow: hidden; background-color:rgba(0, 0, 0, 0.1); margin:.2rem; border-radius: .5rem; position: relative; text-align: center; min-height:10rem; } .percentBox { /* width: 100%; font-family: Arial; */ font-size: .85rem; padding: 0.4rem; border-radius: 0.3125rem; box-shadow: inset 0.25rem 0.375rem 0.625rem -0.25rem rgb(0 0 0 / 30%), 0 0.0625rem 0.0625rem -0.0625rem rgb(255 255 255 / 30%); background: rgba(0,0,0,0.2); border: 0.0625rem solid rgba(0,0,0,.1); color: #FFF; text-shadow: #000 0rem 0.0625rem 0.3125rem; clear: both; position: relative; } .percentBar { position:absolute; top:0px; left:0px; /* width:50%; */ /* SE SETEA EN CODIGO */ height:100%; background-color: rgb(20 91 50 / 50%); border-radius: 0.3125rem; } .areaCenterdScrolled { width: calc((100%)*1.0); display: none; justify-content: center; align-items: center; height: 100%; } .areaCenterdScrolledMiddle { -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; max-height: 100%; max-width: 100%; width: 100%; height: 100%; } .areaCenterdScrolledMiddleContent { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; overflow: auto; } #combo_Products { height: 14rem; overflow: hidden auto; width: 100%; border: 0.0625rem solid rgba(0, 0, 0, .5); background-color: rgba(0, 0, 0, 0.1); padding: 0.4rem; border-radius: 0.3125rem; box-shadow: inset 0.25rem 0.375rem 0.625rem -0.25rem rgb(0 0 0 / 30%), 0 0.0625rem 0.0625rem -0.0625rem rgb(255 255 255 / 30%); background: rgba(0,0,0,0.2); border: 0.0625rem solid rgba(0,0,0,.1); color: #FFF; text-shadow: #000 0rem 0.0625rem 0.3125rem; clear: both; font-family: Arial; position: relative; } .groupPrice { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: center; } .unProcess { font-family: Monospace; background-color: rgba(255, 0, 0, 0.75); -webkit-border-radius: 3.75rem; -moz-border-radius: 3.75rem; border-radius: 3.75rem; padding: .15rem .35rem; font-size: 0.75rem; right: -0.1rem; bottom: -0.1rem; color: #FFF; opacity: 1.0; cursor: pointer; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; text-decoration: inherit; position: absolute; display: none; } #GroupBuyContent { font-size: .8rem; padding: 0rem 0rem 0rem 0rem; margin: 0rem; display: flex; align-items: center; align-content: stretch; flex-direction: row; height: 100%; flex-wrap: wrap; justify-content: center; } [id^="totalOrder"] { font-size: 1.5rem; color: white; } time { position:absolute; display: flex; text-align: center; align-items: center; justify-content: center; } pre { display:inline; } [IsSelected="1"] { border:1px solid rgba(0,255,0,.5); } .groupNotify { padding: 0rem 0rem 0rem 0rem; margin: 0rem; display: flex; flex-wrap: wrap; justify-content: space-evenly; /* flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe; */ align-content: stretch; /*space-between*/ align-items: flex-start; flex-direction: row; width:100%; } .groupNotify > li { flex:0 0 0%; } .footer > div{ display:inline-block; } .rotareText { transform-origin: 0 50%; transform: rotate(-90deg); white-space: nowrap; display: block; position: absolute; bottom: 0; left: 50%; } .highlight { background-color: rgba(255,255,0,.1) !important; } .myCell { text-align:center !important; } .switch { position: relative; display: inline-block; } .switch-input { display: none; } .switch-label { display: block; width: 48px; height: 24px; text-indent: -150%; clip: rect(0 0 0 0); color: transparent; user-select: none; } .switch-label::before, .switch-label::after { content: ""; display: block; position: absolute; cursor: pointer; } .switch-label::before { width: 100%; height: 100%; background-color: #dedede; border-radius: 9999em; -webkit-transition: background-color 0.25s ease; transition: background-color 0.25s ease; } .switch-label::after { top: 0; left: 0; width: 24px; height: 24px; border-radius: 50%; background-color: #fff; box-shadow: 0 0 2px rgba(0, 0, 0, 0.45); -webkit-transition: left 0.25s ease; transition: left 0.25s ease; } .switch-input:checked + .switch-label::before { background-color: #89c12d; } .switch-input:checked + .switch-label::after { left: 24px; } /* Step 1 – Hide the boxes */ input[type=radio], input[type=checkbox] { /*display: none;*/ } /* Step 2 – Stylize the before */ .radio label:before { border-radius: 8px; } .checkbox label:before { border-radius: 3px; } /* Step 3 – Stylize the after */ input[type=radio]:checked { content: "\2022"; color: #f3f3f3; font-size: 30px; text-align: center; line-height: 18px; } input[type=checkbox]:checked { content: "\2713"; text-shadow: 1px 1px 1px rgba(0, 0, 0, .2); font-size: 15px; color: #f3f3f3; text-align: center; line-height: 15px; } .responsive-iframe { /* position: absolute; top: 0; left: 0; bottom: 0; right: 0; */ width: 100%; height: 100%; border: 0.0625rem solid rgba(0,0,0,.1); } iframe { background: #FFFFFF; height:100%; width:100%; border:0.0625rem solid rgba(0,0,0,.1); } .usrSelect { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; width: 100%; align-content: flex-start; overflow: auto; align-items: flex-start; } .usrSelect li { margin:0rem 0.625rem; width: 18rem; min-width: 10rem; cursor: pointer; } .picUsrTitle { margin: 0.625rem; text-align:center; font-size: 1.5rem; color:#666666; font-family: Lato-BoldItalic; } .picUsrName { text-align:center; font-size: 1rem; color:#666666; font-family: Lato-BoldItalic; } .picUsrNameSmall { text-align:center; font-size: .75rem; color:#666666; font-family: Lato-BoldItalic; } .picUsrImg { border: 5px solid rgba(0, 0, 0, 0.5); width:12rem; height:12rem; border-radius: 6rem; background-repeat: no-repeat; background-size: cover; background-position: center center; background-clip: content-box; } .picUsrImgActive { animation: blink2 1s; animation-iteration-count: infinite; } @keyframes blink2 { 50% { border-color:rgba(255, 0, 0, 0.5); } } .picUsrImgSmall { border: 2px solid rgba(0, 0, 0, 0.5); width:5rem; height:5rem; border-radius: 6rem; background-repeat: no-repeat; background-size: cover; background-position: center center; background-clip: content-box; } .channel { cursor: pointer; width: 5rem; height: 5rem; margin:0rem 0.625rem; } .pageDraw { display: flex; position:relative; align-items: center; justify-content: space-between; overflow: auto; } .pageDrawFinal { position:relative; align-items: center; /* justify-content: space-between; */ overflow: auto; /* flex-wrap: wrap; */ /* DEBE SER PROGRAMADO EN CADA ITEM .pageDrawFinal display: grid; grid-template-columns: 1fr 1fr; */ } /* Responsive: De 3 columnas a 1 en pantallas pequeñas */ @media (max-width: 900px) { .pageDrawFinal { grid-template-columns: 1fr !important; overflow-y: auto; /* En móvil el scroll es general */ /* height: auto; */ } .pageDrawSection { height: 600px !important; /* Altura fija para mantener el scroll interno en móvil */ min-width: 100% !important; } } .pageDrawPadding { padding-bottom: 2rem; } .pageDrawRows { flex-direction: column; } .pageDrawCols { flex-direction: row; } .pageDrawSection { align-items: center; justify-content: center; } .pageDimensionFull { width: 100%; height: 100%; } .pageBorderGreen { border: 0.0625rem dashed rgba(0, 255, 0, .5); /* background-color: rgba(0, 0, 0, .3); */ } .pageControlPadding { padding: 0.25rem; } .pageBorderWhite { border: 0.0625rem dashed rgba(255, 255, 255, .5); /* background-color: rgba(0, 0, 0, .3); */ } .pageToolBar { /* position:absolute; top:0px; */ background-color: rgba(0, 127, 0, .3); width: 100%; } .pageOverUL { /* */ background-color: rgba(0, 255, 0, .1) !important; } .pageOverULPlus { /* */ background-color: rgba(255, 0, 0, .2) !important; } .pageOverLI { /* */ background-color: rgba(0, 255, 0, 1) !important; } .controlItem { cursor: -webkit-grab !important; cursor: grab !important; } .controlItemGrabbing { cursor: -webkit-grabbing !important; cursor: grabbing !important; } .pageControlBar { background-color: rgba(0, 0, 0, 0.5) !important; position: absolute; bottom: 0; width: 100%; height: 2rem; display: flex; flex-direction: row; align-items: center; justify-content: flex-end; overflow: hidden; flex-wrap: nowrap; } .pageControlDraw { display: flex; position:relative; align-items: stretch; /* justify-content: space-between; flex-direction: column; align-items: center; justify-content: flex-start; */ overflow: auto; } /**/ :root { --color-green: #00FF00; --color-red: #FF0000; --color-button: #222222; --color-black: #000; --star-size: 3rem; } .switch-button { display: inline-block; } .switch-button .switch-button__checkbox { display: none; } .switch-button .switch-button__label { background-color: var(--color-red); width: 4rem; height: 2rem; border-radius: 3rem; display: inline-block; position: relative; } .switch-button .switch-button__label:before { transition: .2s; display: block; position: absolute; width: 2rem; height: 2rem; background-color: var(--color-button); content: ''; border-radius: 50%; box-shadow: inset 0px 0px 0px .1px var(--color-black); } .switch-button .switch-button__checkbox:checked + .switch-button__label { background-color: var(--color-green); } .switch-button .switch-button__checkbox:checked + .switch-button__label:before { transform: translateX(2rem); } /**/ /* -- Select the range of stars -- between the first star and the star being hovered OR the first star and the star with a checked radio */ .star:hover, /* Previous siblings of hovered star */ .star:has(~ .star:hover), /* Star has a checked radio */ .star:has(:checked), /* Previous siblings of a checked star */ .star:has(~ .star :checked) { --star-bg: #000; --star-rating-bg: #FFD700; /* dodgerblue */ } /* -- Select the range of stars -- between the star being hovered and a checked star */ /* Siblings between a hovered star and a checked star */ .star:hover ~ .star:has(~ .star :checked), /* Checked star following a hovered star */ .star:hover ~ .star:has(:checked) { --star-bg: #000; --star-rating-bg: #8d721e; } /* Increase star size when the child radio is checked */ .star:has(:checked) { transform: scale(1.25); } .star-rating { /* --star-rating-bg: white; background-color: var(--star-rating-bg); padding: 1rem; */ font-size: 1.75rem; border-radius: 1rem; width: fit-content; margin-inline: auto; color: #000; } .star-rating fieldset { border: none; padding: 0; } .star-rating legend { font-weight: 500; font-size: 1.1rem; } .stars { margin-top: 0.25rem; display: grid; grid-auto-flow: column; } .star { display: grid; place-items: center; grid-template-areas: "star" "label"; /* padding: 0 0.25em; */ transition: transform ease-in-out 130ms; } .star span { grid-area: label; font-size: 0.65em; width: var(--star-size); /* BORRA EL CUADRO AL SELECCIONAR */ } .star :checked + span { /* font-style: italic; */ font-weight: bold; } .star input, .star::before, .star::after { grid-area: star; height: var(--star-size); } .star [type="radio"] { appearance: none; font: inherit; } .star::before, .star::after { content: ""; clip-path: polygon( 50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35% ); background-color: rgba(0,0,0,.15); } .star::before { width: 100%; height: 100%; /* box-shadow: inset 1em 1em var(--star-outline, black); */ } .star::after { transition: all ease-in-out 130ms; width: calc(100% - 20%); height: calc(100% - 20%); box-shadow: inset 1em var(--star-size) var(--star-color, var(--star-rating-bg)); } @media (forced-colors: active) { .star::before { --star-outline: CanvasText; forced-color-adjust: none; } } @media (prefers-reduced-motion: reduce) { .star, .star::after { transition-duration: 0.01ms; } } /* :has() support alert */ aside { max-width: 30ch; padding: 1rem; background-color: palegoldenrod; border-radius: 0.5rem; margin-block-end: 1rem; line-height: 1.3; code { font-size: 1.25em; color: firebrick; } } @supports selector(:has(+ *)) { aside { display: none; } } /* CSS rules are kept repetitive so that you can get CSS rules for each button easily :) */ .toggle-button-cover { display: table-cell; position: relative; /* width: 12.5rem; height: 8.75rem; */ box-sizing: border-box; } .button-cover { height: 6.25rem; margin: 1.25rem; background-color: #fff; box-shadow: 0 0.625rem 1.25rem -0.5rem #c5d6d6; border-radius: 0.25rem; } /* .button-cover:before { counter-increment: button-counter; content: counter(button-counter); position: absolute; right: 0; bottom: 0; color: #d7e3e3; font-size: 0.75rem; line-height: 1; padding: 0.3125rem; } */ .button-cover, .knobs, .layer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .button { position: relative; /* top: 50%; overflow: hidden; */ width: 4.625rem; height: 2.25rem; margin: 0 auto 0 auto; font-size: 2rem; } .button.r, .button.r .layer { border-radius: 6.25rem; } .button.b2 { border-radius: 0.125rem; } .checkbox { position: relative; width: 100%; height: 100%; padding: 0; margin: 0; opacity: 0; cursor: pointer; z-index: 3; } .knobs { z-index: 2; } .layer { width: 100%; background-color: transparent; transition: 0.3s ease all; z-index: 1; } /* Button 1 */ #button-1 .knobs:before { content: "SÍ"; position: absolute; top: 0.25rem; left: 0.25rem; width: 1.25rem; height: 0.625rem; color: #fff; font-size: 0.625rem; font-weight: bold; text-align: center; line-height: 1; padding: 0.5625rem 0.25rem; background-color: #03a9f4; border-radius: 50%; transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all; } #button-1 .checkbox:not(:checked) + .knobs:before { content: "NO"; left: 2.625rem; background-color: #f44336; } #button-1 .checkbox:not(:checked) ~ .layer { background-color: #fcebeb; } #button-1 .knobs, #button-1 .knobs:before, #button-1 .layer { transition: 0.3s ease all; } /* Button 2 */ #button-2 .knobs:before, #button-2 .knobs:after { content: "SÍ"; position: absolute; top: 0.25rem; left: 0.25rem; width: 1.25rem; height: 0.625rem; color: #fff; font-size: 0.625rem; font-weight: bold; text-align: center; line-height: 1; padding: 0.5625rem 0.25rem; background-color: #03a9f4; border-radius: 50%; transition: 0.3s ease all; } #button-2 .knobs:before { content: "SÍ"; } #button-2 .knobs:after { content: "NO"; } #button-2 .knobs:after { right: -1.75rem; left: auto; background-color: #f44336; } #button-2 .checkbox:not(:checked) + .knobs:before { left: -1.75rem; } #button-2 .checkbox:not(:checked) + .knobs:after { right: 0.25rem; } #button-2 .checkbox:not(:checked) ~ .layer { background-color: #fcebeb; } /* Button 3 */ #button-3 .knobs:before { content: "SÍ"; position: absolute; top: 0.25rem; left: 0.25rem; width: 1.25rem; height: 0.625rem; color: #fff; font-size: 0.625rem; font-weight: bold; text-align: center; line-height: 1; padding: 0.5625rem 0.25rem; background-color: #03a9f4; border-radius: 50%; transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15); } #button-3 .checkbox:active + .knobs:before { width: 2.875rem; border-radius: 6.25rem; } #button-3 .checkbox:not(:checked):active + .knobs:before { margin-left: -1.625rem; } #button-3 .checkbox:not(:checked) + .knobs:before { content: "NO"; left: 2.625rem; background-color: #f44336; } #button-3 .checkbox:not(:checked) ~ .layer { background-color: #fcebeb; } /* Button 4 */ #button-4 .knobs:before, #button-4 .knobs:after { position: absolute; top: 0.25rem; left: 0.25rem; width: 1.25rem; height: 0.625rem; color: #fff; font-size: 0.625rem; font-weight: bold; text-align: center; line-height: 1; padding: 0.5625rem 0.25rem; background-color: #03a9f4; border-radius: 50%; transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all; } #button-4 .knobs:before { content: "SÍ"; } #button-4 .knobs:after { content: "NO"; } #button-4 .knobs:after { top: -1.75rem; right: 0.25rem; left: auto; background-color: #f44336; } #button-4 .checkbox:not(:checked) + .knobs:before { top: -1.75rem; } #button-4 .checkbox:not(:checked) + .knobs:after { top: 0.25rem; } #button-4 .checkbox:not(:checked) ~ .layer { background-color: #fcebeb; } /* Button 5 */ #button-5 { perspective: 3.75rem; overflow: visible; } #button-5 .knobs:before, #button-5 .knobs span { content: ""; position: absolute; top: 0.25rem; left: 0.25rem; width: 1.25rem; height: 0.625rem; color: #fff; font-size: 0.625rem; font-weight: bold; text-align: center; line-height: 1; padding: 0.5625rem 0.25rem; border-radius: 50%; transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all; } #button-5 .knobs:before { background-color: #03a9f4; } #button-5 .knobs span:before { content: "SÍ"; } #button-5 .knobs:before, #button-5 .layer { transform: rotateY(0); transform-origin: center; } #button-5 .checkbox:not(:checked) + .knobs:before, #button-5 .checkbox:not(:checked) + .knobs span { left: 2.625rem; } #button-5 .checkbox:not(:checked) + .knobs:before { transform: rotateY(180deg); background-color: #f44336; } #button-5 .checkbox:not(:checked) + .knobs span:before { content: "NO"; left: 2.625rem; } #button-5 .checkbox:not(:checked) ~ .layer { background-color: #fcebeb; transform: rotateY(-180deg); } #button-5 .knobs, #button-5 .knobs:before, #button-5 .layer { transition: 0.3s ease all; } /* Button 6 */ #button-6 { overflow: visible; } #button-6 .knobs:before { content: "SÍ"; position: absolute; top: 0.25rem; left: 0.25rem; width: 1.25rem; height: 0.625rem; color: #fff; font-size: 0.625rem; font-weight: bold; text-align: center; line-height: 1; padding: 0.5625rem 0.25rem; background-color: #03a9f4; border-radius: 50%; } #button-6 .layer, #button-6 .knobs, #button-6 .knobs:before { transform: rotateZ(0); transition: 0.4s cubic-bezier(0.18, 0.89, 0.35, 1.15) all; } #button-6 .checkbox:not(:checked) + .knobs { transform: rotateZ(-180deg); } #button-6 .checkbox:not(:checked) + .knobs:before { content: "NO"; background-color: #f44336; transform: rotateZ(180deg); } #button-6 .checkbox:not(:checked) ~ .layer { background-color: #fcebeb; transform: rotateZ(180deg); } /* Button 7 */ #button-7 .knobs:before, #button-7 .knobs:after, #button-7 .knobs span { position: absolute; top: 0.25rem; width: 1.25rem; height: 0.625rem; font-size: 0.625rem; font-weight: bold; text-align: center; line-height: 1; padding: 0.5625rem 0.25rem; border-radius: 50%; } #button-7 .knobs:before { content: "SÍ"; left: 0.25rem; color: #fff; opacity: 1; } #button-7 .knobs:after { content: "N"; left: 2.625rem; color: #fff; width: 0.875rem; text-align: left; padding: 0.5625rem 0.4375rem; background-color: #f44336; opacity: 0; } #button-7 .knobs:before, #button-7 .knobs:after { transition: 0.3s ease all; z-index: 2; } #button-7 .knobs span { left: 0.25rem; background-color: #03a9f4; transition: 0.2s ease all; z-index: 1; } #button-7 .checkbox:not(:checked) + .knobs:before { opacity: 0; } #button-7 .checkbox:not(:checked) + .knobs:after { opacity: 1; } #button-7 .checkbox:not(:checked) + .knobs span { top: 0.875rem; left: 3.5rem; width: 0.125rem; height: 0.125rem; padding: 0.1875rem; background-color: #fff; z-index: 3; } #button-7 .checkbox:not(:checked) ~ .layer { background-color: #fcebeb; } /* Button 8 */ #button-8 .knobs:before, #button-8 .knobs:after, #button-8 .knobs span { position: absolute; top: 0.25rem; width: 1.25rem; height: 0.625rem; font-size: 0.625rem; font-weight: bold; text-align: center; line-height: 1; padding: 0.5625rem 0.25rem; border-radius: 50%; transition: 0.3s ease all; } #button-8 .knobs:before { content: "SÍ"; color: #fff; left: 0.25rem; } #button-8 .knobs:after { content: "NO"; left: 2.625rem; color: #fff; background-color: #f44336; opacity: 0; } #button-8 .knobs:before, #button-8 .knobs:after { z-index: 2; } #button-8 .knobs span { left: 0.25rem; background-color: #03a9f4; z-index: 1; } #button-8 .checkbox:not(:checked) + .knobs:before { opacity: 0; } #button-8 .checkbox:not(:checked) + .knobs:after { opacity: 1; } #button-8 .checkbox:not(:checked) + .knobs span { background-color: #fcebeb; transform: scale(4); } /* Button 9 */ #button-9 .knobs:before, #button-9 .knobs:after, #button-9 .knobs span { position: absolute; top: 0.25rem; width: 1.25rem; height: 0.625rem; font-size: 0.625rem; font-weight: bold; text-align: center; line-height: 1; padding: 0.5625rem 0.25rem; border-radius: 50%; transition: 0.4s cubic-bezier(0.18, 0.89, 0.35, 1.15) all; } #button-9 .knobs:before { content: "SÍ"; left: 0.25rem; } #button-9 .knobs:after { content: "NO"; right: -1.5rem; } #button-9 .knobs:before, #button-9 .knobs:after { color: #fff; z-index: 2; } #button-9 .knobs span { left: 0.25rem; background-color: #03a9f4; z-index: 1; } #button-9 .checkbox:not(:checked) + .knobs:before { left: -1.5rem; } #button-9 .checkbox:not(:checked) + .knobs:after { right: 0.25rem; } #button-9 .checkbox:not(:checked) + .knobs span { left: 2.625rem; background-color: #f44336; } #button-9 .checkbox:not(:checked) ~ .layer { background-color: #fcebeb; } /* Button 10 */ #button-10 .knobs:before, #button-10 .knobs:after, #button-10 .knobs span { position: absolute; top: 0.25rem; width: 1.25rem; height: 0.625rem; font-size: 0.625rem; font-weight: bold; text-align: center; line-height: 1; padding: 0.5625rem 0.25rem; border-radius: 0.125rem; transition: 0.3s ease all; } #button-10 .knobs:before { content: ""; left: 0.25rem; background-color: #03a9f4; } #button-10 .knobs:after { content: "NO"; right: 0.25rem; color: #4e4e4e; } #button-10 .knobs span { display: inline-block; left: 0.625rem; color: #fff; z-index: 1; } #button-10 .checkbox:not(:checked) + .knobs span { color: #4e4e4e; } #button-10 .checkbox:not(:checked) + .knobs:before { left: 2.625rem; background-color: #f44336; } #button-10 .checkbox:not(:checked) + .knobs:after { color: #fff; } #button-10 .checkbox:not(:checked) ~ .layer { background-color: #fcebeb; } /* Button 11 */ #button-11 { overflow: visible; } #button-11 .knobs { perspective: 4.375rem; } #button-11 .knobs:before, #button-11 .knobs:after, #button-11 .knobs span { position: absolute; top: 0.25rem; border-radius: 0.125rem; } #button-11 .knobs:before, #button-11 .knobs:after { width: 1.5rem; height: 0.625rem; color: #4e4e4e; font-size: 1rem; font-weight: bold; text-align: center; line-height: 1; padding: 0.4rem 0.25rem; color: #000; } #button-11 .knobs:before { content: "SÍ"; left: 0.25rem; } #button-11 .knobs:after { content: "NO"; right: 0.25rem; } #button-11 .knobs span { right: 0.25rem; width: 2.0625rem; height: 1.75rem; background-color: #03a9f4; transform: rotateY(0); transform-origin: 0% 50%; transition: 0.6s ease all; z-index: 1; } #button-11 .checkbox:not(:checked) + .knobs span { transform: rotateY(-180deg); background-color: #f44336; } #button-11 .checkbox:not(:checked) ~ .layer { background-color: rgba(255, 0, 0, .2); } #button-11 .checkbox ~ .layer { background-color: rgba(3, 169, 244, .2); } /* Button 12 */ #button-12 .knobs:before, #button-12 .knobs:after, #button-12 .knobs span, #button-12 .knobs span:before, #button-12 .knobs span:after { position: absolute; top: 0.25rem; font-size: 0.625rem; font-weight: bold; text-align: center; line-height: 1; border-radius: 0.125rem; transition: 0.3s ease all; } #button-12 .knobs:before { content: "SÍ"; left: 0.25rem; } #button-12 .knobs:after { content: "NO"; right: 0.25rem; } #button-12 .knobs:before, #button-12 .knobs:after { width: 1.6875rem; height: 0.625rem; color: #4e4e4e; padding: 0.5625rem 0.1875rem; z-index: 1; } #button-12 .knobs span { display: inline-block; z-index: 2; } #button-12 .knobs span, #button-12 .knobs span:before, #button-12 .knobs span:after { width: 1.25rem; height: 0.625rem; padding: 0.5625rem 0.25rem; } #button-12 .knobs span:before, #button-12 .knobs span:after { content: ""; top: 0; } #button-12 .knobs span:before { left: -1.75rem; background-color: #f44336; } #button-12 .knobs span:after { right: -2.625rem; background-color: #03a9f4; } #button-12 .checkbox:not(:checked) + .knobs span:before { left: 0.25rem; } #button-12 .checkbox:not(:checked) + .knobs span:after { right: -4.625rem; } #button-12 .checkbox:not(:checked) ~ .layer { background-color: #fcebeb; } /* Button 13 */ #button-13 .knobs:before, #button-13 .knobs:after, #button-13 .knobs span { position: absolute; top: 0.25rem; width: 1.25rem; height: 0.625rem; font-size: 0.625rem; font-weight: bold; text-align: center; line-height: 1; padding: 0.5625rem 0.25rem; border-radius: 0.125rem; transition: 0.3s ease all; } #button-13 .knobs:before, #button-13 .knobs:after { color: #4e4e4e; z-index: 1; } #button-13 .knobs:before { content: "SÍ"; left: 0.25rem; } #button-13 .knobs:after { content: "NO"; right: 0.25rem; } #button-13 .knobs span { width: 1.5625rem; left: 2.3125rem; background-color: #03a9f4; z-index: 2; } #button-13 .checkbox:not(:checked) + .knobs span { left: 0.25rem; background-color: #f44336; } #button-13 .checkbox:not(:checked) ~ .layer { background-color: #fcebeb; } /* Button 14 */ #button-14 .knobs:before, #button-14 .knobs:after, #button-14 .knobs span:before, #button-14 .knobs span:after { position: absolute; top: 0.25rem; width: 1.5rem; height: 1rem; font-size:1rem; font-weight: bold; text-align: center; line-height: 1; padding: 0.4rem 0.25rem; border-radius: 0.125rem; transition: 0.3s ease all; } #button-14 .knobs:before, #button-14 .knobs:after { color: #000; z-index: 1; } #button-14 .knobs:before { content: "SÍ"; left: 0.25rem; } #button-14 .knobs:after { content: "NO"; right: 0.25rem; } #button-14 .knobs span { top: 0; left: 0; display: block; width: 100%; height: 100%; } #button-14 .knobs span:before { left: 0.25rem; top: -2rem; background-color: #f44336; } #button-14 .knobs span:after { top: 0.25rem; left: 2.4375rem; background-color: #03a9f4; } #button-14 .knobs span:before, #button-14 .knobs span:after { content: ""; width: 1.4375rem; z-index: 2; } #button-14 .checkbox:not(:checked) + .knobs span:before { top: 0.25rem; } #button-14 .checkbox:not(:checked) + .knobs span:after { top: -2rem; } #button-14 .checkbox:not(:checked) ~ .layer { background-color: rgba(255, 0, 0, .2); } #button-14 .checkbox ~ .layer { background-color: rgba(3, 169, 244, .2); } /* Button 15 */ #button-15 .knobs:before, #button-15 .knobs:after { position: absolute; top: 0.25rem; width: 1.5rem; height: 1rem; color: #000; font-size: 1rem; font-weight: bold; text-align: center; line-height: 1; padding: 0.4rem 0.25rem; opacity: 1; border-radius: 0.125rem; transform: scale(1); transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all; } #button-15 .knobs:before { content: "SÍ"; left: 0.25rem; background-color: #03a9f4; } #button-15 .knobs:after { content: "NO"; right: 0.25rem; opacity: 0; transform: scale(4); background-color: #f44336; } #button-15 .checkbox:not(:checked) + .knobs:before { opacity: 0; transform: scale(4); } #button-15 .checkbox:not(:checked) + .knobs:after { opacity: 1; transform: scale(1); } #button-15 .checkbox:not(:checked) ~ .layer { background-color: rgba(255, 0, 0, .2); } #button-15 .checkbox ~ .layer { background-color: rgba(3, 169, 244, .2); } /* Button 16 */ #button-16 .knobs:before { content: "SÍ"; position: absolute; top: 0.25rem; left: 0.25rem; width: 1.25rem; height: 0.625rem; color: #fff; font-size: 0.625rem; font-weight: bold; text-align: center; line-height: 1; padding: 0.5625rem 0.25rem; background-color: #03a9f4; border-radius: 0.125rem; transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15); } #button-16 .checkbox:active + .knobs:before { width: 2.875rem; } #button-16 .checkbox:not(:checked):active + .knobs:before { margin-left: -1.625rem; } #button-16 .checkbox:not(:checked) + .knobs:before { content: "NO"; left: 2.625rem; background-color: #f44336; } #button-16 .checkbox:not(:checked) ~ .layer { background-color: #fcebeb; } /* Button 17 */ #button-17 .knobs:before, #button-17 .knobs span { content: "SÍ"; position: absolute; top: 0.25rem; left: 0.25rem; width: 1.25rem; height: 0.625rem; color: #fff; font-size: 0.625rem; font-weight: bold; text-align: center; line-height: 1; padding: 0.5625rem 0.25rem; } #button-17 .knobs:before { transition: 0.3s ease all, left 0.5s cubic-bezier(0.18, 0.89, 0.35, 1.15); z-index: 2; } #button-17 .knobs span { background-color: #03a9f4; border-radius: 0.125rem; transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15); z-index: 1; } #button-17 .checkbox:not(:checked) + .knobs:before { content: "NO"; left: 2.625rem; } #button-17 .checkbox:not(:checked) + .knobs span { left: 2.625rem; background-color: #f44336; } #button-17 .checkbox:not(:checked) ~ .layer { background-color: #fcebeb; } /* Button 18 */ #button-18 .knobs:before, #button-18 .knobs span { content: "SÍ"; position: absolute; top: 0.25rem; left: 0.25rem; color: #fff; font-size: 0.625rem; font-weight: bold; text-align: center; line-height: 1; background-color: #03a9f4; border-radius: 0.125rem; } #button-18 .knobs:before { top: 50%; left: 0.5rem; width: 1.25rem; height: 0.625rem; margin-top: -0.3125rem; background-color: transparent; z-index: 2; } #button-18 .knobs span { width: 1.25rem; height: 0.625rem; padding: 0.5625rem 0.25rem; transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15); z-index: 1; } #button-18 .checkbox:active + .knobs:before { left: 0.625rem; width: 2.875rem; height: 0.25rem; color: transparent; margin-top: -0.125rem; background-color: #0095d8; transition: 0.3s ease all; overflow: hidden; } #button-18 .checkbox:active + .knobs span { width: 3.625rem; } #button-18 .checkbox:not(:checked):active + .knobs:before { left: auto; right: 0.625rem; background-color: #d80000; } #button-18 .checkbox:not(:checked):active + .knobs span { margin-left: -2.375rem; } #button-18 .checkbox:not(:checked) + .knobs:before { content: "NO"; left: 2.9375rem; } #button-18 .checkbox:not(:checked) + .knobs span { left: 2.625rem; background-color: #f44336; } #button-18 .checkbox:not(:checked) ~ .layer { background-color: #fcebeb; } .fpButtonFinalGreen { border: 0.06250rem solid rgba(0, 0, 0, .1); display:inline-block; /* inherit*/ padding:0.25rem; /* min-width: 8rem; font-size: 1.1rem; margin:0.125rem; */ background-color: rgba(0, 255, 0, 0.1); cursor: pointer; /*EVITA QUE SEA SELECCIONABLE*/ -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; -ms-user-select:none; border-radius: 0.3125rem; } .fpButtonFinalGreen:hover { background-color: rgba(0, 0, 0, 0.2); color:rgb(166, 166, 166); } input[update="1"] { background-color: rgba(0, 255, 0, 0.2); } .candidateSelection { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; width: 100%; align-content: flex-start; overflow: auto; } .candidateSelection li { margin:0rem 0.625rem; /* width: 15rem; */ /* min-width: 10rem; */ cursor: pointer; } .candidateSelection li img { animation: blink2 1s; animation-iteration-count: infinite; } .candidateSelected { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; width: 100%; align-content: flex-start; overflow: auto; } .candidateSelected li { margin:0rem 0.625rem; /* width: 15rem; */ /* min-width: 10rem; */ cursor: pointer; } .candidateSelected li img { animation: blink3 1s; animation-iteration-count: infinite; } @keyframes blink3 { 50% { border-color:rgba(0, 255, 0, 0.5); } } .texto-animado { /* Aplicación de la animación */ animation: cicloColor 4s ease-in-out infinite; } @keyframes cicloColor { 0%, 100% { color: white; text-shadow: 0 0 10px rgba(255,255,255,0.2); } 50% { color: black; text-shadow: 0 0 10px rgba(0,0,0,0.2); } } .tpd-tooltip { z-index: 99999999 !important; } .wf-pending-hexagon, .wf-approval-badge-mini { pointer-events: auto !important; z-index: 9999 !important; position: relative; } [required="required"] { border-left: 4px solid rgba(220, 53, 69, 0.8) !important; } input[required="required"]:not(:placeholder-shown), textarea[required="required"]:not(:placeholder-shown), select[required="required"]:valid { border-left: 4px solid rgba(40, 167, 69, 0.8) !important; } /**/ /* El Textarea que se cree Editor */ .wcg-pro-editor { background-color: rgb(39 40 34 / 80%) !important; /* Monokai Background */ color: #F8F8F2 !important; /* Texto claro */ font-family: 'Monaco', 'Menlo', 'Consolas', monospace !important; font-size: 12px !important; line-height: 1 !important; padding: 4px !important; border: 1px solid #444; border-radius: 4px !important; width: 100% !important; height: 250px !important; resize: vertical; outline: none !important; transition: border-left 0.3s ease; letter-spacing: -0.2px; /* Compacta un poco las letras */ padding-bottom:0.25rem; } /* Scrollbar personalizada para que no se vea el gris feo de Windows */ .wcg-pro-editor::-webkit-scrollbar { width: 10px; } .wcg-pro-editor::-webkit-scrollbar-thumb { background: #444; border-radius: 5px; } .wcg-lang-wrapper { position: fixed; /* Cambiado a fixed para que flote sobre todo */ bottom: 0.1rem; /* Ajusta según la altura de tu barra gris */ right: 0.2rem; /* Alineado a la derecha */ z-index: 10001; /* Un punto por encima del banner de cookies (10000) */ } .wcg-lang-menu { display: none; /* Por defecto oculto */ flex-direction: column; position: absolute; bottom: 47px; /* Aparece HACIA ARRIBA del icono */ right: 0; background: rgb(119 115 115 / 75%) !important; border-radius: 4px; overflow: hidden; /* padding: 5px 0; min-width: 180px; box-shadow: 0px -5px 20px rgba(0,0,0,0.5); */ } /* Clase para mostrarlo */ .wcg-show { display: flex !important; } .wcg-lang-item { display: flex; align-items: center; padding: 0.1rem 0.2rem; text-decoration: none; color: #333 !important; /* background: #fff; border-bottom: 1px solid #eee; */ justify-content: flex-end; } /* El Hover Mágico */ .wcg-lang-item:hover { /* Degradado de izquierda (transparente) a derecha (color 0.1) */ background: linear-gradient(to right, transparent, var(--hover-color)) !important; } .wcg-flag-container { width: 32px; /* Un poco más ancha para el formato rectangular */ height: 22px; /* Proporción ideal para banderas */ border-radius: 4px; /* Bordes suavemente redondeados, no círculos */ overflow: hidden; margin-right: 12px; /* border: 1px solid rgba(0,0,0,0.1); */ /* Definición de bordes */ flex-shrink: 0; display: flex; align-items: center; justify-content: center; /* box-shadow: 0 1px 3px rgba(0,0,0,0.1); */ /* Pequeña profundidad */ } .wcg-flag-img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* Llena el rectángulo perfectamente */ } /* Clase para mostrar el menú */ .wcg-show { display: block; } .wcg-lang-divider { border: 0; height: 1px; background-color: rgba(255,255,255,0.2); /* Línea muy sutil */ margin: 0 3px 0 0; /* Evita que toque los bordes laterales */ } .wcg-lang-item:hover .wcg-flag-img { transform: scale(1.1) rotate(5deg); /* La bandera crece y gira un pelín */ transition: transform 0.3s ease; } :lang(ko), :lang(zh), :lang(ja) { font-family: 'Noto Sans KR', 'Noto Sans SC', sans-serif; } .mecha-bomba-container { position: fixed; bottom: 0; left: 0; width: 100%; height: 40px; background: transparent; z-index: 1; pointer-events: none; } /* La cuerda visible (el camino que falta por quemar) */ .mecha-bomba-linea { position: absolute; bottom: 2.3rem; left: 0; width: 100%; height: 3px; /* Degradado para parecer una cuerda trenzada */ background: repeating-linear-gradient( 45deg, #FFF, #FFF 5px, #777 5px, #777 10px ); border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,0.5); } /* El rastro de ceniza (lo que ya pasó la llama) */ .mecha-quemada { position: absolute; bottom: 2.3rem; left: 0; height: 3px; background: #333; /* Ajusta este color al fondo de tu web para que "desaparezca" */ width: 0%; z-index: 2; /* Por encima de la mecha */ animation: progresarQuema var(--duracion, 5s) linear forwards; border-right: 2px solid #333; /* Efecto de borde carbonizado */ } /* La llama que lidera el camino */ .mecha-bomba-chispa { position: absolute; bottom: 2rem; left: 0%; width: 12px; height: 12px; background: radial-gradient(circle, #fff 10%, #ffeb3b 40%, #f44336 100%); border-radius: 50%; box-shadow: 0 0 15px #ff9800, 0 0 30px #f44336; z-index: 3; /* Siempre arriba de todo */ transform: translateX(-50%); animation: moverChispa var(--duracion, 5s) linear forwards, vibrar 0.1s infinite; } @keyframes progresarQuema { from { width: 0%; } to { width: 100%; } } @keyframes moverChispa { from { left: 0%; } to { left: 100%; } } @keyframes vibrar { 0% { transform: translateX(-50%) scale(0.8) translateY(0); } 50% { transform: translateX(-50%) scale(1.4) translateY(-2px); } 100% { transform: translateX(-50%) scale(1) translateY(0); } }