.fleft{
	float:left;
}
.fright{
	float:right;
}
.fixed{
	position:fixed;
}
.inline{
	display:inline;
}
.inl-block{
	display:inline-block;
}
.tleft{
	text-align:left;
}
.tcenter{
	text-align:center;
}
.tright{
	text-align:right;
}
.none, .hidden{
display:none;
}
.show, .block{
	display:block;
}
@font-face{
	font-family:"Segoe UI Cyrillic Light";
	src:local("O"),
	url("/css/fonts/segoe-ui-light-cyrillic-v2.woff") format("woff"),
	url("/css/fonts/segoe-ui-light-cyrillic-v2.eot"),
	url("/css/fonts/segoe-ui-light-cyrillic-v2.eot?")
	format("embedded-opentype"),
	url("/css/fonts/segoe-ui-light-cyrillic-v2.ttf") format("truetype");
	font-style:normal;font-weight:200
}
@font-face{
	font-family:"Segoe UI Light";
	src:local("O"),url("/css/fonts/segoe-ui-light-latin.woff") format("woff"),
	url("/css/fonts/segoe-ui-light-latin.eot"),
	url("/css/fonts/segoe-ui-light-latin.eot?") format("embedded-opentype"),
	url("/css/fonts/segoe-ui-light-latin.ttf") format("truetype");
	font-style:normal;font-weight:200
}
body{
	margin:0px;
	font-family: "Segoe UI Cyrillic Light";
	background-repeat: no-repeat;
	background-position: center top;
	background-color: #FbFbFb;
}
h1{
	font-family:"Segoe UI Cyrillic Light";
	text-align:center;
}
/* LOGIN FORMA */
.yelow_info{
	background-color: #FF3;
	border: 2px solid #D9D900;
}
.red_info{
	background-color: #FFBFBF;
	border: 2px solid #FF8484;
}
#login_forma{
	font-family:Arial, Helvetica, sans-serif;
}
#login_forma .polepidpus{
font-size: 13px;
font-weight: 700;
}
#login_forma h2{
	color:#222;
}
#login_forma .bold{
	font-weight:bold;
}
#login_forma .psevdolinks{
	color: #6A82A9;
text-decoration: none;
cursor: pointer;
font-size:12px;
}

#login_forma .knopka_act_formu{
	background: linear-gradient(to bottom, #FFF, #EFEFEF) repeat scroll 0% 0% transparent;
	box-sizing: border-box;
	display: inline-block;
	height: 25px;
	position: relative;
	margin: 0px;
	padding: 0px 8px;
	border-width: 1px;
	border-style: solid;
	border-right: 1px solid #D5D5D5;
	border-left: 1px solid #D5D5D5;
	-moz-border-top-colors: none;
	-moz-border-right-colors: none;
	-moz-border-bottom-colors: none;
	-moz-border-left-colors: none;
	border-image: none;
	border-color: #DDD #D5D5D5 #CDCDCD;
	border-radius: 3px;
	box-shadow: 0px -1px 0px rgba(255, 255, 255, 0.4) inset;
	text-decoration: none;
	cursor: pointer;
	overflow: visible;
	outline: 0px none;
	-moz-user-select: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 23px;
	text-transform: uppercase;
}
#login_forma .n_buttons{
	text-align:center;
}
#login_forma .n_buttons span{
	margin:30px 6px 0px 6px;
}
	
#login_forma input[type=text], #login_forma input[type=password], #login_forma input[type=email]{
	border: 1px solid #D1D1D1;
	height: 23px;
line-height: 23px;
padding: 0px 5px;
width: 166px !important;
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1) inset;
outline: medium none;
}
#login_forma, .lifted{
	height:320px;
}
#login_forma{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
	width:400px;
	z-index:200;
	display:none;
}
.lifted {
        position:relative;
        width:100%;
        padding:1em;
        margin:2em 10px 4em;
        background:#fff;
        border-radius:4px;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
        -moz-border-radius:4px;
 
}
 
.lifted:before,
.lifted:after {
        content:"";
        position:absolute;
        z-index:-2;
        bottom:15px;
        left:10px;
        width:50%;
        height:20%;
        max-width:300px;
    -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
       -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
            box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    -webkit-transform:rotate(-3deg);
       -moz-transform:rotate(-3deg);
        -ms-transform:rotate(-3deg);
         -o-transform:rotate(-3deg);
            transform:rotate(-3deg);
}
 
.lifted:after {
    right:10px;
    left:auto;
    -webkit-transform:rotate(3deg);
       -moz-transform:rotate(3deg);
        -ms-transform:rotate(3deg);
         -o-transform:rotate(3deg);
            transform:rotate(3deg);
}
#pidkladka{
	display:none;
	top:0px;
	left:0px;
	width:3000px;
	height:3000px;
	position:fixed;
	cursor:pointer;
	z-index:100;
	overflow:hidden;
	background-color:rgba(255,255,255,0.8);
}
#login_close{
	text-align:right;
	cursor:pointer;
}
#login_forma h2{
	text-align:center;
	margin-top:5px;
}
.login_table td{
	padding-left:15px;
	padding-top:8px;
}
#login_forma .wind_opus{
	margin-top:20px;
	font-size:12px;
	padding:3px 10px;
}

