@import url(./bootstrap.min.css);
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600;700&display=swap');
@import url(./app.css);
@import url(./responsive.css);

:root {
  --themeColor: 244, 244, 244;
  --baseColor: 36, 36, 36;
  --bs-blue: 5, 131, 107;
  --bs-primary: 5, 131, 107;
  --primaryColor: 0, 120, 219;
  --baseFont: "Source Sans Pro";
  --baseFontsize: 16px;
  --white: 255, 255, 255;
  --warning: 255, 0, 0;
  --border: 222, 226, 230;
  --black: 0, 0, 0;
  --radius: 8px;
  --loaderColor: 152, 128, 255;
  --loaderBall: 51, 51, 51;
  --success:0, 128, 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  margin: 0;
}

h1 {
  font-size: 26px;
}

h2 {
  font-size: 22px;
}

h3 {
  font-size: 20px;
}

h4 {
  font-size: 18px;
}

input+label {
  user-select: none;
}

a {
  color: rgba(var(--baseColor));
  transition: 300ms all;
}

a,
a:hover,
a:focus {
  text-decoration: none;
  cursor: pointer;
}

body {
  background: rgba(var(--themeColor));
  font-family: var(--baseFont);
  font-size: var(--baseFontsize);
  /* letter-spacing: -0.020em; */
  -webkit-font-smoothing: antialiased;
  color: rgba(var(--baseColor));
}

ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}
input[type="date"] {
  position: relative;
}

/* create a new arrow, because we are going to mess up the native one
see "List of symbols" below if you want another, you could also try to add a font-awesome icon.. */
input[type="date"]:after {
  content: "\1F4C5";
}

/* change color of symbol on hover */
input[type="date"]:hover:after {
  color: #bf1400;
}

/* make the native arrow invisible and stretch it over the whole field so you can click anywhere in the input field to trigger the native datepicker*/
input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: auto;
  color: transparent;
  background: transparent;
}

/* adjust increase/decrease button */
input[type="date"]::-webkit-inner-spin-button {
  z-index: 1;
}

/* adjust clear button */
input[type="date"]::-webkit-clear-button {
  z-index: 1;
}
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: rgba(var(--primaryColor));
  --bs-btn-border-color: rgba(var(--primaryColor));
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgba(var(--primaryColor), 0.9);
  --bs-btn-hover-border-color: rgba(var(--primaryColor), 0.9);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgba(var(--primaryColor), 0.9);
  --bs-btn-active-border-color: rgba(var(--primaryColor), 0.9);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: rgba(var(--primaryColor));
  --bs-btn-disabled-border-color: rgba(var(--primaryColor));
}

.btn-primary:hover {
  background-color: rgba(var(--primaryColor), 0.9);
  border-color: rgba(var(--primaryColor), 0.9);
}

.form-control:focus,
.form-check-input:focus,
.form-radio-input:focus {
  border-color: rgba(var(--primaryColor), 0.5);
  box-shadow: 0 0 0 0.25rem rgba(var(--primaryColor), 0.2);
}

.form-control {
  border-radius: var(--radius);
  min-height: 40px;

}

.btn {
  min-height: 40px;
  border-radius: var(--radius);
  padding: 7px 15px;
  min-width: 90px;
}

body .sc-dmRaPn {
  border-radius: var(--radius);
  margin-bottom: 20px;
  border: 1px solid rgba(var(--border));
  /* box-shadow: 0px 0px 5px rgb(23 24 24 / 5%), 0px 1px 2px rgb(0 0 0 / 5%); */
}

.rdt_ExpanderRow {
  padding: 10px 15px;
}

nav.sc-iIPllB.rdt_Pagination {
  background: transparent;
  border: 0;
}

.modal-content.right-modal {
  border-radius: 0;
  border: 0;
  min-height: 100vh;
}

.modal.right.fade .modal-dialog {
  margin-right: inherit;
  margin-top: 0;
  margin-bottom: 0;
  height: 100vh;
  -webkit-font-smoothing: antialiased;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  -webkit-transform: translate(120%, 0);
  transform: translate(120%, 0);
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  transition: -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
}

.modal.right.show .modal-dialog {
  transform: none;
}

.form-group label,
.firm-select label {
  font-size: 15px;
  font-weight: 600;
}

.error-badge {
  color: rgba(var(--warning));
}

.error {
  font-size: 12px;
  color: rgba(var(--warning));
  display: inline-block;
  background: #ff000017;
  border-radius: 5px;
  padding: 2px 8px;
  margin-top: 10px;
}

.modal-head h4 {
  font-weight: 600;
  font-size: 20px;
  text-transform: capitalize;
}

.modal-head {
  padding: 17px 25px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(var(--border));
  justify-content: space-between;
}

