/**
 * Bootstrap 5 Compatibility CSS
 * Fixes for forms and components migrated from Bootstrap 3 to Bootstrap 5
 */

/* ============================================
   RADIO BUTTONS & CHECKBOXES
   ============================================ */

/* Basic radio button styling */
.form-type-radio,
.form-type-checkbox {
  display: inline-block;
  margin-right: 20px;
  margin-bottom: 8px;
}

.form-type-radio input[type="radio"],
.form-type-checkbox input[type="checkbox"] {
  margin-right: 8px;
  cursor: pointer;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  width: auto !important;
  height: auto !important;
}

.form-type-radio label,
.form-type-checkbox label {
  cursor: pointer;
  font-weight: normal;
  display: inline !important;
}

/* For radios/checkboxes in a group, to keep them inline */
.form-radios .form-type-radio,
.form-checkboxes .form-type-checkbox {
  display: inline-block;
  margin-right: 20px;
}

/* Fix for container-inline hiding radio buttons */
.container-inline div,
.container-inline label {
  display: inline-block !important;
}

.container-inline input[type="radio"],
.container-inline input[type="checkbox"] {
  display: inline-block !important;
  visibility: visible !important;
}

/* Remove any underlines or borders from radio button labels */
.form-type-radio label,
.form-type-checkbox label,
.form-radios label,
.form-checkboxes label {
  text-decoration: none !important;
  border-bottom: none !important;
  background: none !important;
}

/* Ensure radio buttons render as native controls */
input[type="radio"],
input[type="radio"].form-check-input {
  -webkit-appearance: radio !important;
  -moz-appearance: radio !important;
  appearance: radio !important;
  width: auto !important;
  height: auto !important;
  margin-top: 0 !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  float: none !important;
  margin-left: 0 !important;
}

input[type="checkbox"],
input[type="checkbox"].form-check-input {
  -webkit-appearance: checkbox !important;
  -moz-appearance: checkbox !important;
  appearance: checkbox !important;
  width: auto !important;
  height: auto !important;
  margin-top: 0 !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  float: none !important;
  margin-left: 0 !important;
}

/* ============================================
   LANGUAGE SWITCHER - Dropdown functionality
   ============================================ */

/* Language switcher container */
.language-switcher-language-url {
  position: relative;
  display: inline-block;
  
}

/* Hide dropdown by default */
.language-switcher-language-url .dropdown-menu,
.language-switcher-language-url ul.links {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  background-color: #fff;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 4px;
  box-shadow: 0 6px 12px rgba(0,0,0,.175);
  list-style: none;
}

/* Show dropdown when open */
.language-switcher-language-url.open .dropdown-menu,
.language-switcher-language-url.open ul.links {
  display: block;
}

/* Dropdown items */
.language-switcher-language-url .dropdown-menu li,
.language-switcher-language-url ul.links li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.language-switcher-language-url .dropdown-menu a,
.language-switcher-language-url ul.links a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.42857143;
  color: #333;
  white-space: nowrap;
  text-decoration: none;
}

.language-switcher-language-url .dropdown-menu a:hover,
.language-switcher-language-url ul.links a:hover {
  background-color: #f5f5f5;
  color: #262626;
}

/* Button styling */
.choose-language-button {
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 10px 15px;
  color: inherit;
  position: relative;
  z-index: 1000;
  pointer-events: auto !important;
}

.choose-language-button:hover {
  background-color: rgba(0,0,0,.05);
}

/* Ensure language switcher container is clickable */
.language-switcher-language-url {
  pointer-events: auto !important;
  z-index: 1;
}

/* ============================================
   OPEN EVENTS LISTING TABLE LAYOUT
   ============================================ */
.page-node-type-open-events .reg-details {
    width: 100%;
    border-bottom: 1px solid grey;
    color: #333333;
    font-weight: 700;
    padding: 10px 12px;
}

.reg-details .date-detail, .reg-details .time-detail, .reg-details .location-detail {
    color: #333333;
    font-weight: 700 !important;
}

