body {
   padding: 0 10px 0 10px;
}

h1, h3 {
   margin-bottom: 30px;
   text-align: center;
}
p{
	padding:0px;
	margin:0px;
	}

div.alert{
	text-align: center;
}

form {
   margin-bottom: 30px;
}

table td {
   text-align: center;
   vertical-align: top;

}

tr:nth-child(1) {
   text-align: center;
   font-weight: bold;
   background-color: #eee;
}

tr:nth-child(1) td:nth-child(2) {
   text-align: center;
}

td:nth-child(2) {
   text-align: left;
   //background-color: #eee;
}

td:last-child {
	font-weight:bold;
}

.bordered{
	border-left: 1px solid #999;
}

.grey {
   background-color: #ccc !important;
}

.red {
   background-color: #fcc !important;
}
.yellow{
	background-color: #f5edd5 !important;
}

span.selected{
	background-color: #d1e7dd !important;
}
span.selectedHi{
	background-color: #9ec5fe !important;
}
tr.selected td{
	background-color: #d1e7dd !important;	
}

tr.selectedHi td{
	background-color: #9ec5fe !important;	
	
	/* Добавляем переход для свойства background-color */
    /* Transition позволяет плавно менять цвет при наведении или изменении класса */
    transition: background-color 0.5s ease-in-out;

    /* Анимация с использованием @keyframes для постоянного изменения */
    /* Если хотим, чтобы цвет менялся сам по себе, без взаимодействия */
    animation: background-color-change 5s infinite alternate; /* 5s - длительность, infinite - бесконечно, alternate - туда-обратно */
}
p.small{
	font-weight: normal;
	font-size: 8pt;
}

tr.selectedHi td:hover {
    background-color: #f39c12; /* Оранжевый при наведении */
}


@keyframes background-color-change {
    0% {
        background-color: #3498db; /* Начальный синий */
    }
    50% {
        background-color: #e74c3c; /* Красный в середине */
    }
    100% {
        background-color: #2ecc71; /* Зеленый в конце */
    }
}