body .css-1xepz10-control,
body .css-bftceo-control:hover {
  border-color: rgba(var(--border));
  border-radius: var(--radius);
  height: 41px;
  min-height: 41px;
  box-shadow: none;
}
/* 
body .filled .css-1xepz10-control {
  border: 1px solid rgba(var(--primaryColor)) !important;
  box-shadow: 0 0 0 0.05rem rgba(var(--primaryColor), 1) !important;
} */

body .css-1f8moss-control,
body .filled .css-1f8moss-control {
  min-height: 40px;
  border-color: rgba(var(--primaryColor), 0.5);
  box-shadow: 0 0 0 0.25rem rgba(var(--primaryColor), 0.2);
}

body .css-bftceo-control:hover,
body .css-1xepz10-control:hover,
body .filled .css-bftceo-control:hover,
body .filled .css-1xepz10-control:hover {
  border-color: rgba(var(--border));
}

body .css-1xepz10-control:focus,
body .css-bftceo-control,
body .filled .css-1xepz10-control:focus,
body .filled .css-bftceo-control {
  border-color: rgba(var(--primaryColor), 0.5);
  box-shadow: 0 0 0 0.25rem rgba(var(--primaryColor), 0.2);
  height: 41px;
  min-height: 41px;
}

body .css-1rhcplz-menu {
  font-size: 15px;
}

textarea.form-control {
  min-height: 100px;
}

.sc-evZas {
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(var(--baseColor), 0.5);
}

body .gJhVev:hover,
body .gJhVev:focus {
  opacity: 1;
}

.gJhVev:hover .sc-evZas,
.gJhVev:focus .sc-evZas {
  color: rgba(var(--baseColor), 1);
}

.badge.text-bg-primary {
  /* margin-left: 5px; */
  background: rgba(var(--primaryColor)) !important;
}

.form-group>label {
  text-transform: capitalize;
}

.right .modal-body {
  background: rgba(var(--white));
  height: calc(100vh - 125px);
  overflow-y: auto;
  overflow-x: hidden;
}

.modal-body {
  background: rgba(var(--themeColor));
  padding: 25px;
}

.modal-content {
  overflow: hidden;
  border: 0;
  border-radius: var(--radius);
}

.frm-btn-wrap {
  background: rgba(var(--white));
  margin: 0 -25px -25px -25px;
  padding-bottom: 15px;
  border-top: 1px solid rgba(var(--border));
}

.close img {
  width: 12px;
  opacity: 0.7;
}

.close {
  border: 1px solid rgba(var(--border));
  width: 25px;
  height: 25px;
  text-align: center;
  border-radius: 5px;
  line-height: 20px;
  transition: 300ms all;
}

.close:hover {
  background: rgb(222, 226, 230);
}

.close:hover img {
  opacity: 1;
}

.form-check-input:checked {
  background-color: rgba(var(--primaryColor));
  border-color: rgba(var(--primaryColor), 0.6);
}


.form-group .badge {
  position: relative;
  top: -3px;
}

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background: rgba(var(--border));
}

::-webkit-scrollbar-thumb {
  background: rgba(var(--primaryColor), 0.8);
  ;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--primaryColor));
}

.table-drop-down>li {
  border-radius: 5px;
  border: 1px solid rgba(var(--border));
  width: 30px;
  height: 30px;
  line-height: 26px;
  text-align: center;
  background: rgba(var(--white));
}

.dropdown-menu {
  box-shadow: 0px 0px 5px rgb(23 24 24 / 2%), 0px 1px 2px rgba(var(--black), 2%);
  padding: 5px 0;
}

.dropdown-menu li a {
  padding: 5px 10px;
  display: block;
  font-size: 14px;
}

.dropdown-menu li:hover a {
  background: rgba(var(--primaryColor), 0.1);
}

.user-wrap {
  display: flex;
  align-items: center;
  min-width: 200px;
}

.user-icon {
  height: 35px;
  width: 35px;
  border-radius: 50px;
  border: 1px solid rgba(var(--primaryColor), 0.3);
  font-size: 15px;
  line-height: 33px;
  margin-right: 8px;
  text-align: center;
  background: rgba(var(--primaryColor), 0.1);
  color: rgba(var(--primaryColor));
}

/* .form-control.filled {
  border-color: rgba(var(--primaryColor));
  box-shadow: 0 0 0 0.05rem rgba(var(--primaryColor), 1);
} */

body .eKwPae:hover:not(:disabled),
.eKwPae:focus {
  border-radius: 0 !important;
  background: rgba(var(--primaryColor), 0.07) !important;
}

body .jVeafb:hover {
  background: rgba(var(--primaryColor), 0.03);
}

.bysellopt .badge {
  font-weight: normal;
  font-size: 10px;
}

.image-input label {
  border: 1px solid rgba(var(--primaryColor), 0.3);
  border-radius: var(--radius);
  overflow: hidden;
  padding: 22px 15px;
  background: rgba(var(--primaryColor), 0.05);
  width: 100%;
  text-align: center;
  color: rgba(var(--primaryColor));
  cursor: pointer;
}

input#letter_pad {
  height: 0;
  width: 0;
}

