/*!***************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./web-app/app.scss ***!
  \***************************************************************************************************************************************/
#app {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.app {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.app.route-home {
  background: white; /*linear-gradient(306deg, #3C3473 25.61%, #7262D9 73.75%);*/
}

/*
nav{
    border-bottom: 1px solid $primary;
    display: flex;
    gap: 10px;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:3em;
    margin: 0;

    .navbar-brand{
        img{
            height: 2em;
        }
    }
}
*/
header {
  display: flex;
  position: fixed;
  /*
      top:0;
      left:0;
      width: 100%;
      height: 3em;
      border-bottom: 1px solid black;
  */
  margin: 0;
  justify-content: space-between;
  align-items: center;
  z-index: 10000;
  padding: 0 20px;
  top: 0;
  left: 5px;
  right: 0;
  height: 72px;
  width: auto;
  border-bottom: 1px solid #ebe6e7;
}
header .menuClickListener {
  display: block;
  position: fixed;
  top: 3em;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: none;
}
header > img {
  height: 2.5em;
}
header nav {
  display: flex;
  position: relative;
  align-items: center;
  flex-grow: 1;
  justify-content: space-between;
}
header nav a {
  color: #4a5565;
  font-size: 16px;
}
header nav a.svgIcon {
  width: 20px;
  height: 20px;
  display: inline-block;
}
header nav a:hover {
  color: #3575fe;
}
header nav .menuButtons {
  display: flex;
  gap: 16px;
}
header nav .menuIcon {
  display: none;
}
header nav .menuButton {
  z-index: 2000;
}
header nav .menuRow {
  display: flex;
  z-index: 1000;
  margin-left: 20px;
  gap: 10px;
}
header nav .menuRow > a {
  display: flex;
  flex-direction: column;
  position: relative;
}
header nav .menuRow > a .menuItemLabel {
  font-size: 0.6em;
}
header nav .menuRow > a.highlightMenuItem:after {
  content: "!";
  position: absolute;
  font-weight: bold;
  right: -4px;
  top: -4px;
  font-size: 0.8em;
  color: red;
}
header nav .menuRow .submenu {
  display: inline;
  position: relative;
}
header nav .menuRow .submenu .subMenuTitle {
  cursor: pointer;
  color: #121619;
  display: inline-block;
  width: 100%;
}
header nav .menuRow .submenu .subMenuItems {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 2em;
  left: 1em;
  background-color: white;
  border: 1px solid #a0a0a0;
  border-radius: 5px;
  padding: 5px;
  width: max-content;
}

.role-none .menuItemProfile, .menuItemProfile {
  display: none !important;
}

.mainContent {
  width: 100%;
  margin: 0 auto;
  padding: 20px 0;
  min-height: 90%;
}

.cardListHolder {
  width: 100%;
  padding: 10px 0;
}

.cardList {
  display: flex;
  flex-direction: row;
  gap: 10px;
  flex-wrap: wrap;
  margin: auto;
  width: 100%;
}
.cardList .card {
  width: 368px;
  height: 246px;
  /*display: flex;*/
  display: inline-flex;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  flex-direction: column;
  cursor: pointer;
  padding: 15px;
}
.cardList .card .cardPromotion {
  position: absolute;
  border: 1px solid #d0d0d0;
  border-radius: 5px;
  padding: 3px;
  margin-top: 5px;
  margin-left: 7px;
  background-color: #887bdf;
  color: white;
}
.cardList .card .cardImage {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  height: 214px;
  background-color: #f7f7f8;
}
.cardList .card h3 {
  text-align: center;
  font-size: 1.5em;
  margin: 0;
}
.cardList .card p {
  margin: 0;
  padding: 0;
  text-align: center;
}

.cardList.shrinkCards .card {
  zoom: 0.5;
}

.appTitle {
  display: flex;
}
.appTitle .bi-icon::before {
  font-size: 2em;
}

