*{
  padding: 0;
  margin: 0;
  border: 0;
}

@font-face{
	font-family: inder;
	src: url(fontes/Inder-Regular.ttf);
}

@font-face{
	font-family: inter;
	src: url(fontes/Inter-Regular.ttf);
}

main{
  position: relative;
  background-color: #E5E5E5;
}

#purple-background {
  position: relative;
  width: 100%;
  height: 429px;
  background: #9D6BFF;
  border-radius: 0px 0px 35px 0px;
}


/*área de acessibilidade*/

#acessibilidade {
  position: absolute;
  left: 80%;
  margin-top: 37%;
  width: 20%;
  height: auto;
}
.acessibilidade-box{
  background: #F6F6F6;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  width: 106px;
  height: 89px;
  margin-bottom: 20px;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.box-partition{
 display: flex;
 flex-direction: row;
 justify-content: space-evenly;
}

.acessibilidade-box p{
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  line-height: 16px;
  color: #9D6BFF;

}

/*fim da área de acessibilidade*/


/* header inicio*/

header{
  position: relative;
  width: 82%;
  height: 57px;
  background-color: #FFFFFF;
  border-radius: 50px;
  margin-left: 9%;
  top: 39px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-family: inter;
  font-size: 20px;
}

.nav-title{
  width: 20%;
  height: 30px;
  margin: auto;
  font-size: 27px;

}

.nav-title a{
  text-decoration: none;
  color: #315A94;
}

.title-purple{
  color: #9D6BFF;
}

.nav-elements{
  width: 60%;
  height: 30px;
  margin: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.nav-elements a{
  text-decoration: none;
  color: #000000;
}

/*header final*/

a:hover{
                                background-size: 100% 100%;
                                background-position-x: left;
                                color: #564676;}

.fundo_perfil_especialista{
                                position: flex;
                                left: 0;
                                z-index: 1;
                                width: 100%;
                                height: 80px;
                                margin-top: -15%;
                                border-radius: 0px 0px 0px 0px;
                                -moz-border-radius: 0px 0px 0px 0px;
                                -webkit-border-radius: 0px 0px 0px 0px;
                                border: 0px solid #000000;
                                background-color: #9D6BFF;}

                                .elementos_lateral {
                                  position: absolute;
                                  top: 109%;
                                  display: flex;
                                  flex-direction: row;
                                  left: 81%;
                                  z-index: 1;
                                  width: 18.5%;
                                  height: 761px;
                              }


.divisor_perfil_nav{
                                display: flex;
                                flex-direction: column;
                                margin-top: 320px;
                                float: right;
                                width: 20%;
                                height: 200px;
                           }

.foto_perfil{
                                width: 100%;
                                height:110px;
                                text-align: right;
                                margin-left: -80px;}

.foto_perfil img{

  width: 101px;
  height: 114px;
  padding-bottom: 12px;

}

.nome_perfil{

                                 margin: auto;
                                 display: flex;
                                 align-items: center;
                                 flex-direction: column;
                                width: 60%;
                                height:70px;
                                
                                }

                                .nome_especialista {
                                  text-align: center;
                                  width: 100%;
                                  height: 0.5em;
                                  font-family: 'Inter', sans-serif;
                                  color: #fff;
                                  font-size: 20px;
                                 
                              }
                       
                              

.cargo{
                                margin: auto;
                                width: 100%;
                                margin-top: 17px;
                                text-align: center;
                                height: 1.5em;
                                font-family: 'Inter', sans-serif;
                                color:#fff;
                                font-size: 12px;}




                                .conf a {
                                  font-family: 'Inter', sans-serif;
                                  text-decoration: none;
                                  color: #fff;
                                  font-size: 12px;
                                  line-height: 93px;
                                  cursor: pointer;
                              }
                              .ima{
                                width: 15px;
                                height: 15px;
                                margin-right: 5px;
                              }


.fundo_geral {
                                  flex-direction: column;
                                  position: absolute;
                                  display: flex;
                                  margin: 5% 0 0 7%;
                                  width: 72%;
                                  margin-top: 40%;
                                  border-radius: 36px 36px 0 0;
                                  top: -320px;
                                  background-color: #f1f1f1;
                                  z-index: 1;
                              }

.fundo_title {

                                position: relative;
                                line-height: 55px;
                                font-family: 'Inter', sans-serif;
                                color: #fff;
                                font-size: 1.5rem;
                                border-radius: 13px;
                                width: 90%;
                                padding-left: 5%;
                                height: 50px;
                                background-color: #9D6BFF;
                                margin-bottom: 5%;
                                margin-left:6.5vh;
                            }


.fundo_prontuario{
                                position: relative;
                                flex-direction: column;
                                display: flex;
                                border-radius: 10px;
                                width:100%;
                                height: auto;
                        
                                margin-bottom: 5%;}

.pessoa_assunto{
                                display: flex;
                                flex-direction: row;
                                align-items: center;
                                width: 100%;
                                height: 80px;}

.historico_title{
                                width: 100%;
                                height: 100px;}

.texto_corrido{
                                width: 100%;
                                height: 600px;
                                display: flex;}

textarea{
                                resize: none;
                                outline: #000;
                                border-radius: 10px;
                                margin: auto;
                                -webkit-box-sizing: border-box;
                                -moz-box-sizing: border-box;
                                box-sizing: border-box;
                                width: 80%;
                                border: 1px rgb(90, 90, 90) solid;
                                height:100%;}

.aba_salvar{
                                display: flex;
                                width: 100%;
                                height: 100px;}

.centraliza_pessoa{
                                display: flex;
                                flex-direction: row;
                                border-radius: 10px;
                                margin-top: 195px;
                                width: 90%;
                                justify-content: center;
                                align-items: center;
                                height: 250px;
                                margin-left: 5%;
                                border:1px #564676 solid;}

.foto_pessoa img{
                                margin-left: 2%;
                                width: 2.5em;
                                height: 100%;}

.nome_pessoa{
                                display: flex;
                                width: 80%;
                                height: 100%;
                                position: relative;
                                font-family: 'Inter', sans-serif;
                                align-items: center;}

.span{
                                margin-left: 1em;
                                color:#9D6BFF;
                                margin-top: -20px;}

.nome_pessoa p{
                                color:#444444;
                                margin-top: 35px;
                                font-size: 15px;
                                display: flex;}

.btn1{
                              align-items: center;
                              text-align: center;
                              justify-content: center;
                              margin-left: 3%;
                              background-color: #9D6BFF;
                              border-radius: 10px;
                              width: 200px;
                              height: 30px;
                              cursor: pointer;
                              color: #f1f1f1;}

.desce_click{
                                cursor: pointer;
                                width: 10%;
                                height: 100%;}

.desce_click img{               margin: 15px;}

.foto_pessoa img{
                                width: 100%;
                                height: 100%;}

.historico_title{
                                align-items: center;
                                display: flex;}

.historico_title p{
                                font-family:'Inter', sans-serif ;
                                font-size: 20px;
                                margin: auto;
                                color: #9D6BFF;}

.enviar{
                                background-color: #9D6BFF;
                                color: #fff;
                                width: 15%;
                                height: 3em;
                                border-radius: 10px;
                                cursor:pointer;
                                margin:auto;}

.botao {
                                cursor: pointer;
                                color: white;
                                padding: 16px;
                                font-size: 16px;
                                border: none;}

.exposto {
                                position: relative;
                                display: inline-block;}

.pacientes_user {
                                cursor: pointer;
                                border-radius: 10px;
                                display: none;
                                position: absolute;
                                height: 50px;
                                min-width: 630px;
                                border: 1px solid #000;
                                z-index: 1;}

.pacientes_user a {
                                color: black;
                                padding: 12px 16px;
                                text-decoration: none;
                                display: block;}


.exposto:hover .pacientes_user {display: block;}

.desce_click{
                                width: 10%;
                                height: 100%;}

.desce_click img{               margin: 15px;}


.accordion{
                                text-align: center;
                                width: 90%;
                                margin: 5%;}


.acess1{

                                padding-top: 20px;
                                padding-left: 2px;
                                cursor: pointer;
                                z-index: 1;}

.acess1-fake{
                                width: 70%;
                                margin-top: -24px;
                                padding-left: 2px;
                                cursor: pointer;
                                z-index: 9999;
                                visibility: hidden;}

.acess2{
                                width: 80%;
                                padding-left:4px;
                                padding-top: 10px;}

.acess3{
                                width: 65%;
                                padding-left: 6px;
                                padding-top: 10px;}

.acess4{
                                width:70%;
                                padding-top: 10px;
                                padding-left: 2px;}

.acess5{
                                width: 70%;
                                padding-top: 15px;
                                padding-left: 2px;}

.acess6{
                                width: 80%;
                                padding-top: 20px;
                                padding-left: 2px;
                                cursor: pointer;}    

#menu_responsivo{
                                position: absolute;
                                right: 1.5%;
                                top: 35px;}   

 #menu_responsivo{
                                margin-top: -10px;
                                margin-right: 3%;
                                display: block;}

#menu_responsivo{               display: none;}


/* -------------------------=======================NOTEBOOK==========================================----------------------------------------*/
@media only screen and (min-width: 1021px) and (max-width: 1440px) {  

      #acessibilidade{          top: 100%;}

}


/* -------------------------=======================NOTEBOOK l=========================================----------------------------------------*/


@media only screen and (min-width: 749px) and (max-width: 1024px) {  

        .logo{                        width: 80%;}

        #acessibilidade{              top: 35%;}

        #acessibilidade{
                                      height: 40px;
                                      top: 255px;
                                      width: 40px;}

        #acessibilidade img{
                                      margin-left: 5px;
                                      margin-top: 5px;
                                      width: 80%;}

        #acessibilidade-hid{
                                      width: 5%;
                                      height: 190px;
                                      top: 255px;
                                      border-radius: 60px 0px 0 40px; }

        #acessibilidade-hid img{
                                      margin-left: 20%;
                                      width: 23px;}


}


/* -------------------------=======================TABLET==========================================----------------------------------------*/


@media only screen and (min-width: 562px) and (max-width: 820px) {

      #acessibilidade{
                                      height: 40px;
                                      top: 200px;
                                      width: 40px;}
      
      #acessibilidade img{
                                      margin-left: 5px;
                                      margin-top: 5px;
                                      width: 80%;}
      
      #acessibilidade-hid{
                                      width: 5%;
                                      height: 190px;
                                      top: 200px;
                                      border-radius: 60px 0px 0 40px;}
      
      #acessibilidade-hid img{
                                      margin-left: 20%;
                                      width: 23px;}
      
      .elementos_lateral{             display: none;}

      .conf img{                      margin-left: 78%;}

      .fundo_geral{                   margin-left: 19%;} 

      .fundo_title p{                 text-align: center;}

      .elementos_nav{                 font-size: 0.5rem;}


}


