/* Form Builder Custom CSS */

.parent-no-margin > div,
.parent-no-margin > div .card-body {
  margin-bottom: 3px !important;
  padding-top: 0px !important;
}
.parent-no-padding > div,
.parent-no-padding > div {
  min-height: 15.8vh !important;
  padding-left: 1px !important;
  padding-right: 1px !important;
  padding-bottom: 1px !important;
}

.customTooltip {
  position: relative;
  display: inline-block;
}

.customTooltip .tooltiptext {
  visibility: hidden;
  width: 200px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 170%;
}

.customTooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}
.customTooltip:hover .tooltiptext {
  visibility: visible;
}

.formio-button-remove-row {
  background-color: red !important;
}

@media only screen and (max-width: 800px) {
  .formio-component-datagrid table,
  .formio-component-datagrid thead,
  .formio-component-datagrid tbody,
  .formio-component-datagrid th,
  .formio-component-datagrid td,
  .formio-component-datagrid tr {
    display: block !important;
  }

  .formio-component-datagrid thead tr {
    position: absolute !important;
    top: -9999px !important;
  }

  [dir="ltr"] .formio-component-datagrid tfoot td {
    padding-left: 0px !important;
  }

  [dir="ltr"] .formio-component-datagrid td {
    border: none !important;
    border-bottom: 2px solid #eee !important;
    position: relative !important;
    padding-left: 50% !important;
    white-space: normal !important;
    text-align: left !important;
  }

  [dir="rtl"] .formio-component-datagrid td {
    border: none !important;
    border-bottom: 2px solid #eee !important;
    position: relative !important;
    padding-right: 50% !important;
    white-space: normal !important;
    text-align: right !important;
  }

  .formio-component-datagrid tbody tr {
    border: 2px solid #eee !important;
  }

  .formio-component-datagrid tbody tr td {
    border: 0px !important;
  }

  .formio-component-datagrid td {
    position: relative;
    padding-left: 20px;
    padding-top: 6px;
  }

  /*before for LTR */
  [dir="ltr"] .formio-component-datagrid td:before {
    position: absolute !important;
    top: 6px !important;
    left: 4px;
    width: 50% !important;
    white-space: normal !important;
    text-align: left !important;
    font-weight: bold !important;
    overflow-wrap: break-word;
    word-wrap: break-word;
    content: attr(data-title);
    padding-right: 13px;
  }

  /*after for RTL */
  [dir="rtl"] .formio-component-datagrid td:after {
    position: absolute !important;
    top: 6px !important;
    right: 4px;
    max-width: 50% !important;
    width: fit-content;
    white-space: normal !important;
    text-align: right !important;
    font-weight: bold !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    content: attr(data-title);
    padding-left: 13px;
  }

  [dir="rtl"] .formio-component-datagrid td[data-title] {
    direction: ltr;
  }

  [dir="ltr"] .formio-component-datagrid tr td:last-child {
    padding: 5px !important;
    display: flex !important;
    justify-content: end !important;
  }

  [dir="rtl"] .formio-component-datagrid tr td:last-child {
    padding: 5px !important;
    display: flex !important;
    justify-content: start !important;
  }

  .formio-component-datagrid table {
    padding: 0rem !important;
  }

  [dir="ltr"]
    .formio-component-datagrid
    td[data-title]:not([data-title="Add/Remove"]):before {
    content: attr(data-title);
  }

  .padding-5 > div,
  .padding-5 > div .card-body {
    padding: 0.3rem !important;
  }
}
/* Spinner elipses */

.loader--ellipsis {
  display: inline-block;
  position: relative;
  height: 64px;
  width: 64px;
}

.loader--ellipsis div {
  position: absolute;
  top: 27px;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
  border-radius: 50%;
  height: 11px;
  width: 11px;
}

.loader--ellipsis div:nth-child(1) {
  left: 6px;
  animation: loader--ellipsis1 0.6s infinite;
}

.loader--ellipsis div:nth-child(2) {
  left: 6px;
  animation: loader--ellipsis2 0.6s infinite;
}

.loader--ellipsis div:nth-child(3) {
  left: 26px;
  animation: loader--ellipsis2 0.6s infinite;
}

.loader--ellipsis div:nth-child(4) {
  left: 45px;
  animation: loader--ellipsis3 0.6s infinite;
}

@keyframes loader--ellipsis1 {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes loader--ellipsis3 {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(0);
  }
}

@keyframes loader--ellipsis2 {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(19px, 0);
  }
}
.spinner {
  color: #fff;
  font-size: 24px;
}

.spinner {
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@media print {
  #BuilderBtns {
    display: none !important;
  }
  #headBtns {
    display: none !important;
  }
  .parent-no-padding > div,
  .parent-no-padding > div {
    min-height: 10vh !important;
    padding-left: 1px !important;
    padding-right: 1px !important;
    padding-bottom: 1px !important;
  }
  .formio-button-remove-row {
    display: none !important;
  }
  .formio-button-add-row {
    display: none !important;
  }
  #saveButton {
    display: none !important;
  }
  #saveBtn {
    display: none !important;
  }
}

.builderLoader {
  width: 50px;
  padding: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #25b09b;
  --_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
  mask: var(--_m);
  -webkit-mask-composite: source-out;
  mask-composite: subtract;
  animation: l3 1s infinite linear;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 9999;
}
@keyframes l3 {
  to {
    transform: rotate(1turn);
  }
}

.formcomponents {
  background-color: #d6e9eb;
  padding-left: 10px !important;
  padding-right: 10px !important;
  padding-bottom: 0 !important;
  padding-top: 0 !important;
  min-height: 100vh;
}

[dir="rtl"] .formcomponents .formcomponent {
  text-align: right !important;
}

[dir="rtl"] #contactNameForVisitProductStaticContainer {
  text-align: right;
}

.formcomponent {
  background-color: #2a9396 !important;
  border: #2a9396 !important;
}

.form-builder-panel {
  background-color: #d6e9eb !important;
}

.card-header {
  background-color: transparent !important;
}

.form-builder-panel {
  border-color: rgba(31, 58, 107, 0.268) !important;
  border: 0 !important;
}

.formarea {
  min-height: 80vh !important;
}

.builder-group-button {
  box-shadow: none !important;
}

.form-builder-group-header {
  width: 100% !important;
}

.builder-sidebar_search {
  box-shadow: none !important;
}

#saveButton {
  background-color: rgb(28 75 115);
}

.hide-label-for-big-screen label {
  display: none !important;
}

@media only screen and (max-width: 750px) {
  .formio-component-table tbody tr:nth-child(1) {
    display: none !important;
  }

  .formio-component-table tr,
  .formio-component-table td {
    display: block !important;
  }
  .hide-label-for-big-screen label {
    display: block !important;
  }
}

@media (min-width: 500px) {
  .col-sm-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333% !important;
    max-width: 33.333333% !important;
  }
}