/*$colorPrimary: #202225;
$colorSecondary: #2f3136;
$colorThirdary: white;
$colorPrimaryText: white;
$colorSecondaryText: #2f3136;
$colorDisabledText: #dee2e6;
$basicBorder: #dee2e6;*/
@keyframes ripple {
  to {
    width: 15rem;
    height: 15rem;
    opacity: 0;
  }
}
.margin0 {
  margin: 0 !important;
}

.baseButton {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  vertical-align: middle;
  transition: 0.3s ease-out;
  text-decoration: none;
  color: #fff;
  background-color: #1e88e5;
  text-align: center;
  letter-spacing: 0.5px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  border: none;
  border-radius: 2px;
  height: 36px;
  line-height: 36px;
  padding: 0 16px;
  text-transform: uppercase;
  font-size: 14px;
  outline: 0;
  margin: 8px;
}

.baseButton.outline {
  background-color: transparent;
  border: solid 1px #1e88e5;
  color: black;
}

.baseButton:hover {
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.baseButton .ripple {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: white;
  pointer-events: none;
  opacity: 0.5;
  animation: ripple 0.5s linear;
}

.baseButton.link {
  border: none;
  border-radius: 2px;
  height: 36px;
  line-height: 36px;
  padding: 0 16px;
  text-transform: uppercase;
  font-size: 14px;
  outline: 0;
  background-color: transparent;
  color: #4c4c47;
  transition: 0.3s ease-out;
  box-shadow: none;
}

.baseButton.link:hover,
.baseButton.link.alert:hover {
  box-shadow: none;
}

.baseButton.link.alert {
  color: #d50000;
}

.formLoginBorder {
  padding: 20px;
  margin: 20px auto;
  width: 400px;
  border: 1px solid black;
  border-radius: 8px;
}

.formGroup {
  display: flex;
  flex-direction: column;
  padding: 20px 0;
}

.formGroupTitle {
  font-weight: 400;
  margin: 10px;
}

.formTextBoxTitled {
  padding: 0;
  position: relative;
  margin-top: 1rem;
  margin-bottom: 1rem;
  width: 100%;
}

.formTextBoxTitled .formTextBoxTitledLabel {
  color: #9e9e9e;
  font-size: 16px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  transition: 300ms ease all;
}

.formTextBoxTitled .bar {
  position: relative;
  display: block;
  width: 100%;
}
.formTextBoxTitled .bar:before {
  content: "";
  height: 2px;
  width: 0;
  bottom: 0px;
  position: absolute;
  background: #1e88e5;
  transition: 300ms ease all;
  left: 0%;
}

.formTextBoxTitled .baseButton {
  position: absolute;
  top: 0;
  right: 0;
}

.formTextBox {
  background: none;
  color: black;
  font-size: 18px;
  padding: 10px 10px 10px 5px;
  display: block;
  width: 100%;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid #e0e0e0;
}
.formTextBox:focus {
  outline: none;
}
.formTextBox:focus ~ label, .formTextBox:valid ~ label, .formTextBox:disabled ~ label {
  top: -14px;
  font-size: 12px;
  color: #1e88e5;
}
.formTextBox:focus ~ .bar:before {
  width: 100%;
}

input[type=date] ~ label {
  top: -14px !important;
  font-size: 12px !important;
  color: #1e88e5 !important;
}

.formTextBox.smaller {
  width: 132px;
}

.formTextArea {
  margin: 8px;
  width: calc(100% - 16px);
  padding: 8px;
  height: 400px;
  border: 1px solid #dee2e6;
  color: black;
  font-size: 1rem;
}

.formSearchBox {
  display: flex;
  flex-direction: row;
  max-width: 50%;
  width: 100%;
}

.searchBar {
  width: calc(100% - 60px) !important;
  margin-right: 0 !important;
}

.searchButton {
  background: none !important;
  background-color: #0d47a1 !important;
  color: white;
  border: 1px solid transparent;
  font-size: 0.75rem;
  margin: 8px;
  margin-left: 0;
  padding: 10px 16px;
  text-decoration: none;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
  line-height: 1.2;
  border-radius: 2px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.searchButton:hover {
  font-weight: 900;
}

.formCheckbox {
  display: none;
}

.formCheckboxFrame {
  position: relative;
  height: 40px;
}

.formCheckboxFrame input[type=checkbox],
.formCheckboxFrame input[type=radio] {
  display: none;
}

.formCheckboxFrame label {
  cursor: pointer;
  display: flex;
  align-items: center;
}

.formCheckboxFrame label span {
  margin-left: 10px;
  font-size: 16px;
}

.formCheckboxFrame label svg {
  width: 30px;
  height: 30px;
}

.formCheckboxFrame input[type=checkbox]:disabled + label {
  filter: blur(4px);
}

.formCheckboxFrame .checkbox-box {
  fill: whitesmoke;
  stroke: #1e88e5;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  transition: stroke-dashoffset 0.6s ease-in;
}

.formCheckboxFrame .checkbox-tick {
  stroke: #1e88e5;
  stroke-dasharray: 172;
  stroke-dashoffset: 172;
  transition: stroke-dashoffset 0.6s ease-in;
}

.formCheckboxFrame input[type=checkbox]:checked + label .checkbox-box,
.formCheckboxFrame input[type=checkbox]:checked + label .checkbox-tick,
.formCheckboxFrame input[type=radio]:checked + label .checkbox-box,
.formCheckboxFrame input[type=radio]:checked + label .checkbox-tick {
  stroke-dashoffset: 0;
}

input[type=checkbox]:disabled + label:before {
  filter: blur(4px);
}

.formBoxInvalid {
  border: 1px solid #d50000;
}

.formTextBox ::-moz-placeholder {
  color: #dee2e6;
}

.formTextBox ::placeholder {
  color: #dee2e6;
}

.formTextBox :disabled {
  border: 1px solid #dee2e6;
  color: #dee2e6;
}

.formListBox {
  position: relative;
  background: none;
  color: black;
  font-size: 18px;
  display: block;
  width: 100%;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid #e0e0e0;
}
.formListBox:focus {
  outline: none;
}
.formListBox ~ label, .formListBox ~ label {
  top: -14px !important;
  font-size: 12px !important;
  color: #1e88e5 !important;
}
.formListBox:focus ~ .bar:before {
  width: 100%;
}

.formListBox select {
  -webkit-appearance: none;
  width: 100%;
  height: 40px;
  border: none;
  color: black;
  font-size: 18px;
  border-radius: 2px;
  padding-left: 8px;
  padding-right: 8px;
}

.formListBox select:focus-visible {
  outline-offset: 0px;
  outline: 0;
}

.formListBox svg {
  position: absolute;
  right: 0;
  top: calc(50% - 3px);
  width: 10px;
  height: 6px;
  stroke-width: 2px;
  stroke: #9098a9;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.formTreeViewUl {
  -webkit-padding-start: 20px;
          padding-inline-start: 20px;
  list-style-type: none;
}

.formTreeViewLi {
  padding: 5px;
}

.baseButtonLink {
  background-color: transparent;
  color: black;
  border: 1px solid transparent;
  font-size: 1rem;
  padding: 10px 20px;
  text-decoration: none;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
  line-height: 1.5;
  display: block;
  text-align: left;
  cursor: pointer;
}

.baseButtonLinkSmaller {
  background-color: transparent;
  color: black;
  border: 1px solid transparent;
  font-size: 1rem;
  padding: 5px 20px;
  text-decoration: none;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
  line-height: 1.5;
  display: block;
  text-align: left;
  cursor: pointer;
}

.baseButtonLink:hover,
.baseButtonLinkSmaller:hover {
  background-color: rgba(0, 0, 0, 0.1254901961);
}

.dropdownButton {
  cursor: pointer;
  background-color: transparent;
  color: #2d2d2a;
  border: 1px solid transparent;
  width: 28px;
  height: 48px;
  font-size: 1.25rem;
  margin: 8px;
}

.dropdown {
  position: relative;
  display: inline-block;
  width: -moz-max-content;
  width: max-content;
}

.dropdownContent {
  display: none;
  position: absolute;
  right: 24px;
  top: 40px;
  background-color: white;
  min-width: 250px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

.dropdownContentMiddle {
  display: none;
  position: absolute;
  right: 24px;
  top: -140px;
  background-color: white;
  min-width: 250px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

.dropdownContentBottom {
  display: none;
  position: absolute;
  left: 24px;
  top: 32px;
  background-color: white;
  min-width: 250px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

.dropdownContent.active,
.dropdownContentMiddle.active,
.dropdownContentBottom.active {
  display: block;
}

.colorBlock {
  width: 32px;
  height: 32px;
}

.sign {
  background-color: #1f1f1f;
  color: white;
  font-size: 16px;
  border-radius: 4px;
  width: -moz-max-content;
  width: max-content;
  padding: 2px;
  border: none;
  margin: 1px;
  cursor: pointer;
}

.sign.orange.active {
  background-color: #fb8c00;
}

.sign.blue.active {
  background-color: #1e88e5;
}

.sign.green.active {
  background-color: #7cb342;
}

.sign.red.active {
  background-color: #f4511e;
}

.sign.brown.active {
  background-color: #6d4c41;
}

.textOrange {
  color: #fb8c00;
}

.textBlue {
  color: #1e88e5;
}

.textGreen {
  color: #7cb342;
}

.textRed {
  color: #f4511e;
}

.textBrown {
  color: #6d4c41;
}

.textGray {
  color: #1f1f1f;
}

.padding5 {
  padding: 5px;
}

.margin5 {
  margin: 5px;
}

.margin5Horizontal {
  margin-left: 5px;
  margin-right: 5px;
}

.treeItem {
  min-height: 32px;
  max-height: 128px;
  line-height: 32px;
}

.treeItem:not(:first-child) {
  border-top: 1px solid whitesmoke;
}

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

.carousel {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
}

.carousel .carouselContent {
  position: relative;
  width: 500px;
  height: 500px;
}

.carousel .carouselContent .image {
  width: 100%;
  position: absolute;
  left: 0;
  opacity: 0;
  transition: opacity 1s;
}

.carousel .carouselContent .image.active {
  opacity: 1;
}

.carousel .buttonPrev {
  width: 50px;
  height: 50px;
  background-color: rgba(32, 32, 32, 0.2);
  position: absolute;
  top: 35%;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.carousel .buttonNext {
  width: 50px;
  height: 50px;
  background-color: rgba(32, 32, 32, 0.2);
  position: absolute;
  top: 35%;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.carousel .carouselContent:hover .buttonPrev,
.carousel .carouselContent:hover .buttonNext {
  opacity: 1;
}

.carousel .buttonPrev em,
.carousel .buttonNext em {
  color: white;
  font-size: 24px;
}

@media (max-width: 980px) {
  .formTextBox {
    min-width: 70px;
  }
  .formSearchBox {
    max-width: none;
  }
}/*# sourceMappingURL=neyolabUI.Components.css.map */