@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
@import url('https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css');
@import url('./main.css');

:root {
  --font-family: "Inter", sans-serif;
  --black: 0, 0, 0;
  --white: 255, 255, 255;
  --primaryColor: 77, 171, 255;
  --secondaryColor: 80, 80, 80;
  --borderColor: 204, 204, 204;
  --lightBg: 237, 240, 243;
}

body {
  margin: 0;
  background: rgb(var(--lightBg));
  font-size: 15px;
  line-height: 24px;
  color: rgb(var(--secondaryColor));
  font-family: var(--font-family);
}

* {
  box-sizing: border-box;
}

a {
  text-decoration: none;
  transition: 300ms all;
  cursor: pointer;
  color: rgb(var(--primaryColor));
  outline: none;
}

button, input[type=button] {
  cursor: pointer;
  transition: 300ms all;
  outline: none;
}


ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

p {
  margin-top: 0;
  font-size: 15px;
  line-height: 24px;
}

.d-flex {
  display: flex;
}

.justify-content-between {
  justify-content: space-between;
}

.align-items-center {
  align-items: center;
}

.justify-content-center {
  justify-content: center;
}

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

.flex-row {
  flex-direction: row;
}
.gap-10 {
  gap: 10px;
}

.mb-0 {
  margin-bottom: 0;
}

.mt-0 {
  margin-top: 0;
}

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

.hide {
  display: none !important;
}

/* alert and badge  */

.badge {
  display: inline-block;
  padding: 0.25em 0.4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .badge {
    transition: none;
  }
}

a.badge:hover,
a.badge:focus {
  text-decoration: none;
}

.badge:empty {
  display: none;
}

.btn .badge {
  position: relative;
  top: -1px;
}

.badge-pill {
  padding-right: 0.6em;
  padding-left: 0.6em;
  border-radius: 10rem;
}

.badge-primary {
  color: #fff;
  background-color: #3490dc;
}

a.badge-primary:hover,
a.badge-primary:focus {
  color: #fff;
  background-color: #2176bd;
}

a.badge-primary:focus,
a.badge-primary.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(52, 144, 220, 0.5);
}

.badge-secondary {
  color: #fff;
  background-color: #6c757d;
}

a.badge-secondary:hover,
a.badge-secondary:focus {
  color: #fff;
  background-color: #545b62;
}

a.badge-secondary:focus,
a.badge-secondary.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
}

.badge-success {
  color: #fff;
  background-color: #38c172;
}

a.badge-success:hover,
a.badge-success:focus {
  color: #fff;
  background-color: #2d995b;
}

a.badge-success:focus,
a.badge-success.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(56, 193, 114, 0.5);
}

.badge-info {
  color: #212529;
  background-color: #6cb2eb;
}

a.badge-info:hover,
a.badge-info:focus {
  color: #212529;
  background-color: #3f9ae5;
}

a.badge-info:focus,
a.badge-info.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(108, 178, 235, 0.5);
}

.badge-warning {
  color: #212529;
  background-color: #ffed4a;
}

a.badge-warning:hover,
a.badge-warning:focus {
  color: #212529;
  background-color: #ffe817;
}

a.badge-warning:focus,
a.badge-warning.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(255, 237, 74, 0.5);
}

.badge-danger {
  color: #fff;
  background-color: #e3342f;
}

a.badge-danger:hover,
a.badge-danger:focus {
  color: #fff;
  background-color: #c51f1a;
}

a.badge-danger:focus,
a.badge-danger.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(227, 52, 47, 0.5);
}

.badge-light {
  color: #212529;
  background-color: #f8f9fa;
}

a.badge-light:hover,
a.badge-light:focus {
  color: #212529;
  background-color: #dae0e5;
}

a.badge-light:focus,
a.badge-light.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
}

.badge-dark {
  color: #fff;
  background-color: #343a40;
}

a.badge-dark:hover,
a.badge-dark:focus {
  color: #fff;
  background-color: #1d2124;
}

a.badge-dark:focus,
a.badge-dark.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
}

.jumbotron {
  padding: 2rem 1rem;
  margin-bottom: 2rem;
  background-color: #e9ecef;
  border-radius: 0.3rem;
}

@media (min-width: 576px) {
  .jumbotron {
    padding: 4rem 2rem;
  }
}

.jumbotron-fluid {
  padding-right: 0;
  padding-left: 0;
  border-radius: 0;
}

.alert {
  position: relative;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}

.alert-heading {
  color: inherit;
}

.alert-link {
  font-weight: 700;
}

.alert-dismissible {
  padding-right: 3.85rem;
}

