html, body {
margin: 0;
padding: 0;
}
html{
position: relative;
min-height: 100%;
}
body{
background: url("../_img/login-bg.jpg") no-repeat center fixed;
background-size: cover;
}
@font-face {
font-family: padrao;
src: url("Baloo2-Regular.ttf");
}
@font-face {
font-family: padrao-semi;
src: url("Baloo2-SemiBold.ttf");
}
@font-face {
font-family: mont;
src: url("Montserrat-Light.ttf");
}
p{
font-family: padrao;
}
h2{
font-family: padrao-semi;
margin-bottom: 25px
}
::placeholder{
color: dimgrey;
}
.log{
width: 100%;
border: none;
border-bottom: 1px solid lightgray;
padding-bottom: 1px;
}
.log:focus{
border-bottom: 2px limegreen solid;
outline: none;
padding-bottom: 0px;
}
.form-control{
padding: 4px 8px;
height: 29px;
}
label{
margin-bottom: 0px;
font-family: padrao;
font-size: 11pt;
color: gray;
}
.btn{
padding: 10px;
border-radius: 150px;
}
.login{
display: flex !important;
flex-direction: column;
justify-content: center;
min-height: calc(100vh - 100px);
}
@media screen and (min-width: 768px) {
.logon{
display: flex !important;
flex-direction: column;
justify-content: center;
min-height: 100vh;
}
}
@media screen and (min-width: 768px){
.data-calendario{
font-family: padrao;
color: dimgray;
font-size: 20pt;
line-height: 35px;
overflow: hidden;
margin-left: 20px;
}
}
@media screen and (max-width: 767px){
.data-calendario{
font-family: padrao;
color: dimgray;
font-size: 15pt;
line-height: 35px;
overflow: hidden;
margin-left: 20px;
}
}
.box-lo{
background: white;
border: 1px solid rgba(0,0,0,0.10);
height: 110px;
border-radius: 3px;
box-shadow: 2px 2px 5px -3px darkgray;
padding: 10px 20px;
}
.box-lo p{
color: dimgray;
}
.box-li{
background: white;
border: 1px solid rgba(0,0,0,0.10);
height: 110px;
border-radius: 3px;
cursor: pointer;
transition: .2s;
box-shadow: 2px 2px 5px -3px darkgray;
padding: 10px 20px;
}
.box-li p{
color: dimgray;
}
.box-li:hover{
box-shadow: 2px 2px 5px 0px darkgray;
}
/* LOADING */
.lds-roller {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.lds-roller div {
animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
transform-origin: 40px 40px;
}
.lds-roller div:after {
content: " ";
display: block;
position: absolute;
width: 7px;
height: 7px;
border-radius: 50%;
background: #2CC168;
margin: -4px 0 0 -4px;
}
.lds-roller div:nth-child(1) {
animation-delay: -0.036s;
}
.lds-roller div:nth-child(1):after {
top: 63px;
left: 63px;
}
.lds-roller div:nth-child(2) {
animation-delay: -0.072s;
}
.lds-roller div:nth-child(2):after {
top: 68px;
left: 56px;
}
.lds-roller div:nth-child(3) {
animation-delay: -0.108s;
}
.lds-roller div:nth-child(3):after {
top: 71px;
left: 48px;
}
.lds-roller div:nth-child(4) {
animation-delay: -0.144s;
}
.lds-roller div:nth-child(4):after {
top: 72px;
left: 40px;
}
.lds-roller div:nth-child(5) {
animation-delay: -0.18s;
}
.lds-roller div:nth-child(5):after {
top: 71px;
left: 32px;
}
.lds-roller div:nth-child(6) {
animation-delay: -0.216s;
}
.lds-roller div:nth-child(6):after {
top: 68px;
left: 24px;
}
.lds-roller div:nth-child(7) {
animation-delay: -0.252s;
}
.lds-roller div:nth-child(7):after {
top: 63px;
left: 17px;
}
.lds-roller div:nth-child(8) {
animation-delay: -0.288s;
}
.lds-roller div:nth-child(8):after {
top: 56px;
left: 12px;
}
@keyframes lds-roller {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* FIM LOADING */
/* DATA PICKER */
.active{
background: #2CC168 !important;
}
.day:hover, .next:hover, .prev:hover, .datepicker-months span:hover, .focused{
background: #2CC168 !important;
color: white;
}
.month{
height: 45px !important;
line-height: 45px !important;
}
.datepicker-months td:hover{
background-color: white !important;
}
.datepicker-months th:hover, .datepicker-days th:hover{
border-radius: 15px !important;
}
.datepicker-months th, .datepicker-days th{
border-radius: 15px !important;
}
/* FIM DATA PICKER */
/* MIOLO AGENDA */
.linha-tabela td{
border-left: 1px solid rgba(229,229,229,1.00) !important;
}
.linha-tabela tr, .linha-tabela th{
min-height: 1px !important;
}
.linha-tabela td span.sp1{
position: absolute;
top: -1px;
left: -2px;
width: calc(100% - 20px);
height: 100%;
}
.agendamento:hover{
z-index: 2;
box-shadow: 0 0 10px -3px rgba(0,0,0,0.60);
min-height: 45px;
}
.linha-tabela td span div{
border-radius: 4px;
min-height: 10px;
border: 1px solid white;
position: relative;
white-space: nowrap;
overflow: hidden;
transition: .3s;
cursor: pointer;
z-index: 1;
display: inline-block;
margin-right: -5px;
padding-left: 4px;
}
.linha-tabela td span div span{
font-family: mont;
font-size: 10pt;
color: white;
}
.linha-tabela tr:nth-child(even){
border-bottom: 1px solid rgba(229,229,229,1.00);
}
table th, table td{
position: relative;
transition: .06s
}
table span.hora-cabecalho{
position: absolute;
transform: translateX(-50%);
left: 40%;
color: gray;
font-weight: 100;
font-family: padrao;
top: 0px;
overflow: hidden;
padding: 0 6px;
font-size: 1.7vh;
}
table td:hover{
background-color:rgba(237,237,237,1.00);
}
.nome-cabecalho th{
font-family: padrao;
text-align: center;
position: relative;
overflow: hidden;
}
.nome-cabecalho th span{
position: absolute;
width: 100%;
left: 0;
top: 0px;
padding: 0 2px;
}
/* FIM MIOLO AGENDA */
/* outros */
textarea:focus{
outline: 2px solid limegreen;
}
/* fim de outros */
a.in{
line-height: 40px;
cursor: pointer;
}
.fav{
color: white;
width: 50px;
text-align: center;
transition: .2s;
}
.fav:hover{
background-color: #d64737;
}
.fav span{
font-size: 13pt;
}
.menu{
max-width: 50px;
height: calc(100vh - 35px);
background: #3d3d3d;
padding: 0;
transition: .3s;
}
#triangulo-para-esquerda {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 5px solid white;
position: absolute;
right: 0px;
top: 8px;
transition: .3s;
}
.btnpp:hover{
background-color: rgb(248, 249, 250);
border: 1px solid rgb(211,211,211);
}
/* ICONES */
.fa-estilo, a.fa-whatsapp{
border-radius: 100%;
cursor: pointer;
text-decoration: none;
transition: .2s;
width: 100%;
line-height: 35px;
text-align: center;
color: dimgray;
}
.fa-estilo:hover, a.fa-estilo:hover{
background: #2CC168;
color: white;
}
/* FIM ICONES */