/*
	Copyright © 2020 Aleksandr Menyaylo (Александр Меняйло)

    This file is part of "eth-events".

    "eth-events" is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    "eth-events" is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with "eth-events". If not, see <https://www.gnu.org/licenses/>.
*/

/*#eventsFilter > div:first-child
{
	border:1px solid red;
}
*/

:root
{
	--bg-color1: rgb(237, 238, 239);
	--bg-color2: white;
}
#msg /*Сообщения, возникающие при взаимодействии с MetaMask*/
{
	margin-top: 50px;
   	color: red;
	text-align: center;
}
body
{
	margin-left: 27.5%;
	margin-right: 27.5%;
	background-color: var(--bg-color1);
}
body > div:first-of-type
{
	z-index: 2;
	position: relative; /*Чтобы поместить над #bgDiv*/
}
/*Делаем центр отдельным цветом*/
#bgDiv
{
	background-color: var(--bg-color2);
	position: fixed;
	top: 0px;
	width: 45%; /*В соответствии с margin в body.*/
	z-index: 1;
}
#events li
{
	word-wrap: break-word;
	display: list-item;
}
.message
{
	text-align: center;
	word-wrap: break-word;	
}
.header /*На случай, если захочется декорировать заголовки*/
{
	text-align: center;
	font-weight: bold;
	margin-bottom: 0.3rem;
}
.content
{
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}
#inputData input, textarea
{
	width: 100%;
	box-sizing: border-box;
}
#inputData textarea
{
	height: 10rem;
	resize: none;
}
.buttonsContainer
{
	text-align: center; /*Выравниваем кнопки по центру*/
}
.controlButtons
{
	position: -webkit-sticky; /* Safari */
	position: sticky;
	bottom: 0px;
	padding: 0.3rem;
	background-color: var(--bg-color2);
}
#connectBt
{
	margin-top: 1.5rem;
}
button
{
	margin: 0.1rem;
}
.controlButtons button
{
	width: 22.5%
}
.buttonsContainer button
{
	width: 45%;
}
/*Donation block*/
#donationBlock
{
	margin-top: 3rem;
	text-align: center;
}
#donationBlock div
{
	display: flex;
	align-items: stretch;
	justify-content:center;
}
#donationBlock input
{
	width: 3rem;
}
#donataionBlock button
{
	width: auto;
}
#donationBlock span
{
	color: green;
}
#donationBlock textarea
{
	box-sizing: border-box;
	width: 60%;
	height: 20rem;
}
#donationBlock > span /*Оставить сообщение получателю*/
{
	color: black;
}
/*End donation block*/
/*Filter block*/
#eventsFilter
{
	position: sticky;
	top: 0px;
	background-color: var(--bg-color2);
}
#eventsFilter > p:first-of-type /*Заголовок*/
{
	margin-bottom: 0.3rem;
}
#eventsFilter > div:first-of-type /*Контейнер для всех чекбоксов*/
{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	flex-wrap: wrap;
	max-height: 5rem;
	overflow-y: auto;
}
#eventsFilter > div:first-of-type > div /*Отдельно чекбоксы*/
{
	flex-basis: 23.4%;
	padding: 0.2rem;
	white-space: nowrap;
}
#eventsFilter > p:last-of-type /*Счётчик событий*/
{
	margin-top: 0.3rem;
}
/*End filter block*/
@media screen and (max-width: 1080px)
{
	body
	{
		margin-left: 0px;
		margin-right: 0px;
	}
	#bgDiv
	{
		width: 100%;
	}
	input
	{
		height: 2rem;
		font-size: 120%;
	}
	#eventsFilter input
	{
		height: inherit;
		font-size: inherit;
	}
	textarea
	{
		font-size: 130%;
	}
	button
	{
		height: 3rem;
		font-size: 150%;
	}
	#donateValue
	{
		height: 3rem;
	}
	.buttonsContainer button
	{
		width: 99%;
	}
	.controlButtons button
	{
		width: 45%;
		height: inherit;
		font-size: inherit;
	}
	.header
	{
		font-size: 150%;
	}
	.message
	{
		font-size: 120%;
	}
	#inputData span
	{
			font-size: 120%;
	}
	#eventsFilter span
	{
		font-size: 120%;
	}
}