.text-responsive {
  font-size: min(calc(12px + (16 - 12) * ((100vw - 400px) / (800 - 400))), 1rem);
}

.modal-header--sticky {
  position: sticky;
  top: 0;
  background-color: inherit;
  z-index: 1055;
}

.modal-footer--sticky {
  position: sticky;
  bottom: 0;
  background-color: inherit;
  z-index: 1055;
}

.loader-spinner-wrapper {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.7;
  background-color: #fff;
  z-index: 1111;
}

.btn-sticky {
  display: none;
  position: fixed;
  bottom: 20px;
  left: 30px;
  z-index: 99;
  border: none;
  outline: none;
  color: white;
  cursor: pointer;
}

#drop-zone {
  border: 2px dashed #ccc;
  /* border-radius: 20px; */
  padding: 20px;
}

#drop-zone.highlight {
  border: 2px solid blue;
  /* border-color: purple; */
  background-color: rgb(245, 244, 251);
  opacity: 0.8;
}

.inputfile {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

.inputfile + label {
  font-size: 1.25em;
  font-weight: 700;
  display: inline-block;
}

.inputfile + label {
  cursor: pointer;
  /* "hand" cursor */
}

.inputfile + label:hover {
  color: red;
}

.inputfile + label * {
  pointer-events: none;
}

.no-transition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

/* :autofill,
:autofill:hover,
:autofill:focus,
:-moz-autofill,
:-moz-autofill:hover,
:-moz- autofill:focus,
:-webkit-autofill,
:-webkit-autofill:hover,
:-webkit-autofill:focus {
  border: 1px solid green;
  -webkit-text-fill-color: green;
  -webkit-box-shadow: 0 0 0px 1000px #000 inset;
  transition: background-color 5000s ease-in-out 0s;
} */

.ratio-canvas {
  overflow: clip;
  /* background-color: white; */
}

.canvas-center {
  position: absolute;
  inset: 0;
  margin: auto;
}

/* shink padding between elements on XS, SM, MD to save space */
@media (max-width: 767.98px) {
  .btn-group-action > .btn-group > .btn-group:not(:last-child) > .btn,
  .btn-group-action > .btn-group > .btn.dropdown-toggle-split:first-child,
  .btn-group-action > .btn-group > .btn:not(:last-child):not(.dropdown-toggle) {
    padding-right: calc(var(--bs-btn-padding-x) / 4);
  }

  .btn-group-action > .btn-group > .btn-group:not(:first-child) > .btn,
  .btn-group-action > .btn-group > .btn:nth-child(n + 3),
  .btn-group-action > .btn-group > :not(.btn-check) + .btn {
    padding-left: calc(var(--bs-btn-padding-x) / 4);
  }
}

@media (max-width: 991.98px) {
  .btn-group-action > .btn-group > .btn-group:not(:last-child) > .btn,
  .btn-group-action > .btn-group > .btn.dropdown-toggle-split:first-child,
  .btn-group-action > .btn-group > .btn:not(:last-child):not(.dropdown-toggle) {
    padding-right: calc(var(--bs-btn-padding-x) / 3);
  }

  .btn-group-action > .btn-group > .btn-group:not(:first-child) > .btn,
  .btn-group-action > .btn-group > .btn:nth-child(n + 3),
  .btn-group-action > .btn-group > :not(.btn-check) + .btn {
    padding-left: calc(var(--bs-btn-padding-x) / 3);
  }
}

/* workaround for <a> without href to have pointer cursor */
a.nohref:hover {
  cursor: pointer;
}

/* line height unset to proper vcenter */
.card-header .fas,
button .fas {
  transition: 0.3s transform ease-in-out;
  line-height: unset;
}

/* .card-header */
.collapsed .fas {
  transform: rotate(90deg);
  line-height: unset;
}

/* button.collapsed .fas {
  transform: rotate(-90deg);
  line-height: unset;
}

*/
.card-header a {
  text-decoration: none;
}

.hiddenCell {
  padding: 0 !important;
}

.badge-da {
  font-size: 0.9rem;
  padding: 0.5rem 0.8rem;
}

.uninput.form-control:disabled {
  background: none !important;
  border: 0 !important;
  font-weight: 700 !important;
  padding-left: 0.1rem;
  padding-right: 0.1rem;
}

.log-template-height {
  max-height: 20rem;
}

.password_validity {
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: var(--bs-body-color);
}

.password_validity__valid {
  color: #198754;
}

.password_validity__invalid {
  color: #dc3545;
}

.password-toggle {
  cursor: pointer;
}

.unkolaps {
  cursor: pointer;
}

.zerocurrency {
  border-color: orange !important;
}

.zerocurrency:focus {
  border-color: orange !important;
  box-shadow: 0 0 0 0.25rem rgba(255, 165, 0, 0.5);
}

.zorder-second {
  z-index: 1055 !important;
}

.zorder-third {
  z-index: 1065 !important;
}

.zorder-secondmodal {
  z-index: 1060 !important;
}

.zorder-thirdmodal {
  z-index: 1070 !important;
}

.delete {
  cursor: pointer;
  -webkit-transition: opacity 0.15s ease-in-out;
  -moz-transition: opacity 0.15s ease-in-out;
  -ms-transition: opacity 0.15s ease-in-out;
  -o-transition: opacity 0.15s ease-in-out;
  transition: opacity 0.15s ease-in-out;
}

.delete:hover {
  zoom: 1;
  filter: alpha(opacity=50);
  opacity: 0.5;
}

/* bootstrap tab-content hack to make it equal height */
/* for Account Invite modal */
#account-invite-modal .tab-content {
  display: flex;
}

#account-invite-modal .tab-content > .tab-pane {
  display: block;
  /* undo "display: none;" */
  visibility: hidden;
  margin-right: -100%;
  width: 100%;
}

#account-invite-modal .tab-content > .active {
  visibility: visible;
}

/* there is styles override from FormRenderer! */
.was-validated .form-control-color:valid {
  width: 60px !important;
  background-image: unset !important;
  padding: 2px !important;
}

.reimportOutline {
  background-color: #cdffbf !important;
}

.sticky-bottom-1 {
  position: -webkit-sticky;
  position: sticky;
  bottom: 1em;
  z-index: 1020;
}

.square .clr-field button,
.circle .clr-field button {
  width: 4em;
  /* height: 22px;
  left: 5px; */
  right: auto;
  border-radius: 5px;
}

.square .clr-field input,
.circle .clr-field input {
  padding-left: 5em;
}

.circle .clr-field button {
  border-radius: 50%;
}

.full .clr-field button {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}

#step-2-contact .pull-right li[data-type*="number"] { display: none; }