body {
  font-size: 16px;
  font-family: Verdana, Geneva, sans-serif;
}

#body {
  background-color: #ecf0f1;
}

.header{
  display: none;
}

#type-change{
  display: block;
  position: absolute;
  right: 20px;
  top: 20px;
  color: #2980B9;
  font-weight: bold;
  padding-left: 20px;
}

#main{
  width: 1260px;
  margin: auto;
}

.mission{
  position: relative;
  margin: 10px 0;
  padding: 12px;
}

.clear-both::after {
  content: "";
  clear: both;
  display: table;
}

#status {
  width: 450px;
  float: left;
  background-color: white;
  margin: 12px 0;
}

#title{
  font-size: 25px;
  font-weight: bold;
  color: #34495e;
  text-align: center;
}

#photo{
 float: left;
 height: 120px;
 width: 120px;
 margin: 45px 0px 30px 20px; 
}

#info{
    float: left;
    width: 310px;
    padding: 51px 0;
}

#bottom{
  clear: both;
  text-align: center;
  color: white;
  font-weight: bold;
}

#bottom img{
  display: block;
  width: 20px;
  margin: 10px auto;
}

#info img {
    width: 16px;
    margin-left: 10px;
    margin-right: 6px;
    margin-bottom: -2px;
}

#name{
  color: #34495e;
  font-size: 25px;
  font-weight: bold;
  margin-bottom: 10px;
}

.coloured-rectangle{
  width: 150px;
  height: 70px;
  float:left;
}

#driving-licence{
  background-color: #2980b9;
}

#age{
  background-color: #F39C12;
}

#contract{
  background-color: #8e44ad;
}

#wishes {
  width: 740px;
  float: right;
  background-color: white;
  margin: 12px 0;
  padding: 20px;
  height: 230px;
}

#wishes #text {
  text-indent: 10px;
}


#skills {
  width: 320px;
  background-color: white;
  float: left;
  padding: 20px;
  font-weight: bold;
  color: #2980B9;
  height: 357px;
  margin: 12px 0;
}

.skill-graph-cell{
  width: 70px;
}

#techs {
  width: 915px;
  background-color: white;
  float: right;
  padding: 20px;
  border-collapse: collapse;
  margin: 12px 0;
}

#techs tr{
  border-bottom: 1px solid #ecf0f1;
}

#techs td{
  padding: 6px 0;
}

#techs td:first-child{
  color: #2980B9;
  font-weight: bold;
  padding-left: 20px;
}

#missions{
  background-image:  url(./open-iconic-master/svg/rect-gray.svg), url(./open-iconic-master/svg/rect-gray.svg), url(./open-iconic-master/svg/rect-green.svg);
  background-position: top, bottom, center;
  background-repeat: no-repeat, no-repeat , repeat-y ;
  margin: 12px 0;
}

#missions-1 {
  width: 600px;
  float: left;
}

#missions-1 .mission{
  background-color: white;
}

#arrow, #bullet{
  position: absolute;
  top: 50%;
  background-size: cover;
  width: 20px;
  height: 20px;
}

#missions-1 #arrow{
  right: -20px;
  background-image: url("./open-iconic-master/svg/caret-right-green.svg") ;
}

#missions-1 #bullet{
  right: -40px;
  background-image: url("./open-iconic-master/svg/media-record-green.svg") ;
}

#missions-2 #arrow{
  left: -20px;
  background-image: url("./open-iconic-master/svg/caret-left-green.svg");
}

#missions-2 #bullet{
  left: -40px;
  background-image: url("./open-iconic-master/svg/media-record-green.svg");
}

#missions-2 {
  width: 600px;
  float: right;
}

#missions-2 .mission{
  background-color: white;
}

#missions-2 .mission:first-child{
  margin-top: 100px;
}

.mission #summary{
  color: #2980b9;
  font-weight: bold;
  margin: 10px;
}

.mission #company{
  margin: 10px;
}

.mission #company-name{
  color: black;
  font-weight: bold;
  margin-right: 10px;
}

.mission #company-desc{
  color:#7f8c8d;
}

.mission #town{
  float: left;
  margin: 10px;
  color: #8e44ad;
}

.mission #dates{
  float: right;
  margin: 10px;
  color: #8e44ad;
}

svg{width: 60px;}

svg circle {
  fill: #2980B9;
}

svg text{
  fill: white;
  font-weight: bold;
}

#skills td{
  vertical-align: middle;
}

.mission img {
  width: 20px;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: -3px;
}