body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-image: url(images/background.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-attachment: fixed;
    background-position: center;
}


hr {
background: url(../images/hr.gif) repeat-x;
border: none;
height: 2px;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #212529;
}

select, input, textarea {
    font-size: 14px;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid #ced4da;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

select:hover, input:hover, textarea:hover {
    border-color: #80bdff;
    box-shadow: 0 0 4px rgba(0, 123, 255, 0.25);
}

input.button, button {
    color: #ffffff;
    background: linear-gradient(135deg, #4e9ff5, #3771c8);
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    padding: 10px 20px;
    transition: all 0.3s ease;
}

input.button:hover, button:hover {
    background: linear-gradient(135deg, #66b8ff, #559ce8);
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

textarea {
    min-height: 80px;
    resize: vertical;
}

h1 {
    font: 2.5em "Georgia", serif;
    color: #333;
    margin: 0;
    text-align: center;
    padding: 20px;
}

h1 small {
    font-size: 0.6em;
    letter-spacing: 0.15em;
    color: #555;
}

#comunsite {
width: 85%;
text-align: center;
border: 1px solid #c5c5c5;
color: #212529;
font-size: 12px;
padding: 0px;
background-color: white;
}

#header {
background-image: url(images/header_dnevnik.jpg);
background-size: cover; /* Ensures background image covers the entire div */
  background-position: center center; /* Keeps the background centered */
  margin: 0 auto;
  border: none;
  width: 100%; /* Make the width responsive */
  height: auto; /* Let height adjust based on the width */
  max-height: 300px; /* Optional: Set a maximum height */
  aspect-ratio: 1450 / 187; /* Maintain the same aspect ratio */
}

#headerzoo {
background-image: url(images/header_zoo.jpg);
background-size: cover; /* Ensures background image covers the entire div */
  background-position: center center; /* Keeps the background centered */
  margin: 0 auto;
  border: none;
  width: 100%; /* Make the width responsive */
  height: auto; /* Let height adjust based on the width */
  max-height: 300px; /* Optional: Set a maximum height */
  aspect-ratio: 1450 / 187; /* Maintain the same aspect ratio */
}

#menutab {
background: url(../images/menutab.jpg) no-repeat;
height: 35px;
color: #FFFFFF;
font-size: 17px;
border: none;
}

#menutabig {
    background-color: #cdf5ff; /* Light blue background */
    height: 40px; /* Slightly taller for modern design */
    font-size: 14px;
    font-weight: bold;
    color: #005f73; /* Complementary text color */
    text-align: center; /* Center the text */
    line-height: 40px; /* Vertically align text */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    transition: all 0.3s ease-in-out; /* Smooth transitions */
}

#menutabig:hover {
    background-color: #99dcff; /* Slightly darker on hover */
    color: #003845; /* Darker text for better contrast */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Enhance shadow on hover */
    transform: translateY(-2px); /* Slight lift effect */
    cursor: pointer;
}

#leftcol {
float:left;
width:265px;
}

#rightcol {
	width:85%; 
	
}
img {
border: 0px;
}

ul#topnav {
margin: 1px 0 20px;
padding: 0;
list-style: none;
font-size: 1.1em;
clear: both;
float: left;
background-image: url(../images/menuback.gif);
background-repeat: repeat-x;
width: 925px;
}

ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden;
float: left;
height:40px;
}

ul#topnav a, ul#topnav span {
padding: 10px 20px;
float: left;
text-decoration: none;
color: #fff;
text-transform: uppercase;
clear: both;
height: 20px;
line-height: 20px;
background: #1d1d1d;
}

ul#topnav a {
color: #7bc441;
}

ul#topnav span {
display: none;
}

ul#topnav.v2 span{
background: url(../images/menuhover.gif) repeat-x left top;
}

ul#topnav.v2 a{
color: #555;
background: url(../images/menuhover.gif) repeat-x left bottom;
}

#kolichka{
	position:absolute;
	right:0px;
	height:72px;
	top: 27px;
	width: 175px;
	background-image: url(../images/kolichka.png);
	background-repeat: no-repeat;
}

#productite{
padding-left: 74px;
padding-top: 11px;
}

#id2{
    display:none;
}

.buttonposesh-style {
  flex: 1 1 30%;
  min-width: 160px;
  padding: 10px 15px;
  font-size: 15px;
  border-radius: 8px;
  text-decoration: none;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  color: white;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.buttonposesh-style:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
  color: white !important;
}

/* Пулсиращ блясък ефект */
.buttonposesh-style::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  transform: skewX(-20deg);
  transition: 0.5s;
}

.buttonposesh-style:hover::after {
  left: 130%;
}

