:root{ 7 --primary: #009EE2; --secundary: #1D1D1B; --bt: #027fb7; --btHover: #0d9cdc; } html, body{margin: 0px; font-family: 'Nunito Sans', sans-serif; background: #F3F3F3; color: #333333; font-size: 15px;} a, a:visited, a:hover, a:link{text-decoration: none; color: inherit} form{margin: 0px} .fullLink{position: absolute; width: 100%; height: 100%; top: 0; left: 0} h1{color: var(--main-color); font-family: 'Outfit', sans-serif;margin: 0px 0px 20px 0px; text-align: left !important; font-size: 27px; font-weight: bold; border-bottom: 1px solid #DDD; width: 100%;} h2{color: var(--main-color); font-family: 'Outfit', sans-serif;margin: 10px 0px 20px 0px; text-align: left !important; font-size: 20px; font-weight: normal; border-bottom: 1px solid #DDD; width: 100%;} section{padding: 20px; min-width: 1000px;} .contain{min-width: 1000px; margin: 0px 0px 0px 200px; font-size: 15px; text-align: justify; padding: 20px} .containPainel{width: calc(100% - 250px); padding: 40px 0px; margin: 0 auto;} select option:disabled {background: #DDD; color: #000; font-weight: bold;} /*NOTIFICAÇÕES*/ #notificationBox{position: absolute; top: 47px; right: 0px; box-shadow: 0px 0px 10px -4px #333; width: 300px; height: calc(100vh - 47px); background: #FCFCFC;} .notificationBox{background: #FCFCFC; border: 1px solid #CCC; position: absolute; top: 3px; width: 200px; height: 200px} .notificationItem{background: #FFFFFF; border-bottom: 1px solid #BBB; padding: 10px; cursor: pointer; -webkit-user-select: none; -ms-user-select: none; user-select: none;} .flex{display: flex; justify-content: space-between; flex-wrap: wrap} .flexGap40{display: flex;flex-wrap: wrap; gap: 40px;} .flexGap10{display: flex;flex-wrap: wrap; gap: 10px;} .flexForm{display: flex} .txtCenter{text-align: center} .inputBox{margin-right: 5px} .inputBox>div{font-size: 12px; color: #777;} .notificationNumber{position: absolute; top: 5px; right: 9px; background: #ff2530; border-radius: 50%; color: #FFF; width: 16px; height: 16px; font-size: 8px; text-align: center; display: flex; justify-content: center; align-items: center;} .logo{background: var(--primary); padding: 15px; text-align: center;} .logo img{max-width: 70px} .header{text-align: center; background: var(--primary); padding: 20px 15px;} .header img{height: 70px} #boxTemp, .boxTemp{width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.75); display: flex; justify-content: center; align-items: center; z-index: 100000;} .boxTempAC{width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.75); display: flex; justify-content: center; align-items: center; z-index: 100000;} .boxTempAB{width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.75); display: flex; justify-content: center; align-items: baseline; z-index: 10000; } #menuIcon{display: none} /* MENSAGEM ALERTA */ .msgAlerta{padding: 20px; border-radius: 2px; background: #FFFFFF; color: #000000 !important; position: relative} .alertaMsg{border-radius: 4px; background: #fff; color: #000 !important; position: relative; overflow: hidden; min-width: 250px;} .alertaCab{background: #EEEEEE; padding: 10px 15px; vertical-align: middle; font-size: 14px; text-align: center;} .alertaCab img{width: 25px; height: auto; margin-right: 10px; vertical-align: middle} .alertaText{padding: 15px; font-size: 17px; text-align: center;} .menuItem{position: relative; color: #FFFFFF; display: flex; align-items: center; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 7px 15px; font-size: 13px; transition: 0.3s;} .menuItem img{margin-right: 10px; max-width: 30px; max-height: 30px; border-radius: 15px} .menuSide{width: 200px; position: fixed; top: 79; left: 0; height: 100%; font-size: 17px; transition: 0.6s; z-index: 1001; background: #6767f6} .menuItemCab{position: relative; color: #FFFFFF; background: #4949dc; display: flex; align-items: center; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 7px 15px; font-size: 13px; transition: 0.3s; font-weight: bold} .n1{padding-left: 15px} .n2{padding-left: 35px; cursor: pointer} .n2:hover{background: rgba(255,255,255,0.2)} .menuTop{background: #FFF; border-bottom: 1px solid #E5E5E5; display: flex; justify-content: space-between; padding: 17px 30px; position: sticky; top: 0; z-index: 10000; border-bottom: 1px solid #CCC;} .menuTop .menuItem{color: #333333; transition: 0.6s; padding: 3px; margin: 3px 8px 3px 3px; border-radius: 3px; cursor: pointer} .menuTop .menuItem img{margin: 0px 5px;} .menuTop .menuItem:hover{background: #F1F1F1} .menuTop-logo{height: 45px} .contraMenu{display: none; position: fixed; top: 0px; right: 0px; height: 100%; width: calc(100% - 155px); cursor: pointer; z-index: 10000;} .menuOpen{left: 0px !important}/*Mostra Menu do lado esquerdo*/ /*TABLE HEADER*/ .tbBox{margin-top: 15px; border: 1px solid #BBB; border-radius: 4px; overflow: hidden; width: max-content; max-width: 100%;} .tbHeader{padding: 10px 10px; font-weight: bold; display: flex; background: #e6e6e6; color: #222222; align-items: center;} .tbHeader>div{padding-right: 5px;} .tbLine{padding: 5px 10px; line-height: 30px; display: flex; background: #FAFAFA; align-items: center;} .tbLine>div{text-overflow: ellipsis; white-space: nowrap; padding-right: 5px; overflow: hidden;} .tbLine:nth-child(odd){background: #EEEEEE;} .usuariosBox{padding: 5px; border: 1px solid #CCC; background: #FFFFFF; border-radius: 3px; margin: 5px 0px; display: flex; align-items: center;} .timeNomeFantasia, .timeRazaoSocial{width: 260px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-right: 3px; font-weight: bold} .timeEmail{width: 200px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-right: 3px} .timeFone{width: 140px;} .timeNomeContato{width: 160px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-right: 3px} .timeAcoes img{width: 28px; cursor: pointer;} /*RESPOSTAS - PERFIS*/ #respostaDiv{min-width: 1150px;} [class^='resposta-']{white-space: nowrap; text-overflow: ellipsis; overflow: hidden;} .resposta-select{width: 30px;} .resposta-setor{width: 160px;} .resposta-unidade{width: 160px;} .resposta-avaliacao{width: 290px;} .resposta-nome{width: 240px;} .resposta-data{width: 125px;} .resposta-acoes{width: 115px; display: flex} .resposta-acoes img{width: 25px; padding: 0px 5px; cursor: pointer} /*INPUT RADIO ALTERNATIVAS*/ /* The container */ .alternativa{display: block; position: relative; cursor: pointer; font-size: 14px; color: #444; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;} .alternativaFlex img{width: 250px} /* Hide the browser's default checkbox */ .alternativa input{position: absolute; opacity: 0; cursor: pointer; left: 0; width: 0px; height: 0px} /* Create a custom checkbox */ .checkmark {display: inline-block; top: 0; left: 0; height: 20px; width: 20px; background-color: #DDDDDD; border: 1px solid #CCCCCC; border-radius: 50%; position: relative;} .checkmark2 {display: inline-block; top: 0; left: 0; height: 20px; width: 20px; background-color: #DDDDDD; border: 1px solid #CCCCCC; border-radius: 3px; position: relative;} /* On mouse-over, add a grey background color */ .alternativa:hover input ~ .checkmark {background-color: #BBBBBB;} .alternativa:hover input ~ .checkmark2 {background-color: #BBBBBB;} /* When the checkbox is checked, add a blue background */ .alternativa input:checked ~ .checkmark {background-color: #26c6da; border: 1px solid #0097a7;} .alternativa input:checked ~ .checkmark2 {background-color: #26c6da; border: 1px solid #0097a7;} /* Create the checkmark/indicator (hidden when not checked) */ .checkmark:after{content: ""; position: absolute; display: none;} .checkmark2:after{content: ""; position: absolute; display: none;} /* Show the checkmark when checked */ .alternativa input:checked ~ .checkmark:after {display: block;} .alternativa input:checked ~ .checkmark2:after {display: block;} /* Style the checkmark/indicator */ .alternativa .checkmark:after {left: 5px; top: 5px; width: 10px; height: 10px; background: #fff; border-radius: 50%; position: absolute} .alternativa .checkmark2:after {left: 6px; top: 2px; width: 4px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); position: absolute} .alternativa .btDefault{background: #FF9800 !important} /*LOGIN*/ .loginHeader{position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .loginHeaderBack{top: 0; left: 0; width: 65%; height: 100%; filter: brightness(0.4); background: URL("/img/background-login.jpg"); background-position: left; background-size: cover;} .loginBox{position: relative; width: 35%; height: calc(100% - 30px); text-align: center; text-align: center; background: #EEEEEE; border-radius: 5px; padding: 15px;} .loginBox input, .forgotInput{max-width: 400px; border-radius: 40px; font-size: 15px !important; padding: 12px !important} .loginBox input[type='text'], .loginBox input[type='password'], .forgotInput{border-bottom: 1px solid #AAAAAA !important;} .loginBox img{width: 85%; margin: 25px 0px 50px 0px;} .forgot{color: #777777; border: none; cursor: pointer; background: transparent; transition: 0.3s} .forgot:hover{color: var(--bt);} .loginInput {padding: 7px; width: 100%; outline: none; border: #CCC; margin-bottom: 10px; font-size: 17px; font-family: 'Nunito Sans', sans-serif;} #flexMsg, #flexBox {position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 10000; display: flex; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.85);} .boxMsg {padding: 15px; background: #FFFFFF; color: #000; text-align: center; margin-top: 55px; position: relative;} .close {position: absolute; top: 10px; right: 10px; width: 15px; height: 15px; background: URL('/img/close.png'); cursor: pointer; background-size: 15px;} .creater{position: absolute; bottom: 10px; color: #FFFFFF; font-size: 13px; width: 100%; text-align: center;} .creater a{text-decoration: none; color: #FFFFFF} .input {font-family: 'Nunito Sans', sans-serif; font-size: 14px; width: 100%; max-width:600px; padding: 3px; outline: none; border: 0px solid #BBB; max-width: 100%; color: #000; background: transparent; border-radius: 4px} .input:focus {background: #FFFFFF} .input:disabled, .input:read-only {background: #DDD; color: #000;} select{background:transparent !important} /* .input:read-only altera a cor do select, mesmo não sendo "read-only", esta linha 'corrigi' */ select:focus{background: #FFFFFF !important} /* .input:read-only altera a cor do select, mesmo não sendo "read-only", esta linha 'corrigi' */ .labelFk{border: 1px solid #AAAAAA; padding: 5px 10px; border-radius: 5px; color: #777; font-size: 12px; margin-bottom: 10px; display: block; transition: 0.3s; cursor: pointer} .labelFk:hover{background: #EAEAEA} .labelFk .input{cursor: pointer} .labelFk:has(.input:disabled) {background: #DDD; color: #000;} .labelFk:has(.input:focus) {color: var(--primary); border: 1px solid #777777; } .textarea{font-family: 'Nunito Sans', sans-serif; font-size: 17px; padding: 8px; margin: 10px 0px; width: 600px; height: 100px; outline: none; border-radius: 3px; border: 1px solid #BBB;} .maxcontent{width: max-content} .bt{position: relative; background: var(--bt); color: #FFF; font-size: 15px; font-family: 'Nunito Sans', sans-serif; border: none; border-radius: 40px; padding: 9px 12px; cursor: pointer; transition: 0.5s; outline: none; text-align: center; margin: 0 auto; -webkit-appearance: none; width: max-content; min-width: 136px;} .bt:hover{background: var(--btHover); box-shadow: 2px 2px 7px -2px #777} .btVermelho{position: relative; background: #f44336; color: #FFF; font-size: 12px; font-family: 'Nunito Sans', sans-serif; border: none; border-radius: 3px; margin: 5px 10px 0px 0px; padding: 5px 20px; cursor: pointer; transition: 0.5s; outline: none; text-align: center;-webkit-appearance: none; width: max-content;} .btVermelho:hover{background: #d32f2f; box-shadow: 2px 2px 7px -2px #777} .btCinza{position: relative; background: #545f65; color: #FFF; font-size: 12px; font-family: 'Nunito Sans', sans-serif; border: none; border-radius: 3px; margin: 5px 10px 0px 0px; padding: 5px 20px; cursor: pointer; transition: 0.5s; outline: none; text-align: center;-webkit-appearance: none; width: max-content;} .btCinza:hover{background: #717f87; box-shadow: 2px 2px 7px -2px #777} .btAzul{position: relative; background: var(--bt); color: #FFF; font-size: 12px; font-family: 'Nunito Sans', sans-serif; border: none; border-radius: 3px; margin: 5px 10px 0px 0px; padding: 5px 20px; cursor: pointer; transition: 0.5s; outline: none; text-align: center;-webkit-appearance: none; width: max-content;} .btAzul:hover{background: var(--btHover); box-shadow: 2px 2px 7px -2px #777} .btVerde{position: relative; background: #11be73; color: #FFF; font-size: 12px; font-family: 'Nunito Sans', sans-serif; border: none; border-radius: 3px; margin: 5px 10px 0px 0px; padding: 5px 20px; cursor: pointer; transition: 0.5s; outline: none; text-align: center;-webkit-appearance: none; width: max-content;} .btVerde:hover{background: #05864e; box-shadow: 2px 2px 7px -2px #777} .footer {font-size: 14px; line-height: 25px;} .media img {width: 20px; margin-right: 5px; vertical-align: middle;} .div300{margin: 0 auto; width: max-content;} .div300 img{height: calc(100% - 40px); max-width: 100%; max-height: calc(100vw - 50px);} .box{border: 1px solid #BBB; border-radius: 3px; width: max-content; background: #FFFFFF; margin-top: 50px; overflow: hidden; position: relative} .boxHeader{padding: 13px; background: #EEEEEE; font-weight: bold} .boxClose{position: absolute; top: 0; right: 0; width: 24px; height: 24px; padding: 10px; cursor: pointer; transition: 0.3s;} .boxClose:hover{background: #DDDDDD;} .boxClose img{width: 24px;} .boxContain{padding: 15px;} .width50p{width: 50%; margin: 0 auto;} /*** PAGE - MEU PERFIL ***********/ .perfilFoto{width: 250px; height: 250px; object-fit: cover; border-radius: 50%; box-shadow: 3px 3px 7px -3px #777;} .btFotoPerfil{margin: 5px auto; color: #333; background: #FFFFFF; box-shadow: 1px 1px 5px 1px #DDD; padding: 5px; z-index: 10; width: 60px; text-align: center; border-radius: 15px; display: flex; align-items: center; gap: 3px; justify-content: center; font-weight: bold; cursor: pointer; transition: 0.3s; outline: none; border: 0px; position: relative} .btFotoPerfil:hover{box-shadow: 0px 2px 7px -1px #555} .btFotoImg{width: 17px;} /*********************************/ /*** PAGE - CADASTRO USUÁRIO ***********/ .cadastroEtapas{display: flex; width: 100%; gap: 5px} .cadastroEtapas>div{border-radius: 2px; background: #CCCCCC; width: calc(100% / 4 - 5px); margin-bottom: 10px; text-align: center; padding: 10px;} .cadastroEtapas>div>img{width: 25px;} .cadastroEtapas .etapaConcluida{background: var(--primary) !important} .cadastroRequisitos{background: #FCFCFC; border: 2px solid #BBB; border-radius: 5px; padding: 10px; margin: 15px 0px;} /*********************************/ /** PROGRESS LOAD ****************/ .progressBox{display: none; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 10000; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.3);} .progress{position: relative; width: 250px; height: 20px; background: #FFFFFF; border-radius: 4px; overflow: hidden; text-align: center} .percent{z-index: 3; position: relative; line-height: 20px;} .bar{position: absolute; top: 0; left: 0; height: 20px; width: 0px; animation: barColor 5s ease-in 0s infinite normal forwards; background: var(--primary)} @keyframes barColor { 0%, 50%, 100% {opacity: 1} 25%, 75% {opacity: 0.7} } /*********************************/ .status{width: 5px !important; height: 20px !important; margin: 0px 5px 0px 0px !important; border-radius: 5px !important; padding: 0px !important;} .amarelo1,.amarelo2, .laranja1, .azul1, .azul2, .azul3, .azul4, .cinza1, .cinza2, .cinza3, .laranja1, .verde1, .vermelho1, .vermelho2, .roxo1{width: 5px; height: 20px; margin: 2px 5px 0px 3px; border-radius: 5px; padding: 0px !important; text-align: center} .amarelo1{background: #ffc107} .amarelo2{background: #e8ae00} .azul1{background: #0062cc} .azul2{background: #0156b3} .azul3{background: #015290} .azul4{background: #17a2b8} .cinza1{background: #999999} .cinza2{background: #777777} .cinza3{background: #555555} .laranja1{background: #ff8000} .verde1{background: #02a258} .vermelho1{background: #e02213} .vermelho2{background: #fd6054} .roxo1{background: #a300a6} /*********************************/ /*** SWITCH LIGA/DESLIGA *********/ .switch {position: relative; display: inline-block; width: 60px; height: 34px; margin: 10px 0px;} .switch input{opacity: 0; width: 0; height: 0;} .slider{position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; border-radius: 34px;} .slider:before {position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; border-radius: 50%;} input:checked + .slider {background-color: #6767f6;} input:focus + .slider {box-shadow: 0 0 1px #2196F3;} input:checked + .slider:before {-webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px);} /* EXEMPLO */ /********************************/ /********************************/ .guias{display: flex; margin-bottom: 20px; & > div{padding: 5px 7px; background: #CCC; cursor: pointer; border-right: 1px solid #EEEEEE; font-size: 13px; &:hover{background: #DDD} } & .ativa{background: #DDD; border-bottom: 2px solid #6767f6;} } .dependenteBox,.servicoTimeBox{margin-bottom: 10px; background: #FFFFFF; padding: 10px; border: 1px solid #CCC; border-radius: 3px} /********************************/ /*** CALENDÁRIO *****************/ .agenda{display: flex; gap: 25px; justify-content: space-between;} .agendaList{width: 350px} .agendaListDia{color: #4949dc; padding: 3px; font-weight: bold; font-size: 12px} .agendaListItem{display: flex; gap: 5px; padding: 5px; background: #FEFEFE; margin-bottom: 5px; border: 1px solid #DDD; border-radius: 3px; font-size: 12px} .agendaTag{width: 15px; height: 15px; border-radius: 3px} .calendarioDiv{width: 644px} .calendarioMes{display: flex; gap: 5px; margin-bottom: 5px;} .calendarioMes > div{background: #6767f6; padding: 5px; color: #FFF; text-align: center; border-radius: 3px} .calendarioBt{width: 25px; cursor: pointer; transition: 0.3s} .calendarioBt:hover{background: #7e7ef5} .calendarioMesTxt{width: 544px} .calendarioDiaSem{display: flex; gap: 5px; font-weight: bold; color: #6767f6; border-radius: 3px;} .calendarioDiaSem > div{width: 80px; height: 25px; line-height: 25px; text-align: center; border: 1px solid transparent; padding: 3px} .calendarioDiasDiv{width: 644px; display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 15px; cursor: pointer;} .calendarioDiaVoid{width: 80px; height: 50px; border: 1px solid transparent; padding:18px 3px 3px 3px} .calendarioDia{display: flex; gap: 3px; flex-wrap: wrap; width: 80px; height: 55px; border: 1px solid #AAA; border-radius: 3px; font-size: 11px; color: #777; padding: 18px 3px 3px 3px; transition: 0.3s; background: #FBFBFB; position: relative} .calendarioDia:hover{background: #6767f633} .calendarioDiaFixed{position: absolute; top: 3px; left: 3px} .calendarioLegenda{display: flex; gap: 5px; font-size: 11px } .calendarioLegenda > div{padding: 5px 10px; border-radius: 3px} .calendarioMapeamento{background: #43d6af} .calendarioDiscord{background: #ed8d8d} .calendarioWorkshop{background: #ffe082} .calendarioAtendimento{background: #81d4fa} .calendarioFollowup{background: #bcaaa4} .hoje{border-color: #6767f6; color: #6767f6; font-weight: bold;} .evento{width: 38px; height: 15px; border-radius: 3px; cursor: pointer}