.alert-dismissible .close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: 0.75rem 1.25rem;
  color: inherit;
}

.alert-primary {
  color: #1b4b72;
  background-color: #d6e9f8;
  border-color: #c6e0f5;
}

.alert-primary hr {
  border-top-color: #b0d4f1;
}

.alert-primary .alert-link {
  color: #113049;
}

.alert-secondary {
  color: #383d41;
  background-color: #e2e3e5;
  border-color: #d6d8db;
}

.alert-secondary hr {
  border-top-color: #c8cbcf;
}

.alert-secondary .alert-link {
  color: #202326;
}

.text-danger {
  color: #1d643b;
}

.alert-success {
  color: #1d643b;
  background-color: #d7f3e3;
  border-color: #c7eed8;
}

.alert-success hr {
  border-top-color: #b3e8ca;
}

.alert-success .alert-link {
  color: #123c24;
}

.alert-info {
  color: #385d7a;
  background-color: #e2f0fb;
  border-color: #d6e9f9;
}

.alert-info hr {
  border-top-color: #c0ddf6;
}

.alert-info .alert-link {
  color: #284257;
}

.alert-warning {
  color: #857b26;
  background-color: #fffbdb;
  border-color: #fffacc;
}

.alert-warning hr {
  border-top-color: #fff8b3;
}

.alert-warning .alert-link {
  color: #5d561b;
}

.text-danger {
  color: #d73630;
}

.alert-danger {
  color: #761b18;
  background-color: #f9d6d5;
  border-color: #f7c6c5;
}

.alert-danger hr {
  border-top-color: #f4b0af;
}

.alert-danger .alert-link {
  color: #4c110f;
}

.alert-light {
  color: #818182;
  background-color: #fefefe;
  border-color: #fdfdfe;
}

.alert-light hr {
  border-top-color: #ececf6;
}

.alert-light .alert-link {
  color: #686868;
}

.alert-dark {
  color: #1b1e21;
  background-color: #d6d8d9;
  border-color: #c6c8ca;
}

.alert-dark hr {
  border-top-color: #b9bbbe;
}

.alert-dark .alert-link {
  color: #040505;
}

@keyframes slideInRight {
  from {
      opacity: 0;
      transform: translateX(100%);
  }
  to {
      opacity: 1;
      transform: translateX(0);
  }
}

.custom-alert {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1050; /* Ensure it is above other elements */
  width: auto; /* Adjust width as needed */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Add some shadow for better visibility */
  animation: slideInRight 0.5s ease-out; /* Add the slide-in animation */
  margin-top: 10px;
}

/* loader.css */
#loader-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background-color: #f3f3f3;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100px;
}

.dot {
  width: 20px;
  height: 20px;
  background-color: rgb(var(--primaryColor));
  border-radius: 50%;
  animation: bounce 1.5s infinite ease-in-out;
}

.dot:nth-child(2) {
  animation-delay: -0.3s;
}

.dot:nth-child(3) {
  animation-delay: -0.6s;
}

@keyframes bounce {
  0%, 80%, 100% {
      transform: translateY(0);
  }
  40% {
      transform: translateY(-30px);
  }
}

select.unique-select.form-input.error {
  border: 1px solid red;
}

/* Add custom CSS */

.response-box {
  display: flex;
  justify-content: flex-start;
  gap: 8px !important;
  align-items: flex-start;
}

button.btn-add-response-box {
  background: #116a1433;
  border-radius: 4px;
  min-width: 20px !important;
  width: 20px;
  height: 20px !important;
  border: 1px solid #0a4f02;
  font-size: 18px;
  line-height: 13px;
  font-weight: lighter;
  padding: 0px;
  color: #0a4f02;
}

.custom-table tbody tr td:nth-child(2) {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  align-items: center;
}

.custom-table thead tr th:nth-child(2) .capitalize {
  padding-left: 28px;
}
.form-group+.form-group {
  margin-top: 0px;
}
.response-box .form-group {
  order: 2;
 max-width: 220px;
}
.btn-remove-response-box {
  background: #d10e0026;
  border-radius: 4px;
  min-width: 20px !important;
  height: 20px;
  border: 1px solid #d10e00;
  font-size: 18px;
  line-height: 13px;
  font-weight: lighter;
  padding-bottom: 12px;
  color: #d10e00;
  margin-top: 35px;
order: 1;
}

body table {
  user-select: none;  /* Prevents text selection */
  -webkit-user-select: none; /* For Safari and Chrome */
  -moz-user-select: none; /* For Firefox */
  -ms-user-select: none; /* For Internet Explorer/Edge */
  -webkit-touch-callout: none; /* Disable callout for iOS devices */
}