@charset "utf-8";
body,td,th {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 13px;
	margin: 0px;
}

/*Top menu*/
#nav {
	padding:0;
	margin:0;
	list-style:none;
	height:53px;
	position:relative;
	z-index:500;
	font-family:arial, verdana, sans-serif;
	background-image: url(img/nav.jpg);
	background-repeat: repeat-x;
}

#nav li.top {display:block; float:left; height:53px;}
#nav li a.top_link {
	display:block;
	float:left;
	height:53px;
	line-height:53px;
	color:#333333;
	text-decoration:none;
	font-size:13px;
	padding:0 0 0 12px;
	cursor:pointer;
}
#nav li a.top_link span {float:left; display:block; padding:0 45px 0 39px; height:35px; }

#nav li:hover a.top_link, 
#nav li.iehover a.top_link {
	color:#0094c7;
	cursor:pointer;
	background-image: url(img/nav-butt.png);
	background-repeat: no-repeat;
	background-position: center 13px;
}
#nav li:hover a.top_link span,
#nav li.iehover a.top_link span { cursor:pointer;}
#nav li:hover a.top_link span.down,
#nav li.iehover a.top_link span.down {cursor:pointer;}

/* Default list styling */

#nav li:hover {position:relative; z-index:200; cursor:pointer;}

#nav li:hover ul.sub
{
	left: 13px;
	top:42px;
	padding:3px;
	border:1px solid #C0C0C0;
	white-space:nowrap;
	width:151px;
	height:auto;
	z-index:300;
	cursor:pointer;
	background-color: #eeeeee;
}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal; cursor:pointer;}

#nav li:hover ul.sub li a
{
	display:block;
	font-size:11px;
	height:18px;
	width:148px;
	line-height:18px;
	text-indent:5px;
	color:#666666;
	text-decoration:none;
	border:1px solid #eeeeee;
	cursor:pointer;
	text-align: center;
}
#nav li ul.sub li a.fly
{
	cursor:pointer;
	background-color: #eeeeee;
	background-image: url(img/arrow.gif);
	background-repeat: no-repeat;
	background-position: 140px 6px;
}
#nav li:hover ul.sub li a:hover
{
	color:#0094c7;
	border-color:#fff;
	cursor:pointer;
	background-color: #eeeeee;
}
#nav li:hover ul.sub li a.fly:hover
{
	color:#0094c7;
	cursor:pointer;
	background-color: #eeeeee;
	background-image: url(img/arrow_over.gif);
	background-repeat: no-repeat;
	background-position: 140px 6px;
}


#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{
	left:150px;
	top:-4px;
	padding:3px;
	border:1px solid #C0C0C0;
	white-space:nowrap;
	width:150px;
	z-index:400;
	height:auto;
	background-color: #eeeeee;
}

