* {
		padding: 0;
		margin:	0;
		font-family: Arial, sans-serif;
	}
	
  .bd {
    font-size: 16px;
/*		background-image: url("../image/bg3.jpg");*/
		background-image: url("../image/22.jpg");
/*		background-image: url("../image/20.jpg");*/
/*		background-image: url("../image/21.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 {
/*		position: relative; /* Чтобы абсолютный элемент внутри позиционировался относительно этого */
/*		width:calc(100vh*9/16);*/
		margin: auto;
		overflow: hidden;
/*		height: 98vh;	*/
		height: 100%;
		border: 0px solid red; /*>0px появляется скроллбар*/
		text-align: center;
    font-size: 1em;
    color: #61606c;		
/*  background-color: rgb(67, 65, 87);*/
	}
	
	.nameGame {
		padding-top: .4em;
		font-size: 1.4em;
    letter-spacing: 0.25em; /*расстояние между символами*/
    color: #d7d6db;
/*    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;
	}
	
	.timeToNewWord {
/*		padding-left: .5em;
		padding-right: .5em;*/
		padding-top: .2em;
/*		padding-bottom: .0em;*/
    color: #0b7fab;
    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-left: .5em;
		padding-right: .5em;*/
		padding-top: .2em;
/*		padding-bottom: .0em;*/
    color: #0b7fab;
    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 {
		width: 30%;
		padding: 0em .5em;
		border-color: var(--iconsClrG);
		background: var(--iconsClrG);		
    border-radius: .6em;
		cursor: pointer;
	}

	.svgIcons	{
		height: 100%;
		width: 30%;
		margin: 0 auto;
	}
	
	#helpIcons {
		fill: var(--iconsClrB);
	}	

	#btnCopy {
		width: 30%;
		padding: .0em 0.5em;
		border-color: var(--iconsClrG);		
		background: var(--iconsClrG);
    border-radius: .6em;
		cursor: pointer;
	}

	#copyIcons {
		fill: var(--iconsClrL);
	}
	
	#btnEdit {
		width: 30%;
		padding: .0em 0.5em;
		border-color: var(--iconsClrG);/**/
		background: var(--iconsClrG);
    border-radius: .6em;
		cursor: pointer;
	}
	
	#editIcons {
		fill: var(--iconsClrB);
	}

/* 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(--aboutBackgroundClr);
		color: var(--aboutTextClr);
		font-size: 0.8em;
		border: .2em solid var(--aboutBorderClr);
		text-align: center; 
	}

/* The Close Button */
	.aboutClose {
		width: 1em;
		height: 1em;
		position: relative;
		float: right;	
		top: .5em;
		right: 0em;
		fill: var(--closeNo);
	}

	.aboutClose:hover,
	.aboutClose:focus {
		fill: var(--closeYes);
		text-decoration: none;
		cursor: pointer;
	}
	
	.titleImage {
		background-size: cover;
		width: 100%;
/*	border: 2px solid green;*/
		resize: both;
	}
	
	.modalPanel {
		text-align: left;
		text-indent: 1em; /* Отступ первой строки в пикселах */
		margin-bottom: 0px; /*Отступ между заголовком и текстом */
		margin-top: 0px;
		font-size: .9em;
	}

	.listModalPanel {
		text-align: left;
		list-style: none;
		margin-left: 1em;
		margin-bottom: 0px;
		margin-top: .4em;
		font-size: .9em;
	}
	
	.footerModalPanel {
		text-align: right;
		list-style: none;
		margin-bottom: 1em;
		margin-top: .1em;
		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(--copyClrG);
		border: .1em solid var(--copyClrGG);
    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(--noWordsClrG);
		border: .1em solid var(--noWordsClrGG); 
    color: var(--noWordsClrB);
    font-size: 1.0em;
	}

/* The editModal */
	#editModal {
		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 */
	.editContent {
		margin: 0 auto;
		width: 95%;
		border-radius: 1em;
		padding: 0.2em 0.8em;
		font-size: 0.8em;
		text-align: center;
		border: .2em solid var(--editClrGG);		
		background-color: var(--editClrG);
		color: var(--editClrB);
	}

/* The Close Button */
	.editClose {
		width: 1em;
		height: 1em;
		position: relative;
		float: right;	
		top: .5em;
		right: 0em;
		fill: var(--closeNo);
	}

	.editClose:hover,
	.editClose:focus {
		fill: var(--closeYes);
		text-decoration: none;
		cursor: pointer;
	}
	
	.editContent label{
		width: 100%;
		margin-bottom: 1em;
		display: flex;
		flex-direction: column-reverse;

	}
	
	.editContent .label-text {
		font-size: 1em;
		text-transform: uppercase;
		letter-spacing: 0.25em; /*расстояние между символами*/
		text-align: left;
		font-weight: 500;
		color: var(--editClrB);	/*синий*/
		margin-bottom: .1em;
	}

	.input-name {
		height: 1.5em;
		font-size: 1.5em;
		letter-spacing: 0.25em; /*расстояние между символами*/
		border: none;
		outline: none;
/*		padding: 0 .2em 0 .2em;*/
		border-bottom: .2em solid var(--editClrGG);	/*темнее gray90%*/
		background: var(--editClrG);		
		color: var(--editClrB);
	}

	.editContent input:focus {	/*синий*/
		border-bottom: .2em solid var(--editClrB);
		background: var(--editClrG);
		color: var(--editClrB);	
	}

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

	#btn-save:focus,
	#btn-save:hover{
		border: .1em solid var(--editButtonClrB);
		background: var(--editClrB);		
		color: var(--editClrG);
	}

	.input-name:focus,		
	.input-name:hover {
		cursor: pointer;
	}
	
	#footer {
		position: absolute;
		width:100%;
		display: flex;
		justify-content: space-between;
	}
	
	#btnToggle {
		text-align: left;
		width: 10%;
		padding-left: 0.5em;
		display: flex;	/*выравнивание по вертикали картинки*/
		align-items: center;	/*выравнивание по вертикали svg*/
		cursor: pointer;
	}

	#author {
		width: 90%;
		padding: 0 0.5em 0 0;
		text-align: right;
		color: #61606c;
		font-size: 1.0em;
	} 
				
	#workScr {
		display: block;			
	}
		
	#fullScr {
		display: none;
	}
		
	.imageForScreen {
		fill: var(--footerText);
		width: 1.0em;
	}