.date-detail, .time-detail, .location-detail {
    width: 25%;
    display: inline-block;
    font-family: Lato, sans-serif;
    font-weight: 400;
    font-style: normal;
    color: rgb(0, 0, 0);
    vertical-align: top;
}

.page-node-type-open-events .detail-wraper .field--name-field-open-events .field__item {
    border-bottom: 0 !important;
    padding: 10px 5px;
    width: 100%;
    word-wrap: break-word;
}

.date-detail, .time-detail, .location-detail {
    width: 25%;
    display: inline-block;
    font-family: Lato, sans-serif;
    font-weight: 400;
    font-style: normal;
    color: rgb(0, 0, 0);
    vertical-align: top;
}

.page-node-type-open-events .detail-wraper .field--name-field-open-events .register {
    width: 18%;
    display: inline-block;
    background: rgba(61, 126, 219, 1);
    padding: 2px;
    text-align: center;
    border-radius: 5px;
    float: right;
    margin-top: 10px;
    margin-right: 3%;
}

.page-node-type-open-events .detail-wraper .field--name-field-open-events .register a {
    color: #fff;
}
/* ============================================
   LOGIN PAGE FIXES
   ============================================ */

/* Hide tab toggle dropdown on login page */
.path-user .tab-toggle.dropdown-toggle {
  display: none !important;
}

/* Change login buttons to blue */
.path-user .form-submit,
.path-user button[type="submit"],
.path-user input[type="submit"] {
  background-color: #337ab7 !important;
  border-color: #2e6da4 !important;
  color: #fff !important;
}

.path-user .form-submit:hover,
.path-user button[type="submit"]:hover,
.path-user input[type="submit"]:hover {
  background-color: #286090 !important;
  border-color: #204d74 !important;
}

/* ============================================
   FORM CONTROLS - General styling
   ============================================ */

/* Ensure all form controls have proper styling */
.form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="password"],
select,
textarea {
  display: block;
  width: 100%;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
  border-color: #66afe9;
  outline: 0;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
}

/* Disabled state */
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control,
input[disabled],
select[disabled],
textarea[disabled] {
  background-color: #eeeeee;
  opacity: 1;
  cursor: not-allowed;
  color: #999;
}

.container-inline div{
  visibility: hidden;
}

/* ============================================
   SELECT DROPDOWNS - Add arrow
   ============================================ */

select,
select.form-control,
select.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 12px;
  padding-right: 32px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* ============================================
   FORM GROUPS - Bootstrap 3 to 5 migration
   ============================================ */

/* Map .form-group to work like BS3 */
.form-group,
.js-form-item,
.form-item {
  margin-bottom: 15px;
}

/* Labels */
.control-label,
label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: 700;
}

/* ============================================
   BUTTONS - Prevent full-width issue
   ============================================ */

button.form-control,
input[type="submit"].form-control,
input[type="button"].form-control {
  width: auto;
  display: inline-block;
}

/* ============================================
   DROPDOWN - Bootstrap 3 compatibility
   ============================================ */

/* Dropdown menu visibility */
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  min-width: 160px;
  padding: 5px 0;
  margin: 0;
  font-size: 14px;
  text-align: left;
  list-style: none;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 4px;
  box-shadow: 0 6px 12px rgba(0,0,0,.175);
  background-clip: padding-box;
}

.dropdown-menu.show,
.open > .dropdown-menu {
  display: block;
}

.dropdown-menu > li > a {
  display: flex;
  align-items: center;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.42857143;
  color: #333;
  white-space: nowrap;
  text-decoration: none;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  color: #262626;
  text-decoration: none;
  background-color: #f5f5f5;
}

/* Fix language icon alignment */
.dropdown-menu .language-icon {
  margin-right: 8px;
  vertical-align: middle;
}

/* ============================================
   LOGIN PAGE - Bootstrap 3 compatibility
   ============================================ */

