.contain_chart {
  display: flex;
  align-items: center;
  justify-content: center;
}

.asterisk {
  color: red;
  margin-left: 5px;
  font-weight: bold;
}

.rating-container {
    position: fixed;
    right: 10px;
    top: 80%;
    transform: translateY(-50%);
    background-color: #fafbff;
    animation: slideInFromRight 0.5s ease-out;

}

@keyframes slideInFromRight {
  0% {
      transform: translateX(100%) translateY(-50%);
      opacity: 0;
  }
  100% {
      transform: translateX(0) translateY(-50%);
      opacity: 1;
  }
}

.rating {
  padding: 10px;
  right:50px;
  text-align: center;
}

.rating label i {
  color: #000000;
  cursor: pointer;
  transition: color 0.2s ease-in-out;
  margin-right: 3px;
}

.rating label i.filled,
.rating label i:hover {
  color: gold;
}

.rating label i.filled~i {
  color: #ccc;
}

.close-button {
  position: absolute;
  top: -1px;
  right: 6px;
  color: #999;
  text-decoration: none;
}


.close-button:hover {
  color: #333;
}



.f-14 {
  font-size: 13px;
}

.small {
  height: 25px;
}

@media screen and (min-width: 480px) {

  /* adjust the padding and width for screens 480px and larger */
  .rating-container {
    display: flex;
    align-items: center;
    padding: 15px;
    width: auto;
    height: auto;
    transform: translateY(-50%);
  }
  .feedback{
    height: fit-content;
    width: auto;
  }

}

.success-animation {
  position: absolute;
  top: 30%;
  left: 40%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background-color: #32CD32;
  border-radius: 50%;
  opacity: 0;
  animation: success 1s ease-in-out;
}

