body {
    color:black;
}
.langselected {
    width:8%;
    background-color:#7aea6e; 
    font-size:12pt;
    color:blue;
    text-align:center;
    border:none;
}
.mobile-container {
  max-width: 100vw;
  margin: auto;
  background-color: #ffffff;
  height: auto;
  color: black;
  border-radius: 10px;
  overflow:auto;
  text-align: center;
}
.pickroute {
    width:40%;
    height:6vh;
    font-size:1vw;
}
* {
  box-sizing: border-box;
}
ul li {
 list-style-Type: none;
 padding: 0 0 4px 25px;
 background: url(https://www.computerhope.com/cdn/arrow.png) no-repeat left center;
}
/* FLEX-BOX STARTS HERE */
.flex-container {
    width:98vw;
  display: flex;
  flex-wrap: wrap;
  font-size: 1vw;
  text-align: center;
  gap: 2vw;
  /*border:1px solid grey;*/
  border-radius:12px;
  background-color:#ededf2;
}
.flex-item {
  background-color: white;
  width:30%;
  height:25vh;
  padding: 10px;
  margin-top:22px;
  margin-bottom:22px;
  /*border:1px solid grey;*/
  border-radius:9px;
  /*flex: 50%;*/
}
.location {
    font-size:11pt;
}
.grad {
    width:30vw;
    background-image: linear-gradient(to top, #5949c1, white);
    font-size:1.2vw;
    font-weight:bold;
    color:#0D0159;
}
.lowerc {
    font-size:11pt;
    font-weight:normal;
}
tr:nth-child(odd) {
background-color:#f1fca1;
}
tr:nth-child(even) {
background-color:#ffffff;
}
.issue {
    display:block;
    width:15%;
    margin:auto;
    text-align:left;
    padding:6px;
}
/* Responsive layout - makes a one column-layout instead of a two-column layout */

/* FLEX-BOX PC ENDS HERE *\

/* Style the navigation menu */
.topnav {
  overflow: hidden;
  background-color: #7ae8f9;
  position: relative;
}
.logo {
    width:9vw;
    height:auto;
    margin-bottom:30px;
}
.logo2 {
    width:5vw;
    height:auto;
}
.welcome {
    font-size:12pt;
    margin-top:0;
    font-weight:normal;
}
.radiopanel {
    width:30%;
    background-color:#eceaf9;
    margin:auto;
    text-align:center;
}
.btns {
    font-size:1vw;
}
input[type='radio'] { 
     transform: scale(1); 
 }
/* label{
    position: relative;
    left: -13px;  
    top: -3px;
    font-size: 8pt;
    opacity: 0.5;
}*/
.nodec {
    text-decoration:none;
}
.about {
    width:23vw;
   font-size:1vw;
   text-align:left;
}
.chart {
    margin:auto;
    width:50%;
    height:90vh;
    text-align:center;
}
.chart1 {
    margin:auto;
    width:50%;
    height:60vh;
    max-width:600px
}
.select {
    font-size:1vw;
}
.surveydetails {
    font-size:1vw;
    font-weight:normal;
    background-color:#ededf2;
}
/*MODAL STARTS HERE*/
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /*  half width */
  height: 100%; /* Half height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: auto; /* 0% from the top and centered */
  color:blue;
  padding: 20px;
  border: 1px solid #888;
  width: 100%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
.nextbtn {
    height:5vh;
    width:15%;
    background-color:blue;
    color:white;
    margin:auto;
    margin-bottom:1vh;
    border-radius:7px;
}
.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
/*MODAL ENDS HERE*/
/*<!-- MOBILE STARTS HERE XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX -->*/
@media only screen and (max-width: 600px) {
.nextbtn {
    height:5vh;
    width:30vw;
    background-color:blue;
    color:white;
    margin:auto;
    margin-bottom:1vh;
    border-radius:5px;
    font-size:4vw;
}
.pickroute {
    width:40%;
    height:10vh;
    font-size:12pt;
}
.langselected {
    width:20%;
    background-color:#7aea6e; 
    font-size:12pt;
    color:blue;
    text-align:center;
    border:none;
}   
.flex-item {
  background-color: white;
  width:100%;
  height:auto;
  padding: 10px;
  margin-top:0;
  margin-bottom:0;
  /*border:1px solid grey;*/
  border-radius:9px;
  font-size:11pt;
  /*flex: 50%;*/
}
.location {
    font-size:4vw;
}
.issue {
    display:block;
    width:70%;
    margin:auto;
    border:1px solid grey;
    background-color:white;
    text-align:left;
    padding:6px;
}
.grad {
    width:98vw;
    background-image: linear-gradient(to top, #5949c1, white);
    font-size:12pt;
    font-weight:normal;
    color:#0D0159;
}
.logo {
    width:20vw;
    height:auto;
    margin-bottom:0.5vh;
}
.logo2 {
    width:15vw;
    height:auto;
}
.welcome {
    font-size:12pt;
}
.welcome2 {
    font-size:10pt;
}
.radiopanel {
    width:100%;
    background-color:#eceaf9;
    margin:auto;
    font-size:9pt;
    text-align:center;
}
.menu1 {
    width:80%;
}
.btns {
    font-size:14pt;
}
input[type='radio'] { 
     transform: scale(1); 
 }
/* label{
    position: relative;
    left: -13px;  
    top: -3px;
    font-size: 12pt;
    opacity: 0.5;
}*/
.select {
    font-size:14pt;
}
.chart {
    margin:auto;
    width:50%;
    height:70%;
    text-align:center;
}
.nodec {
    text-decoration:none;
    font-size:12pt;
}
.about {
    margin:auto;
    width:98%;
   font-size:12pt;
   text-align:center;
}
.chart {
    margin:auto;
    width:95vw;
    height:70%;
    text-align:center;
}
.chart1 {
    margin:auto;
    width:90%;
    max-width:500px
}
.surveydetails {
    font-size:12pt;
    font-weight:normal;
    background-color:#ededf2;
}
.example {
       height: auto;
       border: solid #CCCCCC 1px;
       padding: 0 10px;
       white-space: normal;
       word-break: break-word;
       /*display: flex;
       align-items: center;*/
       font-size:12pt;
       margin-bottom:2vh;
     }
}
/*<!-- MOBILE ENDS HERE XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX -->*/
/*END OF MOBILE SCREEN*/


.top, .bottom{
			box-sizing : border-box;
			width : 250px;
			display : block;
			margin : auto;
			height : 50px;
			background-color : rgb(30,60,90);
			border : 0px solid rgb(30,60,90);
			border-radius : 0 50px 0 50px;
			color : white;
			font-size : 100%;
			font-family : sans-serif;
			text-align : center;
			}
.top{border-radius : 0 50px 0 50px; padding-top : 10px;}
.bottom{border-radius : 50px 0 50px 0; margin-top : -40px;}


/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
  display: none;
   /*background-color:#056672;
   color:#ffffff;*/
}
/* Style navigation menu links */
.topnav a {
  color: black;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
  background-color:#07717f;
}

/* Style the hamburger menu */
.topnav a.icon {
  background: #056672;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  scale:1.2;
}
/* Menu background color */
#myLinks {
    background-color:#056672;
}
/* Add a grey background color on mouse-over */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Style the active link (or home/logo) */
.active {
  background-color: #4CAF50;
  color: white;
}