#login_forma .verh_info{
	border: 1px solid #B4DFE6;
	background-color: #E4F5FA;
font-size: 11px;
font-weight: 700;
line-height: 15px;
padding: 8px 8px 6px;
margin: 0px 0px 10px;
}
#yelow_info{
	background-color: #FF3;
	border: 2px solid #D9D900;
	padding:3px 10px;
	margin-top:10px;
}
/* END LOGIN FORMA */

/*Створення ТТН*/
#creat_en{
width:500px;
margin:20px auto auto auto;
}
#creat_en *{
	font-size:12px;
}
#creat_en fieldset{
	display:inline-block;
	width:500px;
	box-sizing:border-box;
	vertical-align:top;
	margin-top:20px;
}
#creat_en table th{
	text-align:right;
	font-size:12px;
	padding-top:7px;
}
#creat_en table th, #creat_en table td{
	vertical-align:top;
}
#creat_en table .w100{
	width:100%;
	box-sizing:border-box;
}
#creat_en input[type="text"],#creat_en select{
padding: 4px 0 4px 4px;
border: 1px solid #cecece;
background: #F6F6f6;
border-radius: 2px;
}

/*
.help{
	opacity:0.5;
}
.help:hover::after { 
 content: attr(data-title); 
    position: absolute; 
    left: 20%; top: 30%; 
    z-index: 1; 
    background: rgba(255,255,230,0.9);
    font-family: Arial, sans-serif;
    font-size: 11px; 
    padding: 5px 10px;
    border: 1px solid #333; 
}
*/
	
/*END Створення ТТН*/

/*Підказки*/
.tooltip { /* стиль текста, наведя или нажав на который появится пояснение */
  display: inline-block;
  position: relative;
  background: #E6E6E6; /* цвет фона */
  text-indent: 0px;
  cursor: help; /* вид курсора */
}
.tooltip img{
	opacity:0.6;
}
.tooltip > span { /* стиль появляющейся подсказки */
  position: absolute;
  bottom: 100%;
  left: -20em; /* = max-width */
  right: -20em; /* = max-width */
  width: -moz-max-content;
  width: -webkit-max-content;
  width: max-content;  /* ширина подсказки может быть не более содержимого */
  max-width: 20em;  /* ширина подсказки может быть не более 20em */
  max-height: 80vh; /* необязательное ограничение по высоте подсказки, 1vh — это 1% от ширины окна */
  overflow: auto;
  visibility: hidden;
  margin: 0 auto .4em; /* поднята на .4em над текстом, наведя или нажав на который появится пояснение */
  padding: .3em;
  border: solid rgb(200,200,200);
  font-size: 90%;
  background: #fff;
  line-height: normal;
  cursor: auto;
}
.tooltip.left > span { /* начинается от левого края */
  left: 0;
  right: -20em;
  margin: 0 0 .4em;
}
.tooltip.right > span { /* начинается от правого края */
  left: -20em;
  right: 0;
  margin: 0 0 .4em auto;
}
.tooltip:after { /* треугольничек под подсказкой; тут тоже везде .4em */
  content: "";
  position: absolute;
  top: -.4em;
  left: 50%;
  visibility: hidden;
  margin: 0 0 0 -.4em;
  border: .4em solid;
  border-color: rgb(200,200,200) transparent transparent transparent;
  cursor: auto;
}
.tooltip.left:after {
  left: 1em;
}
.tooltip.right:after {
  left: auto;
  right: .6em; /* 1em - .4em */
}
.tooltip:before { /* поле между текстом, наведя или нажав на который появится пояснение, и подсказкой нужно чтобы, если перевести курсор мышки на подсказку, та не исчезла; тут тоже везде .4em */
  content: "";
  position: absolute;
  top: -.4em;
  left: 0;
  right: 0;
  height: .4em;
  visibility: hidden;
}
.tooltip:hover > span,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus > span,
.tooltip:focus:before,
.tooltip:focus:after {
  visibility: visible;
  transition: 0s .4s;
}
.tooltip:focus { /* убрать рамку в Хроме */
  outline: none;
}
.tooltip.anim > span,
.tooltip.anim:after { /* анимация */
  opacity: 0;
  transform: translateY(1.5em) scale(.3);
  transform-origin: center bottom;
}
.tooltip.anim:after {
  transform: translateY(.7em) scale(.3); /* 1.7 = 1.5 / (1.4*2) */
}
.tooltip.anim:hover > span,
.tooltip.anim:hover:after,
.tooltip.anim:focus > span,
.tooltip.anim:focus:after {
  opacity: 1;
  transition: .6s .4s;
  transform: translateY(0);
}
@media (max-width: 20em) { /* ширина подсказки может быть не более ширины окна браузера */
  .tooltip > span {
    max-width: 100vw; /* в 100vw входит полоса прокрутки, но на мобильных она часто отсутствует */
    box-sizing: border-box;
  }
}
/* Приклади
<span class="tooltip" tabindex="0">наведи на меня (по центру) <span>Подсказка</span></span>
<span class="tooltip left" tabindex="0">наведи на меня (влево) <span>Подсказка</span></span>
<span class="tooltip right" tabindex="0">наведи на меня (вправо) <span>Подсказка</span></span>
<span class="tooltip anim" tabindex="0">наведи на меня (с анимацией) <span>Подсказка</span></span>
*/
/*END Підказки*/