/* Reduce spacing on login page */
.path-user .main-container {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.path-user .main-container .row {
  margin-top: 0 !important;
}

.path-user .region-content {
  margin-top: 0 !important;
  position: relative;
}

.path-user section {
  padding-top: 0 !important;
}

/* Login page tabs */
.path-user nav.tabs {
  margin-top: 0 !important;
  margin-bottom: 5px !important;
}

.path-user nav.tabs ul {
  border-bottom: 1px solid #ddd;
  padding-left: 0;
  margin-bottom: 5px !important;
  margin-top: 0 !important;
  list-style: none;
}

.path-user nav.tabs ul:after {
  content: "";
  display: table;
  clear: both;
}

.path-user nav.tabs ul li {
  float: left;
  margin-bottom: -1px;
}

.path-user nav.tabs ul li a {
  margin-right: 2px;
  line-height: 1.42857143;
  border: 1px solid transparent;
  border-radius: 4px 4px 0 0;
  padding: 10px 15px;
  display: block;
  color: #337ab7;
  text-decoration: none;
}

.path-user nav.tabs ul li a:hover {
  border-color: #eee #eee #ddd;
  background-color: #eee;
}

.path-user nav.tabs ul li.active a,
.path-user nav.tabs ul li a.active {
  color: #555;
  cursor: default;
  background-color: #fff;
  border: 1px solid #ddd;
  border-bottom-color: transparent;
}

/* Hide page title on login page */
.path-user h1.page-header {
  display: none !important;
}

/* OpenID Connect login button */
.path-user .openid-connect-login-form {
  margin-bottom: 10px !important;
  margin-top: 5px !important;
}

/* User login form */
.path-user .user-login-form {
  width: 50%;
  margin-top: 0 !important;
}

.path-user .user-login-form .form-item {
  margin-bottom: 15px;
}

.path-user .user-login-form label {
  font-weight: 600;
}

.path-user .user-login-form .form-actions .form-submit {
  min-width: 90px;
  margin-top: 10px;
}

/* Bootstrap 3 default button (gray) */
.btn-default,
a.btn-default {
  color: #333 !important;
  background-color: #fff !important;
  border-color: #ccc !important;
  text-decoration: none !important;
}

.btn-default:hover,
.btn-default:focus,
a.btn-default:hover,
a.btn-default:focus {
  color: #333 !important;
  background-color: #e6e6e6 !important;
  border-color: #adadad !important;
  text-decoration: none !important;
}

.btn-default:active,
.btn-default.active,
a.btn-default:active,
a.btn-default.active {
  background-color: #e6e6e6 !important;
  border-color: #adadad !important;
  box-shadow: inset 0 3px 5px rgba(0,0,0,.125) !important;
}

/* Bootstrap 3 primary button (blue) */
.btn-primary {
  color: #fff;
  background-color: #337ab7;
  border-color: #2e6da4;
}

.btn-primary:hover,
.btn-primary:focus {
  color: #fff;
  background-color: #286090;
  border-color: #204d74;
}

.btn-primary:active,
.btn-primary.active {
  background-color: #286090;
  border-color: #204d74;
  box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
}

/* Bootstrap 3 success button */
.btn-success {
  color: #fff;
  background-color: #5cb85c;
  border-color: #4cae4c;
}

.btn-success:hover,
.btn-success:focus {
  color: #fff;
  background-color: #449d44;
  border-color: #398439;
}

.btn-success:active,
.btn-success.active {
  background-color: #449d44;
  border-color: #398439;
  box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
}

.btn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  border-radius: 4px;
  user-select: none;
}

/* ============================================
   INPUT GROUPS
   ============================================ */

.input-group {
  position: relative;
  display: table;
  border-collapse: separate;
  width: 100%;
}

.input-group .form-control {
  position: relative;
  z-index: 2;
  float: left;
  width: 100%;
  margin-bottom: 0;
  display: table-cell;
}

.input-group-addon,
.input-group-btn {
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
  display: table-cell;
}