@media (min-width: 1960px) {
  .mainContent {
    width: 1880px;
  }
}
@media (min-width: 1562px) and (max-width: 1959px) {
  .mainContent {
    width: 1502px;
  }
}
@media (min-width: 1164px) and (max-width: 1561px) {
  .mainContent {
    width: 1124px;
  }
}
@media (min-width: 766px) and (max-width: 1163px) {
  .mainContent {
    width: 746px;
  }
}
@media (width > 800px) {
  .justNarrow {
    display: none !important;
  }
}
@media (width <= 800px) {
  .hideWhenNarrow {
    display: none !important;
  }
  .mainContent {
    width: 368px;
    padding: 10px 0;
    /*min-height: unset;*/
  }
}
@media (max-width: 800px) {
  .loginInfo {
    display: none;
  }
  header {
    top: 0;
    left: 0;
    width: 100%;
    height: 72px;
  }
  header .menuItemProfile {
    display: inline !important;
  }
  header nav {
    flex-grow: 0;
  }
  header nav .menuIcon, header nav .closeIcon {
    display: inline-flex;
    font-size: 1em;
    z-index: 2000;
  }
  header nav img {
    height: 1.5em;
  }
  header nav .menuRow {
    position: fixed;
    flex-direction: column;
    gap: 5px;
    background-color: white;
    border-radius: 10px;
    padding: 2em;
    top: 5px;
    margin-left: 5px;
    display: none;
    right: 18px;
    border: 1px solid #a0a0a0;
  }
  header nav .menuRow .submenu .subMenuItems {
    display: inline-flex;
    margin-left: 5px;
    left: auto;
    top: auto;
  }
  header nav .menuRow.visible {
    display: flex;
    gap: 8px;
    font-size: 20px;
  }
}
main {
  /*
  padding: 20px 5px;
  top:3em;
  */
  position: fixed;
  left: 0;
  width: 100%;
  bottom: 0;
  overflow-y: scroll;
  padding: 0;
  top: 72px;
  background-color: rgba(249, 251, 250, 0.6274509804);
}
main div h2 {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

@media (max-width: 800px) {
  main {
    top: 72px;
  }
}
.app.route-home main {
  /*
  padding:0;
  top: 7em;
  */
}

.app.route-home main.notLoggedIn {
  padding: 0;
  bottom: 0;
  overflow: hidden;
}

.app.route-contact main.notLoggedIn {
  padding: 0;
  bottom: 0;
  overflow: hidden;
}

footer {
  width: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: #101030;
}
footer .footer-copyright {
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
footer .footerContent {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
footer .footerContent .getGoogle, footer .footerContent .getApple {
  margin-top: 10px;
}
footer p, footer h3 {
  margin: 0;
  padding: 0;
  color: white;
}
footer p {
  font-size: 0.8em;
}
footer h3 {
  font-size: 1em;
}
footer a {
  color: #ffffe0;
}

.app.route-home footer.notLoggedIn, .app.route-contact footer.notLoggedIn {
  background-color: rgba(255, 255, 255, 0.5019607843);
  width: 320px;
  height: auto;
  left: 20px;
  bottom: 20px;
  border-radius: 20px;
  padding: 20px;
  justify-content: left;
  flex-direction: column;
  border: none;
  gap: 2px;
}

@media (max-width: 800px) {
  .footerContent {
    flex-wrap: wrap;
  }
  .getApps {
    display: flex;
    justify-content: center;
    gap: 10%;
    width: 100%;
    margin-bottom: 10px;
  }
  .getApps > div {
    width: 40%;
  }
}
/*!***********************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./web-app/login/login.scss ***!
  \***********************************************************************************************************************************************/
.googleIcon {
  background-image: url(cadee8cdb0c0afb1a713.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center left;
  display: inline-block;
  width: 2ex;
}

.appleIcon {
  background-image: url(05e1912c8685bb6e0fdc.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center left;
  display: inline-block;
  width: 2ex;
}

.loginArea {
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  margin: 10px 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.loginArea h2, .loginArea p {
  margin: 0;
}
.loginArea .form-group {
  margin: 10px 0;
}
.loginArea .form-buttons {
  padding-top: 20px;
}
.loginArea h2 {
  font-size: 1.2em;
}
.loginArea .authenticationProviders button {
  display: block;
  margin: 10px;
  width: 100%;
  display: flex;
  gap: 20px;
}
.loginArea .authenticationProviders {
  opacity: 0.8;
  border-radius: 5px;
}

.loginOptions {
  max-width: 460px;
  margin: 0 auto;
}

.loginInfo {
  display: flex;
  gap: 10px;
}
.loginInfo p {
  margin: 0;
}

.loginSubmit {
  background-color: #887BDF;
  color: white;
  width: 100%;
}

.loginError {
  color: red;
  font-style: italic;
}

@media (max-width: 800px) {
  .loginInfo {
    display: none;
  }
}
/*!***********************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./web-app/utils/icons.scss ***!
  \***********************************************************************************************************************************************/
@charset "UTF-8";
.app-icon {
  margin: 0 0.1em;
  position: relative;
}

.app-icon-dimmed {
  opacity: 50%;
}

.app-icon-text {
  display: inline;
}

.app-bi-icon {
  font-family: "bootstrap-icons";
  margin: 0 0.1em;
  line-height: inherit;
  position: relative;
  display: inline-flex;
  height: 1.5em;
  aspect-ratio: 1;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}

.app-icon-with-add:after {
  font-family: "bootstrap-icons";
  content: "\f4fa";
  position: absolute;
  right: -0.2rem;
  bottom: -0.2rem;
  font-size: 0.7rem;
  color: green;
  background-color: white;
  border-radius: 0.3rem;
}

.icon-border {
  border: 1px solid #000080;
  border-radius: 3px;
}

.icon-light {
  color: rgba(255, 255, 255, 0.5019607843);
  border-color: rgba(255, 255, 255, 0.5019607843);
}

.app-icon-set {
  display: inline;
}

/*
.app-icon-editPen{
    background-image: url(./editicon.png);
    background-size: cover;
    width: 32px;
    height:32px;
    display: inline-block;
}
*/
.app-svg-icon {
  background-size: cover;
  aspect-ratio: 1/1;
  height: 0.8em;
  display: inline-block;
}

.app-icon-calendar {
  background-image: url(7db743d9a9c76da4c185.svg);
  margin-right: 5px;
}

.app-icon-time {
  background-image: url(771cb2a4787e32c2ca46.svg);
  margin-right: 5px;
}

.app-icon-pin {
  background-image: url(8f462c7f429a38485267.svg);
  margin-right: 5px;
}

.app-icon-service {
  background-image: url(b3e6ce25e09cdd270734.svg);
  margin-right: 5px;
}

.app-icon-language {
  background-image: url(26bf0af80384764e7f45.svg);
  margin-right: 5px;
}

.app-icon-profile {
  background-image: url(eb3c9822f3ff1851832b.svg);
  margin-right: 5px;
}

.app-icon-logout {
  background-image: url(adbdc9b91727ebecaa64.svg);
  margin-right: 5px;
}

.app-icon-carousel-back {
  background-image: url(e6b4887ae424a0fbfd0b.svg);
  margin-right: 5px;
}

.app-icon-carousel-forward {
  background-image: url(173af1a9c84655d93799.svg);
  margin-right: 5px;
}

.app-icon-user:before {
  content: "\f4d7";
}

.app-icon-back-arrow::before {
  content: "\f12c";
}

.app-icon-search::before {
  content: "\f52a";
}

.app-icon-edit::before {
  content: "\f4ca";
}

.app-icon-danger::before {
  content: "\f334";
  color: red;
}

.app-icon-chat::before {
  content: "\f24d";
}

.app-icon-menu::before {
  content: "\f479";
}

.app-icon-close::before {
  content: "\f629";
}

.app-icon-home::before {
  content: "\f425";
}

.app-icon-join-meeting::before {
  content: "\f4f3";
}

.app-icon-leave-meeting::before {
  content: "\f591";
}

.app-icon-mike-active:before {
  content: "\f490";
}

.app-icon-mike-inactive::before {
  content: "\f48f";
}

.app-icon-audio-output:before {
  content: "\f611";
}

.app-icon-camera::before {
  content: "\f21f";
}

.app-icon-linkedin::before {
  content: "\f472";
}

.app-icon-youtube::before {
  content: "\f62b";
}

.app-icon-twitterx::before {
  content: "\f8db";
}

.app-icon-facebook::before {
  content: "\f344";
}

.app-icon-instagram::before {
  content: "\f437";
}

.app-icon-copyright::before {
  content: "\f7db";
}

.app-icon-save:before {
  content: "\f7d8";
}

.app-icon-cancel:before {
  content: "\f629";
  color: red;
}

.app-icon-back:before {
  content: "\f159";
}

.app-icon-accept::before {
  content: "\f26d";
  color: green;
}

.app-icon-previous::before {
  content: " \f22d";
}

.app-icon-next::before {
  content: "\f231";
}

.app-icon-check::before {
  content: "\f26e";
}

.app-icon-circleUnchecked:before {
  content: "\f28a";
  font-size: smaller;
}

.app-icon-circleChecked:before {
  content: "\f270";
}

.app-icon-boxUnchecked:before {
  content: "\f584";
  font-size: smaller;
}

.app-icon-boxChecked:before {
  content: "\f271";
}

.app-icon-properties:before {
  content: "\f3e2";
}

.app-icon-plus::before {
  content: "\f4fa";
}

.app-icon-minus::before {
  content: "\f2e5";
}

.app-icon-delete::before {
  content: "\f5de";
}

.app-icon-menu {
  border: 1px solid #a0a0a0;
  border-radius: 3px;
}

.app-icon-borders {
  border: 1px solid #a0a0a0;
  padding: 2px;
  color: #606060;
  border-radius: 3px;
}

.app-icon-login:before {
  content: "\f2f6";
}

/*
.app-icon-logout:before{
    content:'\F1C3';
}
*/
.app-icon-diamond:before {
  content: "\f219";
}

.app-icon-bar:before {
  content: "▬";
}

/*
.app-icon-close:before{
    content: '\f410';
}
*/
.app-icon-circle:before {
  content: "\f287";
}
/*!****************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./web-app/utils/components.scss ***!
  \****************************************************************************************************************************************************/
h2.entityListTitle, h2.entityDetailTitle {
  background-color: #887bdf;
  color: white;
  padding: 10px 5px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  font-size: 1.5em;
  margin: 0;
}
h2.entityListTitle > div, h2.entityDetailTitle > div {
  color: white;
  font-size: inherit;
  position: relative;
}
h2.entityListTitle input, h2.entityListTitle select, h2.entityDetailTitle input, h2.entityDetailTitle select {
  background-color: #887bdf;
  color: white;
  border: none;
  outline: none;
}
h2.entityListTitle input, h2.entityListTitle select, h2.entityDetailTitle input, h2.entityDetailTitle select {
  border-bottom: 1px solid rgba(255, 255, 255, 0.5019607843);
}
h2.entityListTitle input::placeholder, h2.entityDetailTitle input::placeholder {
  color: rgba(255, 255, 255, 0.5019607843);
}
h2.entityListTitle .app-icon-plus, h2.entityListTitle .app-icon-save, h2.entityListTitle .app-icon-back, h2.entityDetailTitle .app-icon-plus, h2.entityDetailTitle .app-icon-save, h2.entityDetailTitle .app-icon-back {
  font-size: 1.4em;
  color: white;
}

p.entityDetailTitleButtons, p.entityListButtons {
  display: flex;
  gap: 5px;
  margin: 0;
  align-items: flex-end;
}

.entityListSearch {
  background-image: url(84011f4d1aee7d648b7a.svg);
  background-repeat: no-repeat;
  background-position: right 3px center;
  background-size: 0.8em;
  outline: none;
  border: 1px solid #a0a0a0;
  border-radius: 3px;
}

.entityDetailContainer {
  border: 1px solid #887bdf;
  padding: 0;
  border-radius: 10px;
}
.entityDetailContainer .entityDetailContent {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.entityDetailContainer .entityDetailContent p, .entityDetailContainer .entityDetailContent div {
  margin: 0;
}
.entityDetailContainer .entityDetailContent .subContent {
  width: 1104;
}
.entityDetailContainer .entityDetailContent .subContent h2, .entityDetailContainer .entityDetailContent .subContent h3 {
  background: none;
  color: #464852;
  font-size: 1.2em;
}
.entityDetailContainer .entityDetailContent .subContent h2 input, .entityDetailContainer .entityDetailContent .subContent h2 select, .entityDetailContainer .entityDetailContent .subContent h3 input, .entityDetailContainer .entityDetailContent .subContent h3 select {
  background-color: #ffffff;
  color: #464852;
  border: none;
  outline: none;
}
.entityDetailContainer .entityDetailContent .subContent h2 input, .entityDetailContainer .entityDetailContent .subContent h2 select, .entityDetailContainer .entityDetailContent .subContent h3 input, .entityDetailContainer .entityDetailContent .subContent h3 select {
  border-bottom: 1px solid #464852;
}
.entityDetailContainer .entityDetailContent .subContent h2 input::placeholder, .entityDetailContainer .entityDetailContent .subContent h3 input::placeholder {
  color: rgba(0, 0, 0, 0.5019607843);
}
.entityDetailContainer .entityDetailContent .subContent h2 .app-icon-plus, .entityDetailContainer .entityDetailContent .subContent h2 .app-icon-save, .entityDetailContainer .entityDetailContent .subContent h2 .app-icon-back, .entityDetailContainer .entityDetailContent .subContent h3 .app-icon-plus, .entityDetailContainer .entityDetailContent .subContent h3 .app-icon-save, .entityDetailContainer .entityDetailContent .subContent h3 .app-icon-back {
  font-size: 1.1em;
  color: #464852;
}
.entityDetailContainer .entityDetailContent .subContent .card {
  zoom: 0.95;
}

@media (max-width: 800px) {
  h2.entityDetailTitle {
    display: none;
  }
  .entityDetailContainer {
    border: none;
  }
}
/*!**************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./web-app/languages/languageselector.scss ***!
  \**************************************************************************************************************************************************************/
.languageSelector {
  display: flex;
  position: relative;
}
.languageSelector .languageSelectorSelected {
  cursor: pointer;
  display: flex;
  gap: 5px;
}
.languageSelector .languageItems {
  position: absolute;
  top: 1.2em;
  background-color: white;
  border: 1px solid #d0d0d0;
  border-radius: 5px;
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  right: -5px;
}
.languageSelector .languageItems .languageItem {
  cursor: pointer;
}
.languageSelector .languageItems .languageItem:hover {
  background-color: #f0f0f0;
}

button#dropdown-language {
  background-color: white;
  padding: 0 5px;
  margin: 0;
  color: black;
  border: none;
}

#dropdown-language.dropdown-toggle::after {
  content: none;
}

.dropdown-menu[data-bs-popper]#languageMenu {
  right: 0;
  left: auto;
}
/*!************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./web-app/home/webhome.scss ***!
  \************************************************************************************************************************************************/
.demoNote {
  width: 80%;
  margin: 0 auto;
  font-size: 12px;
  text-align: center;
}

.app.theme-web .languageSelector, .app.theme-web .menuSearch {
  display: none;
}

.app.theme-web.route-home, .app.theme-web.route-login {
  background-color: #131313;
  margin: 0;
  padding: 0;
  color: #ffffff;
  font-family: Inter, sans-serif;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-color: #000000 rgba(255, 255, 255, 0.1254901961);
}
.app.theme-web.route-home .authenticationProviders, .app.theme-web.route-login .authenticationProviders {
  display: flex;
}
.app.theme-web.route-home .loginOptions > div h1, .app.theme-web.route-home .loginOptions > div h2, .app.theme-web.route-home .loginOptions > div h3, .app.theme-web.route-home .loginOptions > div h4, .app.theme-web.route-home .loginOptions > div h5, .app.theme-web.route-home .loginOptions > div h6, .app.theme-web.route-home .loginOptions > div p, .app.theme-web.route-home .loginOptions > div label, .app.theme-web.route-login .loginOptions > div h1, .app.theme-web.route-login .loginOptions > div h2, .app.theme-web.route-login .loginOptions > div h3, .app.theme-web.route-login .loginOptions > div h4, .app.theme-web.route-login .loginOptions > div h5, .app.theme-web.route-login .loginOptions > div h6, .app.theme-web.route-login .loginOptions > div p, .app.theme-web.route-login .loginOptions > div label {
  color: white;
}
.app.theme-web.route-home .banner-content h2, .app.theme-web.route-home .banner-content p, .app.theme-web.route-login .banner-content h2, .app.theme-web.route-login .banner-content p {
  color: white;
}
.app.theme-web.route-home a, .app.theme-web.route-login a {
  text-decoration: none;
}
.app.theme-web.route-home .clip-text, .app.theme-web.route-login .clip-text {
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1152 34' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><linearGradient id='grad' gradientUnits='userSpaceOnUse' x1='-10' x2='10' y1='0' y2='0' gradientTransform='matrix(57.6 0 0 3.4 576 17)'><stop stop-color='rgba(53,117,254,1)' offset='0'/><stop stop-color='rgba(78,92,253,1)' offset='0.25'/><stop stop-color='rgba(103,66,252,1)' offset='0.5'/><stop stop-color='rgba(127,41,251,1)' offset='0.75'/><stop stop-color='rgba(152,16,250,1)' offset='1'/></linearGradient></defs></svg>");
  --webkit-background-clip: text;
  background-clip: text;
  padding: 0;
}
.app.theme-web.route-home .clip-text p, .app.theme-web.route-login .clip-text p {
  margin: 0;
  padding: 0;
  color: rgba(255, 255, 255, 0);
  font-weight: 700;
}
.app.theme-web.route-home body, .app.theme-web.route-login body {
  background-color: #131313;
  margin: 0;
  padding: 0;
  color: #ffffff;
  font-family: Inter, sans-serif;
}
.app.theme-web.route-home header, .app.theme-web.route-login header {
  height: 72px;
  background-color: #000000;
  margin: 0;
  padding: 0;
  display: flex;
  padding-left: 32px;
  padding-right: 32px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  transition: all linear 0.4s;
  border: none;
}
.app.theme-web.route-home nav a, .app.theme-web.route-login nav a {
  color: white;
  text-decoration: none;
  font-weight: 500;
}
.app.theme-web.route-home, .app.theme-web.route-login {
  /*
      .menu-row{
          display: flex;
          column-gap: 40px;
          align-items: center;
      }
  */
}
.app.theme-web.route-home header img.logo, .app.theme-web.route-login header img.logo {
  width: 138px;
  filter: invert(1);
}
.app.theme-web.route-home body.body-scrolled .logo img, .app.theme-web.route-login body.body-scrolled .logo img {
  filter: invert(1);
}
.app.theme-web.route-home main, .app.theme-web.route-login main {
  position: relative;
  background-color: unset;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1280 501' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><linearGradient id='grad' gradientUnits='userSpaceOnUse' x1='-10' x2='10' y1='0' y2='0' gradientTransform='matrix(64 25.05 -128 50.1 640 250.5)'><stop stop-color='rgba(21,93,252,0.2)' offset='0.19702'/><stop stop-color='rgba(152,16,250,0.1)' offset='0.5'/><stop stop-color='rgba(0,0,0,0)' offset='1'/></linearGradient></defs></svg>");
}
.app.theme-web.route-home body.body-scrolled main, .app.theme-web.route-login body.body-scrolled main {
  margin-top: 78px;
}
.app.theme-web.route-home footer, .app.theme-web.route-login footer {
  background-color: #000000;
  width: 100vw;
}
.app.theme-web.route-home .footerContent, .app.theme-web.route-login .footerContent {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
@media (width < 800px) {
  .app.theme-web.route-home .footerContent, .app.theme-web.route-login .footerContent {
    flex-direction: column;
  }
}
.app.theme-web.route-home article, .app.theme-web.route-login article {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin: 32px;
}
.app.theme-web.route-home section, .app.theme-web.route-login section {
  display: flex;
  flex-direction: row;
  gap: 20px;
}
.app.theme-web.route-home .banner, .app.theme-web.route-login .banner {
  height: 436px;
  border-radius: 16px;
  flex-grow: 1;
  position: relative;
  background-position: center;
  background-size: cover;
  display: flex;
}
.app.theme-web.route-home .shader, .app.theme-web.route-login .shader {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3019607843);
}
.app.theme-web.route-home .banner-content, .app.theme-web.route-login .banner-content {
  position: relative;
  z-index: 100;
  display: flex;
  flex-direction: column;
  font-weight: 500;
  font-size: 20px;
  height: 100%;
  margin: 20px;
  gap: 20px;
}
.app.theme-web.route-home .banner-content h2, .app.theme-web.route-login .banner-content h2 {
  font-family: "Como W01 Heavy";
  font-size: 38px;
  margin: 0;
}
.app.theme-web.route-home .banner-content div, .app.theme-web.route-home .banner-content p, .app.theme-web.route-login .banner-content div, .app.theme-web.route-login .banner-content p {
  margin: 0;
}
.app.theme-web.route-home .banner-button, .app.theme-web.route-login .banner-button {
  position: absolute;
  bottom: 40px;
}
.app.theme-web.route-home .top-banner, .app.theme-web.route-login .top-banner {
  justify-content: center;
  align-items: center;
}
.app.theme-web.route-home .top-banner .banner-content, .app.theme-web.route-login .top-banner .banner-content {
  align-items: center;
  justify-content: center;
}
.app.theme-web.route-home .join-banner, .app.theme-web.route-login .join-banner {
  width: 320px;
  background-image: url(9ed190cd2300e87de943.avif);
}
.app.theme-web.route-home .find-banner, .app.theme-web.route-login .find-banner {
  width: 320px;
  background-image: url(b6428cb7b6279e4b4893.avif);
}
@media (width < 1200px) {
  .app.theme-web.route-home section, .app.theme-web.route-login section {
    flex-direction: column;
  }
  .app.theme-web.route-home .join-banner, .app.theme-web.route-home .find-banner, .app.theme-web.route-login .join-banner, .app.theme-web.route-login .find-banner {
    width: unset;
  }
}
.app.theme-web.route-home .bottom-banner, .app.theme-web.route-login .bottom-banner {
  background-color: #3575FE;
  align-items: center;
  justify-content: center;
}
.app.theme-web.route-home .bottom-banner .banner-content, .app.theme-web.route-login .bottom-banner .banner-content {
  align-items: center;
  justify-content: center;
}
.app.theme-web.route-home .navibutton, .app.theme-web.route-login .navibutton {
  display: inline-block;
  height: 38px;
  line-height: 38px;
  border-radius: 18px;
  padding: 0 20px;
  cursor: pointer;
}
.app.theme-web.route-home .login-button, .app.theme-web.route-login .login-button {
  border: 1px solid #000000;
  color: #000000;
}
.app.theme-web.route-home .blue-button, .app.theme-web.route-login .blue-button {
  background-color: #3575FE;
  color: white;
}
.app.theme-web.route-home .white-button, .app.theme-web.route-login .white-button {
  background-color: #ffffff;
  color: #000000;
}
.app.theme-web.route-home .orange-button, .app.theme-web.route-login .orange-button {
  background-color: #E09797;
  color: white;
}
.app.theme-web.route-home body.body-scrolled .login-button, .app.theme-web.route-login body.body-scrolled .login-button {
  border: 1px solid #ffffff;
  color: #ffffff;
}
.app.theme-web.route-home .center-content, .app.theme-web.route-login .center-content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
@media (width < 640px) {
  .app.theme-web.route-home .center-content, .app.theme-web.route-login .center-content {
    flex-direction: column;
  }
}
.app.theme-web.route-home .menu-toggle, .app.theme-web.route-login .menu-toggle {
  cursor: pointer;
  display: none;
}
.app.theme-web.route-home body.body-scrolled .menu-toggle, .app.theme-web.route-login body.body-scrolled .menu-toggle {
  filter: invert(1);
}
.app.theme-web.route-home .hidden, .app.theme-web.route-login .hidden {
  display: none;
}
@media (width < 800px) {
  .app.theme-web.route-home nav.menu-closed .menu-row, .app.theme-web.route-login nav.menu-closed .menu-row {
    display: none;
  }
  .app.theme-web.route-home .menu-toggle, .app.theme-web.route-login .menu-toggle {
    display: block;
  }
  .app.theme-web.route-home #menu-open-icon, .app.theme-web.route-login #menu-open-icon {
    display: none;
  }
  .app.theme-web.route-home nav.menu-closed #menu-open-icon, .app.theme-web.route-login nav.menu-closed #menu-open-icon {
    display: unset;
  }
  .app.theme-web.route-home nav.menu-closed #menu-close-icon, .app.theme-web.route-login nav.menu-closed #menu-close-icon {
    display: none;
  }
  .app.theme-web.route-home .menu-row, .app.theme-web.route-login .menu-row {
    position: absolute;
    right: 20px;
    top: 50px;
    flex-direction: column;
    gap: 10px;
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    align-items: flex-start;
  }
  .app.theme-web.route-home .menu-row a, .app.theme-web.route-login .menu-row a {
    color: black;
    line-height: unset;
    border: unset;
    display: unset;
    padding: unset;
    height: unset;
  }
  .app.theme-web.route-home .menu-row a.login-button, .app.theme-web.route-login .menu-row a.login-button {
    border-radius: 0;
    width: 100%;
    padding-top: 10px;
    border-top: 1px solid #a0a0a0;
    color: #3575FE !important;
  }
  .app.theme-web.route-home body.body-scrolled .menu-row a, .app.theme-web.route-login body.body-scrolled .menu-row a {
    color: black;
  }
}

.popupHolder {
  position: fixed;
  z-index: 20000;
  bottom: 0;
  left: 0;
  right: 0;
  top: 72px;
  background-color: rgba(0, 0, 0, 0.5019607843);
}
.popupHolder .popupContent {
  position: absolute;
  border-radius: 10px;
  border: 1px solid #f0f0f0;
  background-color: white;
  transition: all linear 0.4s;
  padding: 10px;
  background-color: white;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  align-items: center;
  width: 320px;
  left: calc(50% - 160px);
  height: 200px;
  top: calc(50vh - 100px);
}
.popupHolder .popupContent p {
  color: black !important;
}
.popupHolder .popupContent .form-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.popupHolder .popupContent .form-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.app.theme-web.route-wwwpartners {
  background-image: url(13b167c490db05f09339.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top right;
}
.app.theme-web.route-wwwpartners .lookingFor {
  width: 100%;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.app.theme-web.route-wwwpartners .lookingFor h3 {
  color: rgba(255, 255, 255, 0.8156862745);
  text-align: center;
}
.app.theme-web.route-wwwpartners a {
  color: white;
}
.app.theme-web.route-wwwpartners a.active {
  color: wheat;
}
.app.theme-web.route-wwwpartners .lookingForList {
  width: 100%;
  display: flex;
  gap: 20px;
}
.app.theme-web.route-wwwpartners .lookingForCard {
  width: 140px;
  height: 120px;
  background-color: rgba(255, 255, 255, 0.8156862745);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.app.theme-web.route-wwwpartners .lookingForCard img {
  height: 80px;
}
.app.theme-web.route-wwwpartners .lookingForDescription {
  flex-grow: 1;
  background-color: rgba(255, 255, 255, 0.6274509804);
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
}
.app.theme-web.route-wwwpartners .lookingForDescription p {
  margin: 0;
  padding: 0;
  font-size: 1.3em;
  text-align: center;
}
.app.theme-web.route-wwwpartners header {
  top: 0;
  left: 0;
  height: 72px;
  border-bottom: 3px solid rgba(255, 255, 255, 0.1254901961);
}
.app.theme-web.route-wwwpartners img.logo {
  height: 3em;
  filter: invert(1);
}
.app.theme-web.route-wwwpartners main {
  background-position-y: 10px;
  overflow: hidden;
  margin-top: 78px;
  background-color: unset;
}
.app.theme-web.route-wwwpartners footer {
  position: absolute;
  top: 100vh;
}
.app.theme-web.route-wwwpartners .mainContent {
  width: 100%;
  padding: 0;
  position: relative;
}
.app.theme-web.route-wwwpartners .hiring {
  background-color: rgba(255, 255, 255, 0.6274509804);
  position: absolute;
  bottom: 0;
  border-top-right-radius: 20px;
  padding: 20px;
}
.app.theme-web.route-wwwpartners .hiringList {
  width: 500px;
  display: flex;
  gap: 20px;
}
.app.theme-web.route-wwwpartners .hiringCard {
  width: 140px;
  height: 120px;
  background-color: rgba(255, 255, 255, 0.6274509804);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.app.theme-web.route-wwwpartners .hiringCard img {
  height: 80px;
}
.app.theme-web.route-wwwpartners .getApps {
  display: flex;
  gap: 20px;
}
.app.theme-web.route-wwwpartners .getApps img {
  height: 40px;
}

@media (width < 800px) {
  header nav .menuRow.visible > a, header nav .menuButton a {
    color: black !important;
  }
  .lookingFor {
    flex-direction: column;
    transform: scale(0.8);
  }
  .hiring {
    transform: scale(0.6);
    transform-origin: bottom left;
  }
  .banner h2, .banner p {
    text-align: center;
  }
}
/*!*****************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./web-app/index.scss ***!
  \*****************************************************************************************************************************************/
html, body {
  font-family: "Inter", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  color: #303060;
}

html, body, div, p, th, td, input, select, textarea, button {
  font-size: 12pt;
  color: #464852;
}

h1, h2, h3, h4, h5, h6 {
  color: #121619;
}

.clickable {
  cursor: pointer;
}

.hidden {
  display: none;
}

a {
  cursor: pointer;
  color: #121619;
  text-decoration: none;
}

a.active {
  color: #3864ED;
}

.form-group {
  margin: 5px 0;
}

.form-control {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--bs-body-color);
  appearance: none;
  background-color: #ffffff;
  background-clip: padding-box;
  border: 1px solid #d0d0d0;
  border-radius: 3px;
}

*, *::before, *::after {
  box-sizing: border-box;
}

table {
  width: 100%;
  margin: 10px 0;
}

th {
  text-align: left;
}

th, td {
  padding: 5px;
}

th {
  border-bottom: 1px solid #d0d0d0;
}

td {
  border-bottom: 1px dotted #f0f0f0;
}

table.table-striped tbody tr:nth-last-of-type(odd) td {
  background-color: #f0f0f0;
}

button {
  padding: 8px;
}

button.primary-button {
  background-color: #3575fe;
  color: white;
}

button.rounded-button {
  border-radius: 1000px;
}
/*!*********************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./web-app/home/home.scss ***!
  \*********************************************************************************************************************************************/
.app.route-home {
  /*
  header {
      border:none;
      box-shadow: 0 4px 25px rgba(0, 0, 0, .1);
      top:1em;
      left: 5px;
      right: 0;
      height: 6em;
      width: auto;
  }

  .mainContent{
      width: 100%;
  }
  */
}

.mainfeature td {
  font-weight: bold;
}

main.notLoggedIn .mainContent.defaultHome {
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: linear-gradient(306deg, #7262D9 25.61%, #3C3473 73.75%);
}
main.notLoggedIn .mainContent.defaultHome .defaultHomeContent {
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right bottom;
  background-image: url(894684c39955751fdad9.png);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-left: 10%;
}
main.notLoggedIn .mainContent.defaultHome .defaultHomeContent div {
  width: calc(100% - 650px);
}
main.notLoggedIn .mainContent.defaultHome .defaultHomeContent div p {
  color: white;
  font-size: 2em;
}
main.notLoggedIn .mainContent.defaultHome .defaultHomeContent div h2 {
  color: white;
  font-size: 5em;
}
main.notLoggedIn .mainContent.defaultHome .defaultHomeContent div a {
  color: white;
}
main.notLoggedIn .mainContent.defaultServices {
  width: 80%;
  max-width: 980px;
}
main.notLoggedIn .mainContent.defaultServices .homeServicesContent .servicesHighlights {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 30px;
  gap: 20px;
}
main.notLoggedIn .mainContent.defaultServices .homeServicesContent .servicesHighlights .serviceHighlight {
  background-color: #d0d0d0;
  width: 300px;
  height: 280px;
}
main.notLoggedIn .mainContent.defaultTeam {
  width: 80%;
  max-width: 980px;
}
main.notLoggedIn .mainContent.defaultTeam .homeTeamContent .teamList {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
main.notLoggedIn .mainContent.defaultTeam .homeTeamContent .teamList .teamMember {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
main.notLoggedIn .mainContent.defaultTeam .homeTeamContent .teamList .teamMember .teamMemberImage {
  width: 180px;
  height: 180px;
  background-color: #d0d0d0;
  overflow: hidden;
}
main.notLoggedIn .mainContent.defaultTeam .homeTeamContent .teamList .teamMember .teamMemberImage img {
  width: 180px;
}
main.notLoggedIn .mainContent.defaultTeam .homeTeamContent .teamList .teamMember .teamMemberDescription {
  flex-grow: 1;
}

@media (max-width: 1200px) {
  main.notLoggedIn .mainContent.defaultHome .defaultHomeContent div p {
    font-size: 1.5em;
  }
  main.notLoggedIn .mainContent.defaultHome .defaultHomeContent div h2 {
    font-size: 3em;
  }
}
@media (orientation: portrait) {
  main.notLoggedIn .mainContent.defaultHome {
    max-width: none;
    margin: 0;
    padding: 0;
    background: linear-gradient(306deg, #7262D9 25.61%, #3C3473 73.75%);
    position: relative;
  }
  main.notLoggedIn .mainContent.defaultHome .defaultHomeContent {
    width: 100%;
    height: 100%;
    display: block;
    background-size: auto 50%;
    background-repeat: no-repeat;
    background-position: right bottom;
    background-image: url(894684c39955751fdad9.png);
    padding: 0;
    position: relative;
  }
  main.notLoggedIn .mainContent.defaultHome .defaultHomeContent div {
    width: 80%;
    margin: 10px auto;
  }
  main.notLoggedIn .mainContent.defaultHome .defaultHomeContent div p {
    color: white;
    font-size: 1.5em;
  }
  main.notLoggedIn .mainContent.defaultHome .defaultHomeContent div h2 {
    color: white;
    font-size: 3em;
  }
}
.homeMain.userHome {
  min-height: 500px;
}

@keyframes web-section-1 {
  from {
    background-position: 50% 0;
    height: 100vh;
    font-size: calc(4vw + 1em);
  }
  to {
    background-position: 50% 100%;
    height: 20vh;
    font-size: 2em;
  }
}
#web-section-1 {
  background-color: blue;
  border: 1px solid black;
  animation: web-section-1 linear forwards;
  animation-timeline: scroll();
  animation-range: 0vh 20vh;
}

#web-section-2 {
  background-color: green;
  border: 1px solid black;
  animation: web-section-1 linear forwards;
  animation-timeline: scroll();
  animation-range: 0vh 40vh;
}

#web-section-3 {
  background-color: red;
  border: 1px solid black;
  animation: web-section-1 linear forwards;
  animation-timeline: scroll();
  animation-range: 0vh 60vh;
}

:root {
  --card-height: calc(100vh - 8em);
  --card-margin: 4vw;
  --card-top-offset: 1em;
  --outline-width: 0px;
}

.webcard_content {
  transform-origin: 50% 0%;
  will-change: transform;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  background-position: center;
  background-size: cover;
  height: calc(var(--card-height) - 3em);
}
.webcard_content img {
  height: calc(var(--card-height) - 4em);
}

#card_1 {
  --index: 1;
}

#card_2 {
  --index: 2;
}

#card_3 {
  --index: 3;
}

#card_4 {
  --index: 4;
}

#card_1 .webcard_content div {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
}