/* -------------------------=======================MOBILE L=========================================----------------------------------------*/

@media only screen and (min-width:425px){ 
    @media only screen and (max-width: 659px){

      #acessibilidade{
                                    height: 40px;
                                    top: 200px;
                                    width: 40px;}
      
      #acessibilidade img{
                                    margin-left: 5px;
                                    margin-top: 5px;
                                    width: 80%;}
      
      #acessibilidade-hid{
                                    width: 10%;
                                    height: 190px;
                                    top: 200px;
                                    border-radius: 60px 0px 0 40px;}
      
      #acessibilidade-hid img{
                                    margin-left: 10%;
                                    width: 23px;}

      .conf img{                    margin-left: 78%;}
      
      .fundo_geral{                 margin-left: 19%;} 
      
      .fundo_title p{               text-align: center;}
      
      .elementos_nav{               font-size: 0.5rem;}
      
      .elementos_lateral{           display: none;}

    .conf img{                      margin-left: 68%;}

    .conf p{
                                    width: 20%;
                                    margin-left: 80%;}

    .fundo_geral{                   margin-left: 19%;} 

    .fundo_title p{
                                    font-size: 1.1rem;
                                    text-align: center;}

    .elementos_nav{                 font-size: 0.5rem;}
  


  }
}


/* -------------------------==================================MOBILE L===============================----------------------------------------*/


