.i1{
   border: 1px solid #cccccc;
   background: #ffffff;
   outline: none;
   font-family:Ekibastuz;
   height: 40px;
   color: black;
   font-size: 16px;   
   padding-left:15px;
   border-top-left-radius: 5px;
   border-bottom-left-radius: 5px;
}	
.i2{
   border: 0px solid #cccccc;
   border-top-right-radius: 5px;
   border-bottom-right-radius: 5px;
   background-color:#3d7560;
   outline: none;
   height: 40px;
   color: white;
   font-size: 16px;   
   font-weight:300;
   font-weight:300;
   padding-left:15px; 
   padding-right:15px;
}	
.i2:hover {
	 background-color:#2c5545;
	 cursor:pointer;
}
.i3{
   border: 0px solid #cccccc;
   border-top-left-radius: 5px;
   border-bottom-left-radius: 5px;
   background-color:#3d7560;
   outline: none;
   height: 40px;
   color: white;
   font-size: 16px;   
   font-weight:300;
   font-weight:300;
   padding-left:15px; 
   padding-right:15px;
}	
.i3:hover {
	 background-color:#2c5545;
	 cursor:pointer;
}
.i31{
   border: 0px solid #cccccc;
   border-top-left-radius: 5px;
   border-bottom-left-radius: 5px;
   background-color:#3d7560;
   outline: none;
   height: 40px;
   color: white;
   font-size: 16px;   
   font-weight:300;
   font-weight:300;
   padding-left:15px; 
   padding-right:15px;
   margin-right:1px;
}	
.i31:hover {
	 background-color:#2c5545;
	 cursor:pointer;
}
.i211{
   border: 0px solid #cccccc;
   border-top-right-radius: 5px;
   border-bottom-right-radius: 5px;
   background-color:#cc0605;
   outline: none;
   height: 40px;
   color: white;
   font-size: 16px;   
   font-weight:300;
   font-weight:300;
   padding-left:15px; 
   padding-right:15px;
}	
.i211:hover {
	 background-color:#9c0303;
	 cursor:pointer;
}
.radio {
  vertical-align: top;
  width: 17px;
  height: 17px;
  margin: 0 3px 0 0;
}
.radio + label {
  cursor: pointer;
}
.radio:not(checked) {
  position: absolute;
  opacity: 0;
}
.radio:not(checked) + label {
  position: relative;
  padding: 0 0 0 35px;
}
.radio:not(checked) + label:before {
  content: '';
  position: absolute;
  top: -3px;
  left: 0;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(204,204,204,0.8);
  border-radius: 50%;
  background: #FFF;
}
.radio:not(checked) + label:after {
  content: '';
  position: absolute;
  top: 1px;
  left: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(204,204,204,0.8);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.8);
  opacity: 0;
  transition: all .2s;
}
.radio:checked + label:after {
  opacity: 1;
}
.radio:focus + label:before {
  box-shadow: 0 0 0 3px rgba(204,204,204,0.2);
}

/* Cначала обозначаем стили для IE8 и более старых версий
т.е. здесь мы немного облагораживаем стандартный чекбокс. */
.checkbox {
	vertical-align: top;
	margin: 0 3px 0 0;
	width: 17px;
	height: 17px;
}
/* Это для всех браузеров, кроме совсем старых, которые не поддерживают
селекторы с плюсом. Показываем, что label кликабелен. */
.checkbox + label {
	cursor: pointer;
}

/* Далее идет оформление чекбокса в современных браузерах, а также IE9 и выше.
Благодаря тому, что старые браузеры не поддерживают селекторы :not и :checked,
в них все нижеследующие стили не сработают. */

/* Прячем оригинальный чекбокс. */
.checkbox:not(checked) {
	position: absolute;
	opacity: 0;
}
.checkbox:not(checked) + label {
	position: relative; /* будем позиционировать псевдочекбокс относительно label */
	padding: 0 0 0 60px; /* оставляем слева от label место под псевдочекбокс */
}
/* Оформление первой части чекбокса в выключенном состоянии (фон). */
.checkbox:not(checked) + label:before {
	content: '';
	position: absolute;
	top: -4px;
	left: 0;
	width: 50px;
	height: 26px;
	border-radius: 13px;
	background: #CDD1DA;
	box-shadow: inset 0 2px 3px rgba(0,0,0,.2);
}
/* Оформление второй части чекбокса в выключенном состоянии (переключатель). */
.checkbox:not(checked) + label:after {
	content: '';
	position: absolute;
	top: -2px;
	left: 2px;
	width: 22px;
	height: 22px;
	border-radius: 10px;
	background: #FFF;
	box-shadow: 0 2px 5px rgba(0,0,0,.3);
	transition: all .2s; /* анимация, чтобы чекбокс переключался плавно */
}
/* Меняем фон чекбокса, когда он включен. */
.checkbox:checked + label:before {
	background: #9FD468;
}
/* Сдвигаем переключатель чекбокса, когда он включен. */
.checkbox:checked + label:after {
	left: 26px;
}
/* Показываем получение фокуса. */
.checkbox:focus + label:before {
	box-shadow: 0 0 0 3px rgba(255,255,0,.5);
}