@import url("icons.css");
input[type=submit] {
  min-width: 90px;
  min-height: 35px;
}

input[type=text], input[type=email], input[type=password], input[type=date], select, option {
  width: 100%;
  max-width: 422px;
  height: 35px;
  margin-bottom: 5px;
  margin-top: 5px;
  box-sizing: border-box;
  border-radius: 0;
}

input[type=date], select, option {
  font-size: 16px;
}

input[type=text], input[type=email], input[type=password] {
  padding: 5px;
  font-size: 16px;
}

input[type=text].postcode {
  max-width: 422px;
}

body {
  margin: 0px;
}

/*@author Mark Macheta*/
/*This is used in skills_card.jsp to bring the content to the absoloute left on a new line*/
.floatClear {
  clear: left;
}

/*@author Mark Macheta*/
/*This is used in skills_card.jsp to bring the content to the absoloute left on a new line*/
.floatLeft {
  float: left;
}

.responsiveStructureElement {
  width: 100%;
  min-width: 280px;
  max-width: 422px;
  min-height: 67px;
}

#nextButton {
  float: right;
}

textarea {
  box-sizing: border-box;
  max-width: 422px;
  min-height: 80px;
  width: 100%;
  word-wrap: break-word;
  outline: none;
  font-size: 16px;
}

.content {
  padding-top: 60px;
  padding-bottom: 60px;
}

/*Adds spacing to the items at the bottom of webpages */
.buttonContainer {
  margin-top: 10px;
}

div[data-role=footer] {
  margin-top: 20px;
}

/*apply this class to parent elements of floated elements to stop the parent
collapsing*/
.clearFix::after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
}

/*Stop datepicker getting lost behind navbar on mobile*/
div#ui-datepicker-div {
  z-index: 1000 !important;
}

/* Used to know if the page was refreshed or back-button'd - hide it as much as possibru */
[name=page_has_been_returned_to] {
  position: absolute;
  top: -1000px;
}

/* styling of popup modal images (such as on the personal info and skills card page
when an image is clicked) */
.modalImage {
  height: 100%;
  width: 100%;
  max-height: 100%;
  max-width: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

table.dataTable.dtr-column > tbody > tr > td.control:before, table.dataTable.dtr-column > tbody > tr > th.control:before {
  background-color: #0d7e84 !important;
  line-height: 16px !important;
}

/*Modal popup CSS*/
/*Tablet view*/
@media screen and (min-width: 768px) {
  .modalImagePopup {
    width: calc(95% - 255px) !important;
    height: 95%;
    left: 126px;
    max-width: none !important;
  }

  .responsiveStructureElement {
    margin-right: 20px;
  }
}
/*Mobile view*/
@media screen and (max-width: 767px) {
  .modalImagePopup {
    height: calc(95% - 54px);
    width: 95% !important;
    top: 27px;
  }
}
/*All radio button sets will need to be vertical when the screen is very narrow.
 Some may need to apply similar structure changes at larger screen widths. */
@media screen and (max-width: 360px) {
  fieldset span {
    margin-right: 10px;
    margin-top: 5px;
    margin-bottom: 10px;
    display: block;
  }
  fieldset input {
    display: none;
  }
}

/*# sourceMappingURL=main_structure.css.map */