/* @media only screen and (max-width: 600px) {
	table {
	  width: 100%  !important;
	  font-size: 14px  !important;
	  padding: 10px  !important;
	  margin: 0  !important;
	}
  } */


.ks-category-button {
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5) !important;
    color: #ffffff !important;
    background-color: #1a1a1a !important;
    font-size: 22px !important;
    border-radius: 8px !important;
	border: none;
    padding: 8px 12px !important; /* Adjust this if necessary */
    cursor: pointer !important;
    /* removed width property */
    margin: 5px 5px 5px 0px !important;
    display: inline-block; /* This will allow button to grow with text */
    text-align: center; /* This is normally default for buttons */
}

.ks-category-button:hover {
	color: #ffffff !important;
	background-color: #4d4d4d !important;
}

.ks-category-button-1 {
	box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5) !important;
	color: #ffffff !important;
	background-color: #808080 !important;
	font-size: 19px !important;
	border-radius: 8px !important;
	padding: 15px 10px !important;
	cursor: pointer !important;
	width: 150px !important;
	height: 60px !important;
	margin: 5px 5px 5px 5px !important;
}

.ks-category-button-1:hover {
	color: #ffffff !important;
	background-color: #393939 !important;
}

.ks-special-button {
	box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5) !important;
	color: #ffffff !important;
	background-color: #313131 !important;
	font-size: 19px !important;
	border-radius: 8px !important;
	padding: 15px 10px !important;
	cursor: pointer !important;
	width: 150px !important;
	margin: 5px 5px 5px 5px !important;
}

.ks-special-button:hover {
	color: #a9a9a9 !important;
	background-color: #080808 !important;
}

.ks-special-button-black {
	box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5) !important;
	color: #ffffff !important;
	background-color: #313131 !important;
	font-size: 12px !important;
	border-radius: 8px !important;
	padding: 15px 10px !important;
	cursor: pointer !important;
	width: 150px !important;
	margin: 5px 5px 5px 5px !important;
}

.ks-special-button-black:hover {
	color: #a9a9a9 !important;
	background-color: #080808 !important;
}

.ks-button-yes-small {
	box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5) !important;
	color: #ffffff !important;
	background-color: #0d7c03 !important;
	font-size: 13px !important;
	border-radius: 8px !important;
	padding: 5px 5px !important;
	cursor: pointer !important;
	width: 80px !important;
	margin: 5px 5px 5px 5px !important;
}

.ks-button-yes-small:hover {
	color: #a9a9a9 !important;
	background-color: #014500 !important;
}

.ks-button-no-small {
	box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5) !important;
	color: #ffffff !important;
	background-color: #313131 !important;
	font-size: 13px !important;
	border-radius: 8px !important;
	padding: 5px 5px !important;
	cursor: pointer !important;
	width: 80px !important;
	margin: 5px 5px 5px 5px !important;
}

.ks-button-no-small:hover {
	color: #a9a9a9 !important;
	background-color: #080808 !important;
}

.ks-button-dashboard {
	color: #ffffff !important;
	background-color: #535353 !important;
	font-size: 12px !important;
	border-radius: 4px !important;
	padding: 1px 1px !important;
	cursor: pointer !important;
	width: 100px !important;
	height: 10px !important;
	margin: 1px 1px 1px 0px !important;
}

.ks-button-dashboard:hover {
	color: #ffffff !important;
	background-color: #282828 !important;
}

/* .ks-category-button-active {
	color: #ffffff !important;
	background-color: #7c2525 !important;
} */

.ks-inline{
	display: flex;
}

.ks-inline1{
	display: flex;
}

.ks-padding{
	padding: 10px;
}

.ks-padding-1{
	padding: 5px;
}

.ks-margin-bottom-150{
	margin-bottom: 150px;
}

.ks-margin-bottom-50{
	margin-bottom: 50px;
}

.ks-margin-1{
	margin: 0px 5px 5px 5px;
}

.ks-align-top {
	vertical-align: text-top !important;
}

.ks-flex-box {
	display: flex;
	flex-wrap: wrap;
}
.ks-flex-box>* {
	flex: 1 1 120px;
}

.ks-flex-box-big {
	display: flex;
	flex-wrap: wrap;
}
.ks-flex-box-big>* {
	flex: 1 1 160px;
}