#card_2 .webcard_content div {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#card_3 .webcard_content div {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#card_4 .webcard_content div {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#card_4 .webcard_content div h2, #card_4 .webcard_content div p {
  color: white;
}

@supports (animation-timeline: view()) {
  .webcard {
    --index0: calc(var(--index) - 1); /* 0-based index */
    --reverse-index: calc(var(--numcards) - var(--index0)); /* reverse index */
    --reverse-index0: calc(var(--reverse-index) - 1); /* 0-based reverse index */
    position: sticky;
    top: 0;
    padding-top: 1em;
    /*padding-top: calc(var(--index) * var(--card-top-offset));*/
  }
  @keyframes scale {
    to {
      transform: scale(max(0.1 - 0.1 * var(--reverse-index), 0));
      opacity: 0;
    }
  }
  #webcards {
    --numcards: 4;
    --card-top-offset:1em;
    view-timeline-name: --cards-element-scrolls-in-body;
    list-style: none;
    outline: calc(var(--outline-width) * 10) solid hotpink;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(var(--numcards), calc(var(--card-height) - 4em));
    gap: 20px;
    padding: 20px;
    margin: 0;
    padding-bottom: calc(var(--numcards) * var(--card-top-offset));
    margin-bottom: 20px;
  }
  .webcard_content {
    --start-range: calc(var(--index0) / var(--numcards) * 100%);
    --end-range: calc((var(--index)) / var(--numcards) * 100%);
    animation: linear scale forwards;
    animation-timeline: --cards-element-scrolls-in-body;
    animation-range: exit-crossing var(--start-range) exit-crossing var(--end-range);
    /*box-shadow: 0 0.2em 1em rgba(0, 0, 0, 0.1), 0 1em 2em rgba(0, 0, 0, 0.1);*/
    /*background: rgb(255, 255, 255);*/
    color: rgb(10, 5, 7);
    overflow: hidden;
    /*
    display: grid;
    grid-template-areas: "text img";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    */
    outline: var(--outline-width) solid blue;
  }
}
@keyframes reveal {
  from {
    opacity: 0;
    clip-path: inset(0% 0% 0% 100%);
    padding-top: 0;
  }
  to {
    opacity: 1;
    clip-path: inset(0% 0% 0% 0%);
    padding-top: 400px;
  }
}
@keyframes hide {
  from {
    opacity: 1;
    clip-path: inset(0% 0% 0% 0%);
    padding-top: 0;
  }
  to {
    opacity: 0;
    clip-path: inset(0% 100% 0% 0%);
    padding-top: 400px;
  }
}
.webopening {
  height: 960px;
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
}

