/* Form fields */

/*
 * Adjust field sizes so they're not all 100% width
 * 150px width
 */

.datetimepicker input,
select#cuk_eventtype,
input#cuk_eventstarttime,
input#cuk_eventendtime,
input#cuk_venuepostcode,
input#cuk_maxattendees,
input#cuk_emailconsentdeliverypartnerfordisplay,
select#cuk_esadditionalquestion3v2,
input#cuk_esadditionalquestion5{
  max-width: 150px;
  float: inherit;
  margin-bottom: 10px;
}

/*
 * 350px width
 */

select#cuk_eventssolutionstatus,
input#cuk_venuename,
input#cuk_venueaddressline1,
input#cuk_venueaddressline2,
input#cuk_venueaddressline3,
input#cuk_venuetown,
input#cuk_venuewhat3words,
input#cuk_queriestoname,
input#cuk_queriestophone,
input#cuk_queriestoemail,
input#cuk_queriestoinstagram,
input#cuk_esadditionalquestion1,
input#cuk_esadditionalquestion2,
input#cuk_esalternativeregistrationlink,
input#cuk_firstname,
input#cuk_lastname,
input#cuk_email,
input#cuk_phonenumber {
  max-width: 350px;
  float: inherit;
  margin-bottom: 10px;
}


/* Format checkboxes on Event Draft page because they really are awful Microsoft */

/* #pageContent td.checkbox-cell:has(input#cuk_esadditionalquestion1) */
#pageContent td.checkbox-cell {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: center;
  margin: 0;
  padding: 5px 30px;
}

#pageContent td.checkbox-cell .field-label {
  font-weight: 400;
  line-height: 1.2;
}


.form-control {
  border: 1px solid #c3cbd2;
}

.form-control:focus {
  border: 1px solid #fc5c1f !important;
  box-shadow: inherit !important;
}


/*
 * Datepicker
 * This appears to be picking up default styling from the rest of the page
 * (such as buttons and links) and therefore looks really odd.
 */

#pageContent .datetimepicker table td,
#pageContent .datetimepicker table th {
  border-radius: 0;
  background-color: #ffffff;
  color: #365269;
}