@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/22.jpg"); /* */
}	

.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;
}
	
.tab1, .tab2{
	touch-action: none;	/*Отключает обработку браузером всех жестов панорамирования и масштабирования.*/
	margin: .1em auto;
	padding: .2em;
}
	
.td1 {
	font-size: 1.2em;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;	
	box-shadow: .3em .3em .3em rgba(122,122,122,0.5);
}
	
.td2 {
	font-size: 1em;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;	
	box-shadow: .3em .3em .3em rgba(122,122,122,0.5);
}	
/*	
#lbl {
	font-size: 1.0em;
	font-weight: bold;
	text-align: center;
	color: #0b7fab ;
} */
	
#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 {
		margin: auto;
		overflow: hidden;
		height: 100%;
		border: 0px solid red; /*>0px появляется скроллбар*/
		text-align: center;
    font-size: 1em;
    color: #61606c;		
}
	
.nameGame {
	padding-top: .4em;
	font-size: 1.4em;
	letter-spacing: 0.25em; /*расстояние между символами*/
	color: var(--clrtextnamegame);
/*    text-shadow: #fff -.04em -.04em 0, #333 .06em .06em 0;*/
	text-shadow: #fff -.04em -.04em 0, rgba(122,122,122,0.5) .06em .06em 0;
}

.open-list-words {
	font-size: 1.2em;
	cursor: pointer;
}	

.timeToNewWord {
	padding-top: .2em;
	color: var(--clrtxtprogress);
	font-size: 1em;
/*	
	font-weight: 700;
	text-shadow: rgba(122,122,122,0.5) .06em .06em 0;	*/	
}

#timer {
	text-align: center;
}

.progress {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: .2em;
	color: var(--clrtxtprogress);
	font-size: 1em;
/*
	font-weight: 700;
	text-shadow: rgba(122,122,122,0.5) .06em .06em 0;		*/
}
	
.progress-left {
	width: 50%;
	padding: 0 0 0 2em;
}

.progress-right {
	width: 40%;
	padding: 0 2.0em 0 0;
}

#score-number {
	text-align: center;
}

#games-number {
	text-align: left;
}	
	
.bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: .4em .2em 0em .2em;
}

#btnHelp,
#btnCopy,
#btnEdit {
	width: 30%;
	display: flex; 
	align-items: center; 
	padding: 0.2rem .2rem;
	border-color: var(--clrbgbtn);
	background: var(--clrbgbtn);		
	border-radius: .4rem;
	cursor: pointer;
}

#helpIcon,
#copyIcon,
#editIcon {
	display: inline-block; 
	width: 1.6rem;
	fill: var(--clriconbtn);
	margin: 0 auto;
}

/* The aboutModal */
#aboutModal {
	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.4); /* Black w/ opacity */
}

.aboutContent {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);

	border-radius: 1em;
	padding: 0.2em 0.8em;
	background-color: var(--clrbgmodalhelp);
	color: var(--clrtextmodalhelp);
	font-size: 0.8em;
	border: .2em solid var(--clrbordermodalhelp);
	text-align: center; 
}

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

.strTitle {
	color:  var(--clrtxtmdl);
	font-size: 1.0em;
}

/* The Close Button */
.aboutClose {
	width: 1em;
	fill: var(--closeNo);
}

.aboutClose:hover,
.aboutClose:focus {
	fill: var(--closeYes);
	text-decoration: none;
	cursor: pointer;
	transition: 0.3s ease-in-out;		
	transform: rotate(+90deg);	
}
	
.modalPanel {
	text-align: left;
	text-indent: 1em; /* Отступ первой строки в пикселах */
	margin-bottom: 0px; /*Отступ между заголовком и текстом */
	margin-top: 0.9px;
	font-size: .9em;
}
	
.modalPanelend {
	text-align: left;
/*		text-indent: 1em;  Отступ первой строки в пикселах */
	margin-bottom: 0px; /*Отступ между заголовком и текстом */
	margin-top: 0.9em;
	font-size: .9em;
}
	
.questions-and-suggestions {
	font-size: 1.0em;
	color: var(--clrtxtmdl); 
	text-decoration: none;
} 

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

/* Стиль имени для окна копирования результата игры*/
.nameCopyModal {
	text-align: center;
	margin-bottom: .6em;
	margin-top: .6em;
	font-size: 1.2em;		
}

#wrapper-copy{
	position: absolute;
	float: left;/*центровка модального окна*/
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: none;		
	width: 100%;
	z-index: 999999;		
}
	
.wrapper-sp-copy{
/*		width: 60%;		
		margin : 0 auto;*/
	padding: .5em 1.0em;
	border-radius: .5em;
	background-color: var(--clrbgcopy);
	border: .1em solid var(--clrbordercopy);
	color: var(--copyClrB);
	font-size: 1.0em;
}
	
