/* style.css */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: #fff;
    color: #595959;
    padding: 10px 10px 10px 10px ;
    text-align: center;
    position: fixed;
    width: 100%;
    z-index: 1000;
	height: 70px;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav li {
    display: inline;
    margin-right: 20px;
}

#navbar {
	display: none;
}

main {
    padding-top: 80px; /* Adjust according to header height */
}

.section {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    color: #333;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Тень при скроллинге */
    display: flex;
    align-items: center; /* Центрирование по вертикали */
	padding: 30px 10px 30px 10px;
}

.content {
    text-align: center;
}

.textwidget {
	max-width: 740px;
}

footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px;
/*	position: fixed; */
    bottom: 0;
}

/* Sticky header */
#header.sticky {
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Тень при скроллинге */
}


#logo img{
    width: 74px;
    margin-right: 10px; /* Расстояние между логотипом и заголовком */
    display: inline-block; /* Установка логотипа как inline-block */
    vertical-align: middle; /* Выравнивание по вертикали */
}

h1 {
	display: inline-block;
    margin: 0; /* Убираем отступы у заголовка */
	color: #595959;
	font-size: 22px !important;
}

.buttons {
	width: 400px;
}

a {
	color: seagreen;
	text-decoration: none;
}

/* Стили для настольных компьютеров */
@media only screen and (min-width: 768px) {
    /* Ваши стили для настольных компьютеров */
    body {
        font-size: 16px;
    }
}

/* Стили для мобильных устройств */
@media only screen and (max-width: 767px) {
    /* Ваши стили для мобильных устройств */
    .buttons {
        max-width: 98%;
    }
	
	#footer p {
		font-size: 16px;
		margin: 6px;
	}
	
	header {
		padding: 10px;
	}
	
	#logo img {
		width: 60px;
	}
	
}

.ui-dialog-titlebar {
	text-align: right;
    border: 0px !important;
    background: transparent !important;
}

/* Стили для всплывающего окна */
#popupContent {
	border: 0px !important;
/*	padding: 16px !important; */
	display: ruby-text !important;
	position: absolute;
	height: 100%;	
}
	
.otesPopup {
    display: none; /* Скрыть всплывающее окно по умолчанию */
    position: fixed;
	background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    max-width: 80%; /* Максимальная ширина всплывающего окна */
	margin-top: 40px !important;
	/* Firefox */
max-height: -moz-calc(80% - 40px) !important;
/* WebKit */
max-height: -webkit-calc(80% - 40px) !important;
/* Opera */
max-height: -o-calc(80% - 40px) !important;
/* Standard */
max-height: calc(80% - 40px) !important;
min-width: 600px !important;
max-width: 600px !important;
min-height: 380px;
z-index: 1004;
}

/* Закрыть кнопку */
.ui-dialog-titlebar-close {
    cursor: pointer;
	background: transparent !important;
	border: 0px !important;
}

.otesDiv {
	display: inline-table;
}

/* Стили для мобильных устройств */
@media only screen and (max-width: 767px) {
    .otesPopup {
        width: 100% !important;
		min-width: 100% !important;
		max-width: 100% !important;
        max-height: 100% !important;
		z-index: 1001 !important;
		margin-top: 30px !important;
		top: 60px !important;
		height: -moz-calc(100% - 140px) !important;
		height: -webkit-calc(100% - 140px) !important;
		height: -o-calc(100% - 140px) !important;
		height: calc(100% -140px) !important;
    }
	
}
