@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;1,700&display=swap');

* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	font-family: 'Roboto', sans-serif;
}
  
.bd {
/*	
	font-size: 16px;
	background-image: url('../image/alfavitRuGray20.png');
		background: #cdb2a4;*/
	background:var(--clrbg);
}

.b80 {
    font-size: 71px;
}
  
.b76 {
	font-size: 67px;
}
  
.b72 {
	font-size: 64px;
}
  
.b68 {
	font-size: 60px;
}
  
.b64 {
	font-size: 56px;
}
  
.b60 {
	font-size: 53px;
}
  
.b56 {
	font-size: 49px;
}
  
.b52 {
	font-size: 46px;
}
  
.b48 {
	font-size: 42px;
}
  
.b44 {
	font-size: 39px;
}
  
.b40 {
	font-size: 35px;
}
  
.b36 {
	font-size: 32px;
}
  
.b32 {
	font-size: 28px;
}
  
.b28 {
	font-size: 24px;
}
  
.b24 {
	font-size: 21px;
}
  
.b20 {
	font-size: 17px;
}
  
.b16 {
	font-size: 14px;
}
  
.b12 {
	font-size: 10px;
}
  
.b8 {
	font-size: 7px;
}
	
.unselectable,
#unselectable {  
	-webkit-touch-callout: none; /* iOS Safari */  
	-webkit-user-select: none;   /* Chrome/Safari/Opera */  
	-khtml-user-select: none;    /* Konqueror */  
	-moz-user-select: none;      /* Firefox */  
	-ms-user-select: none;       /* Internet Explorer/Edge */  
	user-select: none;           /* Non-prefixed version, currently	not supported by any browser */
}

.container {
/*	position: relative; /* Чтобы абсолютный элемент внутри позиционировался относительно этого */
	margin: 0 auto;
	overflow: hidden;  
	height: 100%;
  /*  border: solid 2px;*/
	text-align: center;

	color: #61606c;
}

.name-game {
	font-size: 1.5em;
	margin: 0 auto;
	letter-spacing: 0.25em; /*расстояние между символами*/
	color: #cdb2a4;
	text-shadow: #fff -1px -1px 0, #333 1px 1px 0;
	margin-top: 0.2em;
	margin-bottom: 0.5em;
}

.cLbl {
	width: 95%;
	margin: 0 auto;	/*поля*/
	display: flex;
	justify-content: space-between;
	align-items: center;
	
/*	margin-top: 0.6em;*/
	margin-bottom: 0.5em;
	
	border: 1px solid var(--clrborder);
	border-radius: 0.3em 0.3em 0 0;	
	background-color: var(--clrbglbl);
	box-shadow: 5px 5px 5px var(--clrshadow);
	color: var(--clrtxtlbl);
}
    
.cLblLeft {
	width: 85%;
	padding: 0.2em 0 0.2em 0.3em;
}
  
.cLblRight {
	width: 15%;
	padding: 0.1em 0.1em;	/*отступы сверху(снизу), слева(справа)*/
}
 
.input-one-str {
	width: 100%;
	display: flex; /*для размещения svg картинки по центру*/
	align-items: center;
	justify-content: center;
	
	padding: 0.3em 0.2em;	/*отступы сверху(снизу), слева(справа)*/
	background-color: var(--clrbglbl);
	
/*убирает рамку в input*/
	border:0;
	outline:0;
	border-radius: 0.1em;
	
	font-size: 0.9em;
	font-weight: 700;
	color: var(--clrtxtarea);
	text-align: left;		
	letter-spacing: 0.0em;		
	overflow: auto; /*скролл-бар выведется в случае необходимости*/
/*	pointer-events: none;/*отменит события мыши на элементе*/
}

.input-one-str:focus {
	outline:0;/*убирает рамку в input */
}

.cLblRight {
	display: flex; /*для размещения svg картинки по центру*/
	align-items: center;
	justify-content: center;
}

.btn-search-img {
	padding: 0em;
	margin: 0em;
	fill: var(--clrtxtarea);
	cursor: pointer;  /*необязательно*/
}

#definition-nouns {
	width: 95%;
/*	overflow-y: scroll;
	overflow: hidden;
	overflow-y:hidden;
	resize: none;*/
	margin: 0 auto;	/*поля*/
	margin-bottom: 1.0em;
	padding: 0.1em 0.3em;	/*отступы сверху(снизу), слева(справа)*/	
	
	background-color: var(--clrbgarea);
	color: var(--clrtxtarea);
		
	font-size: 0.9em;
	font-weight: 700;
	text-align: left;		

	border: 1px solid var(--clrborder);	
	border-radius: 0 0 0.5em 0.5em;		
	box-shadow: 5px 5px 5px var(--clrshadow);
		
	letter-spacing: 0.1em;		
	resize: none;	/*фиксированный размер текстовой области*/
	overflow: auto; /*скролл-бар выведется в случае необходимости*/
/*	pointer-events: none;/*отменит события мыши на элементе*/
}

#definition-nouns:focus {
	outline:0;/*убирает рамку в input */
}

.bottom-2 {
	width: 95%;
	margin: 0 auto;
	margin-bottom: 1.0em;
	
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 1.7em;
}