#nav ul, 
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{background:#eeeeee url(img/arrow_over.gif) 140 6px no-repeat; color:#0094c7; border-color:#fff;} 

#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
{background:#eeeeee url(img/arrow.gif) 140 6px no-repeat; color:#000; border-color:#999999;} 

/*End Top Menu*/

.top-bg {
	background-image: url(img/top-bg.jpg);
	background-repeat: repeat-x;
	background-position: bottom;
}

.nav-bg {
	background-image: url(img/nav.jpg);
	background-repeat: repeat-x;
}

.second-nav {
	padding-right: 2px;
	padding-left: 2px;
}

.second-nav-bg {
	background-image: url(img/main-bg.jpg);
	background-repeat: repeat-x;
}

/*Middle Menu*/
.mid-top-bg {
	background-image: url(img/nav-mid-top-bg.jpg);
	background-repeat: no-repeat;
	background-position: center bottom;
}
.mid-mid-bg {
	background-image: url(img/nav-mid-mid-bg.jpg);
	background-repeat: repeat-y;
	background-position: center top;
}
.mid-but-bg {
	background-image: url(img/nav-mid-but-bg.jpg);
	background-repeat: no-repeat;
	background-position: center top;
}
.mid-nav-nom {
	font-size: 16px;
	color: #FF9900;
	font-weight: bold;
	padding-left: 18px;
	padding-right: 10px;
	text-decoration: none;
}
.mid-nav-link {
	background-image: url(img/nav-mid-but.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	height: 36px;
}
a.midnav {
	text-decoration: none;
	color: #666666;
}
a.midnav:hover {
	color: #57B3DC;
	
}
.main-txt {
	padding-right: 15px;
	padding-left: 5px;
	color: #3D3D3D;
	text-align: justify;
}

a.midall {
	color: #8bc200;
	text-decoration: underline;
	padding-right: 20px;
	font-size: 14px;
}
a.midall:hover {
	text-decoration: none;
	color: #8bc200;
	font-size: 14px;
}

/*End Middle Menu*/

.v-point {
	background-image: url(img/pnt.gif);
	background-repeat: repeat-y;
	background-position: right top;
}
.buttom-header {
	color: #0094c7;
	font-weight: normal;
	font-size: 15px;
}
.txt-stl {

}
.txt-stl2 {
	font-size: 10px;
	font-weight: normal;
	color: #666666;
	padding-left: 30px;
}
a.page {
	color: #8bc200;
	text-decoration: none;
}
a.page:hover {
	text-decoration: underline;
	color: #8bc200;
}
.form-inp {
	border: 0px none #FFFFFF;
	background-image: url(img/input-tel-bg.png);
	height: 27px;
	width: 220px;
	background-repeat: no-repeat;
	padding-left: 10px;
	font-family: Georgia, Times New Roman, Times, serif;
	color: #4D4D4D;
	background-position: center center;
	text-align: center;
}
a.order-but {
	display:block;
	height: 28px;
	width: 115px;
	background: url(img/order-but1.png);
	text-decoration: none;
}
.qwes {
	text-transform: uppercase;
	font-size: 9px;
	color: #666666;
}

a.order-but:hover {
	display:block;
	height: 28px;
	width: 115px;
	background:url(img/order-but2.png);
	text-decoration: none;
}.clock {
	padding-right: 35px;
}
.txt-stl3 {
	font-weight: bold;
	color: #FF0000;
	font-size: 12px;
}
.style2 {
	font-size: 14px;
	font-weight: bold;
}
.poleznost {	font-style: italic;
	padding-right: 10px;
	padding-left: 10px;
}
.poleznost-title {	color: #00A7E3;
	font-size: 16px;
	font-weight: normal;
	font-style: italic;
}
.style2 {
	font-size: 14px;
	font-weight: bold;
}
.poleznost {	font-style: italic;
	padding-right: 10px;
	padding-left: 10px;
}
.poleznost-title {	color: #00A7E3;
	font-size: 16px;
	font-weight: normal;
	font-style: italic;
}
.Price-table-1 {
	border-bottom-width: 0px;
	border-top-color: #ebe9ea;
	border-right-color: #ebe9ea;
	border-bottom-color: #ebe9ea;
	border-top-width: 1px;
	border-right-width: 1px;
	border-left-width: 0px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-top-style: solid;
	border-left-style: solid;
	border-left-color: #ebe9ea;
}
.Price-table-11 {
	border-bottom-width: 0px;
	border-top-color: #ebe9ea;
	border-right-color: #ebe9ea;
	border-bottom-color: #ebe9ea;
	border-left-color: #ebe9ea;
	border-top-width: 1px;
	border-right-width: 0px;
	border-left-width: 0px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-top-style: solid;
	border-left-style: solid;
}

.zakaz-table-1 {
	border-top: 1px solid #ebe9ea;
	border-bottom: 0px solid #ebe9ea;
	border-right: 0px solid #ebe9ea;
	border-left: 0px solid #ebe9ea;
}
.zakaz-table-2 {
	border: 0px solid #ebe9ea;
}
.zakaz-table-line-top {
	border-top: 1px solid #ebe9ea;
	border-bottom: 1px solid #ebe9ea;
	border-right: 0px solid #ebe9ea;
	border-left: 0px solid #ebe9ea;
	margin-top: 2px;
	margin-bottom: 2px;
}
.Price-table-2 {
	border-bottom-width: 0px;
	border-top-color: #ebe9ea;
	border-right-color: #ebe9ea;
	border-bottom-color: #ebe9ea;
	border-left-color: #ebe9ea;
	border-top-width: 1px;
	border-right-width: 0px;
	border-left-width: 0px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-top-style: solid;
	border-left-style: solid;
}
.Price-table-3 {
	border-bottom-width: 0px;
	border-top-color: #ebe9ea;
	border-right-color: #ebe9ea;
	border-bottom-color: #ebe9ea;
	border-left-color: #ebe9ea;
	border-top-width: 1px;
	border-right-width: 1px;
	border-left-width: 0px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-top-style: solid;
	border-left-style: solid;
}
.zakaz-table-3 {
	border-bottom-width: 0px;
	border-right-color: #ebe9ea;
	border-bottom-color: #ebe9ea;
	border-left-color: #ebe9ea;
	border-right-width: 1px;
	border-left-width: 0px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top: 0px solid #ebe9ea;
}
.Price-table-4 {
	border-bottom-width: 0px;
	border-top-color: #ebe9ea;
	border-right-color: #ebe9ea;
	border-bottom-color: #ebe9ea;
	border-left-color: #ebe9ea;
	border-top-width: 1px;
	border-right-width: 0px;
	border-left-width: 1px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-top-style: solid;
	border-left-style: solid;
}
.zakaz-table-4 {
	border-bottom-width: 0px;
	border-bottom-color: #ebe9ea;
	border-left-color: #ebe9ea;
	border-left-width: 1px;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top: 0px solid #ebe9ea;
	border-right: 1px solid #ebe9ea;
}
.zakaz-table-5 {
	border-bottom-width: 0px;
	border-bottom-color: #ebe9ea;
	border-left-color: #ebe9ea;
	border-left-width: 1px;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top: 0px solid #ebe9ea;
	border-right: 1px solid #ebe9ea;
}
.Price-table-5 {
	border-bottom-width: 1px;
	border-top-color: #ebe9ea;
	border-right-color: #ebe9ea;
	border-bottom-color: #ebe9ea;
	border-left-color: #ebe9ea;
	border-top-width: 1px;
	border-right-width: 0px;
	border-left-width: 0px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-top-style: solid;
	border-left-style: solid;
}
.Price-table-6 {
	border-bottom-width: 1px;
	border-top-color: #ebe9ea;
	border-right-color: #ebe9ea;
	border-bottom-color: #ebe9ea;
	border-left-color: #ebe9ea;
	border-top-width: 1px;
	border-right-width: 1px;
	border-left-width: 0px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-top-style: solid;
	border-left-style: solid;
}
.Price-table-7 {
	border-bottom-width: 1px;
	border-top-color: #ebe9ea;
	border-right-color: #ebe9ea;
	border-bottom-color: #ebe9ea;
	border-left-color: #ebe9ea;
	border-top-width: 1px;
	border-right-width: 0px;
	border-left-width: 1px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-top-style: solid;
	border-left-style: solid;
}
.Price-table-8 {
	border-bottom-width: 1px;
	border-top-color: #ebe9ea;
	border-right-color: #ebe9ea;
	border-bottom-color: #ebe9ea;
	border-left-color: #ebe9ea;
	border-top-width: 1px;
	border-right-width: 1px;
	border-left-width: 0px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-top-style: solid;
	border-left-style: solid;
}
.Price-table-9 {
	border-bottom-width: 1px;
	border-top-color: #ebe9ea;
	border-right-color: #ebe9ea;
	border-bottom-color: #ebe9ea;
	border-left-color: #ebe9ea;
	border-top-width: 1px;
	border-right-width: 0px;
	border-left-width: 0px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-top-style: solid;
	border-left-style: solid;
}
.zakaz-table-9 {
	border-bottom-width: 1px;
	border-right-color: #ebe9ea;
	border-bottom-color: #ebe9ea;
	border-left-color: #ebe9ea;
	border-right-width: 0px;
	border-left-width: 0px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
}
.Price-table-10 {
	border-bottom-width: 1px;
	border-top-color: #ebe9ea;
	border-right-color: #ebe9ea;
	border-bottom-color: #ebe9ea;
	border-left-color: #ebe9ea;
	border-top-width: 1px;
	border-right-width: 0px;
	border-left-width: 0px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-top-style: solid;
	border-left-style: solid;
}


.price-T-L {
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	background-image: url(img/price-1.png);
	background-repeat: no-repeat;
	background-position: left top;
}
.price-T-L2 {
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	background-image: url(img/price-1.png);
	background-repeat: no-repeat;
	background-position: left top;
}
.price-B-R2 {
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	background-image: url(img/price-3.png);
	background-repeat: no-repeat;
	background-position: left top;
}

.price-B-L2 {
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	background-image: url(img/price-4.png);
	background-repeat: no-repeat;
	background-position: left top;
}

.price-T-R2 {
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	background-image: url(img/price-2.png);
	background-repeat: no-repeat;
	background-position: left top;
}

.price-T2 {
	border-top-width: 1pt;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	background-repeat: no-repeat;
	background-position: left top;
	border-top-color: #ebe9ea;
}
.price-L2 {
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: solid;
	background-repeat: no-repeat;
	background-position: left top;
	border-left-color: #ebe9ea;
}
.price-R2 {
	border-top-width: 0px;
	border-right-width: 1px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: none;
	border-left-style: none;
	background-repeat: no-repeat;
	background-position: left top;
	border-right-color: #ebe9ea;
}


.price-B2 {
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 1px;
	border-left-width: 0px;
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	background-repeat: no-repeat;
	background-position: left top;
	border-bottom-color: #ebe9ea;
}



.price-T-R {
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	background-image: url(img/price-2.png);
	background-repeat: no-repeat;
	background-position: right top;
}
.price-B-R {
	border-top-width: 1px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	background-image: url(img/price-3.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	border-top-color: #ebe9ea;
	border-right-color: #ebe9ea;
	border-bottom-color: #ebe9ea;
	border-left-color: #ebe9ea;
}
.price-B-L {
	border-top-width: 1px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	background-image: url(img/price-4.png);
	background-repeat: no-repeat;
	background-position: left bottom;
	border-top-color: #ebe9ea;
	border-right-color: #ebe9ea;
	border-bottom-color: #ebe9ea;
	border-left-color: #ebe9ea;
}
.form-inp-s {
	border: 0px none #FFFFFF;
	background-image: url(img/input-tel-bg-s.png);
	height: 27px;
	width: 118px;
	background-repeat: no-repeat;
	padding-left: 10px;
	font-family: Georgia, Times New Roman, Times, serif;
	color: #4D4D4D;
	background-position: center center;
	text-align: center;
	background-color: #FFFFFF;
}
.form-inp-d {
	border: 0px none #FFFFFF;
	background-image: url(img/input-tel-bg.png);
	height: 27px;
	width: 220px;
	background-repeat: no-repeat;
	padding-left: 10px;
	font-family: Georgia, Times New Roman, Times, serif;
	color: #4D4D4D;
	background-position: center center;
	text-align: center;
	background-color: #FFFFFF;
}
.form-inp-dop {
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-radius: 10px;
    cursor: pointer;
    height: 66px;
    overflow: hidden;
    padding: 5px;
    position: relative;
    text-align: left;
    vertical-align: middle;
    width: 400px;
	font-family: Georgia, Times New Roman, Times, serif;
}
.top-title1 {
	font-size: 19px;
	color: #3D3D3D;
	text-align: left;
}
.top-title2 {
	font-size: 23px;
	color: #666666;
}
.top-title3 {
	font-size: 16px;
	color: #148FD2;
	text-align: left;
}
.top-title4 {
	font-size: 23px;
	color: #3D3D3D;
	text-align: left;
}
.VIZ {
	font-size: 30px;
	color: #3F3F3F;
}
.PLAST {
	font-size: 30px;
	color: #8AC300;
}
.nav-title {
	font-size: 19px;
	color: #383838;
}
.Price-table-11 {
	border-bottom-width: 0px;
	border-top-color: #ebe9ea;
	border-right-color: #ebe9ea;
	border-bottom-color: #ebe9ea;
	border-left-color: #ebe9ea;
	border-top-width: 1px;
	border-right-width: 0px;
	border-left-width: 0px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-top-style: solid;
	border-left-style: solid;
}
.price {
	font-size: 18px;
	font-style: italic;
	color: #88C100;
	font-weight: bold;
}
.main-txt table-degnsi {
	padding: 1px;
}
.main-txt table tr .Price-table-5.style17 strong em {
	color: #8BC200;
}
em {
	color: #8BC200;
}
.main-txt #order table tr .zakaz-table-4 table tr .zakaz-table-line-top {
}
.price-txt-minus {
	color: #999;

}
.styled-select select {
	border: 0px none #FFFFFF;
	background-image: url(img/input-tel-bg-plast.png);
	height: 27px;
	width: 324px;
	background-repeat: no-repeat;
	padding-left: 10px;
	font-family: Georgia, Times New Roman, Times, serif;
	color: #383838;
}
.styled-select2 select {
	border: 0px none #FFFFFF;
	background-image: url(img/input-tel-bg.png);
	height: 27px;
	width: 210px;
	background-repeat: no-repeat;
	padding-left: 10px;
	font-family: Georgia, Times New Roman, Times, serif;
	color: #383838;
}
.formfield1 { 
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-radius: 10px;
    cursor: pointer;
    height: 22px;
    overflow: hidden;
    padding: 2px;
    position: relative;
    text-align: center;
    vertical-align: middle;
    width: 230px;
	font-family: Georgia, Times New Roman, Times, serif;
}
.formfield2 { 
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-radius: 10px;
    cursor: pointer;
    height: 22px;
    overflow: hidden;
    padding: 2px;
    position: relative;
    text-align: center;
    vertical-align: middle;
    width: 120px;
	font-family: Georgia, Times New Roman, Times, serif;
}
.fileform { 
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-radius: 10px;
    cursor: pointer;
    height: 22px;
    overflow: hidden;
    padding: 2px;
    position: relative;
    text-align: left;
    vertical-align: middle;
    width: 230px;
}
 
.fileform .selectbutton { 
    background-color: #8AC300;
    border: 1px solid #939494;
    border-radius: 8px;
    color: #FFFFFF;
    float: right;
    font-size: 14px;
    height: 16px;
    line-height: 16px;
    overflow: hidden;
    padding: 2px 6px;
    text-align: center;
    vertical-align: middle;
    width: 50px;
}
 
.fileform #upload{
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    -moz-opacity: 0; 
    filter: alpha(opacity=0); 
    opacity: 0; 
    font-size: 150px; 
    height: 30px; 
    z-index:20;
}
.fileform #fileformlabel { 
background-color: #FFFFFF;
float: left;
height: 22px;
line-height: 22px;
overflow: hidden;
padding: 2px;
text-align: left;
vertical-align: middle;
width:160px;
}
/* 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);
}
.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 #CDD1DA;
  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: #9FD468;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.5);
  opacity: 0;
  transition: all .2s;
}
.radio:checked + label:after {
  opacity: 1;
}
.radio:focus + label:before {
  box-shadow: 0 0 0 3px rgba(255,255,0,.5);
}