/*--Loader Starts--*/

.loader-container {
  background-color: #072442;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  margin: 0;
  color: #fff;
  font-family: Open Sans;
}

.loader-wrapper h1 {
  font-weight: 300;
}

.loader-wrapper {
  text-align: center;
}

.loader-wrapper .loader {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  animation: 4500ms linear 0s normal none infinite running;
  animation-name: rotate;
  left: 25px;
}

.loader-wrapper .loader span::after {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #fff;
  content: "";
  display: block;
  transform-origin: 25px 25px;
  animation-duration: 3000ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

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

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

.pip-0::after {
  transform: rotate(0deg);
  animation-name: rotate-0;
  animation-delay: 900ms;
}

@keyframes rotate-0 {
  0%,
  20% {
    transform: rotate(0deg);
  }

  40%,
  60% {
    transform: rotate(180deg);
  }

  80%,
  100% {
    transform: rotate(360deg);
  }
}

.pip-1::after {
  transform: rotate(20deg);
  animation-name: rotate-1;
  animation-delay: 775ms;
}

@keyframes rotate-1 {
  0%,
  20% {
    transform: rotate(20deg);
  }

  40%,
  60% {
    transform: rotate(200deg);
  }

  80%,
  100% {
    transform: rotate(380deg);
  }
}

.pip-2::after {
  transform: rotate(40deg);
  animation-name: rotate-2;
  animation-delay: 650ms;
}

@keyframes rotate-2 {
  0%,
  20% {
    transform: rotate(40deg);
  }

  40%,
  60% {
    transform: rotate(220deg);
  }

  80%,
  100% {
    transform: rotate(400deg);
  }
}

.pip-3::after {
  transform: rotate(60deg);
  animation-name: rotate-3;
  animation-delay: 525ms;
}

@keyframes rotate-3 {
  0%,
  20% {
    transform: rotate(60deg);
  }

  40%,
  60% {
    transform: rotate(240deg);
  }

  80%,
  100% {
    transform: rotate(420deg);
  }
}

.pip-4::after {
  transform: rotate(80deg);
  animation-name: rotate-4;
  animation-delay: 400ms;
}

@keyframes rotate-4 {
  0%,
  20% {
    transform: rotate(80deg);
  }

  40%,
  60% {
    transform: rotate(260deg);
  }

  80%,
  100% {
    transform: rotate(440deg);
  }
}

.pip-5::after {
  transform: rotate(100deg);
  animation-name: rotate-5;
  animation-delay: 275ms;
}

@keyframes rotate-5 {
  0%,
  20% {
    transform: rotate(100deg);
  }

  40%,
  60% {
    transform: rotate(280deg);
  }

  80%,
  100% {
    transform: rotate(460deg);
  }
}

@keyframes opacity {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/*--Loader Ends--*/

.loading-button {
  pointer-events: none;
  opacity: 0.6;
}

.link-spinner-icon {
  margin-right: 4px;
}

.modal-backdrop {
  width: 100% !important;
  height: 100% !important;
}

.modal-backdrop.fade.show {
  opacity: 0.2;
}

.sessionStatus {
  background-color: #00000038;
  color: black;
  text-align: center;
}

.clickable {
  cursor: pointer;
}

.otp-field {
  margin-top: 25px;
}

input[disabled] {
  background: #e3e3e3 0% 0% no-repeat padding-box !important;
}

input.error,
textarea.error,
.PhoneInput.error,
.tc-accepted.error {
  border: 2px solid red !important;
}

.pop-create.error {
  border: 0 !important;
  border-bottom: 2px solid red !important;
}

select.error {
  border: 2px solid red !important;
}

span.error-message,
span#card-errors {
  color: red;
  font-size: 14px;
}

.form-group input.error + .checkedbox:before {
  border-color: red;
}

.PhoneInputInput {
  border: transparent;
}

a.link-itme.flex.signin-btn.btn-nav {
  padding: 4px 30px;
  font-size: 14px;
}

.top-sign.forgot {
  padding: 25px 0 15px 0;
}

.BEContainer {
  padding: 0 !important;
}

.modal-next-container {
  display: flex;
  justify-content: flex-end;
  margin: 20px;
}

.modal-next-container.container-min {
  flex-direction: row-reverse;
  justify-content: flex-start;
  max-width: 1675px;
}

.modal-next-container-full {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.4);

}

.edit-model-btn img,
.modal-next-container-full img {
  width: 50px;
}

