/*================================================================================ Estilos personalizados ispsys Autor: Rafael Alves Lemos Primeira alteração DATA: 09/01/2018 10:01:00 Segunda alteração DATA: 29/03/2019 23:40:00 Terceira alteração DATA: 4/abril/2019 00:00:00 ================================================================================*/ /*AJUSTANDO MAIN E FOOTER PARA O MENU LATERAL*/ main, footer { padding-left: 250px; } /*COLOCANDO O RODAPÉ SEMPRE EMBAIXO*/ @media only screen and (max-width : 992px) { header, main, footer { padding-left: 0; } /* COLOCANDO DEGRADÊ APENAS EM TELA PEQUENA EVITA QUE ESCUREÇA A TELA QUANDO ABRE O MENU DIREITO EM TELA GRANDE */ #sidenav-overlay { background-color: rgba(0, 0, 0, 0.5) !important; } .brand-logo { margin-left: calc(50% - 22px); } } body { display: flex; min-height: 100vh; flex-direction: column; } main { flex: 1 0 auto; } /*AJUSTANDO TEXTO DO RODAPÉ A 97% DA LARGURA*/ .container { padding: 0 0.5rem; margin: 0 auto; max-width: 100% !important; width: 97%; } /*AJUSTANDO ICONE DO SISTEMA E CENTRALIZANDO*/ .ContenedorDaLogoMarca{ position: fixed; top: 0; left: 0; z-index: 1002; width: 100%; height: 65px; visibility: hidden; } .brand-logo{ vertical-align: middle; text-align: center; margin-top: 10px; z-index: 1001; transition: 1.5s ease-in-out all; } .brand-logo img{ height: 44px; margin-top: 10px; visibility: visible; -webkit-filter: drop-shadow(3px 3px 3px #fff); filter: drop-shadow(3px 3px 3px #fff); } .logo-text { position: absolute; top: 50%; transform: translateY(-50%); color: #FFFFFF; font-family: Cantarell, Arial; text-align: left; font-size: 26px; padding-left: 8px; visibility: visible; opacity: 1; transition: opacity 0.2s linear; text-shadow: 2px 2px 2px #000; } nav{ position: fixed; z-index: 998; } main{ margin-top: 65px; } /*AJUSTANDO MENU LATERAL*/ #MenuLateralEsquerdo { border-radius: 0 4px 0 0; width: 250px !important; overflow: hidden; padding-bottom: 0px; padding-right: 10px; height: 100% !important; z-index: 1001; background-repeat: no-repeat; background-size: 100% 100%; background-attachment: inherit; background-image: url('../fotos/fundoperfil.png'); box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.3), 0 8px 10px -5px rgba(0, 0, 0, 0.3); } #MenuLateralDireito { border-radius: 4px 0 0 0; width: 297px !important; overflow: hidden; padding-bottom: 0px; height: 100% !important; z-index: 1002; box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.3), 0 8px 10px -5px rgba(0, 0, 0, 0.3); } @media only screen and (min-width : 992px) { #MenuLateralEsquerdo { top: 65px !important; height: calc(100% - 65px) !important; padding-bottom: 0px; z-index: 1000; } .brand-logo img{ margin-left:10px; } } /*COLOCANDO A FAIXA DIAGONAL*/ .Logo{ width: 125px; height: 64px; margin-left: 125px; position: fixed; visibility: visible; z-index: 1001; } #FaixaAmarela img{ background-repeat: no-repeat; width: 100%; height: 100%; margin: 0 auto; filter: none; z-index: 997; } @media only screen and (max-width: 600px) { .Logo { height: 56px; } #MenuLateralEsquerdo { z-index: 1002; } #sidenav-overlay { background-color: rgba(0, 0, 0, 0.5) !important; z-index: 1001; } main { margin-top: 56px; } } /*COLOCANDO logo sempre a frente*/ .brand-logo{ z-index: 1000; } /*AJUSTANDO PERFECT SCROLLBAR*/ .ps-scrollbar-x-rail,.ps-scrollbar-y-rail{ z-index: 9999; } /*AJUSTANDO FUNDO DO PERFIL NO MENU LATERAL*/ .Perfil { position: relative; padding-top: 22px; margin-bottom: 8px; height: 160px; } .Perfil img{ width: 64px; height: 64px; } /* BORDA ARREDONDADA NOS CANTOS DIREITOS E FUNDO DEGRADÊ PARA BRANCO */ .ConteúdoDoPerfil { border-radius: 0 10px 10px 0; background: rgba(14, 112, 167, 0.88); padding-top: 15px; padding-left: 15px; } .ConteúdoDoPerfil .dropdown-button { top: 22px; right: 0; position: absolute; padding: 0; margin: 0; height: 35px; border-radius: 10px !important; text-align: center; justify-content: center; align-items: center; text-align: justify; display: flex; width: 35px; } .ConteúdoDoPerfil .dropdown-content { position: absolute !important; top: 22px !important; left: 70px !important; right: 0 !important; border-radius: 10px !important; width: auto !important; background: rgba(255, 255, 255, 0.94) !important; } /*AJUSTANDO FONTES DO PERFIL*/ .nome{ display: block; padding-top: 10px; line-height: 20px; font-family: "Montserrat", sans-serif; font-weight: 500; text-shadow: -1px 2px 4px black; } .cargo{ padding-top: 10px; display: block; line-height: 20px; font-weight: 300; text-shadow: -1px 2px 4px black; } .FundoPerfilLateral img { overflow: hidden; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background-size: cover; height: 100%; width: 100%; } /*AJUSTANDO DROPDOWN MENOR*/ #PerfilMostrarAbaixo li{ overflow: hidden; } #PerfilMostrarAbaixo li a{ padding: 0; width: 100%; padding-left: 10px; text-align: left; } #PerfilMostrarAbaixo li a i{ margin: 0 12px 0 0; } .CabeçalhoGradiente{ background: rgb(234,255,239); /* Old browsers */ background: -moz-linear-gradient(left, rgba(234,255,239,1) 0%, rgba(255,255,255,1) 5%, rgba(11,234,37,1) 18%, rgba(252,228,12,1) 55%, rgba(252,228,12,1) 59%, rgba(33,114,255,1) 75%, rgba(12,151,244,1) 89%, rgba(225,237,244,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(234,255,239,1) 0%,rgba(255,255,255,1) 5%,rgba(11,234,37,1) 18%,rgba(252,228,12,1) 55%,rgba(252,228,12,1) 59%,rgba(33,114,255,1) 75%,rgba(12,151,244,1) 89%,rgba(225,237,244,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(234,255,239,1) 0%,rgba(255,255,255,1) 5%,rgba(11,234,37,1) 18%,rgba(252,228,12,1) 55%,rgba(252,228,12,1) 59%,rgba(33,114,255,1) 75%,rgba(12,151,244,1) 89%,rgba(225,237,244,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaffef', endColorstr='#e1edf4',GradientType=1 ); /* IE6-9 */ } /*RETIRANDO PADDING DO RODAPÉ*/ footer{ padding-top: 0px !important; } /*FORMULÁRIO DE PESQUISA NO CABEÇALHO*/ #EmbrulhoDaPesquisaNoCabeçalho{ margin: 0 auto 0 250px; width: calc(100% - 571px); height: 40px; display: inline-block; position: relative; -webkit-transition: .3s ease all; -o-transition: .3s ease all; -moz-transition: .3s ease all; transition: .3s ease all; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } #EmbrulhoDaPesquisaNoCabeçalho i { position: absolute; top: 6px; left: 23px; font-size: 23px; line-height: 32px !important; -webkit-transition: color 222ms ease; transition: color 222ms ease; } #EmbrulhoDaPesquisaNoCabeçalho input.InputPesquisaNoCabeçalho { content: ""; display: block; width: 90%; height: 23px; padding: 8px 8px 8px 70px; background: rgba(255, 255, 255, 0.29); font-size: 17px; font-weight: 411; appearance: textfield; border-radius: 20px; outline: none; border: none; -webkit-transition: all 222ms ease; transition: all 222ms ease; } #EmbrulhoDaPesquisaNoCabeçalho input.InputPesquisaNoCabeçalho:hover { background: rgba(255, 255, 255, 0.6); } #EmbrulhoDaPesquisaNoCabeçalho input.InputPesquisaNoCabeçalho:focus { color: #3e3e3e; background: #fff; box-shadow: none !important; border-bottom: none !important; } #EmbrulhoDaPesquisaNoCabeçalho .InputPesquisaNoCabeçalho::-webkit-input-placeholder { color: #fff; font-size: 17px; font-weight: 411; } #EmbrulhoDaPesquisaNoCabeçalho .InputPesquisaNoCabeçalho::-moz-placeholder { color: #fff; font-size: 17px; font-weight: 411; } #EmbrulhoDaPesquisaNoCabeçalho .InputPesquisaNoCabeçalho:-ms-input-placeholder { color: #fff; font-size: 17px; font-weight: 411; } #EmbrulhoDaPesquisaNoCabeçalho .InputPesquisaNoCabeçalho::placeholder { color: #fff; font-size: 17px; font-weight: 411; } #EmbrulhoDaPesquisaNoCabeçalho .InputPesquisaNoCabeçalho:focus::placeholder { color: #3e3e3e; font-size: 17px; font-weight: 411; } #EmbrulhoDaPesquisaNoCabeçalho .InputPesquisaNoCabeçalho:focus::-webkit-input-placeholder { color: #3e3e3e; font-size: 17px; font-weight: 411; } #EmbrulhoDaPesquisaNoCabeçalho .InputPesquisaNoCabeçalho:focus::-moz-placeholder { color: #3e3e3e; font-size: 17px; font-weight: 411; } #EmbrulhoDaPesquisaNoCabeçalho .InputPesquisaNoCabeçalho:focus:-ms-input-placeholder { color: #3e3e3e; font-size: 17px; font-weight: 411; } #EmbrulhoPósPesquisa{ display: inline-block; } /*COLOCANDO A FLECHA NO MENU*/ ul.side-nav .collapsible-header:after { font-family: 'Material Icons'; content: "keyboard_arrow_right"; color: #3e3e3e; font-size: 20px; position: absolute; right: 15px; text-shadow: none; -webkit-transition: 0.4s ease all; -moz-transition: 0.4s ease all; transition: 0.4s ease all; } /*PRA APONTAR PRA BAIXO QUANDO CLICA*/ ul.side-nav .collapsible-header.active:after { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); color: black; text-shadow: none; } /*MUDANDO A COR DO MENU QUANDO ATIVO*/ .side-nav li.active > a i { background-color: transparent; text-shadow: -1px 2px 4px #06eae2; transition: .2s ease all; color: #00bcd4; } /*BORDAS ARREDONDADAS NOS MENUS*/ .side-nav .collapsible li, .side-nav.fixed .collapsible li { border-radius: 0 20px 20px 0; } /*BORDAS ARREDONDADAS NOS SUB MENUS*/ .side-nav .collapsible li >a , .side-nav.fixed .collapsible li >a { border-radius: 0 20px 20px 0; } /*MUDANDO CORES DAS FONTES*/ .side-nav>li>ul>li:not(.active):hover>a,.side-nav>li>ul>li:not(.active):hover>a>i{ color: black !important; text-shadow: none; } .side-nav .collapsible-body > ul:not(.collapsible) > li.active, .side-nav.fixed .collapsible-body > ul:not(.collapsible) > li.active { background-color: rgba(255, 255, 255, 0.7); } .side-nav .collapsible-body > ul:not(.collapsible) > li.active a, .side-nav.fixed .collapsible-body > ul:not(.collapsible) > li.active a { color: black !important; text-shadow: none; } /*MUDANDO CORES DAS FONTES*/ .side-nav>li>ul>li:not(.active)>a,.side-nav>li>ul>li:not(.active)>a>i{ color: white !important; text-shadow: -1px 2px 4px black; } /*BORDA E COR QUANDO PASSA O RATO*/ .side-nav .collapsible li:hover, .side-nav.fixed .collapsible li:hover { background-color: rgba(255, 255, 255, 0.7); border-radius: 0 20px 20px 0; } /*BORDAS E COR*/ .side-nav li .active{ border-radius: 0 20px 20px 0; background-color: rgba(255, 255, 255, 0.7); } .side-nav .collapsible-body, .side-nav.fixed .collapsible-body { border: 0; background-color: transparent; } /*AJUSTANDO ÍCONES A ESQUERDA QUANDO MENU NÃO É COLLAPSIBLE*/ .side-nav>li>ul>li>a:not(.collapsible), .side-nav.fixed>li>ul>li>a:not(.collapsible){ padding: 0 15px !important; } /*MOSTRAR BOTÃO DE MENU ANTES DA LOGO @media only screen and (min-width: 993px){ nav a.button-collapse { display: inline-block; } } */ #sidenav-overlay { background-color: transparent ; } /*CARREGADOR DA PÁGINA*/ .Varão.Carregou { visibility: hidden; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: all 0.3s 1s ease-out; transition: all 0.3s 1s ease-out; } .Varão.Carregou .CortinaEsquerda { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: all 0.6s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 0.6s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); background-color: #00cb83; } .Varão.Carregou .CortinaDireita { -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); -webkit-transition: all 0.6s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 0.6s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); background-color: #ffd42a; } .Carregou .Carregador { opacity: 0; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .Varão { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1002; } .Varão .DePano { position: fixed; top: 0; width: 50%; height: 100%; background: #4c4c4c; z-index: 1002; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .Varão .CortinaEsquerda.DePano { left: 0; } .Varão .CortinaDireita.DePano { right: 0; } .Carregador { display: block; position: relative; left: 50%; top: 50%; width: 140px; height: 140px; margin: -70px 0 0 -70px; border-radius: 50%; border: 5px solid transparent; border-top-color: #0155ff; border-right-color: #01cb83; -webkit-animation: Gira 2s linear infinite; animation: Gira 2s linear infinite; z-index: 1005; } /* .Carregador:before { content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent; border-top-color: #01cb83; -webkit-animation: Gira 3s linear infinite; animation: Gira 3s linear infinite; } */ .Carregador:after { content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 5px solid transparent; border-top-color: #F9C922; -webkit-animation: Gira 1s linear infinite; animation: Gira 1s linear infinite; } @-webkit-keyframes Gira { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes Gira { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } .FechaCortinaEsquerda { animation: FechaCortinaEsquerda .7s cubic-bezier(.2, .6, 0, 1.02) both; width: 50%; height: 100%; position: fixed; top:0; left: 0; z-index: 1005; } @keyframes FechaCortinaEsquerda { 0% { transform: scaleX(0); transform-origin: 0% 0%; background-color: #00cb83; } 100% { transform: scaleX(1); transform-origin: 0% 0%; background-color: #4c4c4c; } } .FechaCortinaDireita { animation: FechaCortinaDireita .7s cubic-bezier(.2, .6, 0, 1.02) both; width: 50%; height: 100%; position: fixed; right:0; top:0; z-index: 1005; } @keyframes FechaCortinaDireita { 0% { transform: scaleX(0); transform-origin: 100% 0%; background-color: #ffd42a; } 100% { transform: scaleX(1); transform-origin: 100% 0%; background-color: #4c4c4c; } } /*//////////////////////////////// implementado por Rafael Alves Lemos */ body.menubranco h1 span.logo-text { padding-left: 0px; } body.menubranco #header .header-search-wrapper { margin: 10px auto 0 80px; } body.menubranco #header .header-search-wrapper.sideNav-lock { margin: 10px auto 0 260px; } /*** Legendas quadradas pequenas dos gráficos JS***/ li.desativados:before { background: #f7464a; } li.bloqueados:before { background: #FDB45C; } li.observados:before { background: #2AD673; } li.malhafina:before { background: #7B40D7; } li.livres:before { background: #5CCFFD; } /* Interruptores implementados por Rafael Alves Lemos ========================================================================== */ .switch label input[type=checkbox]:checked + .InterruptorVermelho { background-color: #951414; } .switch label input[type=checkbox]:checked + .InterruptorVermelho:before, .switch label input[type=checkbox]:checked + .InterruptorVermelho:after { left: 18px; } .switch label input[type=checkbox]:checked + .InterruptorVermelho:after { background-color: #F40403; } .switch label .InterruptorVermelho { content: ""; display: inline-block; position: relative; width: 36px; height: 14px; background-color: rgba(0, 0, 0, 0.38); border-radius: 15px; margin-right: 10px; transition: background 0.3s ease; vertical-align: middle; margin: 0 16px; } .switch label .InterruptorVermelho:before, .switch label .InterruptorVermelho:after { content: ""; position: absolute; display: inline-block; width: 20px; height: 20px; border-radius: 50%; left: 0; top: -3px; transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease, transform .1s ease; } .switch label .InterruptorVermelho:before { background-color: rgba(3, 169, 244, 0.15); } .switch label .InterruptorVermelho:after { background-color: #303030; box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } input[type=checkbox]:checked:not(:disabled) ~ .InterruptorVermelho:active::before, input[type=checkbox]:checked:not(:disabled).tabbed:focus ~ .InterruptorVermelho::before { transform: scale(2.4); background-color: rgba(3, 169, 244, 0.15); } input[type=checkbox]:not(:disabled) ~ .InterruptorVermelho:active:before, input[type=checkbox]:not(:disabled).tabbed:focus ~ .InterruptorVermelho::before { transform: scale(2.4); background-color: rgba(0, 0, 0, 0.08); } .switch input[type=checkbox][disabled] + .InterruptorVermelho { cursor: default; background-color: rgba(0, 0, 0, 0.12); } .switch label input[type=checkbox][disabled] + .InterruptorVermelho:after, .switch label input[type=checkbox][disabled]:checked + .InterruptorVermelho:after { background-color: #949494; } .switch label input[type=checkbox]:checked + .InterruptorVerde { background-color: #00ca7794; } .switch label input[type=checkbox]:checked + .InterruptorVerde:before, .switch label input[type=checkbox]:checked + .InterruptorVerde:after { left: 18px; } .switch label input[type=checkbox]:checked + .InterruptorVerde:after { background-color: #269264; } .switch label .InterruptorVerde { content: ""; display: inline-block; position: relative; width: 36px; height: 14px; background-color: rgba(0, 0, 0, 0.38); border-radius: 15px; margin-right: 10px; transition: background 0.3s ease; vertical-align: middle; margin: 0 16px; } .switch label .InterruptorVerde:before, .switch label .InterruptorVerde:after { content: ""; position: absolute; display: inline-block; width: 20px; height: 20px; border-radius: 50%; left: 0; top: -3px; transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease, transform .1s ease; } .switch label .InterruptorVerde:before { background-color: rgba(3, 169, 244, 0.15); } .switch label .InterruptorVerde:after { background-color: #303030; box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } input[type=checkbox]:checked:not(:disabled) ~ .InterruptorVerde:active::before, input[type=checkbox]:checked:not(:disabled).tabbed:focus ~ .InterruptorVerde::before { transform: scale(2.4); background-color: rgba(3, 169, 244, 0.15); } input[type=checkbox]:not(:disabled) ~ .InterruptorVerde:active:before, input[type=checkbox]:not(:disabled).tabbed:focus ~ .InterruptorVerde::before { transform: scale(2.4); background-color: rgba(0, 0, 0, 0.08); } .switch input[type=checkbox][disabled] + .InterruptorVerde { cursor: default; background-color: rgba(0, 0, 0, 0.12); } .switch label input[type=checkbox][disabled] + .InterruptorVerde:after, .switch label input[type=checkbox][disabled]:checked + .InterruptorVerde:after { background-color: #949494; } .switch label input[type=checkbox]:checked + .InterruptorLaranja { background-color: #ffa55fb8; } .switch label input[type=checkbox]:checked + .InterruptorLaranja:before, .switch label input[type=checkbox]:checked + .InterruptorLaranja:after { left: 18px; } .switch label input[type=checkbox]:checked + .InterruptorLaranja:after { background-color: #ff6a00; } .switch label .InterruptorLaranja { content: ""; display: inline-block; position: relative; width: 36px; height: 14px; background-color: rgba(0, 0, 0, 0.38); border-radius: 15px; margin-right: 10px; transition: background 0.3s ease; vertical-align: middle; margin: 0 16px; } .switch label .InterruptorLaranja:before, .switch label .InterruptorLaranja:after { content: ""; position: absolute; display: inline-block; width: 20px; height: 20px; border-radius: 50%; left: 0; top: -3px; transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease, transform .1s ease; } .switch label .InterruptorLaranja:before { background-color: rgba(3, 169, 244, 0.15); } .switch label .InterruptorLaranja:after { background-color: #303030; box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } input[type=checkbox]:checked:not(:disabled) ~ .InterruptorLaranja:active::before, input[type=checkbox]:checked:not(:disabled).tabbed:focus ~ .InterruptorLaranja::before { transform: scale(2.4); background-color: rgba(3, 169, 244, 0.15); } input[type=checkbox]:not(:disabled) ~ .InterruptorLaranja:active:before, input[type=checkbox]:not(:disabled).tabbed:focus ~ .InterruptorLaranja::before { transform: scale(2.4); background-color: rgba(0, 0, 0, 0.08); } .switch input[type=checkbox][disabled] + .InterruptorLaranja { cursor: default; background-color: rgba(0, 0, 0, 0.12); } .switch label input[type=checkbox][disabled] + .InterruptorLaranja:after, .switch label input[type=checkbox][disabled]:checked + .InterruptorLaranja:after { background-color: #949494; } .switch label input[type=checkbox]:checked + .InterruptorVermelhoVerde { background-color: #00ca7794; } .switch label input[type=checkbox]:checked + .InterruptorVermelhoVerde:before, .switch label input[type=checkbox]:checked + .InterruptorVermelhoVerde:after { left: 18px; } .switch label input[type=checkbox]:checked + .InterruptorVermelhoVerde:after { background-color: #269264; } .switch label .InterruptorVermelhoVerde { content: ""; display: inline-block; position: relative; width: 36px; height: 14px; background-color: rgba(222, 57, 57, 0.38); border-radius: 15px; margin-right: 10px; transition: background 0.3s ease; vertical-align: middle; margin: 0 16px; } .switch label .InterruptorVermelhoVerde:before, .switch label .InterruptorVermelhoVerde:after { content: ""; position: absolute; display: inline-block; width: 20px; height: 20px; border-radius: 50%; left: 0; top: -3px; transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease, transform .1s ease; } .switch label .InterruptorVermelhoVerde:before { background-color: rgba(3, 169, 244, 0.15); } .switch label .InterruptorVermelhoVerde:after { background-color: #c70e00; box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } input[type=checkbox]:checked:not(:disabled) ~ .InterruptorVermelhoVerde:active::before, input[type=checkbox]:checked:not(:disabled).tabbed:focus ~ .InterruptorVermelhoVerde::before { transform: scale(2.4); background-color: rgba(3, 169, 244, 0.15); } input[type=checkbox]:not(:disabled) ~ .InterruptorVermelhoVerde:active:before, input[type=checkbox]:not(:disabled).tabbed:focus ~ .InterruptorVermelhoVerde::before { transform: scale(2.4); background-color: rgba(0, 0, 0, 0.08); } .switch input[type=checkbox][disabled] + .InterruptorVermelhoVerde { cursor: default; background-color: rgba(212, 16, 16, 0.36); } .switch label input[type=checkbox][disabled] + .InterruptorVermelhoVerde:after, .switch label input[type=checkbox][disabled]:checked + .InterruptorVermelhoVerde:after { background-color: #949494; } .checkbox-orange[type="checkbox"].filled-in:checked + label:after{ border: 2px solid #ff9800; background-color: #ff9800; } .FocoVermelho input[type=text]:focus { border-bottom: 1px solid red; box-shadow: 0 1px 0 0 red; } .FocoVermelho input[type=text]:focus + label { color: red; } /* ========================================================================== */ .scnd-font-color { color: #9099b7; } .titular { display: block; line-height: 60px; margin: 0; text-align: center; border-top-left-radius: 5px; border-top-right-radius: 5px; } .horizontal-list { margin: 0; padding: 0; list-style-type: none; } .horizontal-list li { float: left; } .block { margin: 25px 25px 0 0; background: #394264; border-radius: 5px; float: left; width: 300px; overflow: hidden; } /******************************************** LEFT CONTAINER *****************************************/ .left-container {} .menu-box { height: 360px; } .donut-chart-block { overflow: hidden; } .donut-chart-block .titular { padding: 10px 0; } .os-percentages li { width: 75px; border-left: 1px solid #394264; text-align: center; background: #50597b; } .os { margin: 0; padding: 10px 0 5px; font-size: 15px; } .os.ios { border-top: 4px solid #e64c65; } .os.mac { border-top: 4px solid #11a8ab; } .os.linux { border-top: 4px solid #fcb150; } .os.win { border-top: 4px solid #4fc4f6; } .os-percentage { margin: 0; padding: 0 0 15px 10px; font-size: 25px; } .line-chart-block, .bar-chart-block { height: 400px; } .line-chart { height: 200px; background: #11a8ab; } .time-lenght { padding-top: 22px; padding-left: 38px; overflow: hidden; } .time-lenght-btn { display: block; width: 70px; line-height: 32px; background: #50597b; border-radius: 5px; font-size: 14px; text-align: center; margin-right: 5px; -webkit-transition: background .3s; transition: background .3s; } .time-lenght-btn:hover { text-decoration: none; background: #e64c65; } .month-data { padding-top: 28px; } .month-data p { display: inline-block; margin: 0; padding: 0 25px 15px; font-size: 16px; } .month-data p:last-child { padding: 0 25px; float: right; font-size: 15px; } .increment { color: #e64c65; } .grafico { padding: 2rem 1rem 1rem; width: 100%; height: 100%; position: relative; color: #fff; font-size: 80%; } .grafico span { display: block; position: absolute; bottom: 3rem; left: 2rem; height: 0; border-top: 2px solid; transform-origin: left center; } .grafico span > span { left: 100%; bottom: 0; } [data-valor='25'] {width: 75px; transform: rotate(-45deg);} [data-valor='8'] {width: 24px; transform: rotate(65deg);} [data-valor='13'] {width: 39px; transform: rotate(-45deg);} [data-valor='5'] {width: 15px; transform: rotate(50deg);} [data-valor='23'] {width: 69px; transform: rotate(-70deg);} [data-valor='12'] {width: 36px; transform: rotate(75deg);} [data-valor='15'] {width: 45px; transform: rotate(-45deg);} [data-valor]:before { content: ''; position: absolute; display: block; right: -4px; bottom: bolaspx; padding: 4px; background: #fff; border-radius: 50%; } [data-valor='23']:after { content: '+' attr(data-valor) '%'; position: absolute; right: -2.7rem; top: -1.7rem; padding: .3rem .5rem; background: #50597B; border-radius: .5rem; transform: rotate(45deg); } [class^='eje-'] { position: absolute; left: 0; bottom: 0rem; width: 100%; padding: 1rem 1rem 0 2rem; height: 80%; } .eje-x { height: 2.5rem; } .eje-y li { height: 25%; border-top: 1px solid #777; } [data-ejeY]:before { content: attr(data-ejeY); display: inline-block; width: 2rem; text-align: right; line-height: 0; position: relative; left: -2.5rem; top: -.5rem; } .eje-x li { width: 33%; float: left; text-align: center; } /****************************************** GRAFICO CIRCULAR PIE CHART ******************************************/ .donut-chart { position: relative; width: 200px; height: 200px; margin: 0 auto 2rem; border-radius: 100% } p.center-date { background: #394264; position: absolute; text-align: center; font-size: 28px; top:0;left:0;bottom:0;right:0; width: 130px; height: 130px; margin: auto; border-radius: 50%; line-height: 35px; padding: 15% 0 0; } .center-date span.scnd-font-color { line-height: 0; } .recorte { border-radius: 50%; clip: rect(0px, 200px, 200px, 100px); height: 100%; position: absolute; width: 100%; } .quesito { border-radius: 50%; clip: rect(0px, 100px, 200px, 0px); height: 100%; position: absolute; width: 100%; font-family: monospace; font-size: 1.5rem; } #porcion1 { transform: rotate(0deg); } #porcion1 .quesito { background-color: #E64C65; transform: rotate(76deg); } #porcion2 { transform: rotate(76deg); } #porcion2 .quesito { background-color: #11A8AB; transform: rotate(140deg); } #porcion3 { transform: rotate(215deg); } #porcion3 .quesito { background-color: #4FC4F6; transform: rotate(113deg); } #porcionFin { transform:rotate(bolas2deg); } #porcionFin .quesito { background-color: #FCB150; transform: rotate(32deg); } .nota-final { clear: both; color: #4FC4F6; font-size: 1rem; padding: 2rem 0; } .nota-final strong { color: #E64C65; } .nota-final a { color: #FCB150; font-size: inherit; } /************************** BAR-CHART **************************/ .grafico.bar-chart { background: #3468AF; padding: 0 1rem 2rem 1rem; width: 100%; height: 60%; position: relative; color: #fff; font-size: 80%; } .bar-chart [class^='eje-'] { padding: 0 1rem 0 2rem; bottom: 1rem; } .bar-chart .eje-x { bottom: 0; } .bar-chart .eje-y li { height: 20%; border-top: 1px solid #fff; } .bar-chart .eje-x li { width: 14%; position: relative; text-align: left; } .bar-chart .eje-x li i { transform: rotateZ(-45deg) translateX(-1rem); transform-origin: 30% 60%; display: block; } .bar-chart .eje-x li:before { content: ''; position: absolute; bottom: 1.9rem; width: 70%; right: 5%; box-shadow: 3px 0 rgba(0,0,0,.1), 3px bolaspx rgba(0,0,0,.1); } .bar-chart .eje-x li:nth-child(1):before { background: #E64C65; height: 570%; } .bar-chart .eje-x li:nth-child(2):before { background: #11A8AB; height: 900%; } .bar-chart .eje-x li:nth-child(3):before { background: #FCB150; height: 400%; } .bar-chart .eje-x li:nth-child(4):before { background: #4FC4F6; height: 290%; } .bar-chart .eje-x li:nth-child(5):before { background: #FFED0D; height: 720%; } .bar-chart .eje-x li:nth-child(6):before { background: #F46FDA; height: 820%; } .bar-chart .eje-x li:nth-child(7):before { background: #15BFCC; height: 520%; } .CaixaDeSelecao[type="checkbox"] + label:before, .CaixaDeSelecao[type="checkbox"]:not(.filled-in) + label:after { content: ''; position: absolute; top: 0; left: 0; width: 18px; height: 18px; z-index: 0; border: 2px solid #ffffff; border-radius: 1px; margin-top: 4px; margin-left: 4px; transition: .2s; } .CaixaDeSelecao[type="checkbox"]:checked + label:before { top: -4px; left: -5px; width: 12px; height: 22px; border-top: 2px solid transparent; border-left: 2px solid transparent; border-right: 2px solid #ffffff; border-bottom: 2px solid #ffffff; transform: rotate(40deg); backface-visibility: hidden; transform-origin: 100% 100%; } /*Carregador com círculos horizontais*/ .embrulho-do-carregador { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; background: rgba(0, 0, 0, 0.5); } #carregador-bolas #carregador{ position: absolute; width: 2vw; height: 2vw; background: #035d9e; top:50%; left: 50%; border-radius: 50%; z-index: 1500; -webkit-animation: ADireita 2.3s linear infinite; -moz-animation: ADireita 2.3s linear infinite; -o-animation: ADireita 2.3s linear infinite; animation: ADireita 2.3s linear infinite ; } #carregador-bolas > #carregador:nth-of-type(1) { -webkit-animation-delay: -0.46s; -moz-animation-delay: -0.46s; -o-animation-delay: -0.46s; animation-delay: -0.46s; } #carregador-bolas > #carregador:nth-of-type(2) { -webkit-animation-delay: -0.92s; -moz-animation-delay: -0.92s; -o-animation-delay: -0.92s; animation-delay: -0.92s; } #carregador-bolas > #carregador:nth-of-type(3) { -webkit-animation-delay: -1.38s; -moz-animation-delay: -1.38s; -o-animation-delay: -1.38s; animation-delay: -1.38s; } #carregador-bolas > #carregador:nth-of-type(4) { -webkit-animation-delay: -1.84s; -moz-animation-delay: -1.84s; -o-animation-delay: -1.84s; animation-delay: -1.84s; } @-webkit-keyframes ADireita { 0% { left: 40%; opacity: 0; background: #ffda00; } 10% { left: 45%; opacity: 1; } 90% { left: 55%; opacity: 1; } 100% { left: 62%; opacity: 0; } } @-moz-keyframes ADireita { 0% { left: 40%; opacity: 0; background: #ffda00; } 10% { left: 45%; opacity: 1; } 90% { left: 55%; opacity: 1; } 100% { left: 62%; opacity: 0; } } @keyframes ADireita { 0% { left: 40%; opacity: 0; background: #ffda00; } 10% { left: 45%; opacity: 1; } 90% { left: 55%; opacity: 1; } 100% { left: 62%; opacity: 0; } } .DescerDesfocado { -webkit-animation: DescerDesfocado 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: DescerDesfocado 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; } @-webkit-keyframes DescerDesfocado { 0% { -webkit-transform: translateY(600px) rotateX(-30deg) scale(6.5); transform: translateY(600px) rotateX(-30deg) scale(6.5); -webkit-transform-origin: 50% -100%; transform-origin: 50% -100%; opacity: 0; } 100% { -webkit-transform: translateY(0) rotateX(0) scale(1); transform: translateY(0) rotateX(0) scale(1); -webkit-transform-origin: 50% 500px; transform-origin: 50% 500px; opacity: 1; } } @keyframes DescerDesfocado { 0% { -webkit-transform: translateY(600px) rotateX(-30deg) scale(6.5); transform: translateY(600px) rotateX(-30deg) scale(6.5); -webkit-transform-origin: 50% -100%; transform-origin: 50% -100%; opacity: 0; } 100% { -webkit-transform: translateY(0) rotateX(0) scale(1); transform: translateY(0) rotateX(0) scale(1); -webkit-transform-origin: 50% 500px; transform-origin: 50% 500px; opacity: 1; } } .SairRodando { -webkit-animation: SairRodando 0.65s ease-in both; animation: SairRodando 0.65s ease-in both; } @-webkit-keyframes SairRodando { 0% { -webkit-transform: rotate(0) scale(1); transform: rotate(0) scale(1); opacity: 1; } 100% { -webkit-transform: rotate(540deg) scale(5); transform: rotate(540deg) scale(5); opacity: 0; } } @keyframes SairRodando { 0% { -webkit-transform: rotate(0) scale(1); transform: rotate(0) scale(1); opacity: 1; } 100% { -webkit-transform: rotate(540deg) scale(5); transform: rotate(540deg) scale(5); opacity: 0; } } .Vibrar { -webkit-animation: Vibrar 0.3s linear infinite both; animation: Vibrar 0.3s linear infinite both; } @-webkit-keyframes Vibrar { 0% { -webkit-transform: translate(0); transform: translate(0); } 20% { -webkit-transform: translate(-2px, 2px); transform: translate(-2px, 2px); } 40% { -webkit-transform: translate(-2px, -2px); transform: translate(-2px, -2px); } 60% { -webkit-transform: translate(2px, 2px); transform: translate(2px, 2px); } 80% { -webkit-transform: translate(2px, -2px); transform: translate(2px, -2px); } 100% { -webkit-transform: translate(0); transform: translate(0); } } @keyframes Vibrar { 0% { -webkit-transform: translate(0); transform: translate(0); } 20% { -webkit-transform: translate(-2px, 2px); transform: translate(-2px, 2px); } 40% { -webkit-transform: translate(-2px, -2px); transform: translate(-2px, -2px); } 60% { -webkit-transform: translate(2px, 2px); transform: translate(2px, 2px); } 80% { -webkit-transform: translate(2px, -2px); transform: translate(2px, -2px); } 100% { -webkit-transform: translate(0); transform: translate(0); } } .Desligar { -webkit-animation: Desligar 0.9s ease-in-out both; animation: Desligar 0.9s ease-in-out both; } @-webkit-keyframes Desligar { 0% { -webkit-transform: scaleY(1); transform: scaleY(1); opacity: 1; } 100% { -webkit-transform: scaleY(0); transform: scaleY(0); opacity: 1; } } @keyframes Desligar { 0% { -webkit-transform: scaleY(1); transform: scaleY(1); opacity: 1; } 100% { -webkit-transform: scaleY(0); transform: scaleY(0); opacity: 1; } } .DescerDiagonalDesfocado { -webkit-animation: DescerDiagonalDesfocado 0.55s cubic-bezier(0.230, 1.000, 0.320, 1.000) both; animation: DescerDiagonalDesfocado 0.55s cubic-bezier(0.230, 1.000, 0.320, 1.000) both; } @-webkit-keyframes DescerDiagonalDesfocado { 0% { -webkit-transform: translate(1000px, -1000px) skew(-80deg, -10deg); transform: translate(1000px, -1000px) skew(-80deg, -10deg); -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-filter: blur(40px); filter: blur(40px); opacity: 0; } 100% { -webkit-transform: translate(0, 0) skew(0deg, 0deg); transform: translate(0, 0) skew(0deg, 0deg); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-filter: blur(0); filter: blur(0); opacity: 1; } } @keyframes DescerDiagonalDesfocado { 0% { -webkit-transform: translate(1000px, -1000px) skew(-80deg, -10deg); transform: translate(1000px, -1000px) skew(-80deg, -10deg); -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-filter: blur(40px); filter: blur(40px); opacity: 0; } 100% { -webkit-transform: translate(0, 0) skew(0deg, 0deg); transform: translate(0, 0) skew(0deg, 0deg); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-filter: blur(0); filter: blur(0); opacity: 1; } } .Desfocar { -webkit-animation: Desfocar 0.5s linear both; animation: Desfocar 0.5s linear both; } @-webkit-keyframes Desfocar { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes Desfocar { 0% { opacity: 0; } 100% { opacity: 1; } } /* Cartões PDP */ .cartao-pdp .card-image { height: 150px; } .cartao-pdp .card-profile-image { width: 70px; position: absolute; top: 110px; z-index: 1; cursor: pointer; } .cartao-pdp .btn-move-up { position: relative; top: -40px; right: -18px; margin-right: 10px !important; } .btn-move-up { position: relative; top: -45px; right: -18px; } .cartao-pdp .card-content p { font-size: 1.2rem; margin: 10px 0 12px; } .card{ overflow: hidden; } .card-content{ min-width: 100%; } /* Círculos e sombras*/ .CirculoSombreado { background: rgba(0,0,0,0.3); justify-content: center; align-items: center; border-radius: 100%; text-align: justify; margin: 0 auto; font-size: calc(18px + 3vw); font-family: "Times New Roman", Times, serif; padding: 15px; display: flex; height: 50vw; width: 50vw; color: #fff; min-width: 100px; min-height: 100px; max-width: 10vw; max-height: 10vw; -webkit-box-shadow: 10px 10px 9px 0px rgba(0,0,0,0.75); -moz-box-shadow: 10px 10px 9px 0px rgba(0,0,0,0.75); box-shadow: inset 10px 10px 9px 5px rgba(0,0,0,0.75); } .SombraLonga{ color: #fff; text-shadow: 1px 0px 1px rgba(0,0,0,0.01), 0px 1px 1px rgba(0,0,0,0.02), 2px 1px 1px rgba(0,0,0,0.03), 1px 2px 1px rgba(0,0,0,0.04), 3px 2px 1px rgba(0,0,0,0.05), 2px 3px 1px rgba(0,0,0,0.06), 4px 3px 1px rgba(0,0,0,0.07), 3px 4px 1px rgba(0,0,0,0.08), 5px 4px 1px rgba(0,0,0,0.09), 4px 5px 1px rgba(0,0,0,0.1), 6px 5px 1px rgba(0,0,0,0.2), 5px 6px 1px rgba(0,0,0,0.3), 7px 6px 1px rgba(0,0,0,0.75); } .GradienteCruzado { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; border: none; color: rgba(255,255,255,1); -o-text-overflow: clip; text-overflow: clip; background: -webkit-linear-gradient(0, rgba(59,155,110,1) 0, rgba(42,214,139,1) 33%, rgba(32,201,116,1) 33%, rgba(123,229,197,1) 100%); background: -moz-linear-gradient(0, rgba(59,155,110,1) 0, rgba(42,214,139,1) 33%, rgba(32,201,116,1) 33%, rgba(123,229,197,1) 100%); background: linear-gradient(0, rgba(59,155,110,1) 0, rgba(42,214,139,1) 33%, rgba(32,201,116,1) 33%, rgba(123,229,197,1) 100%); background-position: 50% 50%; -webkit-background-origin: padding-box; background-origin: padding-box; -webkit-background-clip: border-box; background-clip: border-box; -webkit-background-size: auto auto; background-size: auto auto; } .EntrarDesfocado { -webkit-animation: EntrarDesfocado 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; animation: EntrarDesfocado 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; opacity: 0; } @-webkit-keyframes EntrarDesfocado { 0% { -webkit-transform: translateZ(-80px); transform: translateZ(-80px); opacity: 0; } 100% { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } } @keyframes EntrarDesfocado { 0% { -webkit-transform: translateZ(-80px); transform: translateZ(-80px); opacity: 0; } 100% { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } } .SairDesfocado { -webkit-animation: SairDesfocado 0.7s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; animation: SairDesfocado 0.7s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; } @-webkit-keyframes SairDesfocado { 0% { -webkit-transform: translateZ(1); transform: translateZ(1); opacity: 1; } 100% { -webkit-transform: translateZ(600px); transform: translateZ(600px); opacity: 0; } } @keyframes SairDesfocado { 0% { -webkit-transform: translateZ(1); transform: translateZ(1); opacity: 1; } 100% { -webkit-transform: translateZ(600px); transform: translateZ(600px); opacity: 0; } } .CairNaFrente { -webkit-animation: CairNaFrente 0.7s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; animation: CairNaFrente 0.7s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; } @-webkit-keyframes CairNaFrente { 0% { -webkit-transform: translateY(0) rotateX(0) scale(1); transform: translateY(0) rotateX(0) scale(1); -webkit-transform-origin: 50% 500px; transform-origin: 50% 500px; opacity: 1; } 100% { -webkit-transform: translateY(600px) rotateX(-20deg) scale(6); transform: translateY(600px) rotateX(-20deg) scale(6); -webkit-transform-origin: 50% -100%; transform-origin: 50% -100%; opacity: 0; } } @keyframes CairNaFrente { 0% { -webkit-transform: translateY(0) rotateX(0) scale(1); transform: translateY(0) rotateX(0) scale(1); -webkit-transform-origin: 50% 500px; transform-origin: 50% 500px; opacity: 1; } 100% { -webkit-transform: translateY(600px) rotateX(-20deg) scale(6); transform: translateY(600px) rotateX(-20deg) scale(6); -webkit-transform-origin: 50% -100%; transform-origin: 50% -100%; opacity: 0; } } .ApagarCentralizado { -webkit-animation: ApagarCentralizado 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) both; animation: ApagarCentralizado 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) both; } @-webkit-keyframes ApagarCentralizado { 0% { -webkit-transform: scale(1); transform: scale(1); -webkit-filter: blur(0px); filter: blur(0px); opacity: 1; } 100% { -webkit-transform: scale(2); transform: scale(2); -webkit-filter: blur(2px); filter: blur(2px); opacity: 0; } } @keyframes ApagarCentralizado { 0% { -webkit-transform: scale(1); transform: scale(1); -webkit-filter: blur(0px); filter: blur(0px); opacity: 1; } 100% { -webkit-transform: scale(2); transform: scale(2); -webkit-filter: blur(2px); filter: blur(2px); opacity: 0; } } a { text-decoration: none; } html, body { height: 100%; } @media only screen and (min-width: 0) { html { font-size: 14px; } } @media only screen and (min-width: 992px) { html { font-size: 14.5px; } } @media only screen and (min-width: 1200px) { html { font-size: 15px; } } h1, h2, h3, h4, h5, h6 { font-family: "Montserrat", sans-serif; font-weight: 400; line-height: 1.1; } p { font-family: "Roboto", sans-serif; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; } h1 { font-size: 4.2rem; line-height: 110%; margin: 2.1rem 0 1.68rem 0; } h2 { font-size: 3.56rem; line-height: 110%; margin: 1.78rem 0 1.424rem 0; } h3 { font-size: 2.92rem; line-height: 110%; margin: 1.46rem 0 1.168rem 0; } h4 { font-size: 2.28rem; line-height: 110%; margin: 1.14rem 0 0.912rem 0; } h5 { font-size: 1.64rem; line-height: 110%; margin: 0.82rem 0 0.656rem 0; } h6 { font-size: 1rem; line-height: 110%; margin: 0.5rem 0 0.4rem 0; } em { font-style: italic; } strong { font-weight: 500; } small { font-size: 75%; } .light { font-weight: 300; } .thin { font-weight: 200; } .flow-text { font-weight: 300; } @media only screen and (min-width: 360px) { .flow-text { font-size: 1.2rem; } } @media only screen and (min-width: 390px) { .flow-text { font-size: 1.224rem; } } @media only screen and (min-width: 420px) { .flow-text { font-size: 1.248rem; } } @media only screen and (min-width: 450px) { .flow-text { font-size: 1.272rem; } } @media only screen and (min-width: 480px) { .flow-text { font-size: 1.296rem; } } @media only screen and (min-width: 510px) { .flow-text { font-size: 1.32rem; } } @media only screen and (min-width: 540px) { .flow-text { font-size: 1.344rem; } } @media only screen and (min-width: 570px) { .flow-text { font-size: 1.368rem; } } @media only screen and (min-width: 600px) { .flow-text { font-size: 1.392rem; } } @media only screen and (min-width: 630px) { .flow-text { font-size: 1.416rem; } } @media only screen and (min-width: 660px) { .flow-text { font-size: 1.44rem; } } @media only screen and (min-width: 690px) { .flow-text { font-size: 1.464rem; } } @media only screen and (min-width: 720px) { .flow-text { font-size: 1.488rem; } } @media only screen and (min-width: 750px) { .flow-text { font-size: 1.512rem; } } @media only screen and (min-width: 780px) { .flow-text { font-size: 1.536rem; } } @media only screen and (min-width: 810px) { .flow-text { font-size: 1.56rem; } } @media only screen and (min-width: 840px) { .flow-text { font-size: 1.584rem; } } @media only screen and (min-width: 870px) { .flow-text { font-size: 1.608rem; } } @media only screen and (min-width: 900px) { .flow-text { font-size: 1.632rem; } } @media only screen and (min-width: 930px) { .flow-text { font-size: 1.656rem; } } @media only screen and (min-width: 960px) { .flow-text { font-size: 1.68rem; } } @media only screen and (max-width: 360px) { .flow-text { font-size: 1.2rem; } } .card { border-radius: 3px; } select { background-color: transparent; width: 100%; padding: 5px; border: none; border-radius: 2px; height: 3rem; border-bottom: 1px solid #bdbdbd; } .overflow-hidden{ overflow: hidden; } .overflow-visible{ overflow: visible; } /* Width */ .width-10 { width: 10% !important; } .width-20 { width: 20% !important; } .width-30 { width: 30% !important; } .width-40 { width: 40% !important; } .width-50 { width: 50% !important; } .width-50vw { width: 50vw !important; } .height-50vw { height: 50vw !important; } .width-60 { width: 60% !important; } .width-70 { width: 70% !important; } .width-80 { width: 80% !important; } .width-90 { width: 90% !important; } .width-100 { width: 100% !important; } /* Border Radius */ .border-radius-1 { border-radius: 1px !important; } .border-radius-2 { border-radius: 2px !important; } .border-radius-3 { border-radius: 3px !important; } .border-radius-4 { border-radius: 4px !important; } .border-radius-5 { border-radius: 5px !important; } .border-radius-6 { border-radius: 6px !important; } .border-radius-7 { border-radius: 7px !important; } .border-radius-8 { border-radius: 8px !important; } .border-radius-9 { border-radius: 9px !important; } .border-radius-10 { border-radius: 10px !important; } .border-round { border-radius: 50px !important; } .BordaArredondada{ border-radius: 50% !important; } /* Font Weight */ .font-weight-100 { font-weight: 100 !important; } .font-weight-200 { font-weight: 200 !important; } .font-weight-300 { font-weight: 300 !important; } .font-weight-400 { font-weight: 400 !important; } .font-weight-500 { font-weight: 500 !important; } .font-weight-600 { font-weight: 600 !important; } .font-weight-700 { font-weight: 700 !important; } .font-weight-800 { font-weight: 800 !important; } .font-weight-900 { font-weight: 900 !important; } .m-0 { margin: 0 !important; } /* Margin Top */ .mt-0 { margin-top: 0% !important; } .mt-1 { margin-top: 1% !important; } .mt-2 { margin-top: 2% !important; } .mt-3 { margin-top: 3% !important; } .mt-4 { margin-top: 4% !important; } .mt-5 { margin-top: 5% !important; } .mt-6 { margin-top: 6% !important; } .mt-7 { margin-top: 7% !important; } .mt-8 { margin-top: 8% !important; } .mt-9 { margin-top: 9% !important; } .mt-10 { margin-top: 10% !important; } /* Margin Right */ .mr-0 { margin-right: 0% !important; } .mr-1 { margin-right: 1% !important; } .mr-2 { margin-right: 2% !important; } .mr-3 { margin-right: 3% !important; } .mr-4 { margin-right: 4% !important; } .mr-5 { margin-right: 5% !important; } .mr-6 { margin-right: 6% !important; } .mr-7 { margin-right: 7% !important; } .mr-8 { margin-right: 8% !important; } .mr-9 { margin-right: 9% !important; } .mr-10 { margin-right: 10% !important; } /* Margin Left */ .ml-0 { margin-left: 0% !important; } .ml-1 { margin-left: 1% !important; } .ml-2 { margin-left: 2% !important; } .ml-3 { margin-left: 3% !important; } .ml-4 { margin-left: 4% !important; } .ml-5 { margin-left: 5% !important; } .ml-6 { margin-left: 6% !important; } .ml-7 { margin-left: 7% !important; } .ml-8 { margin-left: 8% !important; } .ml-9 { margin-left: 9% !important; } .ml-10 { margin-left: 10% !important; } /* Margin Bottom */ .mb-0 { margin-bottom: 0% !important; } .mb-1 { margin-bottom: 1% !important; } .mb-2 { margin-bottom: 2% !important; } .mb-3 { margin-bottom: 3% !important; } .mb-4 { margin-bottom: 4% !important; } .mb-5 { margin-bottom: 5% !important; } .mb-6 { margin-bottom: 6% !important; } .mb-7 { margin-bottom: 7% !important; } .mb-8 { margin-bottom: 8% !important; } .mb-9 { margin-bottom: 9% !important; } .mb-10 { margin-bottom: 10% !important; } /* Padding All */ .padding-1 { padding: 1% !important; } .padding-2 { padding: 2% !important; } .padding-3 { padding: 3% !important; } .padding-4 { padding: 4% !important; } .padding-5 { padding: 5% !important; } .padding-6 { padding: 6% !important; } .padding-7 { padding: 7% !important; } .padding-8 { padding: 8% !important; } .padding-9 { padding: 9% !important; } .padding-10 { padding: 10% !important; } .p-0 { padding: 0 !important; } /* Padding Top */ .pt-0 { padding-top: 0% !important; } .pt-1 { padding-top: 1% !important; } .pt-2 { padding-top: 2% !important; } .pt-3 { padding-top: 3% !important; } .pt-4 { padding-top: 4% !important; } .pt-5 { padding-top: 5% !important; } .pt-6 { padding-top: 6% !important; } .pt-7 { padding-top: 7% !important; } .pt-8 { padding-top: 8% !important; } .pt-9 { padding-top: 9% !important; } .pt-10 { padding-top: 10% !important; } /* Padding Right */ .pr-0 { padding-right: 0% !important; } .pr-1 { padding-right: 1% !important; } .pr-2 { padding-right: 2% !important; } .pr-3 { padding-right: 3% !important; } .pr-4 { padding-right: 4% !important; } .pr-5 { padding-right: 5% !important; } .pr-6 { padding-right: 6% !important; } .pr-7 { padding-right: 7% !important; } .pr-8 { padding-right: 8% !important; } .pr-9 { padding-right: 9% !important; } .pr-10 { padding-right: 10% !important; } /* Padding Right */ .pl-0 { padding-left: 0% !important; } .pl-1 { padding-left: 1% !important; } .pl-2 { padding-left: 2% !important; } .pl-3 { padding-left: 3% !important; } .pl-4 { padding-left: 4% !important; } .pl-5 { padding-left: 5% !important; } .pl-6 { padding-left: 6% !important; } .pl-7 { padding-left: 7% !important; } .pl-8 { padding-left: 8% !important; } .pl-9 { padding-left: 9% !important; } .pl-10 { padding-left: 10% !important; } .pl-15{ padding-left: 15% !important; } .pl-px25 { padding-left: 25px !important; } /* Padding Bottom */ .pb-0 { padding-bottom: 0% !important; } .pb-1 { padding-bottom: 1% !important; } .pb-2 { padding-bottom: 2% !important; } .pb-3 { padding-bottom: 3% !important; } .pb-4 { padding-bottom: 4% !important; } .pb-5 { padding-bottom: 5% !important; } .pb-6 { padding-bottom: 6% !important; } .pb-7 { padding-bottom: 7% !important; } .pb-8 { padding-bottom: 8% !important; } .pb-9 { padding-bottom: 9% !important; } .pb-10 { padding-bottom: 10% !important; } /* Minimum Height */ .min-height-100 { min-height: 100px !important; } .min-height-150 { min-height: 150px !important; } .min-height-200 { min-height: 200px !important; } .min-height-250 { min-height: 250px !important; } .min-height-300 { min-height: 300px !important; } /* Icon Background Round */ .background-round { background-color: rgba(0, 0, 0, 0.18); padding: 15px; border-radius: 50%; } /* opacity 0 */ .opacity-0 { opacity: 0; } /* Border None & Shadow None */ .border-none { border-top: none !important; border-bottom: none !important; border-left: none !important; border-right: none !important; } .box-shadow-none { box-shadow: none !important; } /* Margin 0 & Padding 0 */ .no-margin { margin: 0% !important; } .no-padding { padding: 0% !important; } /* Position */ .position-absolute { position: absolute; } /* Vertical Align */ .vertical-align-center { position: absolute; top: 50%; transform: translateY(-50%); } .vertical-align-super { vertical-align: super; } /* Line Height */ .line-height-0 { line-height: 0px !important; } /* Icon Background */ .icon-bg-circle { color: #fff; padding: .4rem; border-radius: 50%; } .text-shadow { text-shadow: -1px 2px 4px black; } /*--------------------------------- Typography -----------------------------------*/ .small { font-size: 1.0rem !important; } .medium-small { font-size: 0.9rem !important; } .ultra-small { font-size: 0.8rem !important; } small { font-size: 0.8rem; } .strong { font-weight: 600; } h4.header { line-height: 2.508rem; margin: 1.14rem 0 0.912rem 0; font-size: 1.4rem; font-weight: 400; text-transform: uppercase; } h4.header2 { font-size: 1.1rem; font-weight: 400; text-transform: uppercase; } p.title { font-size: 1.3rem; } p.header { font-size: 1rem; font-weight: 500; text-transform: uppercase; } li.li-hover:hover { background: transparent !important; } li.search-out:hover { background: transparent; } li.mobile:before { background: #f7464a; } li.kitchen:before { background: #46bfbd; } li.home:before { background: #fdb45c; } .more-text { padding: 5px 20px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; } .valign-demo { height: 400px; background-color: #ddd; } .margin { margin: 0 !important; } .margin-1{ margin: 1% !important; } .margin-2{ margin: 2% !important; } .margin-3{ margin: 3% !important; } .display-block{ display: block; } .uppercase { text-transform: uppercase; } .Gradiente-47deg-AzulClaro-VerdeClaro { background: #b3e5fc; background: -webkit-linear-gradient(47deg, #b3e5fc 0%, #64ffda 100%); background: linear-gradient(47deg, #b3e5fc 0%, #64ffda 100%); } .Gradiente-47deg-AzulClaro-VerdeClaro.SombraGradiente { box-shadow: 0 6px 20px 0 rgba(100, 255, 218, 0.5); } .Gradiente-47deg-AzulEscuro-AzulClaro { background: #c5cae9; background: -webkit-linear-gradient(47deg, #c5cae9 0%, #b3e5fc 100%); background: linear-gradient(47deg, #c5cae9 0%, #b3e5fc 100%); } .Gradiente-47deg-AzulEscuro-AzulClaro.SombraGradiente { box-shadow: 0 6px 20px 0 rgba(179, 229, 252, 0.5); } .Gradiente-47deg-AzulClaro-AzulEscuro { background: #b3e5fc; background: -webkit-linear-gradient(47deg, #b3e5fc 0%, #9fa8da 100%); background: linear-gradient(47deg, #b3e5fc 0%, #9fa8da 100%); } .Gradiente-47deg-AzulClaro-AzulEscuro.SombraGradiente { box-shadow: 0 6px 20px 0 rgba(159, 168, 218, 0.5); } .Gradiente-47deg-Amarelo-Verde { background: #ffff8d; background: -webkit-linear-gradient(47deg, #ffff8d 0%, #B9F6CA 100%); background: linear-gradient(47deg, #ffff8d 0%, #B9F6CA 100%); } .Gradiente-47deg-Amarelo-Verde.SombraGradiente { box-shadow: 0 6px 20px 0 rgba(185, 246, 202, 0.5); } .Gradiente-47deg-Laranja-LaranjaEscuro { background: #ffe0b2; background: -webkit-linear-gradient(47deg, #ffe0b2 0%, #ffccbc 100%); background: linear-gradient(47deg, #ffe0b2 0%, #ffccbc 100%); } .Gradiente-47deg-Laranja-LaranjaEscuro.SombraGradiente { box-shadow: 0 6px 20px 0 rgba(255, 204, 188, 0.5); } .Gradiente-47deg-RoxoEscuro-Roxo { background: #d1c4e9; background: -webkit-linear-gradient(47deg, #d1c4e9 0%, #f3e5f5 100%); background: linear-gradient(47deg, #381775 0%, #af4abf 100%); } .Gradiente-47deg-RoxoEscuro-Roxo.SombraGradiente { box-shadow: 0 6px 20px 0 rgba(181, 22, 204, 0.5); } .Gradiente-47deg-Vermelho-Rosa { background: #FF5252; background: -webkit-linear-gradient(47deg, #ED4A4A 0%, #fba0be 100%); background: linear-gradient(47deg, #ED4A4A 0%, #fba0be 100%); } .Gradiente-47deg-Vermelho-Rosa.SombraGradiente { box-shadow: 0 6px 20px 0 rgba(246, 132, 171, 0.74); } .Gradiente-47deg-VerdeClaro-Amarelo { background: #c5e1a5; background: -webkit-linear-gradient(47deg, #c5e1a5 0%, #fff8e1 100%); background: linear-gradient(47deg, #c5e1a5 0%, #fff8e1 100%); } .Gradiente-47deg-VerdeClaro-Amarelo.SombraGradiente { box-shadow: 0 6px 20px 0 rgba(255, 248, 225, 0.5); } .Gradiente-47deg-Dourado { background: #ff6f00; background: -webkit-linear-gradient(47deg, #ff6c00 0%, #fbd769 100%); background: linear-gradient(47deg, #ff6c00 0%, #fbd769 100%); } .Gradiente-47deg-Dourado.SombraGradiente { box-shadow: 0 6px 20px 0 rgba(251, 144, 23, 0.58); } .Gradiente-47deg-Roxo-Rosa { background: #ea80fc; background: -webkit-linear-gradient(47deg, #ea80fc 0%, #fce4ec 100%); background: linear-gradient(47deg, #ea80fc 0%, #fce4ec 100%); } .Gradiente-47deg-Roxo-Rosa.SombraGradiente { box-shadow: 0 6px 20px 0 rgba(252, 228, 236, 0.5); } .Gradiente-47deg-AzulEscuro-AzulClaro { background: #3949ab; background: -webkit-linear-gradient(47deg, #3949ab 0%, #4fc3f7 100%); background: linear-gradient(47deg, #3949ab 0%, #4fc3f7 100%); } .Gradiente-47deg-AzulEscuro-AzulClaro.SombraGradiente { box-shadow: 0 6px 20px 0 rgba(79, 195, 247, 0.5); } .Gradiente-47deg-VerdeClaro-Ciano { background: #e0f2f1; background: -webkit-linear-gradient(47deg, #e0f2f1 0%, #00e5ff 100%); background: linear-gradient(47deg, #e0f2f1 0%, #00e5ff 100%); } .Gradiente-47deg-VerdeClaro-Ciano.SombraGradiente { box-shadow: 0 6px 20px 0 rgba(0, 229, 255, 0.5); } .Gradiente-47deg-CinzaClaro { background: #cfd8dc; background: -webkit-linear-gradient(47deg, #cfd8dc 0%, #546e7a 100%); background: linear-gradient(47deg, #cfd8dc 0%, #546e7a 100%); } .Gradiente-47deg-CinzaClaro.SombraGradiente { box-shadow: 0 6px 20px 0 rgba(84, 110, 122, 0.5); } .Gradiente-47deg-Ciano-VerdeClaro { background: #0097a7; background: -webkit-linear-gradient(47deg, #0097a7 0%, #b2ff59 100%); background: linear-gradient(47deg, #0097a7 0%, #b2ff59 100%); } .Gradiente-47deg-Ciano-VerdeClaro.SombraGradiente { box-shadow: 0 6px 20px 0 rgba(178, 255, 89, 0.5); } .Gradiente-47deg-Laranja-Dourado { background: #e65100; background: -webkit-linear-gradient(47deg, #e65100 0%, #ffa000 100%); background: linear-gradient(47deg, #e65100 0%, #ffa000 100%); } .Gradiente-47deg-Laranja-Dourado.SombraGradiente { box-shadow: 0 6px 20px 0 rgba(25, 118, 210, 0.5); } .Gradiente-47deg-AzulEscuro-Azul { background: #303f9f; background: -webkit-linear-gradient(47deg, #303f9f 0%, #1976D2 100%); background: linear-gradient(47deg, #303f9f 0%, #1976D2 100%); } .Gradiente-47deg-AzulEscuro-Azul.SombraGradiente { box-shadow: 0 6px 20px 0 rgba(25, 118, 210, 0.5); } .Gradiente-47deg-Marrom-Marrom { background: #6d4c41; background: -webkit-linear-gradient(47deg, #6d4c41 0%, #d7ccc8 100%); background: linear-gradient(47deg, #6d4c41 0%, #d7ccc8 100%); } .Gradiente-47deg-Marrom-Marrom.SombraGradiente { box-shadow: 0 6px 20px 0 rgba(187, 222, 251, 0.5); } .Gradiente-47deg-Cinza-Azul { background: #263238; background: -webkit-linear-gradient(47deg, #263238 0%, #2979FF 100%); background: linear-gradient(47deg, #263238 0%, #2979FF 100%); } .Gradiente-47deg-Cinza-Azul.SombraGradiente { box-shadow: 0 6px 20px 0 rgba(41, 121, 255, 0.5); } .Gradiente-47deg-Roxo-LaranjaEscuro { background: #8e24aa; background: -webkit-linear-gradient(47deg, #840da4 0%, #f85c2b 100%); background: linear-gradient(47deg, #840da4 0%, #f85c2b 100%); } .Gradiente-47deg-Roxo-LaranjaEscuro.SombraGradiente { box-shadow: 0 6px 20px 0 rgba(201, 54, 8, 0.59); } .Gradiente-47deg-Verde-VerdeClaro { background: #43A047; background: -webkit-linear-gradient(47deg, #43A047 0%, #5ff9d2 100%); background: linear-gradient(47deg, #43A047 0%, #5ff9d2 100%); } .Gradiente-47deg-Verde-VerdeClaro.SombraGradiente { box-shadow: 0 6px 20px 0 rgba(90, 203, 87, 0.68); } .Gradiente-47deg-Roxo-AzulClaro { background: #e040fb; background: -webkit-linear-gradient(47deg, #e040fb 0%, #4fc3f7 100%); background: linear-gradient(47deg, #e040fb 0%, #4fc3f7 100%); } .Gradiente-47deg-Roxo-AzulClaro.SombraGradiente { box-shadow: 0 6px 20px 0 rgba(79, 195, 247, 0.5); } .Gradiente-47deg-Ciano { background: #18ffff; background: -webkit-linear-gradient(47deg, #18ffff 0%, #00e5ff 100%); background: linear-gradient(47deg, #18ffff 0%, #00e5ff 100%); } .Gradiente-47deg-Ciano.SombraGradiente { box-shadow: 0 6px 20px 0 rgba(0, 229, 255, 0.5); } .Gradiente-47deg-Amarelo-VerdeClaro { background: #fff9c4; background: -webkit-linear-gradient(47deg, #fff9c4 0%, #64ffda 100%); background: linear-gradient(47deg, #fff9c4 0%, #64ffda 100%); } .Gradiente-47deg-Amarelo-VerdeClaro.SombraGradiente { box-shadow: 0 6px 20px 0 rgba(100, 255, 218, 0.5); } .Gradiente-47deg-Roxo-RoxoEscuro { background: #7b1fa2; background: -webkit-linear-gradient(47deg, #7b1fa2 0%, #7c4dff 100%); background: linear-gradient(47deg, #7b1fa2 0%, #7c4dff 100%); } .Gradiente-47deg-Roxo-RoxoEscuro.SombraGradiente { box-shadow: 0 6px 20px 0 rgba(124, 77, 255, 0.5); } .Gradiente-47deg-Ciano-VerdeClaro { background: #00e5ff; background: -webkit-linear-gradient(47deg, #00e5ff 0%, #ccff90 100%); background: linear-gradient(47deg, #00e5ff 0%, #ccff90 100%); } .Gradiente-47deg-Ciano-VerdeClaro.SombraGradiente { box-shadow: 0 6px 20px 0 rgba(204, 255, 144, 0.5); } .Gradiente-47deg-Roxo-Dourado { background: #d500f9; background: -webkit-linear-gradient(47deg, #d500f9 0%, #ffa000 100%); background: linear-gradient(47deg, #d500f9 0%, #ffa000 100%); } .Gradiente-47deg-Roxo-Dourado.SombraGradiente { box-shadow: 0 6px 20px 0 rgba(255, 160, 0, 0.5); } .Gradiente-47deg-AzulEscuro-Roxo { background: #303f9f; background: -webkit-linear-gradient(47deg, #1a2fb6 0%, #9925bd 100%); background: linear-gradient(47deg, #1a2fb6 0%, #9925bd 100%); } .Gradiente-47deg-AzulEscuro-Roxo.SombraGradiente { box-shadow: 0 6px 20px 0 rgba(129, 10, 180, 0.46); } .Gradiente-47deg-RoxoEscuro-Azul { background: #6200ea; background: -webkit-linear-gradient(47deg, #6200ea 0%, #1976D2 100%); background: linear-gradient(47deg, #6200ea 0%, #1976D2 100%); } .Gradiente-47deg-RoxoEscuro-Azul.SombraGradiente { box-shadow: 0 6px 20px 0 rgba(25, 118, 210, 0.5); } .Gradiente-47deg-LaranjaEscuro-Laranja { background: #bf360c; background: -webkit-linear-gradient(47deg, #bf360c 0%, #f57c00 100%); background: linear-gradient(47deg, #bf360c 0%, #f57c00 100%); } .Gradiente-47deg-LaranjaEscuro-Laranja.SombraGradiente { box-shadow: 0 6px 20px 0 rgba(245, 124, 0, 0.5); } .Gradiente-47deg-AzulClaro-Ciano { background: #0288d1; background: -webkit-linear-gradient(47deg, #037cb4 0%, #49e0f3 100%); background: linear-gradient(47deg, #037cb4 0%, #49e0f3 100%); } .Gradiente-47deg-AzulClaro-Ciano.SombraGradiente { box-shadow: 0 6px 20px 0 rgba(38, 198, 218, 0.5); } .Gradiente-47deg-Azul-AzulEscuro { background: #2962FF; background: -webkit-linear-gradient(47deg, #2962FF 0%, #3949ab 100%); background: linear-gradient(47deg, #2962FF 0%, #3949ab 100%); } .Gradiente-47deg-Azul-AzulEscuro.SombraGradiente { box-shadow: 0 6px 20px 0 rgba(57, 73, 171, 0.5); } .material-icons.md-18 { font-size: 18px; } .material-icons.md-24 { font-size: 24px; } .material-icons.md-36 { font-size: 36px; } .material-icons.md-48 { font-size: 48px; } /* Rules for using icons as black on a light background. */ .material-icons.md-dark { color: rgba(0, 0, 0, 0.54); } .material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); } /* Rules for using icons as white on a dark background. */ .material-icons.md-light { color: white; } .material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); } /*---------------------------------------- Pulse ------------------------------------------*/ .pulse-style-one { display: flex; justify-content: space-around; } .notification-badge { font-family: "Montserrat", sans-serif; position: relative; right: 5px; top: -20px; color: #ffffff; background-color: #29b6f6; margin: 0 -.8em; border-radius: 50%; padding: 2px 5px; } #notifications-dropdown h5 { font-size: 1rem; text-transform: capitalize; font-weight: 500; } #notifications-dropdown li { padding: 8px 16px; font-size: 1rem; } #notifications-dropdown li > a { padding: 0; font-size: 1.1rem; font-weight: 300; } #notifications-dropdown li > a > span { display: inline-block; font-size: 1.2rem; position: relative; top: 4px; margin-right: 5px; } #notifications-dropdown li > time { font-size: 0.8rem; font-weight: 400; margin-left: 38px; } #notifications-dropdown li.divider { padding: 0; } .sem-ícone { visibility: visible; position: relative; opacity: 1; transition: opacity 0.2s linear; left: 45px; } #slide-out li a i { line-height: inherit; width: 2rem; font-size: 1.4rem; display: block; float: left; text-align: center; margin-right: 1rem; } #slide-out li .collapsible-body a i { font-size: 1.2rem; } #slide-out ul.side-nav li { padding: 0 !important; } .caption { font-size: 1.25rem; font-weight: 300; margin-bottom: 30px; } .caption-uppercase { font-size: 1.25rem; font-weight: 300; margin-bottom: 30px; text-transform: uppercase; } .sidebar-collapse { position: absolute; left: -170px; top: -50px; } .user-task, .user-time { margin: 0; font-size: 13px; color: #fff; } .user-roal { color: #fff; margin-top: -16px; font-size: 13px; text-shadow: 1px 1px 1px #444; } .user-details .row { margin: 0; } .bold > a { font-weight: bold; } .rightside-navigation { overflow: hidden; } #right-search .input-field { margin-top: 0; } .icon-bg-color { height: 35px; width: 35px; border-radius: 50%; text-align: center; padding-top: 8px; font-size: 20px; } .border-bottom-1 { border-bottom: 1px solid #f5f5f5; } .activity::before { position: absolute; top: 0; height: 100vh; margin-top: 130px; bottom: 0; left: 16%; width: 1px; margin-left: -1px; content: ""; background-color: #e0e0e0; z-index: -1; } #EmbrulhoSuperior { background: #f3f3f3; } #EmbrulhoSuperior .Migalhas { padding: 0; margin: 15px 0; list-style: none; } #EmbrulhoSuperior .Migalhas > li { display: inline-block; } #EmbrulhoSuperior .Migalhas > li + li:before { padding: 0 5px; color: #C6BFBF; content: "/\00a0"; } #EmbrulhoSuperior .Migalhas .active { font-weight: normal; color: #979494; } #EmbrulhoSuperior .TituloSuperior { font-size: 1.5rem; line-height: 1.804rem; margin: 18px 0 0; } .ContenedorDosPlanos .collection { border: none; } .ContenedorDosPlanos .collection .collection-item { border-bottom: none; text-align: center; font-size: 1.07rem; line-height: 1.6em; } .ContenedorDosPlanos .collection .collection-item:before { font-family: "Material Icons"; content: "check"; font-size: 1.28rem; line-height: 1.6em; color: #00bfa5; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; margin-right: 10px; } .ContenedorDosPlanos .card .card-image { position: relative; width: 100%; } .ContenedorDosPlanos .card .card-image .card-title { position: relative; font-size: 1.28rem; line-height: 1.6em; text-align: center; width: 100%; padding: 10px 15px; text-transform: uppercase; background: rgba(0, 0, 0, 0.1); } .ContenedorDosPlanos .card .card-image .price { position: relative; font-size: 5rem; line-height: 1.6em; color: #fff; font-weight: 300; text-align: center; } .ContenedorDosPlanos .card .card-image .price sup { font-weight: 100; font-size: 1.42rem; line-height: 1.6em; top: -35px; } .ContenedorDosPlanos .card .card-image .price sub { font-weight: 100; font-size: 1.42rem; line-height: 1.6em; top: 0; } .ContenedorDosPlanos .card .card-image .price-desc { text-align: center; color: #fff; padding-bottom: 10px; } .ContenedorDosPlanos .card .card-content { padding: 0; } .text-long-shadow { text-shadow: #1d7d74 1px 1px, #1d7d74 2px 2px, #1d7d74 3px 3px, #1d7d74 4px 4px, #1d7d74 5px 5px, #1d7d74 6px 6px, #1d7d74 7px 7px, #1d7d74 8px 8px, #1d7d74 9px 9px, #1d7d74 10px 10px, #1d7d74 11px 11px, #1d7d74 12px 12px, #1d7d74 13px 13px, #1d7d74 14px 14px, #1d7d74 15px 15px, #1d7d74 16px 16px, #1d7d74 17px 17px, #1d7d74 18px 18px, #1d7d74 19px 19px, #1d7d74 20px 20px, #1d7d74 21px 21px, #208b81 22px 22px, #208b81 23px 23px, #208b81 24px 24px, #208b81 25px 25px, #208b81 26px 26px, #208b81 27px 27px, #208b81 28px 28px, #208b81 29px 29px, #208b81 30px 30px, #26a69a 31px 31px, #26a69a 32px 32px, #26a69a 33px 33px, #26a69a 34px 34px, #26a69a 35px 35px, #26a69a 36px 36px, #26a69a 37px 37px; background-color: #00bfa5; width: 100%; font-size: 10rem; color: #fff !important; text-align: center; padding: 20px 0 !important; } .input-field div.error { position: relative; top: -1rem; left: 0rem; font-size: 0.8rem; color: #FF4081; -webkit-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } .browser-window { text-align: left; width: 100%; height: auto; display: inline-block; -webkit-border-radius: 5px 5px 2px 2px; -moz-border-radius: 5px 5px 2px 2px; border-radius: 5px 5px 2px 2px; background-clip: padding-box; background-color: transparent; margin: 20px 0; overflow: hidden; } .browser-window .top-bar { height: 30px; -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; background-clip: padding-box; border-top: thin solid #eaeae9; border-bottom: thin solid #ddd; background: linear-gradient(#e7e7e6, #e0e0e0); } .browser-window .circle { height: 10px; width: 10px; display: inline-block; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; background-color: #fff; margin-right: 1px; } .browser-window .circles { margin: 5px 12px; } .browser-window .content { margin: 0; width: 100%; display: inline-block; border-radius: 0 0 5px 5px; background-color: #fafafa; } .browser-window .row { margin: 0; } #close-circle { background-color: #ff5c5a; } #minimize-circle { background-color: #fdb45c; } #maximize-circle { background-color: #1bc656; } .clear { clear: both; } .promo i { color: #ee6e73; font-size: 6rem; display: block; } .promo-caption { font-size: 1.7rem; font-weight: 500; margin-top: 5px; margin-bottom: 0; } #site-layout-example-left { background-color: #90a4ae; height: 300px; } #site-layout-example-right { background-color: #00bfa5; height: 300px; } #site-layout-example-top { background-color: #FF5252; height: 50px; } .flat-text-header { height: 35px; width: 80%; background-color: rgba(255, 255, 255, 0.15); display: block; margin: 27px auto; } .flat-text { height: 25px; width: 80%; background-color: rgba(0, 0, 0, 0.15); display: block; margin: 27px auto; } .flat-text.small { width: 25%; height: 25px; background-color: rgba(0, 0, 0, 0.15); } .flat-text.full-width { width: 100%; } .col.grid-example { border: 1px solid #eee; margin: 7px 0; text-align: center; line-height: 50px; font-size: 28px; background-color: #ff6347; color: #fff; padding: 0; } .col.grid-example span { font-weight: 200; line-height: 50px; } .waves-color-demo .collection-item { height: 57px; line-height: 57px; } .collection a.collection-item:not(.active):hover { background-color: #f9f9f9; } .input-field label.active { width: 100%; } /* LINHA DO TEMPO IMPLEMENTADA POR RAFAEL ESTA LINHA DO TEMPO DESENHA UMA BOLA NO CENTRO DE CADA EVENTO E CADA EVENTO SE ALINHA A ESQUERDA E A DIREITA ALTERNADAMENTE TAMBÉM CRIA UMA LINHA LIGANDO AS BOLAS DENTRO DA BOLA PODE SER COLOCADO ÍCONE OU TEXTO O evento | evento O */ #Atividades .LinhaDoTempo { position: relative; } #Atividades .LinhaDoTempo .LinhaDoTempo-Evento { position: relative; padding-top: 10px; padding-bottom: 10px; } #Atividades .LinhaDoTempo .LinhaDoTempo-Evento .LinhaDoTempo-Conteúdo { position: relative; width: calc(50% - 50px); border: 1px solid #6cc8fb; border-radius: 10px; padding: 8px; border-left: 8px solid #6cc8fb; } #Atividades .LinhaDoTempo .LinhaDoTempo-Evento::before { display: block; content: ""; width: 2px; height: calc(50% - 20px); position: absolute; background: #e3e3e3; left: calc(50% - 1px); top: 0; } #Atividades .LinhaDoTempo .LinhaDoTempo-Evento::after { display: block; content: ""; width: 2px; height: calc(50% - 20px); position: absolute; background: #e3e3e3; left: calc(50% - 1px); top: calc(50% + 20px); } #Atividades .LinhaDoTempo .LinhaDoTempo-Evento:first-child::before { display: none; } #Atividades .LinhaDoTempo .LinhaDoTempo-Evento:last-child::after { display: none; } #Atividades .LinhaDoTempo .LinhaDoTempo-Evento:nth-child(even) .LinhaDoTempo-Conteúdo { margin-left: calc(50% + 50px); } #Atividades .LinhaDoTempo .LinhaDoTempo-Evento:nth-child(odd) .LinhaDoTempo-Conteúdo { margin-left: 0; } #Atividades .LinhaDoTempo .LinhaDoTempo-Crachá { display: block; position: absolute; width: 40px; height: 40px; background-color: #f6f3f3 !important; top: calc(50% - 20px); right: calc(50% - 20px); border-radius: 50%; justify-content: center; align-items: center; text-align: justify; display: flex; cursor: default; border: 1px solid #d1cecd; color: grey !important; } #Atividades .LinhaDoTempo .LinhaDoTempo-Crachá i { font-size: 20px; line-height: 30px; } #Atividades .LinhaDoTempo .LinhaDoTempo-Crachá hora { font-size: 15px; } /* Esta parte define que o alinhamento fica somente na esquerda poderia colocar @media screen para pequenas telas mas como vai ficar no menu lateral esquerdo fica definitivo caso comente cada evento vai ficar intercalado alinhado à esquerda e à direita. O evento | O evento */ #Atividades .LinhaDoTempo .LinhaDoTempo-Evento .LinhaDoTempo-Conteúdo { width: calc(100% - 30px); line-height: 20px; padding-right: 30px; } #Atividades .LinhaDoTempo .LinhaDoTempo-Evento::before { left: 19px; } #Atividades .LinhaDoTempo .LinhaDoTempo-Evento::after { left: 19px; } #Atividades .LinhaDoTempo .LinhaDoTempo-Evento:nth-child(even) .LinhaDoTempo-Conteúdo { margin-left: 50px; } #Atividades .LinhaDoTempo .LinhaDoTempo-Evento:nth-child(odd) .LinhaDoTempo-Conteúdo { margin-left: 50px; } #Atividades .LinhaDoTempo .LinhaDoTempo-Crachá { left: 0; } /* Histórico de Atualizações */ #HistóricoDeAtualizações .LinhaDoTempo { position: relative; } #HistóricoDeAtualizações .LinhaDoTempo .LinhaDoTempo-Evento { position: relative; padding-top: 10px; padding-bottom: 10px; text-align: center; } #HistóricoDeAtualizações .LinhaDoTempo .LinhaDoTempo-Evento .LinhaDoTempo-Conteúdo { position: relative; width: calc(50% - 50px); border: 1px solid #44CCDA; border-radius: 10px; padding: 8px; } #HistóricoDeAtualizações .LinhaDoTempo .LinhaDoTempo-Evento::before { display: block; content: ""; width: 2px; height: calc(50% - 20px); position: absolute; background: #e3e3e3; left: calc(50% - 1px); top: 0; } #HistóricoDeAtualizações .LinhaDoTempo .LinhaDoTempo-Evento::after { display: block; content: ""; width: 2px; height: calc(50% - 20px); position: absolute; background: #e3e3e3; left: calc(50% - 1px); top: calc(50% + 20px); } #HistóricoDeAtualizações .LinhaDoTempo .LinhaDoTempo-Evento:first-child::before { display: none; } #HistóricoDeAtualizações .LinhaDoTempo .LinhaDoTempo-Evento:last-child::after { display: none; } #HistóricoDeAtualizações .LinhaDoTempo .LinhaDoTempo-Evento:nth-child(even) .LinhaDoTempo-Conteúdo { margin-left: calc(50% + 50px); } #HistóricoDeAtualizações .LinhaDoTempo .LinhaDoTempo-Evento:nth-child(odd) .LinhaDoTempo-Conteúdo { margin-left: 0; } #HistóricoDeAtualizações .LinhaDoTempo .LinhaDoTempo-Crachá { display: block; position: absolute; width: 40px; height: 40px; background-color: #f6f3f3 !important; top: calc(50% - 20px); right: calc(50% - 20px); border-radius: 50%; justify-content: center; align-items: center; text-align: justify; display: flex; cursor: default; border: 1px solid #d1cecd; color: grey !important; } #HistóricoDeAtualizações .LinhaDoTempo .LinhaDoTempo-Crachá i { font-size: 20px; line-height: 30px; } #HistóricoDeAtualizações .LinhaDoTempo .LinhaDoTempo-Crachá hora { font-size: 15px; } @media only screen and (max-width : 600px) { #HistóricoDeAtualizações .LinhaDoTempo .LinhaDoTempo-Evento .LinhaDoTempo-Conteúdo { width: calc(100% - 80px); line-height: 20px; padding-right: 0; } #HistóricoDeAtualizações .LinhaDoTempo .LinhaDoTempo-Evento::before { left: 19px; } #HistóricoDeAtualizações .LinhaDoTempo .LinhaDoTempo-Evento::after { left: 19px; } #HistóricoDeAtualizações .LinhaDoTempo .LinhaDoTempo-Evento:nth-child(even) .LinhaDoTempo-Conteúdo { margin-left: 85px; } #HistóricoDeAtualizações .LinhaDoTempo .LinhaDoTempo-Evento:nth-child(odd) .LinhaDoTempo-Conteúdo { margin-left: 85px; } #HistóricoDeAtualizações .LinhaDoTempo .LinhaDoTempo-Crachá { left: 0; } } /* BORDER RADIUS */ .br-4{ border-radius: 4px; } .br-5{ border-radius: 5px; } .br-6{ border-radius: 6px; } .br-7{ border-radius: 7px; } .br-8{ border-radius: 8px; } .br-9{ border-radius: 9px; } .br-10{ border-radius: 10px; } .br-15{ border-radius: 15px; } .br-20{ border-radius: 20px; } .br-25{ border-radius: 25px; } .br-30{ border-radius: 30px; } .br-40{ border-radius: 40px; } .br-50{ border-radius: 50px; } .br-4-4{ border-radius: 4px 4px 0 0; } .br-5-5{ border-radius: 5px 5px 0 0; } .br-6-6{ border-radius: 6px 6px 0 0; } .br-7-7{ border-radius: 7px 7px 0 0; } .br-8-8{ border-radius: 8px 8px 0 0; } .br-9-9{ border-radius: 9px 9px 0 0; } .br-10-10{ border-radius: 10px 10px 0 0; } .br-15-15{ border-radius: 15px 15px 0 0; } .br-20-20{ border-radius: 20px 20px 0 0; } .br-25-25{ border-radius: 25px 25px 0 0; } .br-30-30{ border-radius: 30px 30px 0 0; } .br-40-40{ border-radius: 40px 40px 0 0; } .br-50-50{ border-radius: 50px 50px 0 0; } /* CARTÕES DOS MÓDULOS COM BADGE AJUSTADOS ABSOLUTE */ .card.span-absolute span.badge{ position: absolute; right: 15px; display: flex; } span.badge.new:after { content: ""; } span.badge { margin-left: 0; } /* div fixed-action-btn DENTRO DO CARTÃO */ div[id^=CartãoPDP] .fixed-action-btn{ position: relative; right: 0; } /* MOSTRANDO TAMANHO DATATABLES LENGTH */ .dataTables_length select{ display: inline !important; } /* AJUSTANDO REALCE DO DATEPICKER QUANDO MOVE COM O TECLADO */ .picker__day--highlighted:hover, .picker--focused .picker__day--highlighted { cursor: pointer; background-color: #46cafd40; border-radius: 50%; } .picker__day--selected, .picker__day--selected:hover, .picker--focused .picker__day--selected { border-radius: 50%; transform: scale(0.9); background-color: #03a9f4; color: #ffffff; } /* AJUSTANDO SETAS DO DATEPICKER */ .picker__nav--prev, .picker__nav--next { position: absolute; padding: .5em 0.25em; width: 1em; height: 1em; box-sizing: content-box; top: 0.4em; } /*AJUSTANDO DATEPICKER APARECER MÊS E ANO*/ .picker__select--month, .picker__select--year { position: relative !important; opacity: 1 !important; height: 2em !important; padding: 0; margin-left: .25em; margin-right: .25em; } .bolinha{ border-radius: 50%; width: 15px; height: 15px; display: table; text-align: center; background-color: transparent; z-index: 1; top: 15px; position: relative; margin: 0 15px 0 0; flex: 0 0 auto; } .bolinha.amber{ border: 0.5px solid #eaad00; } .bolinha.red{ border: 0.5px solid #e02f2f; } .bolinha.green{ border: 0.5px solid #16a921; } .bolinha.purple{ border: 0.5px solid #8a28c7; } /*AJUSTANDO BOTÕES RADIO E FONTES*/ @media only screen and (max-width : 600px) { .switch p{ font-size: 12px; line-height: 24px; } .collapsible.popout > li { box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); margin: 0; transition: margin 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .collapsible-header { padding: 0 5px; } .collapsible-header i { margin-right: .1rem; } .bolinha { margin: 0 5px; } .width-10.BordaArredondada{ width: 20% !important; } .collapsible-body { padding: 1rem; } .collapsible-body .row .col { padding: 0 0.5rem; } .collapsible-body .card-panel { padding: 0; margin: 0; } .collapsible-body .collection .collection-item { padding: 1px 5px; margin: 0; } } /*AJUSTANDO BOTÃO FLUTUANTE*/ #PaiDoContenedorDoCliente .collapsible-header i { width: inherit; } #PaiDoContenedorDoCliente .fixed-action-btn.horizontal ul { text-align: right; right: 74px; top: 50%; transform: translateY(-50%); height: 100%; left: auto; width: 500px; } #PaiDoContenedorDoCliente .fixed-action-btn.horizontal ul li { display: inline-block; margin: 15px 0 0 0; } #PaiDoContenedorDoCliente .collapsible-header .btn-floating.btn-flat:hover, .collapsible-header .fixed-action-btn.horizontal.active .btn-floating.btn-flat{ background-color: transparent; box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2); } #PaiDoContenedorDoCliente .collapsible-header .fixed-action-btn.horizontal.active .btn-floating.btn-flat i, #PaiDoContenedorDoCliente .collapsible-header .btn-floating.btn-flat:hover i{ color: #70e170 !important; } #PaiDoContenedorDoCliente .collapsible-header .fixed-action-btn.horizontal{ position: relative; display: inline-block; bottom: 1px; right: -5px; margin: 0 0 0 auto; } #FormulárioAlterarAssinatura .collection{ overflow: visible; } #FormulárioAlterarAssinatura .collection-item{ display: flex; } #FormulárioAlterarAssinatura .collection-item a{ flex: auto; text-align: right; } #FormulárioAlterarAssinatura .collection-item a>input{ margin-bottom: 0px; height: auto; border-bottom: 0; text-align: right; width: 100%; display: block; padding-bottom: 5px; } #FormulárioAlterarAssinatura .collection .collection-item { padding: 10px 20px 0 20px; } #FormulárioAlterarAssinatura .select-wrapper.disabled input.select-dropdown { border-bottom: none; } #FormulárioAlterarAssinatura .select-wrapper input.select-dropdown { height: 1.5rem; margin: 0; padding: 0; text-align: right; border-bottom: none; } #FormulárioAlterarAssinatura .select-wrapper span.caret{ right: -15px; } #PaiDoContenedorDoCliente .collapsible-header.active, #PaiDoContenedorDosDadosPessoais .collapsible-header.active, #PaiDoContenedorDasAssinaturas .collapsible-header.active{ /*background-color: #d5d8e0ba !important;*/ border-radius: 6px 6px 0 0; } #PaiDoContenedorDoCliente, #PaiDoContenedorDoCliente li.active, #PaiDoContenedorDosDadosPessoais, #PaiDoContenedorDosDadosPessoais li.active, #PaiDoContenedorDasAssinaturas, #PaiDoContenedorDasAssinaturas li.active, #ContenedorDosDadosPessoais, [id^=ContenedorDaAssinatura]{ border-radius: 6px 6px 0 0; } #PaiDoContenedorDasAssinaturas .collapsible-body{ padding-top: 0.5px; } /* Ajustando sms da página inicial */ .DescriçãoCírculo{ position: absolute; bottom: 20%; color: white; font-size: 1rem; } .traço-esquerdo{ content: ''; border-top: 1px solid white; width: 25px; position: absolute; right: 64%; top: 51%; } .traço-direito{ content: ''; border-top: 1px solid white; width: 25px; position: absolute; left: 64%; top: 51%; } .traço-centralizado { content: ''; border-top: 1px solid white; width: 20%; position: absolute; top: 51%; left: 40%; } .hoverable:hover { box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) !important; } .fonte-sans { line-height: 1.5; -webkit-text-size-adjust: 100%; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-feature-settings: normal; font-variation-settings: normal; -webkit-tap-highlight-color: transparent; }