/* COLORS                              
green rgb(0,149,171)
green-0.2 rgb(204,234,238)

green-0.4 rgb(179, 223, 230);


grey-light: rgb(243,243,243);
grey-green rgb(127, 140, 153);
grey прозрачный rgba(243,243,243,0.5);

yellow rgb(255, 255, 200);



red rgb(199, 52, 117)

found background-color:rgba(255,255, 0, 0.2);

*/


* {
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}

body {
    	-webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    	-webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
	text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;

    	//-webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
    	font-family: system-ui, -apple-system, -apple-system-font, 'Segoe UI', 'Roboto', sans-serif;
    	font-size:14px;
    	font-weight:400;
    	height:100vh !important;
    	margin:0px;
    	padding:0px;
    	width:100%;
    	overscroll-behavior-y: contain;
	-webkit-overflow-scrolling:touch !important;
	overflow:hidden;
	background-color: #fff;
	color:#000;
}	

body.night {
	color: #fff;
	background-color:#000;
}



.night span, .night p{
	color: #fff !important;
	background-color:#000 !important;
}

body.open-menu #menu-grab{display:none;}
body.open-menu #menu{left:0px; border:0px;}

body.short-menu #menu{width:40px;}
body.short-menu #menu .menu-item{padding-left:50px;}
body.short-menu #menu-toogle{background-image:url(img/menu-full.svg)}
body.short-menu #header{left:50px;}
body.short-menu .subheader{left:50px;}
body.short-menu #container{left:50px;}
body.short-menu #iplex{
		margin:0;
		margin-top:10px;
		margin-right:10px;
		background-size: 30px;
		background-image:url(img/l.svg)
}

body.single #menu{display:none;}
body.single #header{left:0;}
body.single .subheader{left:0;}
body.single #container{left:0;}

body.leftpage #header{left:300px;}
body.leftpage #container{left:310px;}

body.open-subheader #container{top:45px;}		



/************************* HTML-tags ******************************/

input{
	border:none;
	border-bottom:1px solid grey;
	outline: none; 
    	height: 30px;
    	line-height: 30px;
	background-color:inherit;
    	font-family: inherit;
    	font-size: inherit;
}


input:focus{
	border-bottom:2px solid grey;

}

/****************************************************************************/
/*******************   MENU  PANEL   ****************************************/
/****************************************************************************/


#menu-grab{
	display:none;
	position:fixed;
	left:0;
	right:0;
	top:0px;
	bottom:0;
	margin:0px;
    	padding:0px;
	overflow:hidden;
	z-index:15;
	background-color: rgba(243,243,243,0.4);
}

#menu{
	position:fixed;
	top:0;
	left:0px;
	padding-right:10px;
	width:190px;
	bottom:0;
	text-align:center;
	overflow-x:hidden;
	overflow-y:auto !important;
	-webkit-overflow-scrolling:touch;
	transition: left .3s ease-out;
	z-index:40;
	background-color: #fff;
	border-top:1px solid grey;
        box-shadow:0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12);
}

#menu.main{
	text-align:right; 
}

#menu.hide{display:block; left:-240px}



.night #menu{
	color: #fff;
	background-color:#808080;
}



#iplex, body.open-menu #iplex{
	width:100%;
	height:50px;
	margin:0px; 
	margin-top:10px;  
	background-image:url(img/iplex_grey.png);
	background-repeat:no-repeat;
	background-size: 120px;
	background-position: 100% 0%;
}

#iplex:hover{	
	cursor:pointer;
	cursor:hand;
}

.night #iplex{background-image:url(img/iplex_w.png);}




#menu-head{
	margin-top:10px;
	margin-bottom:10px;
	text-align:center;
	font-size:150%;
	font-weight:500;
}

.auth{
	text-align:right;
	font-size:14px;
}
body.short-menu .auth{display:none}

.auth span{
	color:rgb(0, 149, 171);
}

.guest .auth span{
	color:rgb(199, 52, 117);
}

.night .auth span{
	color:rgb(255, 255, 255);
}


#auth-mob{display:none}


#menu-content{
	margin-top:20px;
}

.menu-item{
	height:30px;
	width:140px;
	padding-top:7px;
	padding-left:45px;	
	background-repeat:no-repeat;
	background-size: 24px;
	background-position: 12px 50%;
	text-align:left;
	white-space: nowrap;
	overflow: hidden; 
	text-overflow: ellipsis; 
	font-weight:500;
}
.menu-item.hide{
	display:none;
}	

.menu-item:hover{	
	cursor:pointer;
	cursor:hand;
	text-decoration:underline;
	color:rgb(0, 149, 171);
}
.night .menu-item:hover{	
	color:rgb(179, 223, 230);
}