.relative {
  position: relative;
}

.btn[disabled] {
  pointer-events: none;
  background: transparent linear-gradient(90deg, #f7931e69 0%, #f15a2475 100%) 0% 0% no-repeat padding-box;
}

.note {
  font: normal normal normal 12px/18px Poppins;
  letter-spacing: 0.37px;
  color: #f26922;
}

.be-status {
  display: none;
}

.be-status.completed {
  display: block;
}

#loadProjects[disabled] {
  pointer-events: none;
  background: #dcdcdc 0% 0% no-repeat padding-box;
  color: #9f9f9f;
  border: #9f9f9f;
}

.load-existing:hover {
  color: #f15a24 !important;
  border-color: #f15a24 !important;
}

.main-parant-11,
.main-parant-10 {
  padding: 0 20px;
  position: relative;
}

.nav-logged-in {
  margin: 0 14px !important;
}

.nav-logged-in .wrapper {
  margin-right: 14px !important;
}

.edit-model-btn {
  position: absolute;
  right: 10px;
  z-index: 9;
  font: normal normal normal 12px/21px Poppins;
  display: flex;
  color: #013a67;
  align-items: center;
  color: #fff;
  margin-top: 10px;
}

.edit-model-btn:hover {
  color: #f7931e;
}

.edit-name-btn {
  font: normal normal normal 14px/25px Poppins;
  letter-spacing: 0.32px;
  color: #ffffff;
  border-radius: 4px;
  padding: 2px 18px;
  cursor: pointer;
  margin-right: 10px;
  margin-top: 5px;
  display: inline-block;
  background: transparent linear-gradient(90deg, #f7931e 0%, #f15a24 100%) 0% 0% no-repeat padding-box;
}

.w-100 {
  width: 100% !important;
}

.container-load {
  margin: 34px 15px 0;
}

.left-side-bar-container {
  max-width: 275px !important;
  position: fixed;
  height: calc(100vh - 100px);
  min-height: 800px;
  z-index: 10;
}

.check-disable {
  opacity: 0.6;
}

.btn-disabled {
  pointer-events: none;
  opacity: 0.6;
}

.no-padding {
  padding: 0 !important;
}

.be-model-containter {
  height: 75vh;
  overflow: hidden;
}

.be-model-containter.be-min canvas {
  cursor: not-allowed;
  pointer-events: none;
  width: 100% !important;
}

.side-link-flex.active .MODELw {
  color: #fff;
}

p.top-home.nav-left {
  margin: 0 !important;
}

li.menu-item:hover::after {
  content: "";
  position: absolute;
  border: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #ffbb1c;
  bottom: -33px;
}

.menu-item .link-itme.active {
  color: #ffbb1c;
}

.menu-item .link-itme.active::after {
  content: "";
  position: absolute;
  border: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #ffbb1c;
  bottom: -33px;
}

.StripeElement {
  font: normal normal normal 12px/18px Poppins;
  letter-spacing: 0px;
  color: #1c1c1c;
  background: #ffffff 0% 0% no-repeat padding-box;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  padding: 10px 20px;
  display: inline-block;
}

:host(.InputElement.is-invalid) {
  border: 2px solid red !important;
}

.Card-type-grid.card-number {
  width: 274px;
}

.Card-type-grid.card-expiry {
  width: 114px;
}

.Card-type-grid.card-cvv {
  width: 114px;
}

.rr {
  background: url("../img/Home-Page/registered.svg") no-repeat;
  width: 10px;
  height: 10px;
  margin-bottom: 6px;
  margin-left: -2px;
}

.rr2 {
  background: url("../img/Home-Page/registered-hover.svg") no-repeat;
  width: 10px;
  height: 10px;
  margin-bottom: 6px;
  margin-left: -2px;
}

.reg-mark-icon:hover .rr,
.reg-mark-icon.active .rr {
  background: url("../img/Home-Page/registered-hover.svg") no-repeat;
  width: 10px;
  height: 10px;
  margin-bottom: 6px;
  margin-left: -2px;
}

.accept-tc {
  text-decoration: underline;
  font: normal normal normal 12px/18px Poppins !important;
  letter-spacing: 0.24px !important;
  color: #ffffff !important;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

.coding-device-disabled {
  pointer-events: none;
  border: 1px solid #c2c2c2 !important;
  font: normal normal medium 14px/21px Poppins;
  letter-spacing: 0px;
  color: #8d8d8d !important;
}