.success-animation::before {
  content: "\1F44D";
  /* Thumbs-up emoji */
  font-size: 30px;
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes success {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  50% {
    opacity: 1;
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

.float-left {
  float: left;
}

/* .float-right {
float:right;
} */

.f-16 {
  font-size: 16px;
}

.modal.right .modal-dialog {
  position: fixed;
  margin: 40px 100px 0 auto;
  /* Adjust the margin-top value as needed */
  width: 400px;
  right: -400px;
  /* Adjust the width of the modal as needed */
  transition: right 0.3s ease;
}

.modal.right.show .modal-dialog {
  right: 0;
}

.message p {
  margin-bottom: 0;
  font-weight: bold;
  color: #212529;
}

.msg-container {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
}

.close-button1 {
  position: absolute !important;
  top: -3px !important;
  right: 8px !important;
  color: #999 !important;
  text-decoration: none !important;
}

.hidden {
  display: none;
}

.getq {
  width: 367px;
  height: 32px;
}

.section-container {
  background-color: #fafbff;
  /* Set your desired background color here */
  padding: 10px;
  /* Adjust the padding to your liking */
}

.dist-chart {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.chart-head {
  font-style: normal;
  font-weight: 500;
  font-size: 24px;
  line-height: 29px;
  text-align: center;
  margin-top: 30px;
}

.chart-img {
  width: 595.63px;
  height: 400.44px;
  margin-top: 38.87px;
  margin-left: 107.41px;
  margin-right: 122.26px;
}

.centered-container {
  /* Set your desired background color here */
  text-align: center;
  /* Adjust the padding to your liking */
}

.genral {
  color: #012970;
}

.dist-chart {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.chart-head {
  font-style: normal;
  font-weight: 300;
  font-size: 1rem;
  line-height: 29px;
  text-align: center;
  /* Center the heading horizontally */
  margin-top: 30px;
  max-width: 400px;
  /* Set a maximum width for the heading */
  margin: 0 auto;
  /* Center the heading horizontally within its container */
}

.chart-img {
  width: 100%;
  /* Set the width to 100% to make it responsive */
  max-width: 600px;
  /* Set a maximum width to avoid excessive scaling on large screens */
  height: auto;
  /* Allow the height to adjust automatically based on the width */
  margin: 0 auto;
  /* Center the chart horizontally */
}

.chart-container {
  width: 100%;
  /* Set the width to 100% to make the chart container responsive */
}

other-supplier-cost {
  display: flex;
  justify-content: center;
  /* Horizontally center content */
  align-items: center;
  /* Vertically center content */
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}

.other-supplier-cost h5 {
  text-align: center;
  margin: 0;
  /* Reset margin to remove any unwanted spacing */
}

#chartContainer {
  width: 100%;
  /* Set the container width to 100% of its parent */
  max-width: 800px;
  /* Optionally, set a maximum width to limit chart size */
}

.chart-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  /* Take up the full width of the parent container */
}

.blue-text {
  color: blue;
}

.custom-label {
  font-weight: bold;
  font-size: 14px;
}

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.left-content {
  flex: 1;
  text-align: left;
}

.center-content {
  flex: 1;
  text-align: center;
}

.right-content {
  flex: 1;
  text-align: right;
}

.feedback {
  width: auto;
  height: fit-content;
}

.submitbox {
  padding: 2px 7px;
  position: absolute;
  top: 14px;
  right: 28px;
}

.loader {
  border: 10px solid #f3f3f3;
  /* Light grey */
  border-top: 10px solid #3498db;
  /* Blue */
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 0.9s linear infinite;
  display: none;
}

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

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

.modal-content {
  /* background-color: rgba(255, 255, 255, 0.5); */
  /* Adjust the last value (0.7) to change the opacity */
  width: 80%;
  /* Adjust the width as per your requirement */
  max-width: 500px;
  /* Optional: You can also set a maximum width */
  height: auto;
}

@media only screen and (max-width: 600px) {
  .modal-content {
    width: 80%;
    /* Adjust the width for smaller screens */
    max-width: none;
    /* Remove max-width for smaller screens */
  }
}

.select-wrapper {
  position: relative;
}

.select-wrapper::after {
  content: '';
  width: 0;
  height: 0;
  margin-left: 319px;
  padding-top: 7px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #555; /* Color of the arrow */
  position:absolute;
  top: calc(50% - 3px);
  left: 0px;
  pointer-events: none;
  /* top: 50%;
  left: 980px; / Adjust the distance from the right side as needed / */

  transform: translateY(-120%);
  pointer-events: none;
}

.select-wrapper.active {
  transform: rotate(180deg);
}

.custom-select {
  position: relative;
  width: 100%;

}

.custom-select:after {
  content: '';
  width: 0;
  height: 0;
  padding-top: 12px;
  margin-left: 310px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #555;
  position: absolute;
  top: calc(50% - 3px);
  right: 10px;
  pointer-events: none;
}

.custom-select select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 1px solid #ccc;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.5;
  width: 100%;

}

@media (min-width:768px) {
  .desktop_div {
    display: block
  }

  .mobile_div {
    display: none
  }
}

@media (max-width:768px) {
  .desktop_div {
    display: none
  }

  .mobile_div {
    display: block
  }
}

.reduced-size-table th,
.reduced-size-table td {
  font-size: 11px;
  padding: 2px;
}

.reduced-size-table input.form-control {
  font-size: 11px;
  text-align: center;
}

.reduced-size-table {
  font-size: 11px;

}

.padding-table th,
.padding-table input {
  padding: 10px;
}

th {
  vertical-align: middle;
}

.img_div {
  height: 285px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.tool-img-fluid {
  height: 100%;
  width: auto;
  min-width: 100%;
  object-fit: contain;
}

.btn-back,
.btn-refresh {
  font-size: 1rem;
  /* Adjust size as needed for larger screens */
  padding: 0.1rem 0.2rem;
  /* Adjust padding as needed for larger screens */
}

h1 {
  font-size: 1.2rem;
  /* Adjust size as needed for larger screens */
}

/* Responsive styles for screens up to 768 pixels wide */
@media (max-width: 768px) {

  .btn-back,
  .btn-refresh {
    font-size: 0.9rem;
    /* Reduce font size for smaller screens */
    padding: 0.09rem 0.1rem;
    margin-left: -6px;
    /* Reduce padding for smaller screens */
    margin-top: 15px;
  }

  h1 {
    font-size: 0.1rem;
    /* Reduce font size for smaller screens */
  }
}

@media (max-width: 768px) {
  .height_400 {
    /* Adjust the height for mobile view */
    height: auto;
    /* or any other suitable height */
  }
}

.drop_font {
  font-size: 11px !important;
}

#submit_feedback{
  font-size: 13px;
}


@keyframes fadeInFromCenter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#popup {
  width: 40%;
  position: fixed;
  height: fit-content;
  bottom: 5px;
  left: 21.5%;
  transform: translateX(-50%);
  background-color: #fafbff;
  border: 1px solid #ccc;
  padding: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  z-index: 9999;
  animation: fadeInFromCenter 0.5s ease-out;
}

#closePopupBtn {
  position: absolute;
  top: -1px;
  right: 6px;
  color: #999;
  background-color: #fafbff;
  border: none;
  text-decoration: none;
  font-size: smaller;
}


#closePopupBtn:hover {
  color: #333;
}
        /* Customizing the scrollbar for WebKit browsers (Chrome, Safari, Edge) */
        .flex-nowrap.overflow-auto::-webkit-scrollbar {
          height: 6px; /* Thin scrollbar */
      }
      
      .flex-nowrap.overflow-auto::-webkit-scrollbar-track {
          background: #f1f1f1; /* Light background for the scrollbar track */
      }
      
      .flex-nowrap.overflow-auto::-webkit-scrollbar-thumb {
          background-color: #888; /* Gray scrollbar thumb */
          border-radius: 10px; /* Rounded scrollbar thumb */
      }
      
      .flex-nowrap.overflow-auto::-webkit-scrollbar-thumb:hover {
          background-color: #555; /* Darker grey on hover */
      }
      
      /* Scrollbar styling for Firefox */
      .flex-nowrap.overflow-auto {
          scrollbar-width: thin; /* Thin scrollbar for Firefox */
          scrollbar-color: #888 #f1f1f1; /* Thumb and track colors */
      }
