body {
	background: #051830;
	color: #2e2e2e;
//	font: 13px/1 tahoma, arial, sans-serif;
        font-family: "Roboto",sans-serif;
        font-size: 14px;
	position: relative;
}
a {
    transition: 0.3s;
	color: #095c8d;
	cursor: pointer;
}
a:hover {
	color: #052d44;
}
#container {
	background: #051830;
	position: relative;
	overflow: hidden;
	z-index: 1;
	min-height: 100%;
}
#positioner {
	background: #051830 url(../images/header.jpg) 0 0 no-repeat;
	position: relative;
	z-index: 1;
	width: 1200px;
	padding-top: 87px;
	margin: 0 auto 0;
	z-index: 2;
}
#positioner:before {
	background: #48ad25;
	position: absolute;
	z-index: 6;
	width: 260px;
	height: 3px;
	top: 0;
	left: 0;
	content: '';
	border-bottom: 1px solid #60d637;
}
#positioner:after {
	background: #2a5192;
	position: absolute;
	z-index: 5;
	height: 3px;
	top: 0;
	right: 0;
	left: 0;
	content: '';
	border-bottom: 1px solid #578de6;
}
#container:before {
	background: #2a5192;
	position: absolute;
	z-index: 1;
	height: 3px;
	top: 0;
	right: 0;
	left: 0;
	content: '';
	border-bottom: 1px solid #578de6;
}
#main {
//	background: #f6f8f9;
        background: #ffffff;
	position: relative;
	z-index: 7;
}
#main:before {
	background: transparent url(../images/curl.png) 0 0 no-repeat;
	position: absolute;
	height: 200px;
	width: 254px;
	top: -87px;
	right: -11px;
	content: '';
	z-index: 8;
}
#main:after {
	display: block;
	content: '';
	clear: both;
}
#sidebar {
	background: #2a5192 url(../images/sidebar.jpg) 0 0 no-repeat;
	border-top: 1px solid #4e7ecd;
	width: 260px;
	padding: 0 0 0 0;
	position: relative;
	z-index: 9;
	float: left;
	margin: 0 -260px 0 0;
}
#sidebar:after {
	background: transparent;
	display: block;
	width: 260px;
	height: 250px;
	content: '';
}
#sidebar:before {
	background: transparent url(../images/vials.jpg) 0 0 no-repeat;
	display: block;
	width: 260px;
	height: 196px;
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
}
#logo {
	background: transparent url(../images/logo.jpg) 0 0 no-repeat;
	border-bottom: 1px solid #4e7ecd;
	width: 200px;
	height: 81px;
	margin: 0 30px;
	display: block;
	position: relative;
}
#content {
	position: relative;
	z-index: 9;
	margin: 0 40px 0 300px;
	line-height: 1.5;
}
#content p {
	font-size: 16px;
	padding: 0 0 15px 0;
}
#content h1 {
	font-size: 30px;
	color: #13347f;
	font-weight: normal;
	padding: 25px 0 10px 0;
	margin: 0 30px 15px 0;
	display: block;
	line-height: 1.1;
	border-bottom: 1px solid #cad8e8;
}
#content h2 {
	font-size: 24px;
	color: #13347f;
	font-weight: normal;
	padding: 0 0 10px 0;
	display: block;
	line-height: 1.1;
}

#content h3 {
	font-size: 20px;
	color: #13347f;
	font-weight: normal;
	padding: 0 0 10px 0;
	display: block;
	line-height: 1.1;
}