.purple {
    background: linear-gradient(135deg, #7d28ae, #9437ca); /* Slightly darker but balanced */
    color: #ffffff;
    font-weight: bold;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 9px;
    padding-bottom: 9px;
    border-radius: 8px; /* Optional: rounded corners */
    transition: all 0.3s ease; /* Smooth hover effect */
}

.purple:hover {
    background: linear-gradient(135deg, #9437ca, #7d28ae); /* Reversed gradient */
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
}

.blue {
    background: linear-gradient(135deg, #4b9cd6, #377ab7); /* Slightly darker but balanced */
    color: #ffffff;
    font-weight: bold;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 9px;
    padding-bottom: 9px;
    border-radius: 8px; /* Optional: rounded corners */
    transition: all 0.3s ease; /* Smooth hover effect */
}

.blue:hover {
    background: linear-gradient(135deg, #377ab7, #4b9cd6); /* Reversed gradient */
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
}

.orange {
    background: linear-gradient(135deg, #f0a94d, #d98a30); /* Slightly darker but balanced */
    color: #ffffff;
    font-weight: bold;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 9px;
    padding-bottom: 9px;
    border-radius: 8px; /* Optional: rounded corners */
    transition: all 0.3s ease; /* Smooth hover effect */
}

.orange:hover {
    background: linear-gradient(135deg, #d98a30, #f0a94d); /* Reversed gradient */
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
}


.menu-wrapper {
    margin: 20px auto;
    width: fit-content;
    padding: 10px;
    border: 1px solid #d4d4d4;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
}

.menu-table {
    margin: 0 auto;
    border-spacing: 10px;
    font-weight: 600;
    cursor: pointer;
}

.menu-table td {
    text-align: center;
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.menu-table td:hover {
    background-color: #e9f7ec;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-3px);
}

.menu-table td.active {
    background-color: #e9f7ec; /* същия зелен фон като hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-3px);
}

.menu-button {
    display: block;
    padding: 10px 15px;
    font-size: 14px;
    color: #393f45;
    border-radius: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.menu-button:hover {
    color: #198754;
}

.menutabc {
padding-left: 5px;
padding-top:3px;
padding-right:5px;
padding-bottom:3px;
font-size:14px;
}

.inputoblig {
    background-color: #e9f7ec;
    border-color: #28a745;
}

.petshop {
    background-color: #f6ffe5; /* Softer pastel green */
    border: 1px solid #a3d9a5; /* Slightly thicker, modern border */
    border-radius: 8px; /* Rounded corners for a smoother look */
    font-size: 14px;
    padding: 8px; /* Slightly increased padding for a better visual */
    transition: all 0.3s ease; /* Smooth transitions for hover effects */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

.petshop:hover {
    background-color: #eaffd3; /* Slightly darker green on hover */
    border-color: #7cc47e; /* Change border color for hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Enhanced shadow on hover */
    transform: translateY(-2px); /* Slight lift effect */
}

.petshopoblig {
    background-color: #eef9ff; /* Soft pastel blue */
    border: 1px solid #96c5db; /* Slightly thicker, modern border */
    border-radius: 8pxpx; /* Rounded corners for a smoother look */
    font-size: 14px;
    padding: 8px; /* Slightly increased padding for better spacing */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

.petshopoblig:hover {
    background-color: #dff4ff; /* Slightly darker blue on hover */
    border-color: #65a4c8; /* Change border color for hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Enhanced shadow on hover */
}

.container {
width: 925px;
height: 330px;
position: absolute;
top: 50%; left: 50%;
margin: -165px 0 0 -210px;
overflow: hidden;
background-image: url(../images/menuback.gif);
background-repeat: repeat-x;
}

.prdiv {
color: #ffffff;
text-decoration: none;
}

.prdiv:hover{
color: #ffffff;
text-decoration: underline;
}

.orders {
border: 0px #dbdbdb solid;
font-size: 14px;
background-color:#e9ffae;
padding: 2px;
color: #373737;
font-weight: bold;
}

.ordersb {
border: 0px #d4dbe7 solid;
font-size: 14px;
background-color:#cdeaff;
padding: 2px;
color: #373737;
font-weight: bold;
}

.ordersdown {
border: 0px #dbdbdb solid;
background-color:#f1ffda;
padding: 2px;
color: #373737;
}

.opacity {
filter:alpha(opacity=50); 
-moz-opacity: 0.5; 
opacity: 0.5;
border: 0px;
}

.opacity:hover {
filter:alpha(opacity=100);   
-moz-opacity: 1.0;   
opacity: 1.0;
border: 0px;
}

.izchisti {
color: #ff3535;
background-color: #e4eeff;
text-decoration: none;
}

.izchisti:hover {
color: #e4eeff;
background-color: #ff3535;
text-decoration: none;
}

.orderexec {
font-size: 15px;
font-weight: bold;
color:#4faeff;
text-decoration: none;
}

.orderexec:hover {
font-size: 15px;
font-weight: bold;
background-color: #87c7ff;
color:#ffffff;
text-decoration: none;
}

.labkniga {
font-size: 14px;
font-weight: bold;
background-color: #ffffff;
color: #6699ff;
text-decoration: none;
}

.labkniga:hover {
font-size: 14px;
font-weight: bold;
background-color: #6699ff;
color: #ffffff;
text-decoration: none;
}

.pacient {
background-color: #f1fcff;
border: 1px #d9d9d9 solid;
border-radius: 10px;
width: 65%;
font-size:14px; 
padding: 25px;
}

.done {
    background-color: #def6eb;
    color: #0f5132;
    border: 0px;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
}

.done1 {
    background-color: #def6eb;
    color: #0f5132;
    border: 1px solid #badbcc;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
}

.error1 {
    background-color: #f8d7da;
    color: #842029;
    border: 1px solid #f5c2c7;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    
.error {
    background-color: #f8d7da;
    color: #842029;
    border: 0px;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
}