/* Widths first, the common ones to override */
.page form{
  width: 100%;
}

/* Want this to be the same width as the form, but the form might not always be the same width */ 
.page form .actions {
  width: 100%;
  margin-bottom: 15px;
}
.page fieldset label {
  width: 165px;
}
.page fieldset input,
.page fieldset textarea,
.page fieldset .multiwrapper,
.page fieldset p.filename,
.page fieldset p.file {
  width: 360px;
}
.page fieldset .monthyear select {
  width: 88px;
}
.page fieldset .checkboxes .checkbox input {
  width: 40px;
}
.page fieldset .checkboxes .checkbox label {
  width: auto;
}

/* Selects tend to be about 5px out due to borders and padding */
.page fieldset select,
.page fieldset .monthyear,
.page fieldset .multifield select {
  width: 365px;
}

/* Full widths next */
.page fieldset p, /* Paragraphs always full width */
.page fieldset label.full_width,
.page fieldset input.full_width,
.page fieldset textarea.full_width,
.page fieldset select.full_width,
.page fieldset .monthyear.full_width,
.page fieldset .multiwrapper.full_width,
.page fieldset .multiwrapper.full_width select,
.page fieldset  p.filename.full_width,
.page fieldset  p.file.full_width,
.page fieldset .checkboxes.full_width{
  width: 100%;
}

/* +2px for selects */
.page fieldset select.full_width{
  width: 100%;
}

/* +5px for multiwrappers */
.page fieldset .multiwrapper.full_width,
.page fieldset .multiwrapper.full_width select{
  width: 100%;
}

/* And the rest of the usual styles */
.page form {
  padding: 0 0 1em 0;
}

.page fieldset p {
  padding: 5px 0px 10px 0px;
}

.page fieldset {
  padding: 20px 10px;
  margin: 1em 0;
  border: 1px solid #BBB;
}

.page form .multiwrapper p.sidenote {
  padding-left: 0px;
  margin-top: 0;
  font-size: 80%;
}
.page fieldset h3 {
  font-size: 1.4em !important;
  line-height: 1.4em !important;
  margin-bottom: 1em;
  clear: both;
}
.page fieldset h4 {
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 1em;
  clear: both;
}
.page fieldset label {
  float: left;
  margin-right: 10px;
  margin-bottom: 1em;
  margin-top: 0.25em;
  clear: left;
  word-wrap: break-word;
}
.page fieldset label.full_width{
  margin-top: 0.25em;
  margin-bottom: 0.5em;
  margin-right: 0;
}
.page fieldset label.full_width,
.page fieldset input.full_width,
.page fieldset textarea.full_width,
.page fieldset select.full_width,
.page fieldset .monthyear.full_width,
.page fieldset .multiwrapper.full_width,
.page fieldset .multiwrapper.full_width select,
.page fieldset .checkboxes.full_width{
  float: none;
}
.page fieldset input,
.page fieldset textarea,
.page fieldset select,
.page fieldset .monthyear,
.page fieldset .multiwrapper,
.page fieldset p.filename,
.page fieldset p.file,
.page fieldset p.word_count{
  margin-bottom: 1em;
  font: inherit;
  float: right; 
  clear: right;
}
.page fieldset .multiwrapper {
  float: right;
}
.page fieldset .multiwrapper p.sidenote {
  margin-bottom: 0.25em;
  padding: 0;
  text-align: center;
  width: auto;
}

.page fieldset div.checkboxes,
.page fieldset div.multifield {
  overflow: auto;
  border: 1px solid #BBB;
  margin-bottom: 10px;
  padding-bottom: 10px;
  width: 365px;
  float: right;
}
.page fieldset div.multifield {
  float: none;
}
.page fieldset div.checkboxes{
  float: right;
  padding-top: 10px;
}
.page fieldset label.selectmulti{
  margin-top: 1.5em;
}
.page fieldset .checkboxes .checkbox{
  float: left;
  padding: 0 10px;
}
.page fieldset .checkboxes .checkbox input {
  clear: left;
  float: left;
  margin-right: 10px;
  margin-bottom: 10px;
}
.page fieldset .checkboxes .checkbox label {
  clear: none;
  float: left;
  margin-bottom: 5px;
}
.page fieldset .no-border.checkboxes,
.page fieldset .gis.checkboxes{
  border: 0;
}
.page fieldset .no-border.checkboxes .checkbox,
.page fieldset .gis.checkboxes .checkbox{
  padding: 0;
}
.page fieldset .no-border.checkboxes .checkbox input,
.page fieldset .gis.checkboxes .checkbox input{
  float: left;
  margin: 0;
}
.page fieldset .charlimit,
.page fieldset .wordlimit {
  margin-bottom: 0px;
}
.page fieldset .monthyear select{
  float: none;
}
.page fieldset .word_count{
  text-align: right;
  padding-top: 0.05em;
}
.page .actions{
  position: relative;
  height: 25px; /* Might need to adjust this for buttons */
}
.page .actions .button-link{
  float: left;
}
.page .button-link{
  /* Don't set custom styling here... set this in overrides :) */
  cursor: pointer;
  /*float: left;*/
  margin: 0 5px;
}
.page .button-link.right{
  /*position: absolute;*/
  /*right: 0;*/
  float: right;
  /*clear: right;*/
}
.mandatory {
  color: red;
}
.error {
  display: block;
  color: red;
}