@media only screen and (min-width:375px){ 
    @media only screen and (max-width: 562px){

      #acessibilidade{
                                    height: 40px;
                                    top: 200px;
                                    width: 40px;}
      
      #acessibilidade img{
                                    margin-left: 5px;
                                    margin-top: 5px;
                                    width: 80%;}
      
      #acessibilidade-hid{
                                    width: 10%;
                                    height: 190px;
                                    top: 200px;
                                    border-radius: 60px 0px 0 40px;}
      
      #acessibilidade-hid img{
                                    margin-left: 10%;
                                    width: 23px;}
      
      .conf img{                    margin-left: 78%;}
      
      .fundo_geral{                 margin-left: 19%;} 
      
      .fundo_title p{               text-align: center;}
      
      .elementos_nav{               font-size: 0.5rem;}
      
      .elementos_lateral{           display: none;}

    .conf img{                      margin-left: 65%;}

    .conf p{
                                    width: 20%;
                                    margin-left: 80%;}

    .fundo_geral{                   margin-left: 19%;} 

    .fundo_title p{
                                    font-size: 0.9rem;
                                    text-align: center;}

    .elementos_nav{                 font-size: 0.5rem;}

    .btn1{
                                    width: 80%;
                                    font-size: 0.7em;}
  
 }
}


/* -------------------------=================================MOBILE S=================================----------------------------------------*/


@media only screen and (min-width:320px){ 
    @media only screen and (max-width: 561px){

      #acessibilidade{
                                    height: 40px;
                                    top: 200px;
                                    width: 40px;}
      
      #acessibilidade img{
                                    margin-left: 5px;
                                    margin-top: 5px;
                                    width: 80%;}
      
      #acessibilidade-hid{
                                    width: 10%;
                                    height: 190px;
                                    top: 200px;
                                    border-radius: 60px 0px 0 40px;}
      
      #acessibilidade-hid img{
                                    margin-left: 10%;
                                    width: 23px;}
      
      .conf img{                    margin-left: 78%;}
      
      .fundo_geral{                 margin-left: 19%;} 
      
      .fundo_title p{               text-align: center;}
      
      .elementos_nav{               font-size: 0.5rem;}
      
      .elementos_lateral{           display: none;}

      .conf img{                    margin-left: 65%;}

      .conf p{
                                    width: 20%;
                                    margin-left: 80%;}

      .fundo_geral{                 margin-left: 19%;} 

      .fundo_title p{
                                    font-size: 0.9rem;
                                    text-align: center;}

      .elementos_nav{               font-size: 0.5rem;}

      .btn1{
                                    width: 80%;
                                    font-size: 0.7em;}
  
  }
}