@media (max-width: 425px) {
  #popup {
    width: 90%;
    top: 40%;
    left: 50%;
  }
}

.Estimate_for{
  align-items: flex-start; 
  display: flex; 
  position: relative; 
}
.country_buttons{
  position: relative;  
  align-items: flex-start;
}
@media (max-width:430px) {
  .Estimate_for{
          width: 12rem;
          font-size: 86%;
  }
}
@media (min-width:431px) and (max-width:990px) {
  .Estimate_for{
    width: 15rem;
  }
  
}
@media (min-width:991px) and (max-width:1400px) {
  .estimate_container{
    height: 11px;
  }
  .Estimate_for{
    width: 116px;
  }
  .Estimate_for b{
    font-size: 12px;
  }
}
.figure {
  position: relative;
  display: inline-block;
  overflow: hidden;
  width: 100%;
  max-width: 467px;
}
.arr_hide_mob{
  display: none;
}
.sliding-arrow {
  position: relative;
  margin: 1% auto;
  width: 30px;
  height: 30px;
  background-color: #007bff;
  clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
  cursor: pointer;
  z-index: 10;
}
.modal-backdrop.show {
  display: none;
}
@media (min-width: 481px) and (max-width: 768px) {
  .arr_hide_tab{
          display: block;
  }
  .arr_hide_des {
          display: none;
  }
  .modal-content {
          margin: 40% auto !important;
  }
}
@media (max-width: 480px) {
  .arr_hide_des {
          display: none;
  }
  .arr_hide_mob{
          display: block !important;
  }
  .arr_hide_tab{
          display: none;
  }
  .sliding-arrow {
          position: static;
          width: 20px;
          height: 20px;
  }
  .modal-content {
          margin: 60% auto !important;
  }
}
.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 800px;
  text-align: center;
}
.modal-content h2 {
  font-size: 24px;
  margin-bottom: 20px;
}
.tool-images img {
  margin: 10px;
  width: 200px;
  height: auto;
  cursor: pointer;
}
.tool-images img:hover {
  opacity: 0.7;
}
.design-alert{
  color: rgb(159, 13, 5);
  text-size-adjust: 21px;
}
.tool-img {
  border: 2px solid #007bff;
  border-radius: 8px;
  padding: 5px;
}
.tool-images img {
  margin: 10px;
  display: inline-block;
}
.fig_modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}
.modal {
  background-color: rgba(0, 0, 0, 0.7);
}
.mod_close {
  color: #aaa;
  font-size: 28px;
  font-weight: bold;
  position: absolute;
  top: 10px;
  right: 25px;
  cursor: pointer;
}
.mod_close:hover,
.mod_close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
.design-option {
  display: inline-block;
  margin: 10px;
  text-align: center;
}
.design-option img {
  border: 1px solid #ccc;
  padding: 5px;
}
.select-design-button {
  padding: 5px 10px;
  cursor: pointer;
}
@media (min-width: 768px){
  .design-option img {
    max-width: 40%;
  }
  .select-design-button {
    margin-right: 0px;
  }
}
@media (max-width: 767px){
  .design-option img {
    max-width: 100%;
  }
  .select-design-button {
    margin-top: 10px;
  }
}
.flex-nowrap.overflow-auto::-webkit-scrollbar {
height: 6px;
}
.flex-nowrap.overflow-auto::-webkit-scrollbar-track {
    background: #f1f1f1;
}
.flex-nowrap.overflow-auto::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 10px;
}

.flex-nowrap.overflow-auto::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}
.flex-nowrap.overflow-auto {
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}
.defncss{
  margin-top: 1%;
}
.estimate_container{
  margin-top: 2% !important;
}
@media (max-width: 1440px) and (min-width: 1061px) {
  .defncss{
    margin-top: 1%;
  }
  .estimate_container{
    margin-top: 4% !important;
}
}
@media (max-width: 1060px) and (min-width: 992px) {
  .defncss{
    margin-top: 2%;
  }
  .estimate_container{
    margin-top: 7% !important;
  }
}
@media (max-width: 991px) and (min-width: 541px) {
  .defncss{
    margin-top: 2%;
  }
  .estimate_container{
    margin-top: 8% !important;
  }
}
@media (max-width: 540px) and (min-width: 321px) {
  .defncss{
    margin-top: 2%;
  }
  .estimate_container{
    margin-top: 10% !important;
    text-align: start !important;
  }
  .hero h1{
    font-size: 12px !important;
  }
}
@media (max-width: 320px) {
  .defncss{
    margin-top: 4%;
  }
  .estimate_container{
    margin-top: 18% !important;
    text-align: start !important;
  }
}
.country_buttons {
  display: flex;
}
.country_dropdown {
  display: none;
}
@media (max-width: 425px) {
  .country_buttons {
    display: none !important;
  }
  .country_dropdown {
    display: block;
    width: 100%;
  }
  .country_dropdown select {
    width: 100%;
    padding: 6px;
    font-size: 14px;
    border: 2px solid #DEE2E6;
    border-radius: 6px;
  }
}