.webopeningContent {
  /*    position:absolute;*/
  bottom: 0;
  height: 960px;
  width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.webopeningContent img {
  height: 480px;
}

.hideOnScroll {
  view-timeline-axis: block;
  position: absolute;
  top: 0;
  animation: linear hide both;
  animation-timeline: view();
  animation-range: 35% 60%;
  height: 960px;
  width: 880px;
}

.showOnScroll {
  view-timeline-axis: block;
  position: absolute;
  top: 0;
  animation: linear reveal both;
  animation-timeline: view();
  animation-range: 35% 60%;
  height: 960px;
  width: 880px;
}

.solution p {
  font-size: 20pt;
}
/*!********************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./web-app/services/servicecard.scss ***!
  \********************************************************************************************************************************************************/
/*
.serviceCardList{
    display:inline-flex;
    flex-direction: row;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin: auto;

    .serviceCard{
        width: $card-width;
        height: $card-height;
        display: flex;
        border: $card-border;
        border-radius: $card-border-radius;
        flex-direction: column;
        cursor:pointer;
        padding: 15px;

        .serviceCardImage{
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            height: 214px;
            background-color: #f7f7f8;
        }

        h3{
            text-align: center;
            font-size: 1.5em;
            margin:0;
        }
    }
}

*/
/*!***********************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./web-app/categories/categorycard.scss ***!
  \***********************************************************************************************************************************************************/
/*
.categoryCardList{
    display:inline-flex;
    flex-direction: row;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin: auto;

    .categoryCard{
        min-width: $card-width;
        height: $card-height;
        display:inline-flex;
        border: $card-border;
        border-radius: $card-border-radius;
        flex-direction: column;
        cursor:pointer;
        padding: 15px;
        flex-grow:1;

        .categoryCardImage{
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            height: 214px;
            background-color: #f7f7f8;
        }

        h3{
            text-align: center;
            font-size: 1.5em;
            margin:0;
        }
    }
}
*/
/*!****************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./web-app/utils/formfields.scss ***!
  \****************************************************************************************************************************************************/
.nameAndDescription {
  border: 1px solid #a0a0a0;
  border-radius: 1px;
  padding: 10px;
  position: relative;
}
.nameAndDescription p {
  position: absolute;
  right: 0;
  margin-left: -10px;
  top: 0;
  margin-top: -0.5em;
  background-color: #f3f3d5;
  border: 1px solid #a0a0a0;
  border-radius: 5px;
  padding: 3px;
}

.formRow {
  display: flex;
  gap: 5px 20px;
  flex-wrap: wrap;
}
.formRow .form-group {
  flex-grow: 1;
  min-width: 320px;
}

.app-button {
  display: inline-flex;
  padding: 12px 20px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 10px;
}

.standard-button {
  background-color: #F2F2F3;
}

.ok-button {
  background-color: #3864ED;
  color: white;
}

button:disabled {
  opacity: 50%;
}
/*!*********************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./web-app/categories/categories.scss ***!
  \*********************************************************************************************************************************************************/
.adminCategoryCard h3 span {
  font-size: 0.8em;
}
.adminCategoryCard h3, .adminCategoryCard p {
  display: flex;
  justify-content: space-between;
}

.rootCategoryDescription {
  border: 1px solid #a0a0a0;
  border-radius: 5px;
  padding: 10px;
  opacity: 0.8;
  position: relative;
}
.rootCategoryDescription p {
  position: absolute;
  right: 0;
  margin-left: -10px;
  top: 0;
  margin-top: -0.5em;
  background-color: #f3f3d5;
  border: 1px solid #a0a0a0;
  border-radius: 5px;
  padding: 3px;
}
.rootCategoryDescription h4 {
  font-size: 1.2em;
  font-weight: bold;
}

.categoryConstants {
  display: flex;
  gap: 20px;
}
.categoryConstants p {
  display: flex;
  gap: 5px;
}
.categoryConstants p .constantTitle {
  font-weight: bold;
}
/*!************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./web-app/home/widgets.scss ***!
  \************************************************************************************************************************************************/
.widget {
  width: 368px;
  height: 246px;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  background-size: 32px;
  background-blend-mode: color;
  background-color: white;
  background-repeat: no-repeat;
  background-position: right top;
}
.widget h3 {
  position: absolute;
  top: 0;
  width: 100%;
  height: 2em;
  color: #202020;
  margin: 0;
  font-size: 1em;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-bottom: 1px dotted #f0f0f0;
}
.widget .widgetSubTitle {
  font-style: italic;
  font-size: 0.9em;
}
.widget .widgetContent {
  position: absolute;
  top: 2em;
  left: 0;
  width: 100%;
  bottom: 0;
  padding: 10px;
}

.widget:hover {
  border-color: #3575fe;
  box-shadow: #f8f8f8 0 2px 3px 3px;
}

.widgetChartArea {
  height: 80%;
}

.widgetAreaOverview .widgetContent {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.widgetCountryOverview .widgetContent .countryInfo {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.widgetCountryOverview .widgetContent .countryInfo p {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
}

.widgetAreaCard {
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  padding: 5px;
}
.widgetAreaCard div {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}
.widgetAreaCard div p {
  margin: 0;
  padding: 0;
}

.widgetUnverifiedSuppliers .widgetUnverifiedSupplierRow {
  display: flex;
  gap: 20px;
}
.widgetUnverifiedSuppliers .widgetUnverifiedSupplierRow .supplier {
  font-weight: bold;
  font-size: 1.1em;
}
.widgetUnverifiedSuppliers .widgetUnverifiedSupplierRow .user {
  margin-left: 5px;
}

.widgetOrdersToBeAccepted .widgetPurchaseRow, .widgetLatestPurchases .widgetPurchaseRow {
  display: flex;
  gap: 20px;
  cursor: pointer;
  margin-bottom: 10px;
  border: 1px solid #d0d0d0;
  border-radius: 5px;
  padding: 5px;
  position: relative;
}
.widgetOrdersToBeAccepted .widgetPurchaseRow p, .widgetLatestPurchases .widgetPurchaseRow p {
  margin: 0;
  padding: 0;
}

.widgetContainer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.widget.widgetPurchase .widgetPurchaseRow {
  cursor: pointer;
}
.widget.widgetPurchase .widgetPurchaseRow p {
  margin: 3px;
}
.widget.widgetPurchase .widgetPurchaseRow p.purchaseName {
  font-size: 1.1em;
  font-weight: bold;
  margin-bottom: 5px;
}
.widget.widgetPurchase .widgetPurchaseRow .addressLocation {
  display: none;
}
.widget.widgetPurchase .widgetPurchaseRow .purchaseStatus.purchaseStatusHighlight {
  color: red;
}

/*
@media (max-width: 765px){

    .widget.widgetPurchase{
        border:none;
        height: auto;

        .widgetContent{
            position: relative;
            top:unset;
            left:unset;
            bottom:unset;
        }

        .widgetPurchaseRow{
            display: flex;
            justify-content: space-between;
            cursor:pointer;

            >div{
                width:50%;
            }

            p{
                margin:0;
            }
        }

        .purchaseService{
            font-weight: bold;
            font-size: 1.1em;
        }

        .purchaseName{
            font-size:0.8em;
        }

        .purchaseStatus{
            font-size:0.6em;
        }

        .purchaseStatus.purchaseStatusHighlight{
            color:red;
        }

        .formattedAddress, .addressLocation, .purchaseAmount{
            display:none;
        }

        h3{
            display:none;
        }
    }
}
*/
/*!***************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./web-app/address/address.scss ***!
  \***************************************************************************************************************************************************/
.addressCardList {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.addressCardList .addressCard {
  width: 160px;
  /* height: 8em; */
  border: 1px solid #a0a0a0;
  border-radius: 5px;
  padding: 5px;
  flex-grow: 1;
}
.addressCardList .addressCard h3 {
  font-size: 1.1em;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #d9d9d9;
}
.addressCardList .addressCard p {
  margin: 0;
  padding: 0;
}
.addressCardList .addressCard.selectedAddress {
  border-color: #3575fe;
  flex-direction: column;
  background-color: unset;
}
.addressCardList .addressCard.selectedAddress h3 {
  background-color: #eff6ff;
  color: #3575fe;
}
.addressCardList .addAddressContent {
  display: flex;
  justify-content: center;
  align-items: center;
}
.addressCardList .addAddressContent p {
  font-size: 40px;
}

.addressInput {
  display: flex;
  gap: 10px;
}
.addressInput .addressForm {
  width: 320px;
}

.formattedAddress {
  margin: 5px 0;
}
.formattedAddress p {
  margin: 0;
}

.formattedAddress.compactAddress {
  margin: 0;
}

.addressLocation p {
  font-size: 0.8em;
}
.addressLocation p .locationTitle {
  font-weight: bold;
  margin-right: 5px;
}
/*!*****************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./web-app/services/services.scss ***!
  \*****************************************************************************************************************************************************/
@charset "UTF-8";
.adminServiceCard h3 span {
  font-size: 0.8em;
}
.adminServiceCard h3, .adminServiceCard p {
  display: flex;
  justify-content: space-between;
}

.rootServiceDescription {
  border: 1px solid #a0a0a0;
  border-radius: 5px;
  padding: 10px;
  opacity: 0.8;
  position: relative;
}
.rootServiceDescription p {
  position: absolute;
  right: 0;
  margin-left: -10px;
  top: 0;
  margin-top: -0.5em;
  background-color: #f3f3d5;
  border: 1px solid #a0a0a0;
  border-radius: 5px;
  padding: 3px;
}
.rootServiceDescription h4 {
  font-size: 1.2em;
  font-weight: bold;
}

.serviceConstants {
  display: flex;
  gap: 20px;
}
.serviceConstants p {
  display: flex;
  gap: 5px;
}
.serviceConstants p .constantTitle {
  font-weight: bold;
}

.viewServiceSuppliers {
  width: 100%;
}

.serviceListCategoryPopup {
  position: absolute;
  background-color: white;
  color: black;
  z-index: 2000;
  width: max-content;
}
.serviceListCategoryPopup p {
  cursor: pointer;
  padding: 2px 5px;
  margin: 0;
}

.openPopup, .hidePopup {
  margin-left: 10px;
  opacity: 90%;
  font-size: 0.9em;
}

.openPopup:after {
  content: "▼";
}

.hidePopup:after {
  content: "▲";
}

.viewServiceDetail {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.viewServiceDetail .cardImage {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  height: 214px;
  background-color: #f7f7f8;
  width: 300px;
}
.viewServiceDetail .cardDescription {
  min-width: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media (max-width: 800px) {
  .viewServiceDetail .cardImage {
    width: 100%;
  }
  .viewServiceDetail .cardDescription {
    width: 100%;
  }
}
/*!**********************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./web-app/categories/rootlisting.scss ***!
  \**********************************************************************************************************************************************************/
/*
.mainContent.rootCategoryDetail{
    display: flex;
    flex-direction: column;
    gap: 20px;


}


.mainContent.rootListing .cardListHolder{
    zoom: 0.8
}
*/
/*
.rootCategoryListing{
    display:flex;
    flex-direction: column;
    gap: 10px;

    .rootCategory{
        display:block;
        border:1px solid #a0a0a0;
        margin: 5px 0;

        h3{
            display: flex;
            justify-content: space-between;
        }

        .rootCategoryServices{
            display:flex;

            .rootService{
                display:block;
                margin: 5px;
                width: 320px;
                height: 160px;
                border: 1px solid #a0a0a0;
            }
        }
    }
}
*/
.categoryCountries, .categoryServices {
  border: 1px solid #d0d0d0;
  border-radius: 10px;
  padding: 10px;
}

.categoryCountryList, .serviceCountryList {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.categoryCountryList .categoryCountry, .categoryCountryList .serviceCountry, .serviceCountryList .categoryCountry, .serviceCountryList .serviceCountry {
  padding: 5px;
  border-radius: 5px;
  border: 1px solid #d0d0d0;
  cursor: pointer;
}
.categoryCountryList .categoryCountry p, .categoryCountryList .serviceCountry p, .serviceCountryList .categoryCountry p, .serviceCountryList .serviceCountry p {
  margin: 0;
  padding: 0;
}
.categoryCountryList .categoryCountry.countryHasCategory, .categoryCountryList .serviceCountry.countryHasService, .serviceCountryList .categoryCountry.countryHasCategory, .serviceCountryList .serviceCountry.countryHasService {
  background-color: green;
}
.categoryCountryList .categoryCountry.countryHasCategory p, .categoryCountryList .serviceCountry.countryHasService p, .serviceCountryList .categoryCountry.countryHasCategory p, .serviceCountryList .serviceCountry.countryHasService p {
  color: white;
}

.rootCategoryInfo, .rootServiceInfo {
  display: flex;
  gap: 20px;
  align-items: flex-end;
}
.rootCategoryInfo .rootCategoryForm, .rootCategoryInfo .rootServiceForm, .rootServiceInfo .rootCategoryForm, .rootServiceInfo .rootServiceForm {
  flex-grow: 1;
}
.rootCategoryInfo .rootCategoryImage, .rootCategoryInfo .rootServiceImage, .rootServiceInfo .rootCategoryImage, .rootServiceInfo .rootServiceImage {
  display: flex;
  background-color: #d0d0d0;
  width: 184px;
  height: 123px;
  border-radius: 5px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  align-items: flex-end;
  justify-content: center;
}
.rootCategoryInfo .rootCategoryImage p, .rootCategoryInfo .rootServiceImage p, .rootServiceInfo .rootCategoryImage p, .rootServiceInfo .rootServiceImage p {
  margin: 0;
  padding: 0;
}

.groups {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.optionGroupForm {
  border-bottom: 1px solid #d0d0d0;
  padding-bottom: 5px;
}

.optionGroupEdit {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.optionGroupNoEdit .groupHeader {
  display: flex;
  gap: 20px;
  justify-content: space-between;
}

.optionNoEdit {
  display: flex;
  gap: 20px;
  justify-content: space-between;
  padding-left: 20px;
}

.optionEditing {
  padding-left: 20px;
}
.optionEditing > div {
  background-color: #f0f0f0;
  padding: 5px;
  border-radius: 5px;
}
/*!******************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./web-app/utils/messageboxes.scss ***!
  \******************************************************************************************************************************************************/
.messageBoxBackground {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1254901961);
}
.messageBoxBackground .messageBoxContainer {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 320px;
  margin-left: -60px;
  margin-top: -120px;
  background-color: white;
  border: 1px solid #d0d0d0;
  border-radius: 5px;
  overflow: hidden;
}
.messageBoxBackground .messageBoxContainer h3 {
  padding: 2px 5px;
  background-color: #887bdf;
  color: white;
  font-size: 1.2em;
  margin: 0;
}
.messageBoxBackground .messageBoxContainer p {
  padding: 2px 5px;
}
.messageBoxBackground .messageBoxContainer .messageBoxButtons {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 5px 0;
}
/*!*****************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./web-app/services/carousel.scss ***!
  \*****************************************************************************************************************************************************/
.categoryCarousels {
  width: 90%;
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding-bottom: 30px;
}
.categoryCarousels h3 {
  margin: 5px 0;
}
.categoryCarousels p {
  margin: 5px 0;
}

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

.carousel {
  overflow: hidden;
  position: relative;
}

.carousel_container {
  display: flex;
  padding: 3px 0;
}

.carousel_viewport {
  margin: 0;
}

.carouselControl {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  height: 100%;
  overflow: hidden;
  top: 0;
  display: none;
}
.carouselControl .app-svg-icon {
  height: 30px;
}

.carousel:hover .carouselControl {
  display: flex;
}

.carouselPrev {
  left: 0;
}

.carouselNext {
  right: 0;
}

.carousel_card {
  flex: 0 0 146px;
  width: 146px;
  height: 220px;
  display: inline-flex;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  flex-direction: column;
  cursor: pointer;
  padding: 0;
  margin-right: 10px;
  overflow: hidden;
  background-color: #ffffff;
}
.carousel_card .cardPromotion {
  position: absolute;
  border: 1px solid #d0d0d0;
  border-radius: 5px;
  padding: 3px;
  margin-top: 5px;
  margin-left: 7px;
  background-color: #887bdf;
  color: white;
}
.carousel_card .cardImage {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 146px;
  background-color: unset;
}
.carousel_card .cardTitle {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
  padding-top: 12px;
}
.carousel_card h3 {
  text-align: center;
  font-size: 16px;
  margin: 0;
  height: 28pt;
  font-weight: 400;
}
.carousel_card p {
  margin: 0;
  padding: 0;
  text-align: center;
}

.carousel_card:hover {
  border-color: #3575fe;
  box-shadow: #f8f8f8 0 2px 3px 3px;
}

.servicePopupHolder {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0;
}
.servicePopupHolder .servicePopupContent {
  position: absolute;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border: 1px solid #f0f0f0;
  bottom: 0;
  width: 320px;
  height: 0;
  left: calc(50% - 160px);
  background-color: white;
  transition: all linear 0.4s;
  padding: 10px;
  background-color: white;
  display: flex;
  flex-direction: column;
}

.servicePopupHolder.servicePopupOpen {
  height: calc(100vh - 72px);
  background-color: rgba(0, 0, 0, 0.1254901961);
}
.servicePopupHolder.servicePopupOpen .servicePopupContent {
  height: 600px;
}

@media (width > 800px) {
  .carousel_card {
    flex: 0 0 175.2px;
    width: 175.2px;
    height: 264px;
  }
  .carousel_card .cardImage {
    height: 175.2px;
  }
  .servicePopupHolder .servicePopupContent {
    width: 640px;
    left: calc(50vw - 320px);
    border-radius: 10px;
  }
  .servicePopupHolder.servicePopupOpen .servicePopupContent {
    top: 20px;
    bottom: unset;
  }
}
/*!**********************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./web-app/purchases/makepurchase.scss ***!
  \**********************************************************************************************************************************************************/
.makePurchase .entityDetailContent {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.optionGroup {
  border-radius: 10px;
  margin-top: 5px !important;
}
.optionGroup h4, .optionGroup h5 {
  margin: 5px 0 5px 0;
}
.optionGroup .optionSelected {
  background-color: rgba(136, 123, 223, 0.1019607843);
}
.optionGroup button.acceptOptions {
  margin-top: 5px;
  background-color: #3575fe;
  color: white;
}

.purchaseConfirm .optionGroup.groupAnswered.groupClosed {
  background-color: #eff6ff;
  padding: 10px;
}
.purchaseConfirm .optionGroup.groupAnswered.groupClosed .groupAnswers {
  padding-left: 24px;
}

.optionGroup.groupClosed h4 {
  margin: 0;
}

.optionGroup.groupOpen {
  border-radius: 0;
  border-left: 3px solid #3575fe;
  padding-left: 5px;
}

.optionItem {
  padding: 3px;
}

.optionItem:hover {
  background-color: #eff6ff;
}

.timeInput {
  margin: 5px 0;
}

.timeValueHolder {
  display: flex;
  gap: 5px;
}
.timeValueHolder .timeValueCell {
  border: 1px solid #f0f0f0;
  border-radius: 5px;
  padding: 5px;
  cursor: pointer;
  width: 90px;
  text-align: center;
  flex-shrink: 0;
}
.timeValueHolder .timeValueCell:hover {
  border-color: #3575fe;
}
.timeValueHolder .timeValueCellSelected {
  background-color: #eff6ff;
}
.timeValueHolder .timeValueCellSelected p {
  color: #3575fe;
}

.purchaseInfo.allAnswered .timeInput {
  display: none;
}
.purchaseInfo.allAnswered .optionGroups {
  display: none;
}
.purchaseInfo.allAnswered .addressSelector {
  display: none;
}

.chooseSupplier .entityDetailContent .serviceDescription, .purchaseDetail .entityDetailContent .serviceDescription {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 20px;
}
.chooseSupplier .entityDetailContent .serviceDescription p, .purchaseDetail .entityDetailContent .serviceDescription p {
  margin: 0 0 0 3px;
}
.chooseSupplier .entityDetailContent .serviceDescription .addressCard h3, .purchaseDetail .entityDetailContent .serviceDescription .addressCard h3 {
  font-size: 1.1em;
}

.supplyingUser {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.supplyingUserSelector {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 5px;
}
.supplyingUserSelector .selectorButton {
  display: flex;
  align-items: center;
  background-color: rgba(208, 208, 208, 0.5019607843);
}

.supplyingUserInfo {
  flex-grow: 1;
  display: flex;
  gap: 20px;
}

.supplyingUserCard {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: relative;
  height: 120px;
  padding: 0;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  gap: 20px;
  overflow: hidden;
}
.supplyingUserCard .supplyingUserImage {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 160px;
}
.supplyingUserCard .descriptionContainer {
  padding: 5px;
}
.supplyingUserCard .supplyingUserRatings {
  text-align: center;
}
.supplyingUserCard .supplyingUserRatings p {
  font-size: 0.7em;
  font-style: italic;
}
.supplyingUserCard .supplyingUserRatings > div > div {
  background-color: rgba(255, 255, 255, 0.5019607843);
  padding: 3px;
  border-radius: 3px;
}
.supplyingUserCard .supplyingUserDescription {
  background-color: rgba(255, 255, 255, 0.6274509804);
  border-radius: 5px;
  text-align: center;
}
.supplyingUserCard .supplyingUserDescription > div {
  width: 100%;
  justify-content: center;
}
.supplyingUserCard .supplyingUserDescription .ratingStars {
  display: flex;
  justify-content: center;
}
.supplyingUserCard .supplyingUserDescription h4 {
  font-size: 1em;
  margin: 0;
  padding: 0;
}
.supplyingUserCard .supplyingUserDescription h5 {
  display: none;
  font-size: 0.8em;
  margin: 0;
  padding: 0;
}
.supplyingUserCard .supplyingUserDescription p {
  font-size: 0.5em;
  margin: 0;
  padding: 0;
}

@media (width > 800px) {
  .supplyingUserSelector {
    flex-direction: row;
  }
  .supplyingUserCard {
    width: 300px;
  }
}
.userCalendar {
  display: flex;
  flex-direction: row;
  width: 100%;
}
.userCalendar .calendarDayRow, .userCalendar .calendarTitleRow {
  display: flex;
  flex-direction: column;
  margin: 0;
  flex-grow: 1;
}
.userCalendar .calendarDayRow .calendarFullHour, .userCalendar .calendarTitleRow .calendarFullHour {
  display: flex;
  flex-direction: column;
  border: 1px solid #d0d0d0;
}
.userCalendar .calendarDayRow .calendarDayTitle, .userCalendar .calendarTitleRow .calendarDayTitle {
  width: 80px;
  padding: 0;
  margin: 0;
}
.userCalendar .calendarDayRow .calendarDayRowTime, .userCalendar .calendarDayRow .calendarDayRowTimeTitle, .userCalendar .calendarTitleRow .calendarDayRowTime, .userCalendar .calendarTitleRow .calendarDayRowTimeTitle {
  height: 18px;
  padding: 0;
  margin: 0;
  cursor: pointer;
}
.userCalendar .calendarDayRow .calendarDayRowTime.timeHalf, .userCalendar .calendarTitleRow .calendarDayRowTime.timeHalf {
  background-color: rgba(208, 208, 208, 0.1254901961);
}
.userCalendar .calendarDayRow .calendarDayRowTime:hover, .userCalendar .calendarDayRow .calendarDayRowTime.selectedTime, .userCalendar .calendarTitleRow .calendarDayRowTime:hover, .userCalendar .calendarTitleRow .calendarDayRowTime.selectedTime {
  background-color: #FFC145;
}
.userCalendar .calendarTitleRow .calendarFullHour {
  border: 1px solid #d0d0d0;
}
.userCalendar .calendarTitleRow .calendarDayRowTimeTitle {
  background: none;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, 0);
  font-size: 0.6em;
}

.paymentForm {
  width: 320px;
}

.submitPayment {
  background-color: #887BDF;
  color: white;
  width: 100%;
}

@media (max-width: 765px) {
  .purchaseWizard, .purchaseWizard .entityDetailContent {
    /* height:calc(100vh - 6em); */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .purchaseWizard .purchaseInfo, .purchaseWizard .entityDetailContent .purchaseInfo {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .purchaseWizard .purchaseButtons, .purchaseWizard .entityDetailContent .purchaseButtons {
    width: 100%;
    display: flex;
    padding: 10px 0;
  }
  .purchaseWizard .purchaseButtons button, .purchaseWizard .entityDetailContent .purchaseButtons button {
    background-color: #887BDF;
    color: white;
    width: 100%;
  }
}
/*!*******************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./web-app/utils/datetimefield.scss ***!
  \*******************************************************************************************************************************************************/
.dateInputDateCell {
  width: 120px;
  height: 120px;
  display: flex;
  flex-direction: column;
}

.dateInputDates {
  width: 400px;
  display: flex;
}
/*!***********************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./web-app/purchases/selecteditems.scss ***!
  \***********************************************************************************************************************************************************/
.selectedService {
  display: flex;
  gap: 5px;
  background-color: rgba(136, 123, 223, 0.1019607843);
  border-radius: 10px;
  padding: 10px;
}
.selectedService .serviceImage .serviceImageBig {
  width: 160px;
  height: 160px;
  background-size: contain;
}
.selectedService .serviceImage .serviceImageSmall {
  font-size: 24pt;
  display: flex;
  padding-top: 2px;
}
.selectedService .serviceData h3 {
  font-size: 16pt;
  margin: 0;
}

.selectedAddress {
  display: flex;
  background-color: #eff6ff;
  border-radius: 10px;
  padding: 10px;
}
.selectedAddress .addressImage {
  display: flex;
  padding-top: 2px;
}
.selectedAddress .addressData h3 {
  font-size: 16pt;
  margin: 0;
}
.selectedAddress .addressData .addressLocation {
  display: none;
}

.purchaseConfirm .selectedAddress {
  gap: 5px;
}

.selectedTime {
  display: flex;
  gap: 5px;
  background-color: #eff6ff;
  border-radius: 10px;
  padding: 10px;
  justify-content: space-between;
}
.selectedTime .times {
  display: flex;
  gap: 5px;
}
.selectedTime .timeImage {
  display: flex;
  padding-top: 2px;
}
.selectedTime .timeData p {
  font-size: 12pt;
  margin: 0;
}

.selectedSupplier {
  background-color: #eff6ff;
  border-color: #3575fe;
}
.selectedSupplier .supplyingUserDescription {
  background-color: unset !important;
}

.selectedCustomer {
  display: flex;
  gap: 5px;
  background-color: rgba(136, 123, 223, 0.1019607843);
  border-radius: 10px;
  padding: 10px;
}
.selectedCustomer .customerImage {
  font-size: 16pt;
  display: flex;
}
.selectedCustomer .customerData p {
  font-size: 16pt;
  margin: 0;
}

.serviceDescription .purchaseStatus {
  background-color: rgba(136, 123, 223, 0.1019607843);
  border-radius: 10px;
  padding: 10px;
}
.serviceDescription .purchaseStatus button {
  background-color: #887BDF;
  color: white;
  width: 100%;
  margin: 5px 0;
}
/*!***********************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./web-app/purchases/purchasepopup.scss ***!
  \***********************************************************************************************************************************************************/
.viewPurchase .servicePopupContent {
  padding: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  background-color: white;
}
.viewPurchase .servicePopupContent p {
  margin: 5px 0;
}

.servicePopupContent {
  display: flex;
  flex-direction: column;
}
.servicePopupContent .currentPrice {
  position: absolute;
  right: 50px;
  border: 1px solid #a0a0a0;
  padding: 5px 10px;
  border-radius: 2000px;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 6px;
}
.servicePopupContent .wizardHeader {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 0 20px 0;
}
.servicePopupContent .wizardHeader .wizardPrev, .servicePopupContent .wizardHeader .wizardClose {
  width: 24px;
}
.servicePopupContent .wizardHeader .wizardTitle {
  flex-grow: 1;
  color: #202020;
}
.servicePopupContent .wizardHeader .wizardTitle h3 {
  font-size: 24px;
  margin: 0;
}
.servicePopupContent .wizardHeader .wizardTitle p {
  font-size: 14px;
  margin: 0;
}
.servicePopupContent .serviceContent {
  flex-grow: 1;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-width: thin;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.servicePopupContent .serviceContent .serviceImage {
  width: 300px;
  height: 200px;
  background-size: cover;
  background-position: center top;
  flex-shrink: 0;
}
.servicePopupContent .serviceContent .isFavourite {
  color: rgba(255, 0, 0, 0.6274509804);
  display: block;
  margin: 5px;
}
.servicePopupContent .serviceContent .isNotFavourite {
  color: rgba(0, 0, 0, 0.3764705882);
  display: block;
  margin: 5px;
}
.servicePopupContent .serviceContent h2, .servicePopupContent .serviceContent h3, .servicePopupContent .serviceContent h4 {
  font-size: 16px;
  font-weight: bold;
  margin: 0 0 6px 0;
  display: flex;
  align-items: center;
  gap: 3px;
}
.servicePopupContent .serviceContent .supplyingUserDescription h4 {
  justify-content: center;
}
.servicePopupContent .serviceContent h5 {
  font-size: 14px;
  font-weight: normal;
  font-style: italic;
  margin: 0;
  padding: 0;
}
.servicePopupContent .serviceContent .headerIcon {
  height: 18px;
  width: 18px;
  color: #3573fe;
  display: inline-block;
  margin-right: 2px;
}
.servicePopupContent .serviceContent .optionGroup .headerIcon {
  color: #808080;
}
.servicePopupContent .serviceContent .optionGroup.groupAnswered .headerIcon {
  color: #3575fe;
}
.servicePopupContent .serviceContent .headerIcon.capIcon {
  width: 20px;
  margin-right: 0;
}
.servicePopupContent .serviceContent .addressLocation {
  display: none;
}
.servicePopupContent .serviceContent h2.entityListTitle {
  background-color: unset;
  color: unset;
  padding: 0;
}
.servicePopupContent .serviceContent h2.entityListTitle .entityListButtons {
  display: none;
}
.servicePopupContent .naviButtons {
  display: flex;
  margin-top: 10px;
  justify-content: center;
  align-items: center;
}
.servicePopupContent .naviButtons button {
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
}
.servicePopupContent .naviButtons .buttonIcon {
  width: 14px;
  height: 14px;
  display: inline-block;
}
.servicePopupContent .descriptionText p {
  margin-bottom: 8px;
}
.servicePopupContent .descriptionText p.subtitle {
  font-weight: bold;
  margin-top: 24px;
}
.servicePopupContent .descriptionText p.bullet {
  display: flex;
  gap: 4px;
}
.servicePopupContent .descriptionText p.bullet span:nth-child(1) {
  width: 16px;
  height: 16px;
  border-radius: 1000px;
  color: rgba(0, 0, 0, 0.5019607843);
  background-color: #dcfce7;
}
.servicePopupContent .descriptionText p.numberBullet {
  display: flex;
  gap: 4px;
}
.servicePopupContent .descriptionText p.numberBullet span:nth-child(1) {
  width: 18px;
  height: 18px;
  line-height: 14px;
  border-radius: 1000px;
  background-color: #3575fe;
  color: white;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.servicePopupContent.purchaseRegistration .serviceContent {
  gap: 10px;
}
.servicePopupContent.purchaseRegistration .serviceContent h3 {
  margin-top: 10px;
}

@media (width > 800px) {
  .servicePopupHolder .servicePopupContent .currentPrice {
    right: 70px;
    top: 20px;
    padding: 10px;
  }
  .servicePopupHolder .servicePopupContent .serviceContent {
    padding: 0 30px;
  }
  .servicePopupHolder .servicePopupContent .serviceContent .serviceImage {
    width: 200px;
    height: 300px;
  }
  .servicePopupHolder .servicePopupContent .serviceContent.serviceDescriptionText {
    flex-direction: row;
    gap: 20px;
  }
}
/*!************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./web-app/purchases/datetimepicker.scss ***!
  \************************************************************************************************************************************************************/
.dateTimePicker {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dateTimePicker .datePicker, .dateTimePicker .timePicker {
  width: 100%;
}
.dateTimePicker .dateCell {
  flex: 0 0 80px;
  padding: 5px;
  border-radius: 5px;
  margin-right: 5px !important;
  cursor: pointer;
  border: 1px solid #f0f0f0;
}
.dateTimePicker .dateCell .dateItems {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dateTimePicker .dateCell .dateItems p {
  margin: 0;
}
.dateTimePicker .dateCell .dateItems .day {
  font-size: 0.8em;
}
.dateTimePicker .dateCell .dateItems .month {
  font-size: 0.5em;
}
.dateTimePicker .dateCell:hover {
  border-color: #3573fe;
}
.dateTimePicker .dateCell.selectedDate {
  background-color: #eff6ff;
}
.dateTimePicker .dateCell.selectedDate p.dayNumber {
  color: #3575fe;
}
.dateTimePicker .timeCell {
  flex: 0 0 80px;
  padding: 5px;
  border: 1px solid #f0f0f0;
  border-radius: 5px;
  margin-right: 5px !important;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.dateTimePicker .timeCell p {
  margin: 0;
}
.dateTimePicker .timeCell:hover {
  border-color: #3575fe;
}
.dateTimePicker .timeCell.selectedTime {
  background-color: #eff6ff;
}
.dateTimePicker .timeCell.selectedTime p {
  color: #3575fe;
}
/*!*******************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./web-app/purchases/purchases.scss ***!
  \*******************************************************************************************************************************************************/
.purchaseBasics {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
/*!*******************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./web-app/suppliers/suppliers.scss ***!
  \*******************************************************************************************************************************************************/
.supplierUnverified {
  border: 1px solid #FFC145;
  border-radius: 10px;
  padding: 20px;
}
.supplierUnverified h3 {
  font-size: 1.5em;
}
/*!***********************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./web-app/users/users.scss ***!
  \***********************************************************************************************************************************************/
.userInfo {
  display: flex;
  gap: 20px;
}
.userInfo .userDetailForm {
  flex-grow: 1;
}
.userInfo .userImage {
  position: relative;
  /*
  border: $card-border;
  border-radius: $card-border-radius;
  gap:20px;
  background-repeat: no-repeat;
  background-size: contain;
  background-color: #d0d0d0;
  justify-content: flex-end;
  */
}
.userInfo .userImage p {
  background-color: rgba(255, 255, 255, 0.5019607843);
  margin: 0;
  padding: 0;
  text-align: center;
}

.userUnverified {
  border: 1px solid #FFC145;
  border-radius: 10px;
  padding: 20px;
  margin: 20px auto;
}
.userUnverified h3 {
  font-size: 1.5em;
}
/*!**************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/cropperjs/dist/cropper.css ***!
  \**************************************************************************************************************************************************************/
/*!
 * Cropper.js v1.6.2
 * https://fengyuanchen.github.io/cropperjs
 *
 * Copyright 2015-present Chen Fengyuan
 * Released under the MIT license
 *
 * Date: 2024-04-21T07:43:02.731Z
 */
.cropper-container {
  direction: ltr;
  font-size: 0;
  line-height: 0;
  position: relative;
  -ms-touch-action: none;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.cropper-container img {
  backface-visibility: hidden;
  display: block;
  height: 100%;
  image-orientation: 0deg;
  max-height: none !important;
  max-width: none !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: 100%;
}

.cropper-wrap-box,
.cropper-canvas,
.cropper-drag-box,
.cropper-crop-box,
.cropper-modal {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.cropper-wrap-box,
.cropper-canvas {
  overflow: hidden;
}

.cropper-drag-box {
  background-color: #fff;
  opacity: 0;
}

.cropper-modal {
  background-color: #000;
  opacity: 0.5;
}

.cropper-view-box {
  display: block;
  height: 100%;
  outline: 1px solid #39f;
  outline-color: rgba(51, 153, 255, 0.75);
  overflow: hidden;
  width: 100%;
}

.cropper-dashed {
  border: 0 dashed #eee;
  display: block;
  opacity: 0.5;
  position: absolute;
}

.cropper-dashed.dashed-h {
  border-bottom-width: 1px;
  border-top-width: 1px;
  height: 33.3333333333%;
  left: 0;
  top: 33.3333333333%;
  width: 100%;
}

.cropper-dashed.dashed-v {
  border-left-width: 1px;
  border-right-width: 1px;
  height: 100%;
  left: 33.3333333333%;
  top: 0;
  width: 33.3333333333%;
}

.cropper-center {
  display: block;
  height: 0;
  left: 50%;
  opacity: 0.75;
  position: absolute;
  top: 50%;
  width: 0;
}

.cropper-center::before,
.cropper-center::after {
  background-color: #eee;
  content: " ";
  display: block;
  position: absolute;
}

.cropper-center::before {
  height: 1px;
  left: -3px;
  top: 0;
  width: 7px;
}

.cropper-center::after {
  height: 7px;
  left: 0;
  top: -3px;
  width: 1px;
}

.cropper-face,
.cropper-line,
.cropper-point {
  display: block;
  height: 100%;
  opacity: 0.1;
  position: absolute;
  width: 100%;
}

.cropper-face {
  background-color: #fff;
  left: 0;
  top: 0;
}

.cropper-line {
  background-color: #39f;
}

.cropper-line.line-e {
  cursor: ew-resize;
  right: -3px;
  top: 0;
  width: 5px;
}

.cropper-line.line-n {
  cursor: ns-resize;
  height: 5px;
  left: 0;
  top: -3px;
}

.cropper-line.line-w {
  cursor: ew-resize;
  left: -3px;
  top: 0;
  width: 5px;
}

.cropper-line.line-s {
  bottom: -3px;
  cursor: ns-resize;
  height: 5px;
  left: 0;
}

.cropper-point {
  background-color: #39f;
  height: 5px;
  opacity: 0.75;
  width: 5px;
}

.cropper-point.point-e {
  cursor: ew-resize;
  margin-top: -3px;
  right: -3px;
  top: 50%;
}

.cropper-point.point-n {
  cursor: ns-resize;
  left: 50%;
  margin-left: -3px;
  top: -3px;
}

.cropper-point.point-w {
  cursor: ew-resize;
  left: -3px;
  margin-top: -3px;
  top: 50%;
}

.cropper-point.point-s {
  bottom: -3px;
  cursor: s-resize;
  left: 50%;
  margin-left: -3px;
}

.cropper-point.point-ne {
  cursor: nesw-resize;
  right: -3px;
  top: -3px;
}

.cropper-point.point-nw {
  cursor: nwse-resize;
  left: -3px;
  top: -3px;
}

.cropper-point.point-sw {
  bottom: -3px;
  cursor: nesw-resize;
  left: -3px;
}

.cropper-point.point-se {
  bottom: -3px;
  cursor: nwse-resize;
  height: 20px;
  opacity: 1;
  right: -3px;
  width: 20px;
}

@media (min-width: 768px) {
  .cropper-point.point-se {
    height: 15px;
    width: 15px;
  }
}
@media (min-width: 992px) {
  .cropper-point.point-se {
    height: 10px;
    width: 10px;
  }
}
@media (min-width: 1200px) {
  .cropper-point.point-se {
    height: 5px;
    opacity: 0.75;
    width: 5px;
  }
}
.cropper-point.point-se::before {
  background-color: #39f;
  bottom: -50%;
  content: " ";
  display: block;
  height: 200%;
  opacity: 0;
  position: absolute;
  right: -50%;
  width: 200%;
}

.cropper-invisible {
  opacity: 0;
}

.cropper-bg {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC);
}

.cropper-hide {
  display: block;
  height: 0;
  position: absolute;
  width: 0;
}

.cropper-hidden {
  display: none !important;
}

.cropper-move {
  cursor: move;
}

.cropper-crop {
  cursor: crosshair;
}

.cropper-disabled .cropper-drag-box,
.cropper-disabled .cropper-face,
.cropper-disabled .cropper-line,
.cropper-disabled .cropper-point {
  cursor: not-allowed;
}
/*!*****************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./web-app/utils/imageeditor.scss ***!
  \*****************************************************************************************************************************************************/
.app-img-square {
  width: 12rem;
}

.app-img-wide {
  width: 12rem;
}

.app-img-flat {
  width: 12rem;
  height: 2.25rem;
}

.app-img-narrow {
  width: 6.75rem;
}

.app-image-editor {
  display: flex;
  gap: 20px;
}
.app-image-editor .app-cropper-holder {
  display: flex;
  justify-content: center;
  height: 100%;
}
.app-image-editor .app-cropper-holder.hidden {
  display: none;
}
.app-image-editor .app-image-holder {
  padding: 0.4rem;
  position: relative;
}
.app-image-editor .app-image-holder.edit-mode {
  border: 1px solid rgba(0, 0, 0, 0.5019607843);
  min-width: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.app-image-editor .app-image-holder.edit-mode .imageEditorButtons {
  display: flex;
  justify-content: space-between;
}
.app-image-editor .app-image-holder.edit-mode p.dropGuide {
  font-size: 8pt;
}
.app-image-editor .imageEditorTools {
  position: absolute;
  background-color: rgba(250, 235, 215, 0.5019607843);
  padding: 3px;
  border-radius: 3px;
  top: 5px;
  right: 5px;
  display: flex;
  gap: 5px;
}

.app-image-popup-body {
  display: flex;
  flex-direction: column;
}

.app-image-popup-body > * {
  flex: 1;
  display: flex;
  padding: 0.2rem;
}

.app-cropper-image {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.app-cropper-image img {
  width: 100%;
  min-height: 2rem;
  background-color: #f0f0f0;
}

.app-cropper-image > div {
  flex-direction: column;
  flex: 1;
  display: flex;
  justify-content: center;
  text-align: center;
}

.imageSelectorFileList {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.imageSelectorFileList p {
  cursor: pointer;
  padding: 4px;
  background-color: rgba(255, 255, 255, 0.5019607843);
  border: 1px solid rgba(0, 0, 0, 0.5019607843);
  border-radius: 5px;
  margin: 0;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
}
.imageSelectorFileList p span {
  margin-left: 20px;
}

.imageEditorOptions {
  margin-top: 10px;
}

.imageSelectorBackground {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.1254901961);
  z-index: 20000;
}
.imageSelectorBackground .imageSelector {
  position: absolute;
  margin: 0 auto;
  top: 120px;
  width: 360px;
  left: 50%;
  margin-left: -180px;
  background-color: white;
  border: 1px solid #a0a0a0;
  padding: 10px;
  border-radius: 5px;
}
/*!*************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./web-app/login/profile.scss ***!
  \*************************************************************************************************************************************************/
.userProfile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.userProfile .userImage {
  border-radius: 50%;
  background-size: cover;
  width: 180px;
  height: 180px;
  background-repeat: no-repeat;
}
.userProfile .userName h3 {
  color: #877BDE;
}
.userProfile .memberSince {
  display: flex;
  background-color: #CBC3FF;
  border-radius: 5px;
  padding: 5px;
  justify-content: center;
}
.userProfile .memberSince .app-icon-calendar {
  font-size: 20pt;
}
.userProfile .profileBadges {
  display: flex;
  gap: 10px;
}
.userProfile .profileBadges .badge {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.userProfile .profileBadges .badge p {
  margin: 0;
}
.userProfile .profileBadges .badge .badgeCount {
  font-size: 24;
}
.userProfile .profileBadges .badge .badgeText {
  font-size: 8pt;
}
.userProfile .profileButtons {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background-color: #f0f0f0;
}
.userProfile .profileButton {
  display: flex;
  align-items: center;
  width: 320px;
  justify-content: space-between;
  background-color: white;
  padding: 5px;
}
.userProfile .profileButton p {
  display: flex;
  align-items: center;
  margin: 0;
  gap: 10px;
}
/*!************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./web-app/services/provideservices.scss ***!
  \************************************************************************************************************************************************************/
.selectSupplierType {
  margin: 20px 0;
  border: 1px solid #d0d0d0;
  border-radius: 10px;
  padding: 20px;
}

.step2Buttons {
  display: flex;
  gap: 20px;
}

.serviceToSupply .supplyService .optionsContent {
  display: flex;
  gap: 20px;
  justify-content: space-between;
}
.serviceToSupply .supplyService .optionsContent > div {
  width: 50%;
  flex-grow: 1;
}
.serviceToSupply .descriptionText p {
  margin-bottom: 8px;
}
.serviceToSupply .descriptionText p.subtitle {
  font-weight: bold;
  margin-top: 24px;
}
.serviceToSupply .descriptionText p.bullet {
  display: flex;
  gap: 4px;
}
.serviceToSupply .descriptionText p.bullet span:nth-child(1) {
  width: 16px;
  height: 16px;
  border-radius: 1000px;
  color: rgba(0, 0, 0, 0.5019607843);
  background-color: #dcfce7;
}
.serviceToSupply .descriptionText p.numberBullet {
  display: flex;
  gap: 4px;
}
.serviceToSupply .descriptionText p.numberBullet span:nth-child(1) {
  width: 18px;
  height: 18px;
  line-height: 14px;
  border-radius: 1000px;
  background-color: #3575fe;
  color: white;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.serviceToSupply .defaultPricing {
  margin: 20px 0 0 10px;
}
.serviceToSupply .form-buttons {
  margin-top: 20px !important;
  display: flex;
  gap: 20px;
}

/*# sourceMappingURL=web_app.css.map*/