.ks-textarea_system {
	width: 100% !important;
	height: 200px !important;
	padding: 12px 20px !important;
	box-sizing: border-box !important;
	border: 2px solid #a81313 !important;
	border-radius: 8px !important;
	background-color: #f8f8f8 !important;
	font-size: 16px !important;
	resize: none !important;
	
}

.ks-textarea_chat {
	width: 100% !important;
	/* height: 800px !important; */
	min-height: 10vh;
	max-height: 60vh;
	padding: 12px 20px !important;
	box-sizing: border-box !important;
	/* border: 2px solid #a2a2a2 !important;
	border-radius: 8px !important; */
	background-color: #f8f8f8 !important;
	font-size: 16px !important;
	resize: none !important;
	overflow-y: visible !important; /* Add vertical scrolling */
	position: relative; /* Add this to establish a new positioning context for the inner content */
}

.chat-content {
	/* min-height: 300px; */
	/* padding-bottom: 140px; */ /* Adjust this value based on the image's height to prevent overlap */
	padding-bottom: 30px;
	overflow-y: auto; /* Allow scroll for contents */
	/* max-height: 800px; */ /* Adjust this value as needed for your layout */
	max-height: 60vh;
	position: relative; /* This is important */
}


.bottom-image {
    max-width: 100%;
    max-height: 512px;
    display: block;
    margin: 10px auto; /* Auto margins to center the image */
    border-radius: 15px !important;
}

.ks-okvir-pitanja-pom {
	width: 100% !important;
	padding: 0px 5px !important;
	box-sizing: border-box !important;
	border: 1px solid #b8b8b8 !important;
	border-radius: 8px !important;
	background-color: #f8f8f8 !important;
	font-size: 14px !important;
	font-family: 'Roboto', sans-serif !important;
	min-height: 40px !important;
	overflow-y: hidden; /* Prevent scrollbar */
	display: flex; /* Makes the container a flex container */
	align-items: center; /* Vertically centers the child content */
	cursor: pointer !important;
}

.ks-okvir-pitanja {
	width: 100% !important;
	padding: 0px 0px !important;
	box-sizing: border-box !important;
	border: 1px solid #b8b8b8 !important;
	border-radius: 8px !important;
	background-color: #f8f8f8 !important;
	font-size: 16px !important;
	font-family: 'Roboto', sans-serif !important;
	min-height: 60px !important;
	overflow-y: hidden; /* Prevent scrollbar */
	margin-top: 20px;
}



.ks-textarea_question {
	width: 100% !important;
	padding: 12px 20px !important;
	box-sizing: border-box !important;
	/* border: 1px solid #b8b8b8 !important; */
	border: none;
	border-radius: 8px !important;
	background-color: #f8f8f8 !important;
	font-size: 16px !important;
	font-family: 'Roboto', sans-serif !important;
	min-height: 60px !important;
	overflow-y: hidden; /* Prevent scrollbar */
	resize: none !important; /* Prevent manual resizing */
}

.ks-textarea_question:focus {
   /*  border: 2px solid #b8b8b8 !important; */
    outline: none !important; /* Remove focus outline if desired */
}


#table_recipes table {
		border: none !important;
	}
#table_recipes th {
	border-bottom-width: 0px !important;
}
#table_recipes td {
	border-bottom-width: 0px !important;
}
#table_recipes tr:nth-child(even) {
	border-bottom-width: 0px !important;
}


.loader {
	border: 4px solid #f3f3f3; /* Light grey */
	border-top: 4px solid #3498db; /* Blue */
	border-radius: 50%;
	width: 60px;
	height: 60px;
	animation: spin 1s linear infinite;

	 /* Center Aligning */
	 position: absolute;
	 top: 50%;
	 left: 45%;
	 transform: translate(-50%, -50%);
}
  
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.kamado-magic-logo {
    /* Set the width and height for the image */
    width: 50px;
    height: 50px;
    /* Make the image round */
    border-radius: 50% !important;
    /* Add a black border */
    border: 2px solid black !important;
    /* Ensure the image doesn't exceed its container */
    object-fit: cover;
    /* Optional: Center the image if within a container */
    display: block;
    margin: 0 auto;
}