@import url(https://fonts.googleapis.com/css?family=Roboto);



body {

  margin: 0;

  background-color: #f1f1f1;

  font-family: Arial;

  font-family: Roboto;

  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

}



:root {

    --color1: rgb(116,145,119);

    --color2: rgb(163,201,168);

    --color3: rgb(221,216,196);

    --color4: rgb(21,49,49);

}



#box-header {

  width: 100%;

  height: 80px;

  position: fixed;

  margin-top: -100px;

  border-bottom: 1px solid lightgray;

  background-color: white;

  padding: 10px 30px;

  box-sizing: border-box;

  z-index: 1;

}



#img-header {

  width: 200px;

  height: 60px;

  background-color: var(--color3);

  background: url('../assets/images/logo.png') no-repeat center;

  background-size: 100% 100%;

  border-bottom: 1px solid var(--color4);

  float: left;

}



#box-info-user {

  float: right;

}



#name-user {

  height: 10px;

  line-height: 40px;

  margin-right: 10px;

  text-transform: capitalize;

}



#img-user {

  width: 45px;

  height: 45px;

  margin-top: 5px;

  border-radius: 50%;

  border: 2px solid var(--color1);

  float: right;

  box-shadow: 1px 1px 10px 1px lightgray;

}



#box-menu-routes-options {

  width: 115px;

  height: 60px;

  float: left;

}



#box-menu-routes-options ul {

  width: 150px;

  list-style: none;

  box-sizing: border-box;

}



#box-menu-routes-options ul:first-child:hover {

  background: var(--color1);

  color: white;

}



#box-menu-routes-options ul ul li {

  background: darkgray;

  color: white;

  width: 160px;

  padding: 5px 10px;

  margin-left: -80px;

}



#box-menu-routes-options ul ul a {

  text-decoration: none;

}



#box-menu-routes-options ul ul li:hover {

  background: gray;

  color: white;

}



#box-menu-routes-options ul:hover ul {

  display: block;

}



#box-menu-routes-options ul ul {

  display: none;

}


#container {

  width: calc(100% - 60px);

  min-height: 700px;

  background-color: white;

  box-shadow: 1px 1px 10px 0px darkgray;

  border-radius: 3px;

  margin: 30px;

  margin-top: 100px;

  padding: 20px;

  padding-bottom: 50px;

  box-sizing: border-box;

  position: relative;

}


#container-login {

  width: calc(100% - 60px);

  min-height: 635px;

  background-color: white;

  box-shadow: 1px 1px 10px 0px darkgray;

  border-radius: 3px;

  #margin: 30px;

  #padding: 20px;

  box-sizing: border-box;

  position: relative;

}

#title-container {

  width: calc(100% + 40px);

  height: 80px;

  margin-bottom: 20px;

  border-bottom: 1px dashed darkgray;

  margin-left: -20px;

  padding: 20px 30px;

  box-sizing: border-box;

}



#title-container span {

  font-size: 15pt;

  display: block;

  border-left: 5px solid var(--color1);

  padding-left: 15px;

}



.card-container {

  width: 100%;

  height: 160px;

  border: 1px solid lightgray;

  border-radius: 3px;

  padding: 20px;

  box-sizing: border-box;

}



.card-container .img-card {

  width: 120px;

  height: 120px;

  background: #c9ffcb;

  border: 1px solid green;

  border-radius: 50%;

  float: left;

  margin-right: 25px;

  box-shadow: 1px 1px 10px 0px lightgray;

}



.card-container .title-card {

  font-size: 20pt;

  font-style: italic;

}



.card-container .description-card {

  display: block;

  font-size: 50pt;

  color: gray;

  font-style: italic;

  color: darkgray;

  text-shadow: 0px 0px 1px black;

}

#box-graficos {

  margin-top: 20px;

  height: auto;
  display: flex;

}



.box-grafico {

  width: calc(50% - 7px);

  height: 100%;

  background: #f1f1f1;

  /*float: left;*/
  flex: 1;

  border: 1px dashed lightgray;

}



.box-grafico:nth-child(2) {

  margin-left: 10px;

}



#btn-adicionar-paciente, #btn-adicionar-receita {

  float: right;

  width: auto;

  height: 40px;

  background-color: var(--color1);

  color: white;

  border: none;

  border-bottom: 2px solid var(--color4);

  border-radius: 3px;

  outline: none;

  cursor: pointer;

  transition: 0.3s;

  margin-left: 10px;

}



#btn-adicionar-paciente:hover {

  background: var(--color4);

}



#btn-adicionar-receita {

  background-color: var(--color3);

  color: black;

}



#box-footer {

  width: 100%;

  height: 200px;

  background: linear-gradient(to bottom, var(--color4), var(--color1));

  border-top: 3px solid var(--color2);

  text-align: center;

  padding: 80px;

  box-sizing: border-box;

  color: white;

  font-style: italic;

}



#box-footer a {

  color: white;

}



#table-list-pacientes {

  width: 100%;

  border: 1px solid lightgray;

}



#table-list-pacientes th {

  background-color: var(--color4);

  color: white;

  padding: 10px;

  border-radius: 2px;

  box-shadow: 1px 1px 1px gray;

}



