body {
  font: 12px/20px "Lucida Grande", Tahoma, Verdana, sans-serif;
  color: #404040;
  background: -webkit-radial-gradient(center, circle cover, #58aee0, #bed7e5);

  background: url("../images/background2.png") no-repeat center fixed;
  background-color: #cccccc;
  background-size: cover;
}

/*------------------------------------------------------------*/

/*Logo in the top-left corner of each page */

.logo {
  width: 20%;
  height: 51px;
  position: fixed;
  top: 0px;
  left: -1px;
}
/*------------------------------------------------------------*/

/*Each section of the body is in a box */
.box {
  padding-top: 100px;
  /* color:white; */
  font-size: 50px;
  text-align: center;
  width: 95%;
}

/*------------------------------------------------------------*/

/*Transparent box for the welcome message in Home page */
div.transparentbox {
  opacity: 0.8;
  margin: 5% 15%;
  padding: 3%;
  border-radius: 2px;
  background-color: #ffffff;
  filter: alpha(opacity=60); /* This is for IE8 and other earlier browsers */
}

div.transbox p {
  font-weight: bold;
  color: #000000;
}

/*------------------------------------------------------------*/

/*
 * Keyframes for transition effects
 */

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

/*
 * CSS Page Transitions
 * Don't forget to add vendor prefixes!
 */

/** Basic styles for an animated element */
.m-scene .scene_element {
  animation-duration: 0.25s;
  transition-timing-function: ease-in;
  animation-fill-mode: both;
}

/** An element that fades in */
.m-scene .scene_element--fadein {
  animation-name: fadeIn;
}

/** An element that fades in and slides from the left */
.m-scene .scene_element--fadeinleft {
  animation-name: fadeInLeft;
}

/** An element that fades in and slides from the right */
.m-scene .scene_element--fadeinright {
  animation-name: fadeInRight;
}

/*------------------------------------------------------------*/

/*Row of all member's pictures for About us */
* {
  box-sizing: border-box;
}

.column {
  align-items: center;
  float: center;
  width: 33.333%;
  margin-left: 5%;
  padding: 10%;
  padding-right: 5%;
}

.row img {
  display: inline;
  border: 1px solid rgb(184, 182, 182);
  border-radius: 50%;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}

@media only screen and (max-width: 800px) {
  .column {
    overflow-y: hidden;
    overflow-x: hidden;
    width: 50%;
    margin: 6px 0;
  }
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 550px) {
  .column {
    width: 90%;
  }
}

/*------------------------------------------------------------*/

/* The Modal in Home page (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full 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 */
  font-size: 50%;
  color: #000;
}

/* Modal Content */
.modal-content {
  text-align: center;
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 60%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s;
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {
    top: -300px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}

@keyframes animatetop {
  from {
    top: -300px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}

/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  background-color: #de6b48;
  color: white;
  text-align: center;
}

.modal-body {
  padding: 2px 16px;
}

.modal-footer {
  padding: 2px 16px;
  background-color: #de6b48;
  color: white;
}

@keyframes modalopen {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#myBtn {
  /* background: #d48823; */
  background: #de6b48;
  padding: 1em 2em;
  color: #fff;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  font-size: 50%;
  position: absolute;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
#myBtn:hover {
  background: #d46442;
}

/*------------------------------------------------------------*/

/* Navigation bar with icons*/
.icon-bar {
  z-index: 1;
  width: 80%; /* Full-width */
  background-color: #555; /* Dark-grey background */
  overflow: auto; /* Overflow due to float */
  position: fixed; /* Fixed position */
  top: 0; /* Distance from top to bar is 0 */
  left: 20%; /*Distance from left to bar is 20% */
}

.icon-bar a {
  float: left; /* Float links side by side */
  text-align: center; /* Center-align text */
  width: 47.5%; /* Equal width (5 icons with 20% width each = 100%) */
  padding: 15px 0; /*Some top and bottom padding */
  transition: all 0.3s ease; /*Add transition for hover effects */
  color: white; /* White text color */
  font-size: 152%; /*  Increased font size*/
}
.info {
  position: fixed;
  width: 10%;
  left: 95.9%;
}

.icon-bar a:hover {
  background-color: #000; /*Add a hover color */
}
*/ .active {
  background-color: #de6b48; /* Add an active/current color */
}

.icon-bar a.active:hover {
  background-color: #d46442; /* Add a hover color */
}
/*------------------------------------------------------------*/

/* Styles from the input button in Visualisation tab*/
#wrap {
  margin: 80px auto 10px auto;
    width: 96%;
    text-align: center;
  padding: 10px;
  overflow: auto;
  background: #fafafa;
  border-radius: 4px;
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
}
form {
  background: #ccc;
  border-radius: 2px;
  padding: 10px;
}
/* table {
  max-width: 100%;
  background-color: #fff;
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  margin-bottom: 20px;
}
table th{
  background: #eae4ff;
}
table th, table td {
  padding: 8px;
  line-height: 20px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid #dddddd;
}
table {
  border: 1px solid #dddddd;
  border-collapse: separate;
  *border-collapse: collapse;
  border-left: 0;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
table th, table td {
  border-left: 1px solid #dddddd;
}

table tr:nth-child(odd){
  background-color: #f9f9f9;
}

table tr:hover td{
  background-color: #f5f5f5;
}

table tr:first-child{
  font-weight: bold;
} */