#wrapper-no-word{
	position: absolute;
	float: left;/*центровка модального окна*/
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: none;		
	width: 100%;
	z-index: 999999;		
}
	
.wrapper-sp-no-word{
	width: 60%;		
	margin : 0 auto;
	padding: .5em 1.0em;
	border-radius: .5em;
	background-color: var(--clrbgnowords);
	border: .1em solid var(--clrbordernowords); 
	color: var(--clrtxtnowords);
	font-size: 1.0em;
}

/* The editModal & infoModal */
#editModal,
#infoModal {
	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.4); /* Black w/ opacity */
}

/* editContent & infoContent */
.editContent,
.infoContent {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);	
	
	margin: 0 auto;
	width: 95%;
	border-radius: .4rem;
	padding: 0.0rem 0.4rem; 
	border: .2rem solid var(--clrborderedit);		
	background-color: var(--clrbgedit);
	color: var(--editClrB);
}

.infoContent {
	font-size: 2.5em;
}

.input-one-str {
	height: 1.5rem;
	font-size: 1.5em;
	letter-spacing: 0.25em; /*расстояние между символами*/
	border: none;
	outline: none;
	background: var(--clrbgedit);		
	color: var(--clrtxtedit);
}

.editContent input:focus {
	background: var(--clrbgedit);
	color: var(--clrtxtedit);	
}

/* modal edit id */
.modal-edit-input {
	width: 100%;
	margin: 0 auto;	/*поля*/
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.4rem;
	padding: 0.2rem 0.0rem; 
	border: 1px solid var(--clrborderedit);
	background-color: var(--clrbgedit);
}
    
.modal-edit-input-left {
	width: 90%;
}
  
.modal-edit-input-right {
	display: flex; /*для размещения svg картинки по центру*/
	align-items: center;
	justify-content: right;
	width: 10%;
}

.btn-bkspc-img {
	padding: 0rem;
	margin: 0rem;
	height: 1.2rem;
	fill: var(--clrtxtedit);
	cursor: pointer;
}
 
.input-one-str {
	width: 100%;
	display: flex; /*для размещения svg картинки по центру*/
	align-items: center;
	justify-content: center;
	padding: 0.0rem 0.4rem;
	background-color: var(--clrbgedit);
/*убирает рамку в input*/
	border:0;
	outline:0;
	font-size: 1.5rem;
	font-weight: 700; 
	color: var(--clrtxtedit);
	text-align: left;		
	letter-spacing: 0.1rem;		
	overflow: auto; /*скролл-бар выведется в случае необходимости*/
	pointer-events: none;/*отменит события мыши на элементе*/
}

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

.modalTitleEdit,
.modalTitleInfo {
	display: flex;
  flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: .4rem .0rem;
}

.modalTitleEditText,
.modalTitleInfoText {
	color:  var(--clrtxtmdl);
	font-size: 1.3rem; 
}

.modalTitleInfoText {
	color:  var(--clrtxtmdl);
	font-size: 1.3rem; 
}

/* The Close Button */
.modalTitleEditClose,
.modalTitleInfoClose {
/* */
	width: 1.1rem; 
	fill: var(--closeNo);
}

.modalTitleEditClose:hover,
.modalTitleEditClose:focus,
.modalTitleInfoClose:hover,
.modalTitleInfoClose:focus {
	fill: var(--closeYes);
	text-decoration: none;
	cursor: pointer;
	transition: 0.3s ease-in-out;		
	transform: rotate(+90deg);	
}

#story {
	width: 100%;
	margin-bottom: .0rem;
	background-color: var(--clrbgarea);
	color: var(--clrtxtarea);
	font-size: 1.0rem;
	text-align: left;		
  line-height: 1.5;
	border: 1px solid var(--clrborder);		
	letter-spacing: 0.1rem;		
	resize: none;	/*фиксированный размер текстовой области*/
	overflow: auto; /*скролл-бар выведется в случае необходимости*/
	pointer-events: none;/*отменит события мыши на элементе*/
}

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

.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 */
}

#kbd3 {
	margin-bottom : .5rem;
}

.td3 {
	cursor: pointer;
}

#btn-save {
	width: 100%;
	height: 2em;
	margin-bottom : .5rem;
	font-size: 1em;
	letter-spacing: 0.25em; /*расстояние между символами*/
	border: .1em solid var(--clrborderedit);
	background: var(--clrborderedit);
	color: var(--clrtxtedit);		
	cursor: pointer;
}

#btn-save:focus,
#btn-save:hover{
	border: .1em solid var(--clrborderbutton);
	background: var(--clrtxtedit);		
	color: var(--clrbgedit);
}

.input-one-str:focus,		
.input-one-str:hover {
	cursor: pointer;
}

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

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

#container-for-svg {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	z-index: 1;

}				

.work-position-phone {
	height: 100%;
	display: flex;
	justify-content: center; 
	align-items: center;
	fill: var(--clrtxtfooter);
}

.icon-swg {
	height: 80%;
}