.input-group-addon {
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: #555;
  text-align: center;
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* ============================================
   HELP TEXT
   ============================================ */

.help-block,
.form-text,
.description {
  display: block;
  margin-top: 5px;
  margin-bottom: 10px;
  color: #737373;
  font-size: 13px;
}

/* ============================================
   VALIDATION STATES
   ============================================ */

.has-error .form-control,
.form-item--error input,
.form-item--error select,
.form-item--error textarea {
  border-color: #a94442;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}

.has-error .form-control:focus,
.form-item--error input:focus,
.form-item--error select:focus,
.form-item--error textarea:focus {
  border-color: #843534;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px #ce8483;
}

.has-error .control-label,
.has-error .help-block,
.form-item--error-message {
  color: #a94442;
}

/* ============================================
   ALERTS - Close button styling
   ============================================ */

/* Bootstrap 3 alert close button */
.alert .close {
  position: relative;
  top: -2px;
  right: -21px;
  color: inherit;
  float: right;
  font-size: 21px;
  font-weight: bold;
  line-height: 1;
  opacity: 0.2;
  filter: alpha(opacity=20);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-appearance: none;
}

.alert .close:hover,
.alert .close:focus {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.5;
  filter: alpha(opacity=50);
}

/* Alert padding to accommodate close button */
.alert-dismissible {
  padding-right: 35px;
}

/* ============================================
   PANELS to CARDS migration
   ============================================ */

.panel {
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0,0,0,.05);
}

.panel-default {
  border-color: #ddd;
}

.panel-heading {
  padding: 10px 15px;
  border-bottom: 1px solid transparent;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  background-color: #f5f5f5;
  border-color: #ddd;
}

.panel-body {
  padding: 15px;
}

.panel-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 16px;
  color: inherit;
}

/* ============================================
   FORM INLINE
   ============================================ */

.form-inline .form-group,
.form-inline .js-form-item {
  display: inline-block;
  margin-bottom: 0;
  vertical-align: middle;
}

.form-inline .form-control {
  display: inline-block;
  width: auto;
  vertical-align: middle;
}

/* ============================================
   RESPONSIVE FIXES
   ============================================ */

@media (max-width: 768px) {
  .form-inline .form-group,
  .form-inline .js-form-item {
    display: block;
    margin-bottom: 15px;
  }
  
  .form-inline .form-control {
    width: 100%;
  }
}

/* ============================================
   CHANGE REGISTRATION FORM FIXES
   ============================================ */

/* Fix button color to match production - use hover appearance as permanent */
.path-change-registration #edit-change:hover,
.path-change-registration .btn-info,
.path-change-registration button.btn-info,
.path-change-registration input.btn-info {
  background-color: rgba(61, 126, 219, 1) !important;
  border: none !important;
  background-image: none !important;
  color: white !important;
  border-radius: 4px !important;
  padding: 6px 12px !important;
  box-sizing: border-box !important;
  background-color: rgba(61, 126, 219, 1);
  border-color: rgba(230, 231, 233, 1);
  border-radius: 4px;
  width: 100%;
  font-size: 0.9rem;
  
}


/* Fix nested region-content divs inside blocks */
.path-change-registration .block .region-content {
  width: auto !important;
  max-width: none !important;
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Add form-group styling for Bootstrap 5 compatibility */
.path-change-registration .js-form-item {
  margin-bottom: 1rem;
}

/* Ensure submit button wrapper has proper spacing and doesn't affect button width */
.path-change-registration #edit-submit {
  margin-bottom: 1rem;
  width: auto !important;
}

/* Make text input 100% width on this page only */
.path-change-registration input[type="text"],
.path-change-registration .form-control {
  width: 100% !important;
}

/* Glyphicons support for Bootstrap 5 */
@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
       url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'),
       url('../fonts/glyphicons-halflings-regular.woff') format('woff'),
       url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
       url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings', sans-serif;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.glyphicon-ok-sign:before {
  content: "\e084";
}

.glyphicon-warning-sign:before {
  content: "\e107";
}

.glyphicon-info-sign:before {
  content: "\e086";
}

.glyphicon-remove:before {
  content: "\e014";
}

.glyphicon-remove-sign:before {
  content: "\e083";
}

.glyphicon-chevron-right:before {
  content: "\e080";
}

.glyphicon-calendar:before {
  content: "\e109";
}

.glyphicon-menu-down:before {
  content: "\e259";
}

.glyphicon-trash:before {
  content: "\e020";
}