.main .menu-item {
	padding:0; 
	width:100%;
	text-align:right
}
.main .menu-item.img {
	height:40px;
	margin-bottom:2px;
}	

.main .menu-item a{
	color:inherit;
	font-weight:600; 
	font-size:16px; 
	text-decoration:none}
.main .menu-item a:hover{
	color:rgb(0, 149, 171);
	text-decoration:underline; 
	}
.main .menu-item img{
	width:120px; 
	border-radius:4px; 
	border:1px solid grey;
}
.main .text{
	height:auto;
}




#menu-toogle{
	display:block;
 	background-image:url(img/menu-short.svg)
}

#menu-close{
	display:none;
	margin:auto;
}


/****************************************************************************/
/**************************** HEADER ****************************************/
/****************************************************************************/

#header{
	position:fixed;
	left:200px;
	right:0;
	height:45px;
	background-color: rgb(179, 223, 230);
	border-top: 1px solid grey;
	color:rgb(40,40,40);
	z-index:20;

}
#head{
	padding-top:12px;
	padding-left:90px;
	padding-right:90px;
	text-align:center;
	font-weight:500;
	white-space: nowrap; /* Отменяем перенос текста */
	overflow: hidden; /* Обрезаем содержимое */
	text-overflow: ellipsis; /* Многоточие */
}

.tool{
	position: absolute; 
    	top:0;
	height:45px;
	width:40px;
	background-repeat:no-repeat;
	background-size: 24px;
	background-position: 50% 50%;	
}

.tool:hover{	
	cursor:pointer;
	cursor:hand;
}
.tool.hide{display:none;}



#about.tool {left:0px;background-image:url(img/info.svg);}

#back.tool {left:0px;background-image:url(img/back.svg);}
#back.tool.white {background-image:url(img/back-white.svg);}

#night.tool {left:40px;background-image:url(img/night.svg);}
#light.tool {display:none; left:40px;background-image:url(img/light.svg);}

.night #night.tool {display:none;}
.night #light.tool {display:block;}

#auth.tool {right:40px; background-image:url(img/auth.svg);}
#auth.tool.white {background-image:url(img/auth-white.svg);}

.guest #auth.tool{
	top:8px;
	right:10px;
	width:50px;
	padding-left:30px;
	padding-top:4px;
	height:22px;
	background-position: 6px 2px;
	color:rgb(199, 52, 117);
	border-radius:10px;
	border:1px solid;
	font-weight:600;
	}
.guest #auth.tool::before{content:"Увійти"}


.guest	#auth.tool {background-image:url(img/auth-red.svg);}

#exit.tool {right:0px;background-image:url(img/exit.svg);}
#exit.tool.white {background-image:url(img/exit-white.svg);}
.guest #exit.tool{display:none}


.tool.up {background-image:url(img/up.svg);}
.tool.down {background-image:url(img/down.svg);}




#logo{
	display:none;
	position: absolute; 
	top:0;
	left:15px;
	height:100%;
	width:80px;
	background-image:url(img/iplex.png);
	background-repeat:no-repeat;
	background-size: 80px;
	background-position: 50% 50%;	
	cursor:pointer;
	cursor:hand;
}




.subheader{
	position:fixed;
	top:45px;
	left:200px;
	right:0;
	height:45px;
	text-align:center;
	background-color:rgb(179, 223, 230);
	z-index:20;
}
.subheader.hide{
	top:-100px;
}


/****************************************************************************/
/******************************* PAGE ****************************************/
/****************************************************************************/


#page{
	position:fixed;
	left:0;
	right:0;
	top:45px;
	bottom:0;
	margin:0px;
    	padding:0px;
	overflow:hidden;
}

@supports(padding-top:constant(safe-area-inset-top)){
	#header{
        --safe-area-inset-top:constant(safe-area-inset-top);
        height: calc(45px + var(--safe-area-inset-top));		
	}
    	#page{
        	--safe-area-inset-top:constant(safe-area-inset-top);
        	top: calc(45px + var(--safe-area-inset-top));
    	}
}
@supports(padding-top:env(safe-area-inset-top)){
    	#header{
        	--safe-area-inset-top:env(safe-area-inset-top);
        	height: calc(45px + var(--safe-area-inset-top));
    	}
    	#page{
        	--safe-area-inset-top:env(safe-area-inset-top);
        	top: calc(45px + var(--safe-area-inset-top));
    	}
}

/****************************************************************************/
/******************* CONTAINER ****************************************/
/****************************************************************************/

#container{
	position:absolute;
	left:200px;
	right:0px;
	top:0px;
	bottom:0;
	overflow:auto !important;
	-webkit-overflow-scrolling:touch;
	padding:0;
	margin:0;
	z-index:10;
}
#content{
	max-width:900px;
	margin:auto;
	padding:10px;
	padding-left:20px;
	padding-bottom:200px;
	//overflow-x:auto;
}