header, #content{
	width:900px;
	
	
}
header{
	padding-top:5px;
	background-color:#f3f5f7;
	margin:auto auto 25px auto;
	display:block;
	text-align:center;
	padding-bottom:0px;
}
#content{
	clear:both;
	margin:auto auto 0px auto;
	font-family:"Arial";
	background-color:#FFF;
	padding-bottom:50px;
	box-sizing:border-box;
	padding:0px 15px 15px; 
}
footer{
	background-color: #3397DA;
	padding:30px;
	color:#fff;
}
.btn {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 3;
  -moz-border-radius: 3;
  border-radius: 3px;
  -webkit-box-shadow: 0px 1px 3px #666666;
  -moz-box-shadow: 0px 1px 3px #666666;
  box-shadow: 0px 1px 3px #666666;
  font-family: Arial;
  color: #ffffff;
  font-size: 14px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  cursor:pointer;
}

.btn:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

.butt_register{
	color:#1E5E88;
	margin-left:20px;
	cursor:pointer;
}
.butt_register:hover{
	text-decoration:underline;
}
#top_menu {
    background: url(/images/top_menu_main.png) repeat-x;
    border-radius: 0 0 5px 5px;
    border-top: 1px solid #3397DA;
    box-shadow: 0 1px 2px #B9B9B9;
    height: 44px;
    line-height: 40px;
    padding: 0;
    text-align: left;
    margin: 45px 0 20px;
	display:block;
}
#top_menu a{
	margin: auto 10px;
	color:#1E5E88;
	text-decoration:none;
}
#top_menu a:hover{
	color:#164463;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #164463;
}

/*Головна сторінка - швидкі блоки*/
#quick_blocks div{
	display:inline-block;
	width:200px;
	height:200px;
	margin:10px;
	background-repeat: no-repeat;
	background-position: center center;
	border: 3px solid #3397DA;
	border-radius:15px;
	cursor:pointer;
	line-height:370px;
	color:#3397DA;
	text-align:center;
	transition:0.25s;
	-webkit-box-shadow: inset 0px 0px 24px -8px rgba(75,98,232,1);
-moz-box-shadow: inset 0px 0px 24px -8px rgba(75,98,232,1);
box-shadow: inset 0px 0px 24px -8px rgba(75,98,232,1);
}
#quick_blocks div:hover{
-webkit-box-shadow: 0px 0px 24px -8px rgba(75,98,232,1);
-moz-box-shadow: 0px 0px 24px -8px rgba(75,98,232,1);
box-shadow: 0px 0px 24px -8px rgba(75,98,232,1);
}
#qb1{
	background-image:url(../images/vukv_kurera.jpg);
}
#qb2{
	background-image:url(../images/history.jpg);
}
#qb3{
	background-image:url(../images/lupa_vidstejutu.jpg);
}



/*END Головна сторінка - швидкі блоки*/
.red_shadow{
-webkit-box-shadow: 0px 0px 7px 1px rgba(255,0,0,1);
-moz-box-shadow: 0px 0px 7px 1px rgba(255,0,0,1);
box-shadow: 0px 0px 7px 1px rgba(255,0,0,1);
}
.tracking_nomer{
	border-radius:3px;
	border: 1px solid #999;	
	padding:10px 10px;
	width:100%;
	box-sizing:border-box;
	margin-bottom:15px;
	font-size:18px;
	
}
#track_info{
	margin-top:30px;
	border-radius:10px;
	padding:10px;
	background-color: #E3F2FD;
	display:none;
}
#track_forma{
	margin-top:80px;
	margin-bottom:80px;
	transition:0.6s;
}
#margin_on_start{
	transition:0.8s;
}

#rozdrukuvatu_ttn{
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 6;
  -moz-border-radius: 6;
  border-radius: 6px;
  font-family: Arial;
  color: #ffffff;
  font-size: 19px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}
#rozdrukuvatu_ttn:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}
#link_for_print_ttn{
	margin-bottom:200px;
}







@media (max-width: 920px) {
	header, #content{
	width:100%;
	}	
}