/*------------------------------------------------------------*/

/* Modal in Visualization (not in the demo) */
.buttonV {
  /* position: fixed; */
  background: #de6b48;
  padding: 1em 2em;
  color: #fff;
  border: 0;
  border-radius: 5px;
  font-size: 160%;
  margin: 0;
  position: fixed;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.buttonV:hover {
  background: #d46442;
}

.modalV {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 18%; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full 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 */
  font-size: 120%;
  font-weight: bold;
  color: #000;
}
/* 
 .modalContentV{
  background-color: white;
  margin:20% auto;
  padding:20px;
  width:70%;
  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
  animation-name: modalopenV;
  animation-duration: 1s;
} */

.closeButtonV {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.closeButtonV:hover,
.closeButtonV:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

@keyframes modalopenV {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.modalBodyV {
  padding: 10px 20px;
}

.modalHeaderV {
  padding-left: 0%;
  background-color: #de6b48;
  color: white;
  text-align: center;
}

/* .modal-footer {
  padding: 2px 16px;
  background-color: #D57101;
  color: white;
} */

.modalBodyV {
  padding: 2px 16px;
  font-size: 120%;
  font-weight: bold;
}

@-webkit-keyframes animatetopv {
  from {
    top: -300px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}

@keyframes animatetopv {
  from {
    top: -300px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}

.modalContentV {
  text-align: center;
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 60%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -webkit-animation-name: animatetopv;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetopv;
  animation-duration: 0.4s;
}

div.transparentboxfooter {
  position: relative;
  opacity: 0.8;
  margin: 0% 15%;
  padding: 1%;
  border-radius: 2px;
  background-color: #ffffff;
  filter: alpha(opacity=60); /* This is for IE8 and other earlier browsers */
  text-align: center;
  /* top: 60%; */
  /* left: 5%; */
}

div.transbox p {
  font-weight: bold;
  color: #000000;
}
.tue {
  width: 5%;
}

.visualization .control-block{

  text-align: center;
  background: #3d7ca3;
  padding: 1rem;
  color: #FFF;
  margin: 0 2% 0 2%;
}
.vis3 {
  background: #3d7ca3;
  padding: 1em 2em;
  color: #fff;
  border: 0;
  border-radius: 5px;
  font-size: 160%;
  margin: 0;
  position: absolute;
  left: 80%;
  top:19.5%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  overflow: auto;
  
}
.vis3:hover {
  background: #d46442;
}

.order{
  position:fixed;
  top:13%;
}
#selectSort{
  position: fixed;
  top:13%;
  left:3%;
}
#UploadBtn1{
  position:fixed;
  top:10%;
  left:30%;
  background-color: #3d7ca3; 
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}
#UploadBtn1:hover {
  background: #d46442;
}

.browse1{
  position:fixed;
  top:13%;
  left:15%;
    
}
#UploadBtn{
    background-color: #3d7ca3; 
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
  }

  #UploadBtn:hover {
    background: #d46442;
  }