#table-list-pacientes td {

    padding: 5px;

    text-align: center;

    border-radius: 2px;

}



#table-list-pacientes tr:hover td {

  background-color: lightgray;

}



.btn-list-paciente {

  width: 35px;

  height: 35px;

  border-radius: 50%;

  background: gray;

  color: white;

  border: 2px solid white;

  box-shadow: 1px 1px 1px gray;

  outline: none;

  cursor: pointer;

  transition: 0.3s;

}



.btn-list-paciente:hover { background-color: darkgray; }



.btn-paciente-edit {

  background-color: green;

  margin-right: 3px;

}



.btn-paciente-edit:hover { background-color: darkgreen; }



.btn-paciente-delete {

  background-color: red;

}



.btn-paciente-delete:hover { background-color: var(--color1); }



#btn-search-pacientes {

  float: right;

  margin-bottom: 20px;

  width: 200px;

  height: 30px;

  border-radius: 3px;

  border: 1px solid lightgray;

  padding: 0 10px;

  box-sizing: border-box;

  outline-color: var(--color1);

}



#content-list-pacientes {

  text-align: center;

  padding: 10px;

}



#btn-logout {

  border: none;

  /* margin-top: 100px; */

  float: right;

  top: -10px;

  margin-top: -20px;

  margin-right: 70px;

  border-radius: 5px;

}



#box-edit-paciente {

    width: 100%;

    height: auto;

    /*background: red;*/



}

#box-data-flex {
  width: 100%;
  display: flex;
  flex-direction: row;
}



#box-menu-lateral {

  width: 300px;

  height: 390px;

  padding: 10px 5px;

  box-sizing: border-box;

  box-shadow: 1px 1px 10px 0px gray;



}



#box-menu-lateral .option-menu {

  width: 100%;

  height: 45px;

  margin-bottom: 1px;

  border: none;

  transition: 0.3s;

}



#box-menu-lateral .option-menu:hover {

  background-color: darkgray;

  color: white;

  border-left: 10px solid var(--color1);

  cursor: pointer;

}



#box-content {

  /*width: calc(100% - 310px);*/

  /*height: 580px;*/

  /*overflow-y: auto;*/

  /* background: blue; */

  /*float: left;*/

  margin-left: 15px;

  border: 1px dashed gray;

  /*position: relative;*/

  flex: 1;

}



#box-options-topo {

  width: 100%;

  height: 60px;

  padding: 10px;

  box-sizing: border-box;

  margin-bottom: 10px;

  background-color: #f1f1f1;

  /* border: 1px solid gray; */

  box-shadow: 0px 0px 1px darkgray;

}



.option-topo {

  padding: 10px 20px;

  float: left;

  background: lightgray;

  margin-right: 2px;

}



.container {

  width: 80%;

  display: flex;

  margin-left: 50%;

  transform: translateX(-50%);

  margin-top: 20px;

}



.content {

  /*width: 100%;*/

  padding: 10px;

  box-sizing: border-box;

  margin-top: 10px;

  font-size: 15pt;

}



.content input, .content select {

  width: 100%;

  height: 40px;

  padding: 0 10px;

  box-sizing: border-box;

  border: 1px solid lightgray;

  border-radius: 5px;

  outline: none;

  margin-top: 10px;

  transition: .3s;

}



.content input:focus, .content option:focus {

  border: 1px solid var(--color1);

  box-shadow: 1px 1px 10px lightgray;

}

.button-back {
  border-radius: 50%;
  width: 30px;
  height: 30px;
  cursor: pointer;
  outline: none;
  border: 1px solid darkgray;
}

.button-back::after {
  content: 'Voltar';
  position: absolute;
  left: 55px;

}

#form-cadastrar-paciente input[type=submit] {

  position: absolute;

  bottom: 10px;

  right: 10px;

  padding: 10px 20px;

  border: none;

  transition: .3s;

  cursor: pointer;

}



#form-cadastrar-paciente input[type=submit]:hover {

  background: gray;

  color: white;

}



.box-content-item {

  display: none;

  padding: 20px;

}



#form-login {

  width: 400px;

  height: 400px;

  background-color: white;

  box-shadow: 1px 1px 100px #444040;

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(0%, -50%);

  padding: 30px;

  box-sizing: border-box;

  padding-top: 50px;

  border-radius: 5px;

  background: rgba(255,255,255,0.5);

}



.logo-login {

  width: 100%;

}



#form-login input {

  width: 100%;

  height: 40px;

  padding: 0 10px;

  box-sizing: border-box;

  border: 1px solid darkgray;

  border-radius: 3px;

  margin-bottom: 2px;

  outline-color: var(--color2);

}



#box-content-loading, #box-content-black, #box-content-black-2, #box-content-black-3 {

  width: 100%;

  height: 100%;

  background-color: rgba(0,0,0,.5);

  position: fixed;

  left: 0;

  top: 0;

  display: none;

  z-index: 3;

}



