.app-body {
   font-family: Roboto,Helvetica,Arial,sans-serif;
}

.sader-form {
   background-color: #eee;
   padding: 4px 20px 20px 20px;
   margin-bottom: 20px; margin-top: 10px;
   border: 1px double #ccc;
}

hr {
   border-top: 1px solid #336699;
}

.row {
   margin-left: 0px!important;
   margin-bottom: 6px;
}

.select-style {
  width: 200px;
  height: 30px;
  margin-bottom: 6px; margin-left: 15px;
}

.cant-image {
  margin-left: 15px;
  width: 200px; height: 150px;
  border: 1px solid #999;
}

.label-style {
}

.select-label-style {
  margin-left: 15px;
}

.input-style {
   width: 220px!important;
   margin-bottom: 6px;
}

.error-msg {
   margin: 5px 0;
   font-style: italic;
   color: #f70;   
}

.answer-label {
   font-weight: bold;
   padding-top: 5px;
}

.answer-class {
   width: 220px;
   height: 30px;
   border: 1px solid #999;
   margin-left: 15px;
   padding: 5px;
   font-weight: bold;
}

.sci-field{
   text-transform: uppercase;
}

/* for larger screens */
@media (min-width: 1099px) {
   h3 {
      margin-left: 6px;
   }

   .app-body {
      margin: 30px 60px;
   }

   .header-part {
      margin-left: 8px;
   }

   .button-style {
      width: 180px;
      height: 40px;
      margin-top: 10px;
      font-weight: bold;
   }

}

/* for medium screens - ipads */
@media (min-width: 750px) and (max-width: 1099px) {
   h3 {
      margin-left: 6px;
   }

   .app-body {
      margin: 30px 40px;
   }

   .header-part {
      margin-left: 8px;
   }

   .button-style {
      width: 180px;
      height: 40px;
      margin-top: 10px;
      font-weight: bold;
   }
}

/* for smaller screens - phones */
@media (max-width: 750px) {
   h3 {
      margin: 0px 6px;
   }

   .header-part {
      margin: 4px 8px 0px 8px;
   }

   .app-body {
      margin: 30px 20px;
   }

   .button-style {
      width: 100px;
      height: 40px;
      margin-top: 10px;
      font-weight: bold;
   }
}

