html, body {max-width: 100%;overflow-x: hidden;}.btn {color: #fff;outline: none;}.btn:hover {color: #fff;outline: none;}.pagination {display:inline-block;padding-left:0;margin:20px 0;border-radius:4px }.pagination>li{display:inline }.pagination>li>a, .pagination>li>span{position:relative;float:left;padding:6px 12px;margin-left:-1px;line-height:1.42857143;color:#537e32;text-decoration:none;background-color:#fff;border:1px solid #ddd }.pagination>li:first-child>a, .pagination>li:first-child>span{margin-left:0;border-top-left-radius:4px;border-bottom-left-radius:4px }.pagination>li:last-child>a,.pagination>li:last-child>span{border-top-right-radius:4px;border-bottom-right-radius:4px }.pagination>li>a:focus, .pagination>li>a:hover, .pagination>li>span:focus, .pagination>li>span:hover{z-index:2;color:#537e32;background-color:#eee;border-color:#ddd }.pagination>.active> a,.pagination> .active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover{z-index:3;color:#fff;cursor:default;background-color:#537e32 ;border-color:#537e32 }.pagination>.disabled>a, .pagination>.disabled>a:focus, .pagination>.disabled>a:hover, .pagination>.disabled>span, .pagination>.disabled>span:focus, .pagination>.disabled>span:hover{color:#777;cursor:not-allowed;background-color:#fff;border-color:#ddd }.pagination-lg>li>a, .pagination-lg>li>span{padding:10px 16px;font-size:18px;line-height:1.3333333 }.pagination-lg>li:first-child>a, .pagination-lg>li:first-child>span{border-top-left-radius:6px;border-bottom-left-radius:6px }.pagination-lg>li:last-child>a, .pagination-lg>li:last-child>span{border-top-right-radius:6px;border-bottom-right-radius:6px }.pagination-sm>li>a, .pagination-sm>li>span{padding:5px 10px;font-size:12px;line-height:1.5 }.pagination-sm>li:first-child>a, .pagination-sm>li:first-child>span{border-top-left-radius:3px;border-bottom-left-radius:3px }.pagination-sm>li:last-child>a, .pagination-sm>li:last-child>span{border-top-right-radius:3px;border-bottom-right-radius:3px}.footer-dark {padding:20px 0;color:#f0f9ff;background-color:#282d32;}.footer-dark h3 {margin-top:0;margin-bottom:12px;font-weight:bold;font-size:16px;}.footer-dark ul {padding:0;list-style:none;line-height:1.6;font-size:14px;margin-bottom:0;}.footer-dark ul a {color:inherit;text-decoration:none;opacity:0.6;}.footer-dark ul a:hover {opacity:0.8;}@media (max-width:767px) {.footer-dark .item:not(.social) {text-align:center;padding-bottom:20px;}}.footer-dark .item.text {margin-bottom:36px;}@media (max-width:767px) {.footer-dark .item.text {margin-bottom:0;}}.footer-dark .item.text p {opacity:0.6;margin-bottom:0;}.footer-dark .item.social {text-align:center;}@media (max-width:991px) {.footer-dark .item.social {text-align:center;margin-top:20px;}}.footer-dark .item.social > a {font-size:20px;width:36px;height:36px;line-height:36px;display:inline-block;text-align:center;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,0.4);margin:0 8px;color:#fff;opacity:0.75;}.footer-dark .item.social > a:hover {opacity:0.9;}.footer-dark .copyright {text-align:center;padding-top:24px;opacity:0.3;font-size:13px;margin-bottom:0;}

.grass-container {
	background: #556B2F;
	max-height: 100px;
	padding-right: 5px;
	padding-left: 5px;
	position: relative;
    overflow: hidden;
}

progress {
  display: inline-block; /* Встановлюємо блокове відображення, щоб мати можливість встановлювати висоту і ширину */
  width: 100%;
  height: 15px; /* Встановлюємо висоту прогрес-бару */
  border: none; /* Видаляємо межі */
  background-color: #CCDBBC; /* Встановлюємо фоновий колір прогрес-бару */
  /*border-radius: 20px;  Округлюємо кути */
}

/* Стилі для заповненого прогрес-бару */
progress[value]::-webkit-progress-value {
  background-color: #467259; /* Встановлюємо колір заповнення прогрес-бару для браузера Chrome та Safari */
  /*border-radius: 20px;*/
}

progress[value]::-moz-progress-bar {
  background-color: #467259; /* Встановлюємо колір заповнення прогрес-бару для браузера Firefox */
  /*border-radius: 20px;*/
}

.social-icons {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  font-size: 24px;
}

.social-icons a {
  color: #999;
  margin: 0 10px;
}

.social-icons a:hover {
  color: silver;
}

.home-info {
  background-color: #9BD8E3;
  border-radius: 5px;
  border: 4px solid #34869A;
  padding: 5px;
}

.home-info a {
  color: #34869A;
}

.fa-info-circle {
  color: #3689C1;
}



.flag-info {
  background-color: #d25064;
  border-radius: 5px;
  border: 4px solid #9a3434;
  padding: 5px;
  color: #fff;
}

.fa-info-circle {
  color: #3689C1;
}

.pagination-button {
    background-color: #467259;
    color: white;
}

.active {
  background-color: #727272;
}