:root{
 --main-color--:#92BA40;
}
*{
   
   font-family: "Open Sans", Helvetica, Arial, Lucida, sans-serif;
   

}
body{
   margin: 0;
}
.active>.page-link{
   background-color: var(--main-color--);
   color: #fff;
}

.contact_rub{
   width: 100%;
   height: 50px;
  padding: 0;
  position: relative;
   margin: 0;
   color: rgb(157, 209, 53);
   background-color: var(--main-color--);
   color: #fff;

}
.rub-content .las{
   font-size: 24px;
}

.rub-content{
   position: absolute;
   top: 15px;
   left: 35%;
   font-weight: bolder;
   

}
.la-phone,.la-envelope{
   margin-left: 4px;
   width: 32px;
   height: 32px;
}
.rub-content span:nth-child(1){
   margin-right:50px ;
}

.mainhead{
   
   display: flex;
   text-align: center;
   align-items: center;
   justify-content: center;
   flex-direction: row;
   color: var(--main-color--);
   border-bottom: solid 1px var(--main-color--);
   font-weight: 100;
   margin-bottom: 30px;
}
.mainhead p {
 font-size:2rem;
 margin: 0px;
}
.head_exams{
  padding-bottom: 25px;
 
}

.search{
 
   width: fit-content;
   
   
   border: solid 1px #5e5e5e;
}
.la-search{
   font-size: 24px;
   position: relative;
   top: 4px;
   margin-left: 3px;
   margin: auto;
   font-weight: bolder;
}
input[type="search"]{
   margin: 2px;
   font-size: 15px;
   border: solid 1px #060606;
   width: 200px;
   height: 32px;
   
   outline: none;
   

}
.head_exams{
   position: relative;
  display: flex;
}
.head_exams button:nth-child(2){
   height: 37px;
   background-color: #fff;
   margin-left: 6px;
   color:rgb(66, 66, 66); 
   outline: none;
}
.head_exams button:nth-child(3){
   position:relative;
   left: 64% ;
   background-color: var(--main-color--);
   width: 100px;
   border: solid 1px rgb(66, 66, 66);
   color: #fff;
   height: 30px;
}
.details:hover a{
   color: #fff;
}
.details:hover{
   
   cursor: pointer;
   background-color:var(--main-color--) ;
   color: #fff;
}
.bloc2{
   margin-left: 10px;
}

 thead tr td{
   background-color: var(--main-color--);
   color: #fff;
   text-align: center;
   padding: 8px;

   background-color: var(--main-color--);

 }
 
 .exams-content{
   width: 70%;
   margin: auto;
 }
 #exams_filter{
   position: relative;
   left: 240px;
 }
 table{
   width: 100%;
   
   border-collapse: collapse;
   border: solid 1px rgb(88, 88, 88);
   margin-bottom: 10px;
 }
 table tr  td{
   text-align: center;
   border: solid 1px rgb(66, 66, 66);
 }
table a {
   text-decoration: none;
   color: #857e7e;
}
 /* details page*/
 .d-font{
   color: var(--main-color--);
   font-weight: bold;
 }
.infos {
   display: flex;
   font-weight: bolder;
   
}
.scanner-img{
   order: -1;
}
.patient-infos> div:nth-child(1){
   color: var(--main-color--);
   font-size: 18px;
   
   text-align: center;
   padding: 15px 0 15px  0;
   border: solid 1px var(--main-color--);
}
.scanner-img >img{
   width: 512px;
   height:512px;
   border: solid 5px var(--main-color--);
 }
 .vignet{
   width: 570px;
 }
 .vignet>img{
   width: 100px;
   height: 100px;
   margin-left: 5px;
   border: solid 5px var(--main-color--);
  
 }
 .vignet>img:hover{
   cursor: pointer;
   border: solid 5px #c9e512;

 }


 .scanner-img .arrows{
   display: flex;
   justify-content: center;
 }
 .scanner-img div span img,.play{
   width: 40px;
   margin: 5px;
   height: 40px;
   text-align: center;
}
.play{
   width: 40px;
   margin: 5px;
   height: 40px;
   background-color: var(--main-color--);
   color: #fff;
   border-radius: 50%;
   display: grid;
  align-items: center;
   text-align: center;
}
.scanner-img div span img:hover,.play:hover{
   cursor: pointer;
   filter: contrast(80%);
}
 .details-content {
   
   display: flex ;
   position: relative;
   
 }

 .container-details{
   display: flex;
   flex-direction: column;
   align-items: center;
 }

.qr img{
   width: 117px;
   height: 117px;
   margin: 0;
}
.qr{

 width: 120px;

border: solid 1px var(--main-color--);
}
.qr button{
   width:100%;
   text-decoration: none;
   margin: 0;
   color: #fff;
   border: solid 1px var(--main-color--);
   background-color: var(--main-color--);
}
.qr button a{
   color: #fff;
   text-decoration: none;
}

.qr-close >div{
   display: inline-block;

}
.qr-close button:hover{
   background-color: #457d17;
   cursor: pointer;
}
.back a{
   text-decoration: none;
   color: #fff;
   font-weight: bold;
}
 .back{
   width: 100px;
   height: 30px;
   font-size: 18px;
   font-weight: bold;
   border: solid 1px var(--main-color--);
   background-color: var(--main-color--);
   color: #fff;
   position: absolute;
   right: 0px;
 }

 .patient-details{
   margin-left: 12px;
 }
 @media  screen and (max-width: 900px) {
   .details-content {
     display: flex;
     flex-direction: column;
   }
   .vignet>img{
      width: 60px;
      height: 60px;
      margin-left: 5px;
      border: solid 5px var(--main-color--);
     
    }
    .vignet{
      width: 100%;
    }
    .scanner-img >img{
      width: 95%;
      height:50%;
     
      border: solid 5px var(--main-color--);
    }
    .rub-content{
      width: 100%;
      font-size: 15px;
      left: 4px;
    }
    .rub-content span:nth-child(1){
      margin-right:4px ;
   }
    .mainhead{
   
      display: flex;
      text-align: center;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      color: var(--main-color--);
      border-bottom: solid 1px var(--main-color--);
      font-weight: 100;
      margin-bottom: 30px;
      
      font-size: 18px;
   }
 }