@import '@seeqdev/qomponents/dist/styles.css';
@import '@fortawesome/fontawesome-free/css/all.css';
@import 'tailwindcss';

.tw-light {
  background-color: white;
  color: #1a1a1a;
}

.tw-dark {
  background-color: rgb(36, 36, 34);
  color: rgb(194, 188, 176);
}

.formPanel {
  align-items: center;
  width: 500px;
  display: flex;
}

.header {
  font-size: larger;
  font-weight: bold;
}

.backdrop {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.scroll-container {
  margin: auto;
  max-height: 100%;
  overflow: auto;
}

.flex-container {
  margin-top: 30px;
  margin-bottom: 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 500px;
}

.formRow {
  display: flex;
  flex-direction: row;
  margin-bottom: 15px;
}

.formColumn {
  display: flex;
  flex-direction: column;
}

.buttonRow {
  display: flex;
  justify-content: center;
}

.labelWidth {
  width: 150px;
}

.formElementWidth {
  width: 350px;
}

.mr-10 {
  margin-right: 10px;
}

.ml-10 {
  margin-left: 10px;
}

.mb-10 {
  margin-bottom: 10px;
}

/* styles for complexSelect*/
.selectOptionWrapperDiv {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 34px;
}

.selectOptionDiv {
  display: flex;
  flex-direction: column;
}

.selectOptionSubText {
  font-size: smaller;
  padding: 0;
  margin-top: -6px;
}

/* end styles for complexSelect*/