* {
   padding: 0;   
   margin: 0;
}

html {
   width: 100vw;
   height: 100vh;
}

body {
   width: 100%;
   height: 100%;
   background-color: #ffffff;
   color: black;
   font-family: 'Times New Roman', Times, serif;
}

h1 {
   font-family: "Arimo";
   letter-spacing: 0.5px;
   font-weight: bold;
}

header {
   height: 150px;
   display: flex;
   align-items: center;
   justify-content: space-between;
}


#vaccine {
   width: 50px;
   height: 50px;
}

#logo-box {
   width: 250px;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
}

#logo-box h1 {
   color: #2ec27e;
}

header span {
   margin-right: 15px;
}

#main-border {
   width: 100%;
   height: calc(100% - 150px);
   display: flex;
   justify-content: center;
}

#main {
   width: 100%;
   display: flex;
   align-items: center;
   gap: 30px;
   flex-direction: column;
}

.main-object {
   width: calc(100% - 60px);
   border: 4px solid #000000;
   border-radius: 16px;
   padding: 20px;
}

#title-disclaimer {
   display: flex;
   width: 100%;
   justify-content: space-between;
}

#title-disclaimer span {
   border: 3px solid red;
   width: 20px;
   height: 20px;
   padding: 10px 5px 5px 5px;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
   font-family: Helvetica;
   font-size: 1.5rem;
   vertical-align: middle;
   font-weight: bolder;
   color: red;
   line-height: 10px;
}

.main-object h1 {
   margin-bottom: 20px;
}

.main-object p {
   font-size: 1.3rem;
}

#btns {
   display: flex;
   margin: 10px 0px 20px 0px; 
   gap: 5px;
}

.btn {
   border: 1px solid white;
   border-radius: 15px;
   width: 300px;
   height: 60px;
   background-color: #2ec27e;
   font-size: 1.2rem;
   font-weight: bold;
   font-family: "Arimo";
}

.btn:hover {
   cursor: pointer;
   background-color: #2eb27e;
}

#reset-btn {
   width: 80px;
   height: 60px;
   background-color: white;
   margin-left: auto;
}

#reset-btn svg {
   width: 46px;
   height: 46px;
}

#reset-btn:hover svg {
   width: 50px;
   height: 50px;
}

#eni-select-div {
   margin-top: 20px;
   display: grid;
   grid-template-rows: 1fr;
   grid-template-columns: 1fr 1fr;
   gap: 10px;
}

.eni-group {
   display: flex;
   flex-direction: column;
   padding: 30px;
   gap: 10px;
   font-size: 1.2rem;
   margin-bottom: 20px;
}

#eni-group1 {
   background-color: #E3FEE0;
}

#eni-group2 {
   background-color: #FBE4D5;
}

.patology-selector {
   border: 1px solid black;
   border-radius: 10px;
   background-color: white;
   padding: 10px;
   min-height: 30px;
}

.patology-selector-clicked {
   background-color: #cccccc;
}

#next-btn-div {
   display: flex;
   justify-content: right;
}

.patology-selector:hover {
   cursor: pointer;
   background-color: #cccccc;
}

#question-div {
   width: 100%;
   height: 60px;
   display: flex;
   align-items: center;
   gap: 10px;
}

#question-div p {
   font-family: "Arimo";
   font-weight: bolder;
   margin-right: 15px;
}

.question-btn {
   background-color: #2ec27e;
   width: 60px;
   padding: 5px;
   border: 0px solid black;
   border-radius: 5px;
   font-family: "Arimo";
   font-size: 1.3rem;
}

.question-btn:hover {
   background-color: #2eb27e;
   cursor: pointer;
}

.p2 {
   font-family: "Arimo";
   font-weight: bolder;
}

#prev-vaccines-div {
   margin-top: 30px;
   display: flex;
   gap: 25px;
}