input#letter_pad1 {
  height: 0;
  width: 0;
}

.spinner {
  width: 40px;
  height: 40px;

  position: relative;
  margin: 100px auto;
}

.double-bounce1,
.double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: rgba(var(--loaderBall));
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes sk-bounce {

  0%,
  100% {
    -webkit-transform: scale(0.0)
  }

  50% {
    -webkit-transform: scale(1.0)
  }
}

@keyframes sk-bounce {

  0%,
  100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  }

  50% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

.dot-falling {
  position: relative;
  left: -10000px;
  width: 9px;
  height: 9px;
  border-radius: 8px;
  background-color: rgba(var(--whiteBg));
  color: rgba(var(--whiteBg));
  box-shadow: 9999px 0 0 0 rgba(var(--whiteBg));
  -webkit-animation: dot-falling 1s infinite linear;
  animation: dot-falling 1s infinite linear;
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

.dot-falling::before,
.dot-falling::after {
  content: "";
  display: flex;
  position: absolute;
  top: 0;
}

.dot-falling::before {
  width: 9px;
  height: 9px;
  border-radius: 8px;
  background-color: rgba(var(--whiteBg));
  color: rgba(var(--whiteBg));
  -webkit-animation: dot-falling-before 1s infinite linear;
  animation: dot-falling-before 1s infinite linear;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

.dot-falling::after {
  width: 9px;
  height: 9px;
  border-radius: 8px;
  background-color: rgba(var(--whiteBg));
  color: rgba(var(--whiteBg));
  -webkit-animation: dot-falling-after 1s infinite linear;
  animation: dot-falling-after 1s infinite linear;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

@-webkit-keyframes dot-falling {
  0% {
    box-shadow: 9999px -15px 0 0 rgba(var(--loaderColor), 0);
  }

  25%,
  50%,
  75% {
    box-shadow: 9999px 0 0 0 rgba(var(--white));
  }

  100% {
    box-shadow: 9999px 15px 0 0 rgba(var(--loaderColor), 0);
  }
}

@keyframes dot-falling {
  0% {
    box-shadow: 9999px -15px 0 0 rgba(var(--loaderColor), 0);
  }

  25%,
  50%,
  75% {
    box-shadow: 9999px 0 0 0 rgba(var(--white));
  }

  100% {
    box-shadow: 9999px 15px 0 0 rgba(var(--loaderColor), 0);
  }
}

@-webkit-keyframes dot-falling-before {
  0% {
    box-shadow: 9984px -15px 0 0 rgba(var(--loaderColor), 0);
  }

  25%,
  50%,
  75% {
    box-shadow: 9984px 0 0 0 rgba(var(--white));
  }

  100% {
    box-shadow: 9984px 15px 0 0 rgba(var(--loaderColor), 0);
  }
}

@keyframes dot-falling-before {
  0% {
    box-shadow: 9984px -15px 0 0 rgba(var(--loaderColor), 0);
  }

  25%,
  50%,
  75% {
    box-shadow: 9984px 0 0 0 rgba(var(--white));
  }

  100% {
    box-shadow: 9984px 15px 0 0 rgba(var(--loaderColor), 0);
  }
}

@-webkit-keyframes dot-falling-after {
  0% {
    box-shadow: 10014px -15px 0 0 rgba(var(--loaderColor), 0);
  }

  25%,
  50%,
  75% {
    box-shadow: 10014px 0 0 0 rgba(var(--white));
  }

  100% {
    box-shadow: 10014px 15px 0 0 rgba(var(--loaderColor), 0);
  }
}

@keyframes dot-falling-after {
  0% {
    box-shadow: 10014px -15px 0 0 rgba(var(--loaderColor), 0);
  }

  25%,
  50%,
  75% {
    box-shadow: 10014px 0 0 0 rgba(var(--white));
  }

  100% {
    box-shadow: 10014px 15px 0 0 rgba(var(--loaderColor), 0);
  }
}

.btn-sml {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 35px;
  padding: 0;
  height: 35px;
  line-height: 35px;
  font-size: 14px;
  border: 1px solid rgba(var(--border));
  border-radius: 5px;
  background: rgba(var(--white));
  cursor: pointer;
}

.btn-sml:hover svg * {
  stroke: rgba(var(--baseColor));
}

.btn-sml:hover svg.nofill path {
  stroke: transparent;
  fill: rgba(var(--baseColor));
}

.action-replay li+li {
  margin-left: 10px;
}

.action-replay {
  display: flex;
  align-items: center;
}

.Toastify__toast-theme--colored {
  border-radius: var(--radius) !important;
}
.Toastify__toast-theme--colored.Toastify__toast--success {
  background: #28a745 !important;
}
.Toastify__toast-theme--colored.Toastify__toast--error {
  background: #dc3545 !important;
}


@media(max-width:767px) {
  body {
    font-size: 14px;
  }

  .btn {
    padding: 5px 12px;
    min-width: 78px;
  }
}