body {
  background-color: #fff;
  font-size:110%;
}

p { 
  font-size: 1.1em;
}

.main-container {
  max-width: 800px !important;
  margin: 0 auto;
}

.ui.segment {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 2em;
}

.ui.header {
  margin-top: 1em;
  margin-bottom: 2em;
}

.form-page {
  margin-bottom: 2em;
}

#navigation-buttons {
  margin-top: 3em;
  border-top: 1px solid rgba(34,36,38,.15);
  padding-top: 2em;
}

/* Style radio buttons as regular buttons */
.gender-buttons .button,
.entity-type-buttons .button,
.home-visit-buttons .button,
.office-buttons .button {
  border-radius: 20px !important;
}

.gender-buttons .button.active,
.entity-type-buttons .button.active,
.home-visit-buttons .button.active,
.office-buttons .button.active {
  background-color: #2185d0 !important;
  color: white !important;
}

/* Verification sections */
.verification-section {
  margin-top: 0.5em;
}

/* label.errorField {
  border-left: 4px solid red;
  padding-left: 0.5em;
} */

/* File uploader styling */
.qq-upload-button {
  background-color: #fff !important;
  color: #2185d0 !important;
  padding: 10px 15px;
  border-radius: 4px;
  border: 1px solid #2185d0;
}

.qq-upload-list {
  margin-top: 10px;
}

.qq-file-info {
  min-height: 30px;
  display: flex;
  align-items: center;
}

.qq-file-name {
  overflow:hidden;
}

.qq-thumbnail-wrapper {
  display:none;
}

/* Snackbar styles - Desktop version */
.snackbar {
  visibility: hidden;
  min-width: 250px;
  max-width: 350px;
  background-color: #db2828;
  color: #fff;
  text-align: left;
  border-radius: 4px;
  padding: 12px 16px;
  position: absolute;
  z-index: 1000;
  right: 0px;
  bottom: 0px;
  font-size: 14px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

/* Desktop animation - just fade in/out, no motion */
.snackbar.show {
  visibility: visible;
  animation: desktop-fadein 0.5s, desktop-fadeout 0.5s 4.5s;
}

.snackbar.success {
  background-color: #21ba45;
}

@keyframes desktop-fadein {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes desktop-fadeout {
  from {opacity: 1;}
  to {opacity: 0;}
}

/* Mobile-specific snackbar styles */
@media only screen and (max-width: 767px) {
  .snackbar {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 0;
    max-width: none;
    width: calc(100% - 32px);
    margin: 0 auto;
  }
  
  /* Mobile animation - fade in with motion, fade out without motion */
  .snackbar.show {
    bottom: 20px; /* Set the final position explicitly */
    animation: mobile-fadein 0.5s, mobile-fadeout-opacity 0.5s 4.5s;
  }
  
  @keyframes mobile-fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 20px; opacity: 1;}
  }
  
  @keyframes mobile-fadeout-opacity {
    from {opacity: 1;}
    to {opacity: 0;}
  }
}

/* Responsive adjustments */
@media only screen and (max-width: 767px) {
  .ui.container {
    margin-left: 0px!important;
    margin-right: 0px!important;
  }
  .ui.form .fields {
    flex-wrap: wrap;
  }
  .ui.form .fields .field {
    width: 100% !important;
    margin-bottom: 1em;
  }
  .info-column, .form-column {
    padding: 0 !important;
  }
  
  /* Use snackbar on mobile */
  #error-message {
    display: none !important;
  }
}

.ui.buttons {
  display: flex;
  flex-wrap: wrap;
}

.ui.buttons .button {
  margin-bottom: 0.5em;
  flex: 1 1 100%;
}

#navigation-buttons .button {
  margin-right: 0.5em;
  
  #navigation-buttons .button {
    margin-right: 0.5em;
  }
}

/* Dropdown styling for multiselection chips */
.ui.selection.dropdown {
  min-height: 2.7142em;
  padding: 1.11em 2.1em 1.11em 1em;
}
.ui.selection.dropdown>.delete.icon, .ui.selection.dropdown>.dropdown.icon, .ui.selection.dropdown>.search.icon {
  padding: 1.2em 0.9em;
}

.ui.selection.dropdown .menu {
  max-height: 15em;
}

.ui.dropdown .menu .item {
  border-radius: 3px;
  margin: 0.25em;
}

.ui.dropdown .menu > .item.selected {
  background-color: #2185d0;
  color: white;
}

.ui.multiple.dropdown>.label {
  padding: 0.5em 1em;
  margin:0;
}

/* Verification message styling */
.verification-message {
  margin-top: 0.5em;
}

.verification-message.success {
  background-color: #fcfff5;
  color: #2c662d;
  box-shadow: 0 0 0 1px #a3c293 inset, 0 0 0 0 transparent;
}

.verification-message.error {
  background-color: #fff6f6;
  color: #9f3a38;
  box-shadow: 0 0 0 1px #e0b4b4 inset, 0 0 0 0 transparent;
}

.ui.form .field.error .ui.dropdown, .ui.form .fields.error .field .ui.dropdown {
  border: 1px solid #e0b4b4!important;
}