#content.mtime{
	background-color: rgba(240, 240, 180, 0.5); 
}



#loading{
	position:absolute;
	left:0px;
	right:0px;
	top:0px;
	bottom:0;
	z-index:60;
	background-color:rgba(243,243,243,0.5);
	z-index:45;

}

#loading.hide{
	display:none;
}


#stop-guest{
	text-align:center;
}

#stop-guest .tit{
	margin:20px;
      	font-size:16px;
	font-weight:600;
}

#stop-guest a{
  	color:rgb(0,149,171);
	font-weight:500;
	text-decoration:none;
}
#stop-guest .test{
	margin:20px;
	font-weight:500;
}




#go-top{
	position:fixed;
	bottom:50px;
	right:50px;
	display:block;
	background-color:grey;
	background-image:url(img/top-white.svg);
}

#go-top.hide{display:none;}


/****************************************************************************/
/*********************************** FOOTER PANEL ***************************/
/****************************************************************************/



#footer {
	display:none;
    	position: fixed; 
	left: 0;
	right: 0; 	
	bottom: 0px; 
	height:auto;
	padding-top:6px;
	padding-bottom:20px;
  	background-color: rgba(243,243,243,0.5);
	color:#000;
	text-align:center;
	z-index:30;
} 

#footer.hide{
	bottom:-100%;
}

#go-top-footer{
	background-image:url(img/top.svg);
}


/****************************************************************************/
/*********************************** LEFT PAGE ***************************/
/****************************************************************************/


#leftpage{
	position:fixed;
	top:0;
	left:0;
	width:300px;
	height:100%;
	color:#000;
	background-color:#fff;
	overflow-x:auto !important;;
	overflow-y:auto !important;
	-webkit-overflow-scrolling:touch;
	transition: left .3s ease-out;
        box-shadow:0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12);
	z-index:120;
}

#leftpage.hide{	display:block; left:-340px;}


#leftpage-header{
	position:absolute;
	left:0;
	width:100%;
	top:0;
	height:45px;
	background-color: rgb(243,243,243);
}
#leftpage-head{
	padding-top:12px;
	padding-right:50px;
	text-align:center;
	font-weight:500; 
}

#leftpage-close{
	background-image:url(img/close.svg);
	right:10px;
}


.leftpage-content{
	position:absolute;
	left:0px;
	top:45px;
	right:0px;
	bottom:0px;	
	padding:10px;
	padding-bottom:20px;
	overflow-x:hidden;
	overflow-y:auto !important;	transition: left .3s linear;
}


.leftpage-content.hide{
	display:none;
}


@supports(padding-top:constant(safe-area-inset-top)){
	#leftpage-header{
        --safe-area-inset-top:constant(safe-area-inset-top);
        height: calc(45px + var(--safe-area-inset-top));		
	}
    .leftpage-content{
        --safe-area-inset-top:constant(safe-area-inset-top);
        top: calc(45px + var(--safe-area-inset-top));
    }
}
@supports(padding-top:env(safe-area-inset-top)){
    #leftpage-header{
        --safe-area-inset-top:env(safe-area-inset-top);
        height: calc(45px + var(--safe-area-inset-top));
    }
    .leftpage-content{
        --safe-area-inset-top:env(safe-area-inset-top);
        top: calc(45px + var(--safe-area-inset-top));
    }
}



/****************************************************************************/
/*********************************** POP-UP PANEL ***************************/
/****************************************************************************/


.pop-up{
	position:fixed;
	top:0;left:0;
	width:100%;
	height:100%;
	text-align:center;
	background-color:rgba(80,80,80, 0.1);
	z-index:150;
}

.pop-up.hide{
	display:none;
}

.pop-up-bar{
	margin:auto;
	margin-top:100px;
	width:100%;
	min-width:260px;
	max-width:300px;
	height:auto;
	border-radius:10px;
	background-color:#fff;
	border:1px solid grey;
	padding:10px;
	text-align:center;
	box-shadow: 5px 5px 5px rgba(140,140,140,0.5);
	z-index:55;
}

.night  .pop-up-bar{
	background-color:#000;
}

.pop-up-bar  .head{
	background-color:rgb(243, 243, 243);
	border-radius: 6px 6px 0 0;
	padding:5px;
	font-weight:600;
	color:#000 !important;
}


.pop-up-bar .content{
	padding:10px;
	max-height:300px;
	overflow:auto;
}
.pop-up-bar  .buttons{
	padding:5px;
	background-color:rgb(243, 243, 243);
	border-radius: 0 0 6px 6px;
}


.pop-up-content{
	margin-bottom:10px;
	max-height:300px;
	overflow:auto;
}



