@tailwind base;
@tailwind components;
@tailwind utilities;

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

/* app/assets/stylesheets/application.css */

@keyframes fade-in-down {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-out-up {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

.animate-fade-in-down {
  animation: fade-in-down 0.3s ease-out;
}

.animate-fade-out-up {
  animation: fade-out-up 0.3s ease-out;
}

.chartkick-download-button {
  background-color: #4a90e2; 
  color: white; 
  border: none; 
  padding: 10px 20px; 
  font-size: 10px; 
  border-radius: 5px; 
  cursor: pointer; 

}

.chartkick-download-button:hover {
  background-color: #357ABD; 
}

select {
  overflow: hidden;
}

textarea {
  resize: none !important;
}

.message.user-message {
  white-space: pre-wrap;
}

.llm-message-content ol li,
.llm-message-content ul li {
  list-style-position: inside;
  padding-left: 1.2em;
  margin-top: 0.25em;
  margin-bottom: 0.25em;
}

.llm-message-content ol li {
  list-style-type: decimal;
}

.llm-message-content ul li {
  list-style-type: disc;
}

.llm-message-content li > p {
  margin: 0;
  display: inline;
}

.scroll-sync-container {
  position: relative;
}

.scroll-top {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

.scroll-bottom {
  overflow-x: auto;
  overflow-y: auto;
}


.scroll-top::-webkit-scrollbar {
  height: 8px;
}
.chart-container {
    position: relative;
    width: 1000px; 
    height: 600px; 
    margin: 0 auto;
}

.chart-container-donut {
    position: relative;
    height: 665px; 
}

.chart-container2 {
    position: relative;
    width: 100%; 
    max-width: 1485px; 
    height: 950px; 
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.center-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.center-text .total-value {
    font-size: 28px;
    font-weight: normal;
    color: #4a4a4a;
}

.center-text .total-label {
	font-size: 22px;
	font-weight: normal;
	color: #4a4a4a;
}

.dataTables_length select{
	padding-right: 30px !important;
	padding-left: 10px !important;
}

.dataTables_length{
	margin-bottom: 30px !important;
}
/*
  
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


*/