.error-message {
  display: block;
  margin-top: 5px;
  margin-bottom: 0px;
}

.custom-alert {
  background-color: #cce5ff; /* Set your desired background color */
  color: #004085; /* Set text color to ensure readability */
  
  width: 100%; /* Set the width to match the input fields */
  height: auto; /* Adjust the height as needed */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}

.custom-alert .btn-close {
  width: 3rem;
  height: 3rem;
  padding: 0;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.label-text {
  color: white;
}

/* Form container with animated border */
.custom-form-container {
  width: 40% !important;
  padding: 20px;
}

/* Responsive form container width */
@media (max-width: 768px) {
  .custom-form-container {
    width: 60% !important;
  }
}

@media (max-width: 576px) {
  .custom-form-container {
    width: 75% !important;
  }
}

@media (max-width: 400px) {
  .custom-form-container {
    width: 85% !important;
  }
}

.custom-select {
  border: 2px solid #ccc; /* Simple grey border */
  border-radius: 5px; /* Optional: add rounded corners */
  color: #fff; /* Text color for select element */
}

.custom-select:focus {
  color: #fff;
}

.custom-select option {
  background-color: #333; /* Background color for options */
  color: #fff; /* Text color for options */
}


.comment-textarea {
  height: 100px; /* Adjust the height as needed */
  resize: vertical; /* Allow vertical resizing */
}

.iti {
  width: 100%;
}

.iti__selected-flag {
  color: white;
}

.iti__selected-flag .iti__flag {
  margin-left: 8px;
}

.iti__selected-flag .iti__arrow {
  border-top-color: #fff;
}

.iti__input {
  width: 100%; /* Adjust width as per your requirement */
  border-radius: 0 5px 5px 0;
  color: white;
}

.iti--separate-dial-code .iti__selected-dial-code {
  color: white;
}

.iti__country-list {
  width: fit-content;
  background-color: #333; /* Background color for the dropdown menu */
  color: #fff; /* Text color for the options */
  max-height: 200px; /* Adjust the height as needed */
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin; /* For Firefox */
  scrollbar-color: #888 #333; /* For Firefox */
}

.iti__country {
  background-color: #333; /* Background color for each option */
  color: #fff; /* Text color for each option */
}

.iti__country:hover,
.iti__country:focus {
  background-color: #444; /* Background color on hover */
  color: #fff; /* Text color on hover */
}

.iti__flag-container:hover .iti__selected-flag,
.iti__flag-container:focus .iti__selected-flag {
  background-color: #444; /* Background color for the selected flag on hover */
  color: #fff; /* Text color for the selected flag on hover */
}

.iti__country .iti__dial-code {
  color: #fff; /* Text color for the dial code */
}

.iti__selected-dial-code {
  color: #fff; /* Text color for the selected dial code */
}

/* Webkit-based browsers (Chrome, Safari) */
.iti__country-list::-webkit-scrollbar {
  width: 6px;
}

.iti__country-list::-webkit-scrollbar-track {
  background: #333;
}

.iti__country-list::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 3px;
  border: 2px solid #333;
}

/* Ensure the country list scrolls with mouse wheel */
.iti__country-list {
  -webkit-overflow-scrolling: touch;
}

.intl-tel-input .country-list {
  max-height: 200px;
  overflow-y: auto;
}


.demo-request-content,
.demo-request-header,
.demo-request-body{
  background-color: #333 !important;
  color: white !important;
  border: none;
}

.demo-request-footer {
  background-color: #333;
  border-top: none;
}

.demo-request-title {
  font-weight: bold;
  color: white !important;
}

.bullet-points p::before {
  content: '👉'; /* Bullet point */
  display: inline-block;
  margin-right: 0px; /* Space between bullet and text */
  color: white; /* Color of the bullet */
  font-size: 1.5em; /* Size of the bullet */
  vertical-align: middle; /* Align bullet with the text */
  
}

.bullet-points p {
  position: relative; /* Allows the use of the '::before' pseudo-element */
  padding-left: 20px; /* Space for the bullet */
  text-indent: -20px; /* Align text with bullet */
}



.custom-btn-color,
.custom-btn-color:hover{
  background-color: #825CFF;
  color: white;
}
.custom-close-color,
.custom-close-color:hover{
  background-color: #825CFF;
  color: white;
}

/* for green color pattern */
/* .footer-img {
  position: absolute;
  top: 30%; 
  left: 0;
  width: 600px; 
  height: auto;
  z-index: -1;
} */

body {
  background-color: #e6e6e6;
  width: 100%;
  height: 100%;
}

.modal-content {
  text-align: center; /* Center text and elements in modal */
}

#success_tic .modal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* Center vertically and horizontally */
}

.checkmark-circle {
  width: 150px;
  height: 150px;
  position: relative;
  display: inline-block;
  vertical-align: top;
  margin: 0 auto; /* Center the circle horizontally */
}

.checkmark-circle .background {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: #1ab394;
  position: absolute;
}

.checkmark-circle .checkmark {
  border-radius: 5px;
}

.checkmark-circle .checkmark.draw:after {
  -webkit-animation-delay: 300ms;
  -moz-animation-delay: 300ms;
  animation-delay: 300ms;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease;
  -moz-animation-timing-function: ease;
  animation-timing-function: ease;
  -webkit-animation-name: checkmark;
  -moz-animation-name: checkmark;
  animation-name: checkmark;
  -webkit-transform: scaleX(-1) rotate(135deg);
  -moz-transform: scaleX(-1) rotate(135deg);
  -ms-transform: scaleX(-1) rotate(135deg);
  -o-transform: scaleX(-1) rotate(135deg);
  transform: scaleX(-1) rotate(135deg);
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.checkmark-circle .checkmark:after {
  opacity: 1;
  height: 75px;
  width: 37.5px;
  -webkit-transform-origin: left top;
  -moz-transform-origin: left top;
  -ms-transform-origin: left top;
  -o-transform-origin: left top;
  transform-origin: left top;
  border-right: 15px solid #fff;
  border-top: 15px solid #fff;
  border-radius: 2.5px !important;
  content: '';
  left: 35px;
  top: 80px;
  position: absolute;
}

@-webkit-keyframes checkmark {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
  }
  20% {
    height: 0;
    width: 37.5px;
    opacity: 1;
  }
  40% {
    height: 75px;
    width: 37.5px;
    opacity: 1;
  }
  100% {
    height: 75px;
    width: 37.5px;
    opacity: 1;
  }
}

@-moz-keyframes checkmark {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
  }
  20% {
    height: 0;
    width: 37.5px;
    opacity: 1;
  }
  40% {
    height: 75px;
    width: 37.5px;
    opacity: 1;
  }
  100% {
    height: 75px;
    width: 37.5px;
    opacity: 1;
  }
}

@keyframes checkmark {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
  }
  20% {
    height: 0;
    width: 37.5px;
    opacity: 1;
  }
  40% {
    height: 75px;
    width: 37.5px;
    opacity: 1;
  }
  100% {
    height: 75px;
    width: 37.5px;
    opacity: 1;
  }
}