#btn-help,
#btn-home {
	width: 45%;
	display: flex;
	justify-content: center; /*Центрирование по горизонтали*/
	align-items: center;     /*Центрирование по вертикали */
	height: 100%;
	padding: 0em .5em;
	border: 1px solid var(--clrborder);
	background: var(--clrbgbtn);
	box-shadow: 5px 5px 5px var(--clrshadow);
/*	font-size: 1em;*/
	border-radius: 0.5em;
	cursor: pointer;
}
	
#btn-help:active,
#btn-home:active {
	box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, .2);
}
	
#helpIcons,
#homeIcons {
	fill: var(--clrtxtbtn);/*var(--iconsClrB);*/
	height: 100%;
}	


/*	
#btn-input {
	width: 30%;
	display: flex;
	justify-content: center; /*Центрирование по горизонтали*/
/*	align-items: center;     /*Центрирование по вертикали */
/*
	padding: .0em 0.5em;
	border: none;
	background: var(--clrbgbtn);
	box-shadow: 5px 5px 5px var(--clrshadow);	
	font-size: 3em;
	border-radius: .1em;
	cursor: pointer;
}
	
#btn-input:active {
	box-shadow: inset 0px 0px 4px 0 rgba(0, 0, 0, .2);
/*	box-shadow: inset 4px 4px 4px 0 rgba(0, 0, 0, .1);*/
/*
}
	
#inputIcons {
	fill: var(--clrtxtbtn);/*var(--iconsClrB);*/
/*
}
*/

#kbdtable {
	position: absolute;
	left:0;
	padding-top: 0.3em;
	padding-bottom: 0.3em;
	bottom: 0.0em;	
	width: 100%;
	display: block;			
	margin: 0 auto;
	z-index: 99;

}

@keyframes fadein {
  from { opacity: 0}
  to   { opacity: 1}
}

.tab2{
	touch-action: none;	/*Отключает обработку браузером всех жестов панорамирования и масштабирования.*/
/*	width: 95%;*/
	margin: auto;
}
	
.td2 {
	font-size: 1em;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;	
/*	box-shadow: .3em .3em .3em rgba(122,122,122,0.5);*/
	box-shadow: 5px 5px 5px var(--clrshadow);
	cursor: pointer;
}

#overlayForKBD {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgba(0,0,0,0.2); /* Black w/ opacity */
}


/* */
#modalId {
	display: none;
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%; 
	overflow: auto;
	background-color: rgba(0,0,0,0.6);
}
   
.modalClass {
	position: relative;
	margin: 1% auto;
}

/* The modalId 
	#modalId {
		display: none; /* Hidden by default 
		position: fixed; /* Stay in place 
		z-index: 1; /* Sit on top 
		padding-top: .4em; /* Location of the box 
		left: 0;
		top: 0;
		width: 100%; /* Full width 
		height: 100%; /* Full height 
		overflow: auto; /* Enable scroll if needed 
/*		background-color: rgb(0,0,0); /* Fallback color 
		background-color: rgba(0,0,0,0.6); /* Black w/ opacity 
	}*/
      
.modalContent {
/*
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
/*    background-color: white;*/
	margin: 0 auto;

	width: 95%; 
	border-radius: 1em;
	background: var(--clrbgmdl);
	color: var(--clrtxtmdl);		
	font-size: 0.8em;
/*    font-weight: bold;*/
	padding: 0.8em 0.8em;
	text-align: center; 
}

.modalTitle {
	display: flex;
  flex-direction: row;
	justify-content: space-between;
	align-items: center;
}	

.modalTitle .strTitle {
	color:  var(--clrtxtmdl);
	font-size: 1.2em;
}
  
.closeModalWindow {
	width: 1em;
	fill: var(--clrtxtmdl);
}	

.closeModalWindow:focus, 
.closeModalWindow:hover {
	cursor: pointer;
	fill: var(--clrtxthvr);;
	transition: 0.3s ease-in-out;		
	transform: rotate(+90deg);	
/*
	transform: scale(1.1);
	transition: 0.5s ease-in-out; */
}
	
.modalPanel {
	text-align: left;
	text-indent: 1em; /* Отступ первой строки в пикселах */
	margin-bottom: 0px; /*Отступ между заголовком и текстом */
	margin-top: 0px;
	font-size: 1.0em;
}

.listModalPanel {
	text-align: left;
	list-style: none;
	margin-left: 1em;
	margin-bottom: 0px;
	margin-top: 1em;
	font-size: 1.0em;
}

	
.modalPanelend {
	text-align: left;
/*		text-indent: 1em;  Отступ первой строки в пикселах */
	margin-bottom: 0px; /*Отступ между заголовком и текстом */
	margin-top: 0.9em;
	font-size: 1.0em;
}
	
.questions-and-suggestions {
	font-size: 1.0em;
	color: var(--clrtxtmdl); 
	text-decoration: none;
} 

#footer {
	position: absolute;
	width:100%;
	left: 0px;
	bottom: 0px;
}

#author {
	width: 100%;
	padding: 0 0.5em 0 0;
	text-align: right;
	color:var(--footerText);
	font-size: 0.8em;
	bottom: 0px;
}