#navi {
	position: relative;
	display: block;
	padding: 30px 0 0 0;
}
#navi li > a {
	position: relative;
	display: block;
	background: transparent;
	padding: 10px 30px;
	color: #fff;
	text-shadow: #0b1e4a 1px 1px 1px;
}
#navi li:nth-child(odd) > a {
	background: rgba(193, 211, 252, 0.1);
}
#navi li > a:before {
	background: transparent url(../images/navi_bullet.png) 0 0 no-repeat;
	display: block;
	content: '';
	width: 5px;
	height: 9px;
	overflow: hidden;
	position: absolute;
	right: 30px;
	top: 50%;
	margin: -5px 0 0 0;
	transition: 0.3s;
}
#navi li > a:hover {
	background: rgba(12, 34, 70, 0.3);
}
#navi li > a:hover:before {
	right: 20px;
}
#navi li.active > a {
	background: #f6f8f9;
	color: #252525;
	font-weight: bold;
	text-shadow: none;
	text-decoration: none;
}
#navi li.active > a:before {
	background: transparent url(../images/navi_bullet.png) -5px 0 no-repeat;
}
#navi li .navi_submenu {
	display: none;
}
#navi li.active .navi_submenu {
	display: block;
	background: #c1cfe6;
}
#navi li.active .navi_submenu a {
	position: relative;
	display: block;
	background: transparent;
	padding: 10px 30px;
	color: #2a5192;
}
#navi li.active .navi_submenu a:nth-child(odd) {
	background: #d1dcee;
}
#navi li.active .navi_submenu a:first-child {
	padding-top: 15px;
}
#navi li.active .navi_submenu a:last-child {
	padding-bottom: 15px;
}
#navi li.active .navi_submenu a.active {
	font-weight: bold;
	color: #252525;
	text-decoration: none;
}
#footer {
	position: relative;
	text-align: right;
	color: #939393;
	line-height: 1.1;
	font-size: 12px;
	border-top: 1px solid #cad8e8;
	padding: 30px 0 30px;
}
#share_wrapper {
	position: absolute;
	top: 26px;
	left: 0;
}
#mobile_opener {
	display: none;
}
#main {
	border-left: 260px solid #2a5192;
}
#sidebar {
	left: -260px;
	margin: 0 -260px 0 0;
}
#content {
	margin: 0 40px 0 40px;
}

.adv_container {
	text-align: center;
	margin: 0 auto;
/*	padding: 10px 0 20px; */
	padding: 0px 0 10px;
}

.adslot_1 { width: 320px; height: 100px; }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }


.safe_container {
	position: relative;
	float: left;
	width:100%;
}


.input_1 {
width:90%;
}


.menu {
            display: flex;
            gap: 15px;
            padding: 5px 5px 0 5px;
            font-family: Arial, sans-serif;
        }

        .menu a {
            text-decoration: none;
            color: #0073e6; /* Цвет ссылок */
            font-weight: bold;
/*          padding: 5px 10px; */
            border-radius: 5px;
            transition: background-color 0.3s;
        }

        .menu a:hover {
            background-color: #f0f8ff; /* Цвет фона при наведении */
        }

    .tables-container {
      display: flex;
      flex-direction: row; /* На больших экранах таблицы идут в ряд */
      gap: 20px; /* Расстояние между блоками */
    }

    /* По умолчанию: 
       первая таблица = order: 1 
       вторая таблица = order: 2 
       => на больших экранах первая таблица слева, вторая справа */
    #first-table {
      order: 1;
    }
    #second-table {
      order: 2;
    }

    /* На мобильных (при ширине экрана <= 600px) меняем расположение */
    @media (max-width: 600px) {
      .tables-container {
        flex-direction: column; /* Таблицы идут друг под другом */
      }
      #first-table {
        order: 2; /* Первая таблица станет ниже */
      }
      #second-table {
        order: 1; /* Вторая таблица станет выше */
      }
    }

    /* Пример простых стилей для таблиц */
    table {
      border-collapse: collapse;
      width: 100%;
    }
    table, th, td {
      border: 1px solid #ccc;
    }
    th, td {
      padding: 8px;
      text-align: center;
    }
    th {
      background-color: #f5f5f5;
    }
    
    .calc-table {
      width: 100%;         /* таблица тянется на всю ширину контейнера */
      border-collapse: collapse;
      background-color: #f0f8ff;
      border: 1px solid #ccc;
    }

    /* Ячейки */
    .calc-table td, .calc-table th {
      border: 1px solid #ccc;
      padding: 8px;
      vertical-align: top;
    }

    /* Ссылки */
    .calc-table a {
      color: #333;
      text-decoration: underline;
    }

    /* Элементы формы (селекты, поля ввода, textarea, кнопки) */
    .calc-table select,
    .calc-table input[type="text"],
    .calc-table input[type="button"],
    .calc-table textarea {
      margin: 4px 0;
      font-size: 14px;
      font-family: inherit;
      box-sizing: border-box; /* чтобы ширина считалась с учётом padding */
    }

    /* Текстовые поля тянутся почти на всю ячейку */
    .calc-table textarea {
      width: 98%;
      resize: vertical; /* разрешаем изменять высоту, если нужно */
    }

    /* Примерно как на скриншоте: поля длины, мол. массы и т.д. на одной строке 
       (т.к. они в отдельных ячейках, они уже будут разделены) */
    .inline-fields input {
      margin: 0 5px;
      width: 80px; /* При необходимости подправить */
    }

    /* Ссылка-метка для небольших подсказок/хелпов */
    .calc-table a.help-link {
      margin-right: 10px;
    }
    