.clearBoth {
  display: block;
  clear: both;
}

.clearBoth {
  clear: both; 
  width: 100%;
}

div#business_area_wrapper {
    clear: none;
    float: right;
    width: auto;
    border: 1px solid #CCCCCC;
    margin-bottom: 20px;
}

div#business_area_wrapper .multiwrapper{
  width: auto;
  padding: 2%;
  border: 0;
  margin-bottom: 0px;
}

div#business_area_wrapper select {
  width: auto;
}
div#business_area_wrapper p.sidenote{
  font-size: 12px;
  text-align: center;
}

.page fieldset div.g-recaptcha {
  display: inline-block;
  float: right;
}

@media all and (min-width:60em) { /* 960px */
  div#business_area_wrapper {
    width: 360px;
  }
  
  div#business_area_wrapper .multiwrapper{
    width: 96%;
  }

  div#business_area_wrapper select{
    width: 335px;
  }
}


/* Here's two really silly fixes, selects are set to force mutliple unless they aren't */

form#talentbank fieldset label.select{
  margin-top: 1.5em;
}

.page fieldset label.selectmulti.full_width,
form#talentbank fieldset label.select.non_multi{
  margin-top: 0.25em;
}

#auth_decision fieldset {
  border:none;
  padding:0;
}

#auth_decision #note {
  float:left;
  width:540px;
  height:100px;
}

.page fieldset label.dyn_experience_admiral {
  width: 100%;
}
.page fieldset div.multifield {
  width: 570px;
  padding: 10px;
  margin-bottom: 1em;
  clear: left;
}
.page fieldset div.multifield label {
  margin-bottom: 0;
}
.page fieldset div.multifield input,
.page fieldset div.multifield textarea {
  width: 348px;
}


.page fieldset input.ni_number_1 {
  width: 50px;
  float: left;
  margin-left: 55px;
}
.page fieldset input.ni_number_2 {
  width: 100px;
  float: left;
}
.page fieldset input.ni_number_3 {
  width: 30px;
  float: left;
}



table.psl_list {
  width: 95%;
  margin-bottom: 1em;
}
table.psl_list th, table.psl_list td {
  border-collapse: collapse;
  border: 1px solid #aaa;
  padding: 3px;
} 

body div.ui-dialog {
  font-size: 70%;
}

.is-mobile .holdctrl, .is-tablet .holdctrl{
  display: none;
}

.ui-datepicker {
  font-size: 85%;
}

/* Retention message */

.page fieldset .retention_message {
  overflow: hidden;
  margin-bottom: 10px;
  display: inline-block;
}

.page fieldset .retention_message p {
  margin-bottom: 0;
  padding-left: 9px;
}

.page fieldset .retention_message .mandatory {
  float: left;
  margin-right: 5px;
  line-height: 35px;
}

.page fieldset .retention_message .fieldwrap {
  overflow: hidden;
}

.page fieldset .retention_message input {
  float: left;
  width: auto;
  height: auto;
  clear: left;
  margin-bottom: 0;
  margin-right: 8px;
  margin-top: 5px;
}

.page fieldset .retention_message label {
  float: left;
  width: auto;
  max-width: 90%;
  font-weight: normal;
  clear: right;
  margin-top: 0;
}

/* Follow up */
.followup_form_container {
  min-height: 260px;
  max-width: 80%;
  margin: 20px auto;
}

.follow_up_form {
  width: 70% !important;
  margin:auto;
}

.dynamic_wrapper .button, .reference-container .button {
  margin-top: 30px;
}
.dynamic_wrapper_inner {
  position: relative;
  padding-top: 30px;
}
.dynamic_wrapper_inner .delete_dynamic_field {
  position: absolute;
  top: 0;
  right: 0;
}
.delete_dynamic_field, .delete-reference {
  overflow: hidden;
  cursor: pointer;
}
.delete_dynamic_field i, .delete-reference i {
  float: right;
  clear: both;
  color: red;
  font-size: 20px;
  margin-top: 0 !important;
}