/*@import url(https://fonts.googleapis.com/css?family=Montserrat);*/
  /*basic reset*/
  * {margin: 0; padding: 0;}
  html {
  height: 100%;
  /*Image only BG fallback*/
  
  /*background = gradient + image pattern combo*/
  /*background: #CD5C5C;*/
  background: #680000;

  /*linear-gradient(rgba(196, 102, 0, 0.6), rgba(155, 89, 182, 0.6));*/
  }
  body {
  font-family: Lato, montserrat, arial, verdana;
  color: #480000;
  }
  .labelForCSS{
  font-size: 12px;
  color: gray;
  width: 5%;
  }
  .textareaadd{
  resize: vertical;
  }
  .titlequest{
    font-weight:bold;
    font-size: 12px;
    /*color:dimgray;*/
    text-transform: uppercase;
  }
  .fileUploadName{
    font-size: 12px;
    /*color:dimgray;*/
    text-align:left;
  }
  
  /*form styles*/
  .msform {
  /*width: 400px;*/
  width: 50%;
  margin: 50px auto;
  text-align: center;
  position: relative;
  }
  .msform fieldset {
  /*background: white;*/
  background: #fff9f0;
  border: 0 none;
  border-radius: 3px;
  box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
  padding: 20px 30px;
  box-sizing: border-box;
  width: 80%;
  margin: 0 10%;
  /*stacking fieldsets above each other*/
  position: relative;
  }
  /*Hide all except first fieldset*/
  .msform fieldset:not(:first-of-type) {
  display: none;
  }
  /*inputs*/
  .msform input, .msform textarea {
  padding: 15px; /*15*/
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-bottom: 10px; /*10px*/
  width: 100%;
  box-sizing: border-box;
  font-family: montserrat;
  /*color: #2C3E50;*/
  font-size: 13px;
  }
  /*buttons*/
  .msform .action-button {
  width: 100px;
  /*background: #27AE60;*/
  background: #af7a7a;
  font-weight: bold;
  color: white;
  border: 0 none;
  border-radius: 1px;
  cursor: pointer;
  padding: 10px 5px;
  margin: 10px 5px;
  }
  .msform .action-button:hover, .msform .action-button:focus {
  box-shadow: 0 0 0 2px white, 0 0 0 3px #480000;
  }

  input:focus, textarea:focus {
    outline: none !important;
    border:2px solid #480000;
}

  /*headings*/
  .fs-title {
  font-size: 15px;
  text-transform: uppercase;
  /*color: #2C3E50;*/
  margin-bottom: 10px;
  }
  .fs-subtitle {
  font-weight: normal;
  font-size: 13px;
  /*color: #666;*/
  margin-bottom: 20px;
  }
  /*progressbar*/
  #progressbar {
  margin-bottom: 30px;
  overflow: hidden;
  /*CSS counters to number the steps*/
  counter-reset: step;
  }
  #progressbar li {
  list-style-type: none;
  /*color: white;*/
  color: #fdc58b;
  text-transform: uppercase;
  font-size: 9px;
  /*width: 25%; when there were 4 fieldsets*/
  width: 33.33%;
  float: left;
  position: relative;
  }
  #progressbar li:before {
  content: counter(step);
  counter-increment: step;
  width: 20px;
  line-height: 20px;
  display: block;
  font-size: 10px;
  color: #333;
  /*background: white;*/
  background: #fff9f0;
  border-radius: 3px;
  margin: 0 auto 5px auto;
  }
  /*progressbar connectors*/
  #progressbar li:after {
  content: '';
  width: 100%;
  height: 2px;
  /*background: white;*/
  background: #fff9f0;
  position: absolute;
  left: -50%;

  top: 9px;
  z-index: -1; /*put it behind the numbers*/
  }
  #progressbar li:first-child:after {
  /*connector not needed before the first step*/
  content: none;
  }
  /*marking active/completed steps green*/
  /*The number of the step and the connector before it = green*/
  #progressbar li.active:before,  #progressbar li.active:after{
  /*background: #27AE60;*/
  background: #af7a7a;
  /*color: white;*/
  color: #fdc58b;

  }

  /*POP UP CSS*/
  /* Popup container */
.popup {
  position: relative;
  /*position: absolute;*/
  /*right: 20px;*/
  float:right;
  display: inline-block;
  cursor: pointer;
  max-width: 100%;
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  width: 400px;
  height: auto;
  /*background-color: black;*/
  background-color: #480000;
  color: #fff;
  text-align: center;
  border-radius: 6px; 
  padding: 5px 5px; /*5px 0*/
  position: absolute;
  z-index: 1;
  top:-5px; 
  left: 225%;/*110%*/ 
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 10px; 
  right: 100%;
  border-width: 8px; /*determines how big the arrow is*/
  border-style: solid; 
  /*border-color: black transparent transparent transparent;*/
  border-color: #480000 transparent transparent transparent;
  transform: rotate(90deg);
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  
}

.imghehe{
  width: 100%;
    height:100%;
    object-fit: contain;
}

.questbutt{
  width: 20px;
    height: 20px;
}