.vpn-bottom-overlay {
  position: fixed;
  bottom: 0; 
  left: 0;
  width: 100%;
  background: radial-gradient(
  ellipse at center,
  #d4e6f5 0%,
  #d9eaf7 40%,
  #e6f1fa 75%,
  #f2f9ff 100%
);
  color: #1e2c3a;
  font-family: Arial, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center; 
  padding: 15px 30px;
  z-index: 1000;
  box-sizing: border-box;
  display: none;
}
    
        .vpn-content {
      display: flex;
      align-items: center;
      gap: 15px;
      text-align: center;
    /*  max-width: 600px; */
      width: 100%;
      justify-content: center;
    }

    .text {
      font-size: 20px;
      font-weight: bold;
    }

    a button {
      background: red; 
/*      background: #28a745;	*/	
      color: white;
      border: none;
      padding: 14px 28px;
      cursor: pointer;
      font-size: 20px;
      font-weight: bold;
      border-radius: 5px;
    }

    a button:hover {
      background: darkred;
    }

    /* close */
    .close-btn {
      background: none;
      border: none;
      color: white;
      font-size: 22px;
      cursor: pointer;
      font-weight: bold;
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
    }

    .close-btn:hover {
      color: red;
    }

    /* mobile */
    @media (max-width: 600px) {
      .vpn-bottom-overlay {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 20px;
      }

      .vpn-content {
        flex-direction: column;
        gap: 10px;
      }

      .text {
        font-size: 18px;
      }

      a button {
        width: 100%;
        max-width: 250px;
      }

      .close-btn {
        top: 10px;
        right: 10px;
      }
    }
    
    .glp1-banner {
  background: #fff;
  border: 2px solid #2869c2;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(40,105,194,0.10);
  padding: 16px 22px;
  margin: 20px 0 22px 0;
  display: flex;
  align-items: center;
  gap: 22px;
/*  max-width: 600px; */
  font-family: inherit;
}
.glp1-banner-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.glp1-banner-img {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: block;
}
.glp1-banner-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.glp1-banner-title {
  font-size: 1.09rem;
  color: #174177;
  font-weight: 700;
  margin-bottom: 2px;
  line-height: 1.23;
  white-space: nowrap;
}
.glp1-banner-subtitle {
  color: #F9A332;
  font-size: 0.99rem;
  font-weight: 800;
  line-height: 1.22;
  white-space: normal;
}
.glp1-banner-btn {
  display: inline-block;
  background: linear-gradient(90deg,#3673fd,#eb232a);
  color: #fff;
  padding: 13px 30px;
  border-radius: 7px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.08rem;
  box-shadow: 0 1px 6px rgba(40,105,194,0.07);
  text-align: center;
  white-space: nowrap;
  transition: background 0.2s;
  border: none;
  margin-left: 16px;
}

/* mobile version */
@media (max-width: 600px) {
  .glp1-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 13px 8px;
    gap: 10px;
    max-width: 100%;
  }
  .glp1-banner-left {
    gap: 8px;
  }
  .glp1-banner-btn {
    width: 100%;
    margin: 0;
    padding: 14px 0;
    font-size: 1.05rem;
  }
  .glp1-banner-title {
    font-size: 1.02rem;
    white-space: normal;
  }
}