@import 'variables.css';
@import 'animation.css';

body {
    max-width: 100vw;
    overflow-x: hidden;
}

.modal-dialog {
    z-index: none !important;
}


.btn-primary, .bg-primary {
    background-color: var(--bs-primary) !important;
  }

  .btn-danger, .bg-danger {
    background-color: var(--bs-danger) !important;
  }

  .btn-info, .bg-info {
    background-color: var(--bs-info) !important;
  }

  .btn {
    outline: none !important;
    border: none !important;
  }

  .btn-outline-primary {
    border: 1px solid var(--bs-primary) !important;
    outline: none;
  }

  .btn-outline-dark {
    border: 1px solid var(--bs-gray-900) !important;
    outline: none;
    color: var(--bs-gray-900) !important;
  }

  .form-control, .form-select {
    /* border-radius: 0; */
  }

  .form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: none !important;
    outline: none !important;
    border: 1px solid var(--bs-primary) !important;
  }

  .accordion .accordion-button:focus {
    box-shadow: none !important;
    outline: none !important;
  }


/* Style the checkbox when it is checked */
input[type="checkbox"]:checked {
    background-color: var(--bs-primary);  /* red when checked */
    border-color: var(--bs-primary);
}

/* Style the checkmark */
input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 7px;
    width: 6px;
    height: 6px;
    background-color: white;    /* Checkmark color */
    clip-path: polygon(0% 0%, 100% 100%, 100% 0%, 0% 100%);
}

.btn-close:focus {
    box-shadow: none !important;
}

.btn {
  position: relative;
  overflow: hidden;
  z-index: 2;
  /* border-radius: 0 !important; */
}



.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .7); /* Swipe color */
  color:#fff !important;
  transition: left 0.4s ease;
  z-index: -1;
}

.btn:hover::before {
  left: 0; /* Swipe effect on hover */
}

.btn:hover {
  color: #fff !important;
}

.btn.active {
    color: #fff !important;
    /* background-color: rgba(0, 0, 0, .3) !important; Swipe color */
}

.btn.active::before {
    left: 0 !important;
}

.btn:focus {
    box-shadow: none !important;
}

input.select2-search__field:focus {
  outline: none;
  /* box-shadow: none !important;
  outline: none !important; */
  border: 1px solid var(--bs-primary) !important;
}


.shake_in {
    animation-name: shakeIn;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

.slide_in {
    animation-name: slideIn;
    animation-duration: 0.3s;
}

.fade_in {
    animation-name: fadeIn !important;
    animation-duration: .5s !important;
    animation-fill-mode: forwards;
}

.fade_out {
    animation-name: fadeOut !important;
    animation-duration: .5s !important;
    animation-fill-mode: forwards;
}

.pop_in {
    opacity: 0;
    transform: translateY(10px);
    animation-name: popIn !important;
    animation-duration: .4s !important;
    animation-fill-mode: forwards;
}

.pop_out {
    opacity: 1;
    transform: translateY(10px);
    animation-name: popOut !important;
    animation-duration: .4s !important;
    animation-fill-mode: forwards;
}

.pop_up {
    opacity: 0;
    transform: translateY(10px);
    animation-name: popUp !important;
    animation-duration: .8s !important;
    animation-fill-mode: forwards;
}

.pop_in_on_scroll {
    opacity: 0;
    transform: translateY(100px);
    transition: 300ms;
}

.pop_in_on_scroll_to_left {
    opacity: 0;
    transform: translateX(100px);
    transition: 300ms;
}

.pop_in_on_scroll_to_right {
    opacity: 0;
    transform: translateX(-100px);
    transition: 300ms;
}

.scroll_revealed {
    animation-name: popUp;
    animation-duration: .8s;
    animation-fill-mode: forwards;
}

.scroll_revealed_to_left {
    animation-name: popLeft;
    animation-duration: .8s;
    animation-fill-mode: forwards;
}

.scroll_revealed_to_right {
    animation-name: popRight;
    animation-duration: .8s;
    animation-fill-mode: forwards;
}

.zoom_on_hover {
    transition: 300ms !important;
    /* animation-duration: .3s; */
}

.zoom_on_hover:hover {
    /* animation-name: zoomIn;
    animation-duration: .3s;
    animation-fill-mode: forwards; */
    transition: 300ms !important;
    transform: scale(1.08) translateY(-10px) !important;

}


.cursor-pointer {
    cursor: pointer !important;
}


.table th {
    vertical-align: middle;
    text-align: center;
}

.table tr td {
    vertical-align: middle;
}


/* Adjust the padding inside the Select2 input */
.select2 {
    border: none;
    display: block;
}

.select2-container .select2-selection--single {
    padding: 1rem; 
    border: 1px solid rgba(0, 0, 0, .1);
    display: block;
}

.select2-container .select2-selection--single:focus {
    box-shadow: none !important;
    outline: none !important;
    border: 1px solid var(--bs-primary) !important;
    display: block;
}

.select2-container .select2-selection__rendered {
    margin: -.9rem;
    display: block;
}

.select2-selection {
    /* border-radius: 0 !important; */
    padding: 18px !important;
}

.form-select {
    min-width: 150px;
    display: block;
}

.form-floating {
    margin: 1rem 0;
}

.card-header, .card-footer {
    background-color: rgba(240, 240, 240, .5);
}

.card {
    /* border-radius: 0; */
    background-color: rgba(255, 255, 255, .5);
}

.modal-content {
    /* border-radius: 0 !important; */
}



.swal2-container {
  z-index: 9999 !important; /* higher than Bootstrap modal (1050) */
}

/* Adjust floating label to sit at the top */
.form-floating > label {
  padding: 0 0.75rem;
  top: 0;
  height: 100%;
  line-height: 1.5;
  font-size: 1rem;
  background-color: transparent;
  display: flex;
  align-items: center;
}

/* .form-floating > .form-control {
    font-size: large;
} */

/* Optional: Shrink label on focus/filled if you want */
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select:focus ~ label,
.form-floating > .form-select:not(:placeholder-shown) ~ label {
  top: -5px;
  font-size: 0.875rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  height: auto;
  background-color: white;
  opacity: 1 !important;
}

.form-floating .form-control, .form-floating .form-select {
    background-color: transparent !important;
}

input:-webkit-autofill,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important; /* Your BG color */
  box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color: #000 !important; /* Text color */
  caret-color: #000 !important; /* Cursor color */
  transition: background-color 5000s ease-in-out 0s; /* Optional */
}


textarea {
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
}

.form-floating textarea ~ label {
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
}