/****************************************************************************/
/************************   DIALOG AUTORIZATION   ***************************/
/****************************************************************************/


.pop-up-bar.auth_dlg {
	position:absolute;
	right:20px;
	top:-40px;

}

#log_form{
	padding:0;
	text-align:center;
	border-radius:10px;
}
#log_par{
	text-align:center;
	margin-bottom:10px;
}
#log_form input{ 
	margin:3px;

	width:100px; 
	vertical-align:bottom;
}

#log_visible{
	width:30px;
	hieght:30px;
	background-image:url(img/visible.svg);
	vertical-align:bottom;
}
#log_visible.checked{
	background-image:url(img/unvisible.svg);
}
#log_ok {background-image:url(img/ok.svg); width:70px;margin-top:10px;}
#log_ok::before{content:"Готово"}
#log_clear {background-image:url(img/clear.svg); width:70px;margin-top:10px;}
#log_clear::before{content:"Очистити"}
#log_account {width:90px; margin-right:10px; margin-top:-5px;color:rgb(0,149,171); height:16px; padding:3px; padding-left:6px;border:none; box-shadow:none; font-size:12px; font-weight:600}
#log_account::before{content:"Стан рахунку"}
#log_forgot {width:90px; margin-right:60px; margin-top:-5px;color:rgb(0,149,171); height:16px; padding:3px; padding-left:6px;border:none; box-shadow:none; font-size:12px; font-weight:600}
#log_forgot::before{content:"Забув пароль"}
#log_reg {background-image:url(img/reg.svg)}
#log_reg::before{content:"Тест-драйв"}
#log_test {background-image:url(img/kermo.svg); width:80px;}
#log_test::before{content:"Тест-драйв"}
#log_tel {background-image:url(img/tel-green.svg);}
#log_exit::before{content:"Вихід"}


#log_mes {
	margin:20px;
	margin-top:30px;
	margin-bottom:0px;
	text-align:center;
}

#log_mes::before{content:"Ви ще не абонент ipLex? Реєструйтеся на безкоштовний тест-драйв:"}



/****************************************************************************/
/*********************************** MOBILE ***************************/
/****************************************************************************/



@media only screen and (max-width:720px){	

	#menu-grab{display:none;}
	#menu{
		left:-240px;
		width:200px !important;
	}
	#menu-close{
		position:fixed;
		bottom:10px;
		left:84px;
	}

  	body.open-menu #menu-grab{display:block;}
	body.open-menu #menu-close{display:block;}
	body.open-menu #footer{display:none;}

	body.single #menu-open{display:none;}
	
  	#menu-toogle{display:none;}

	#auth-mob{
		display:block;
		text-align:right;
	}
	#auth-mob div{
		display:inline-block;
		margin-left:10px;
	}

	#header{left:0 !important;}
	.subheader{left:0 !important;}

	#logo{display:none;}

	#container{left:0 !important;}

	#go-top{display:none;}


	#leftpage{
		width:100% !important;;
	}
	#leftpage.hide{
		left:-110%
	}

	
	
	

	.pop-up-bar{
		margin-top:0;
		position:absolute;
		left:0px;
		right:0px;
		bottom:0;
		transition: bottom .3s linear;
	}

	#footer {
		display:block;
	}
}
 

/****************************************************************************/                                  
/******************* SCROLLBAR ****************************************/
/****************************************************************************/
/*
::-webkit-scrollbar { 
   width: 16px;
   height: 16px;
}

::-webkit-scrollbar:vertical {
   
   background:#efefef;
   border:0px solid #efefef;
}
::-webkit-scrollbar:vertical:hover {
   background:rgb(245,245,245);
}
::-webkit-scrollbar:vertical:active {
   background:rgb(232,232,232);
}

::-webkit-scrollbar-thumb:vertical {
   border: none;
   border:4px solid #efefef;
    border-radius:10px;	
   //background:rgba(156, 211, 216,128);
   background:rgb(179, 223, 230);
   min-height: 40px;
}

::-webkit-scrollbar-thumb:vertical:hover {
   background:rgba(98, 199, 208, 255);

}
*/
/****************************************************************************/
/************************** LOADER *********************/
/****************************************************************************/


.loader-img {
  color: #0095ab;
  font-size: 10px;
  margin: auto auto;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  -webkit-animation: load4 1.3s infinite linear;
  animation: load4 1.3s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
@-webkit-keyframes load4 {
  0%,
  100% {
    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
  }
  12.5% {
    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  25% {
    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  37.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  50% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  62.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
  }
  75% {
    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
  }
  87.5% {
    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
  }
}
@keyframes load4 {
  0%,
  100% {
    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
  }
  12.5% {
    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  25% {
    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  37.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  50% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  62.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
  }
  75% {
    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
  }
  87.5% {
    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
  }
}