#box-content-loading::before {

  content: '';

  width: 40px;

  height: 40px;

  border-radius: 50%;

  border: 10px solid lightgray;

  border-left: 10px solid var(--color4);

  position: absolute;

  left: calc(50% - 20px);

  top: calc(50% - 20px);

  animation: .5s infinite animacao_box_content_loading linear;

}



.content-popup {

  width: 400px;

  height: 650px;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  background-color: white;

  border-radius: 5px;

  padding: 20px;

  box-sizing: border-box;

  box-shadow: 1px 1px 100px 1px black;

}



.cancelar-popup {

  background-color: darkgray;

  position: absolute;

  top: 10px;

  right: 10px;

  color: white;

  border: none;

  padding: 5px;

  width: 25px;

  height: 25px;

  border-radius: 50%;

  outline: none;

  cursor: pointer;

  transition: 0.3s;

}



.cancelar-popup:hover {

  background-color: gray;

}



#btn-salvar-popup, #btn-salvar-popup-2, #btn-salvar-popup-3 {

  float: right;

  margin-top: 20px;

  border: none;

  border-bottom: 3px solid darkgreen;

  background-color: green;

  color: white;

  outline: none;

  cursor: pointer;

  transition: 0.3s;

  padding: 10px;

  border-radius: 5px;

}



#btn-salvar-popup:hover {

  background-color: darkgreen;

}


.container-popup {
  max-height: 500px;
  overflow-y: auto;
}


.container-popup input {

  width: 100%;

  height: 30px;

  border: 1px solid lightgray;

  border-radius: 3px;

  padding: 0 10px;

  box-sizing: border-box;

  margin-bottom: 5px;

}







@keyframes animacao_box_content_loading {

  0% { transform: rotateZ(360deg) };

  100% { transform: rotateZ(180deg) };

}



.item-list-content {

  background-color: #e2e2e2;

  font-size: 10pt;

  padding: 20px;

  padding-top: 0px;

  height: 90px;

  overflow: hidden;

  box-sizing: border-box;

  margin-bottom: 10px;

  border-radius: 5px;

  box-shadow: 1px 1px 10px lightgray;

  line-height: 60px;

  border: 1px solid var(--color2);

  cursor: pointer;

  transition: 1s;

}



.expandido {

  height: auto;

  transition: 1s;

}



.item-list-content .span-item-list-content {

  background: #f1f1f1 ;

  margin-right: 10px;

  padding: 10px;

  margin-right: 15px;

  margin-bottom: 5px;

  border-radius: 5px;

  box-shadow: 1px 1px 1px gray;

}



input[type=submit] {

  float: right;

  padding: 5px 10px;

  border: none;

}



.input-checkbox {

    width: 100%;

    height: 45px;

    background: #fcfcfc;

    border-radius: 5px;

    margin-bottom: 5px;

}



.input-checkbox span {

    margin-top: 14px;

    margin-left: 10px;

    display: block;

    float: left;

}



.input-checkbox input[type=checkbox] {

    width: 25px !important;

    height: 25px !important;

    float: right;

    margin-right: 10px;

    margin-top: 11px !important;

}



.input-checkbox span {

    display: block;

    float: left;

}



.input-checkbox-effect {

    width: 50px;

    height: 30px;

    background: lightgray;

    border-radius: 30px;

    position: relative;

    cursor: pointer;

    padding: 0 10px;

    box-sizing: border-box;

    float: left;

    margin-top: 7px;

    margin-left: 5px;

}





.value {

    content: '';

    background: darkgray;

    position: absolute;

    width: 60%;

    height: 88%;

    border-radius: 50%;

    left: 3px;

    transition: 0.3s;

    margin-top: 2px;

}



.value-checked {

    left: calc(40% - 3px);

    background: #0058ffbf;

}



.star {

    font-size: 20pt;

    color: gray;

    cursor: pointer;

}



.star:hover {

    color: #c7b512 !important;

}



.star-checked {

    color: #c7b512 !important;

}



#form-user {

  background: #f1f1f1;

  padding: 20px;

}



#form-user input, #form-user select {

  width: 300px;

  height: 40px;

  padding: 0 10px;

  border: 1px solid gray;

  border-radius: 5px;

  margin-bottom: 3px;

}



.btn-deletar, .btn-editar {

  width: 25px;

  height: 25px;

  float: right;

  margin-top: 10px;

  color: gray;

  border: 1px solid white;

  border-radius: 50%;

  cursor: pointer;

  outline: none;

  box-shadow: 1px 1px 1px gray;

}



.btn-editar {

  width: 100px;

  border-radius: 5px;

  margin-right: 20px;

}





/* */

.result-content {

  margin-top: 20px;

  /*background-color: #f1f1f1;*/

  box-sizing: border-box;

  padding: 10px;

  /* display: none; */

}



.email-exist {

  border: 1px solid #bbbb0a !important;

}



.email-not-exist {

  border: 2px solid green !important;

}



.item-upload {

  width: 100%;

  height: 40px;

  background-color: #f1f1f1;

  padding: 10px;

  box-sizing: border-box;

  margin-bottom: 20px;

}



.item-upload form input[type=submit] {

  position: relative;

  margin-top: -25px;

}