html{	
font: 13px 'default';
font-style: normal;
font-variant-ligatures: normal;
font-variant-caps: normal;
font-variant-numeric: normal;
font-variant-east-asian: normal;
font-weight: normal;
font-stretch: normal;
font-size: 13px;
line-height: normal;
font-family: arial, verdana, tahoma, sans-serif;
color: #999;
height: max;
max-width: 1920px;
padding: 0px;
margin:  auto;
word-wrap: break-word;
padding: 0px;
z-index: 1;
background: #131313 url(/style/img/big-background1.png) no-repeat center center fixed;
background-size: cover;
background-attachment: fixed;
cursor: url('/style/img/cursor.gif'), auto;
box-sizing: border-box;
}
body{
position: relative;
color: #8f8f8f;
max-width: 650px;
padding: 0px;
margin:  auto;
word-wrap: break-word;
z-index: 1;
background: #131313 url(/style/img/background1.png);
background-size: cover;
background-attachment: fixed;
box-sizing: border-box;
}
body::-webkit-scrollbar {
    width: 10px;
}
body::-webkit-scrollbar-thumb {
    background: #414a4c;
    box-shadow: inset 0 0 5px black;
    border-radius: 2px;
}
.overflow-y{
max-height: 400px;
overflow-y: scroll;
margin-top: 5px;
margin-bottom: 5px;
}
.overflow-y::-webkit-scrollbar {
    width: 10px;
}
.overflow-y::-webkit-scrollbar-thumb {
    background: #414a4c;
    box-shadow: inset 0 0 5px black;
    border-radius: 2px;
}
.overflow-x{
width: 100%;
overflow-x: scroll;
overflow-y: hidden;
}
.overflow-x::-webkit-scrollbar {
    width: 10px;
}
.overflow-x::-webkit-scrollbar-thumb {
    background: #414a4c;
    box-shadow: inset 0 0 5px black;
    border-radius: 2px;
}
.short-text{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
::selection {
background: rgb(78,115,124);
}
::-moz-selection {
background: rgba(144, 95, 32, 0.8);
}

.border-game{
margin: 10px;
border: 10px solid #303030;
border-image: url('/style/img/border_game.png') 10 round round;
}
.gp{
margin: 0px;
padding: 5px 5px 0px 5px;
}
@font-face{
	font-family: 'stalker1';
  font-weight: bold;
  src: url(/style/fonts/font-stalker1.ttf);
}
.text-stalker1{
	font-family: 'stalker1';
}
@font-face{
	font-family: 'stalker2';
  font-weight: bold;
  src: url(/style/fonts/font-stalker2.ttf);
}
.text-stalker2{
	font-family: 'stalker2';
}
@font-face{
	font-family: 'stalker3';
  font-weight: bold;
  src: url(/style/fonts/font-stalker3.ttf);
}
.text-stalker3{
	font-family: 'stalker3';
}
A{
color: #a1a1a1;
text-decoration:none;
}
A:hover{
color: #4e737c;
}


.head-panel{
background: url('/style/background-panel.jpg') repeat-x;
border: #1B1B1B 2px solid;
padding: 2px;
border-radius: 8px;
}
.titleBar{
padding-top: 0px;
padding-bottom: 0px;
background: #000; 
}
.title_block{
margin: 0px;
padding: 15px;
font-weight: bold;
background-size: 100% 100%; 
background-position: center; 
background-repeat: no-repeat; 
background-image: url(/style/background-bottom.png);
display: block;
text-align: center;
}

.center{
text-align: center;
}
.flex{
display: flex;
}
.block{
display: block;
}
.none{
visibility: hidden;
display: none;
}
.absolute{
position: absolute;
}
.relative{
position: relative;
}
.profile-top-panel{
width: 100%;
padding: 10px 0px 10px 0px;
font-weight: bold;
background: url(/style/background-bottom.png) no-repeat center;
background-size: 100% 100%;
text-align: center;
}
.profile-top-panel-flex{
width: 100%;
display: flex;
padding: 2px;
font-weight: bold;
text-align: center;
}
.profile-top-panel-cell{
background: #000000;
border: 2px solid #013220;
border-radius: 5px 5px 5px 5px;
padding: 3px;
width: 30%;
color: #4285B4;
}
.inventory-top-panel{
width: 100%;
display: flex;
padding: 10px 0px 10px 0px;
font-weight: bold;
background: url(/style/background-bottom.png) no-repeat center;
background-size: 100% 100%;
text-align: center;
}
.inventory-top-panel-cell{
background: #000000;
border: 2px solid #013220;
border-radius: 5px 5px 5px 5px;
padding: 3px;
width: 50%;
color: #4285B4;
}
.inventory-top-panel-cell:hover{
background: rgba(22, 26, 30, 0.8);
border: 2px solid #004524;
border-radius: 5px 5px 5px 5px;
padding: 3px;
width: 50%;
color: #4285B4;
}
.backpack-cells{
display: flex;
justify-content: start;
flex-wrap: wrap;
}
.cell{
width: 55px;
height: 55px;
padding: 2px;
margin: 2px;
text-align: center;
background: rgba(0,0,0,0.5);
}
.cell:hover{
width: 55px;
height: 55px;
padding: 1px;
margin: 2px;
text-align: center;
border: 1px solid #2e2e2d;
background: rgba(22,26,30,0.5);
}
.box-cells{
display: flex;
justify-content: start;
}
.box-cell{
width: 55px;
height: 55px;
padding: 5px 5px 5px 5px;
border: 2px solid #225522;
border-radius: 5px;
background: #161A1E;
}
.day-reward-cells{
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.day-reward-cell{
border-bottom: 2px solid #373737;
border-radius: 5px;
padding: 5px;
margin: 5px;
background: #252525;
width: 80px;
max-height: 100px;
}
.inventory-bottom-panel{
display: flex;
justify-content: space-between;
border-top: 1px solid #222;
padding: 5px 10px 5px 10px;
}
.line{
display: block;
padding: 8px;
font-weight: bold;
font-size: 1.1em;
color: #ddd;
border-top: 1px solid #2e2e2d;
border-bottom: 1px solid #2e2e2d;
text-align: center;
}
.description{
display: block;
padding: 5px;
color: #aaa;
background: rgba(22,26,30,0.7);
border-radius: 5px;
}
.hightlighter{
color: #aaa;
background: #2e2e2d;
border-radius: 2px;
padding: 2px;
}

.act{
display: block;
padding: 5px;
color: #a1a1a1;
}
.act_w{
background: /*rgb(17,17,17)*/#000000c1;
background-repeat: repeat-x;
padding: 8px;
display: block;
border-left: 2px #3e737c solid;
}
.act_u{
background: url(/style/img/back2.jpg);
background-repeat: repeat-x;
padding: 8px;
display: block;
border-top: #000 solid 1px;
border-bottom: #000 solid 1px;
}
.pda_div{
color: #00ad00d3;
padding: 6px;
display: block;
margin-bottom: 1px;
border-bottom: 1px solid #333;
}
.block_1{
padding: 2px 0px 2px 0px;
display: block;
}
.block_1:hover{
padding: 2px 0px 2px 0px;
display: block;
background: rgb(22, 26, 30, 0.8);
}
.block_2{
padding: 5px;
margin-bottom: 2px;
background: #000000;
border-left: 1px solid #4e737c;
}
.block_2:hover{
padding: 5px;
margin-bottom: 2px;
background: #161A1E;
border-left: 1px solid #529f75;
}
.div_grey{
padding-top: 7px; 
padding-bottom: 7px; 
margin-bottom: 0px;
margin-right: 0px;
margin-left: 0px;
background: #24242c;
width: 100%;
font-weight: bold;
color: #999;
font-family: 'stalker1';
}
.div_grey:a{
color: #999;
}
.block_grey{
background: #24242c; 
padding: 5px; 
} 
.block_grey:hover{
background: #16151a; 
padding: 5px; 
} 
.page{
padding: 3px 5px 3px 5px;
border: 1px solid #2e2e2d;
border-radius: 2px;
background: #000;
}
.page:hover{
background: rgba(22, 26, 30, 0.8);
}
.inventory:nth-child(odd){
display: block;
background: #000000;
}
.inventory:nth-child(even){
display: block;
background: #151719;
}
/* #436f62 */
.perehod{
background-color: #000000;
color: #51988c;
display: block;
border-right: solid 2px #00231f;
border-left: solid 2px #00231f;
padding: 5px;
margin-top: 1px;
margin-bottom: 1px;
text-align: left;
}
.perehod:hover{
background-color: rgba(1, 10, 15, 0.5);
border-right: solid 2px #496d63;
border-left: solid 2px #496d63;
}
.nps{
background-color: #000000;
color: #51988c;
display: block;
border-right: solid 2px #005200;
border-left: solid 2px #005200;
padding: 5px;
margin-top: 1px;
margin-bottom: 1px;
text-align: left;
}
.nps:hover{
background-color: rgba(1, 10, 15, 0.5);
border-right: solid 2px #496d63;
border-left: solid 2px #496d63;
}
.online:nth-child(odd){
background-color: #000000;
/*color: #51988c;*/
display: block;
border-left: solid 2px #5749a5;
padding: 5px;
margin-top: 1px;
margin-bottom: 1px;
text-align: left;
border-radius: 5px 5px 5px 5px;
}
.online:nth-child(even){
background-color: #111111;
display: block;
/*color: #51988c;*/
border-left: solid 2px #5749a5;
padding: 5px;
margin-top: 1px;
margin-bottom: 1px;
text-align: left;
border-radius: 5px 5px 5px 5px;
}
.online:hover{
border-left: solid 2px #512b90;
background-color: rgba(1, 10, 15, 0.8);
}
.chat-msg{
display: block;
padding: 5px 0px 0px 5px;
margin: 0px;
min-height: 45px;
font-size: 0.9em;

}
.chat-msg:nth-child(odd){
background: #000000;
}
.chat-msg:nth-child(even){
background: #151719;
}
.bt{
display: block;
background: #222222;
padding: 10px;
}
.slots-line{
}
.icon-slot-fight1{
border: solid 1px #2e2e2d;
border-radius: 8px;
margin: 2px 5px 2px 0px;
padding: 2px;
background: #000000;
}
.icon-slot-fight2{
border: solid 1px #4e737c;
border-radius: 8px;
margin: 2px 5px 2px 0px;
padding: 2px;
background: #000000;
}
.fight-line{
display: block;
background: #222; 
margin: 0px;
margin-top: 0px;
margin-bottom: 0px;
border: #222 1px solid;
padding: 10px;
} 

/***********/
/* For text */
/***********/
.error{
margin-left:  10px;
margin-right: 10px;
padding: 5px;
color: red;
text-align: center;
}
.ok{
margin-left:  10px;
margin-right: 10px;
padding: 5px;
color: green;
text-align: center;
}
.info{
margin-left:  10px;
margin-right: 10px;
padding: 10px;
color: #999;
text-align: center;
}
.text-default{
color: #4e737c
}
.text-dr-blue{
color: #4285B4
}
.text-01796F{
color: #01796F
}
.text-malachite{
color: #0BDA51
}
.text-dr-green{
color: green
}
.text-dr-red{
color: red
}
.text-51988C{
color: #51988c
}
.text-dr-gray{
color: #AAAAAA
}

/***********/
/* Slider */
/***********/
.switch{
  position: relative;
  display: inline-block;
  width: 60px;
  height: 30px;
}
.switch input{
display:none;
}
.slider{
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}
.slider:before{
  position: absolute;
  content: "";
  height: 22px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}
input:checked + .slider{
  background-color: #2196F3;
}
input:focus + .slider{
  box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before{
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
.slider.round{
  border-radius: 34px;
}
.slider.round:before{
  border-radius: 50%;
}
.slider_ok{
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #2196F3;
  -webkit-transition: .4s;
  transition: .4s;
}
.slider_ok:before{
  position: absolute;
  content: "";
  height: 22px;
  width: 26px;
  right: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}
input:checked + .slider_ok{
  background-color: #ccc;
}
input:focus + .slider_ok{
  box-shadow: 0 0 1px #ccc;
}
input:checked + .slider_ok:before{
  -webkit-transform: translateX(-26px);
  -ms-transform: translateX(-26px);
  transform: translateX(-26px);
}
.slider_ok.round_ok{
  border-radius: 34px;
}
.slider_ok.round_ok:before{
  border-radius: 50%;
}


.navigLink{
	display: block;
	padding:8px;
	margin-right:-5px;
	margin-left:-5px;
	background-color: rgba(1,1,1,0.3);
	color: #aaa;
}

.mapBg{
	margin-right:-5px;
	margin-left:-5px;
	display:block;
	background:#323232;
	color: #ddd;
	padding:8px;
	border-top:1px solid #3E3D36;
}
.radius{
    border-radius: 8px;
}
.pda_new{
	background:#383838;
	border: #000 2px solid;
	padding:3px;
	margin-left:0px;
	margin-right:0px;
	border-top-right-radius:8px;
	border-top-left-radius:8px;
    -moz-border-top-right-radius:8px;
	-moz-border-top-left-radius:8px;
	border-bottom-right-radius:8px;
	border-bottom-left-radius:8px;
    -moz-border-bottom-right-radius:8px;
	-moz-border-bottom-left-radius:8px;
}
.pda_separator{
	background:#17391a;
	padding:3px;
}

.pda_inside_new{
	padding:5px;
	background:#000;
	min-height:100px;
	color:#00A800;
	border-top-right-radius:8px;
	border-top-left-radius:8px;
    -moz-border-top-right-radius:8px;
	-moz-border-top-left-radius:8px;
	border-bottom-right-radius:8px;
	border-bottom-left-radius:8px;
    -moz-border-bottom-right-radius:8px;
	-moz-border-bottom-left-radius:8px;
}
.pda_up{
	
	border-bottom:1px solid green;
   margin-top:20px;
}
.pda-link{
	display: block;
	padding:3px;
	color:green;
	border-bottom:1px solid #236510;
}
.pda-link a{
	color:green;
}


#test{
    width:27px; 
    height:27px; 
    margin: 0; 
    padding:0; 
    float: left;
    display: block;
    z-index:1;
}
#test1{
    height:100%;
    width:100%;
    z-index:2;
}
button, textarea, input[type="text"], select{
border: 1px solid #222;
color: #999;
background-color: #161A1E;
vertical-align: middle;
max-width: 100%;
box-sizing: border-box;
}
input{
font-size: 8pt;
padding: 3px;
border: 1px solid #222;
color: #999;
font-weight: bold;
background-color: #161A1E;
vertical-align: middle;
max-width: 100%;
box-sizing: border-box;
}
input[type="number"]{
border: 1px solid #222;
color: #999;
background-color: #161A1E;
vertical-align: middle;
min-width: 70px;
box-sizing: border-box;
}

#left_b{
	float: left;
	padding: 0 0 0 0px;
}

.submiForm{
background: url('start.png') no-repeat scroll 0 0 transparent;
color: #000000;
cursor: pointer;
font-weight: bold;
height: 43px;
border: none;
padding-bottom: 2px;
width: 176px;
}
.submitsForm{
background: url('in.png') no-repeat scroll 0 0 transparent;
color: #000000;
cursor: pointer;
font-weight: bold;
height: 43px;
border:none;
padding-bottom: 2px;
width: 176px;
}



/* Font */
.f-1{ font-size: 1em;}
.f-2{ font-size: 1.05em;}
.f-3{ font-size: 1.1em;}
.f-4{ font-size: 1.15em;}
.f-5{ font-size: 1.2em;}
.f-6{ font-size: 1.25em;}
.f-7{ font-size: 1.3em;}
.f-8{ font-size: 1.35em;}
.f-9{ font-size: 1.4em;}
.f-10{ font-size: 1.5em;}
.fn-1{ font-size: 0.95em;}
.fn-2{ font-size: 0.90em;}
.fn-3{ font-size: 0.85em;}
.fn-4{ font-size: 0.80em;}
.fn-5{ font-size: 0.75em;}
.fn-6{ font-size: 0.70em;}
.fn-7{ font-size: 0.65em;}
.fn-8{ font-size: 0.60em;}

/* Radius */
.r-0 { border-radius: 0px !important;}
.r-1 { border-radius: 2px !important;}
.r-2 { border-radius: 4px !important;}
.r-3 { border-radius: 8px !important;}
.r-4 { border-radius: 10px !important;}
.r-9 { border-radius: 50% !important;}
.r-10 { border-radius: 80% !important;}


/* Text Properties */
.bold { font-weight: bold;}
.italic { font-style: italic}
.monochrome { font-family: monospace;}
.underline { text-decoration: underline;}
.text-left { text-align: left !important;}
.text-right { text-align: right !important;}
.text-center { text-align: center !important}
.text-top { vertical-align: text-top}
.text-bottom { vertical-align: text-bottom;}
.text-baseline { vertical-align: baseline}
.text-shadow { text-shadow: 1px 1px 3px black}
.text-shadow1 { text-shadow: 1px 1px 1px black,  1px 1px 10px black}
.text-truncate { overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap}
.text-stripped {text-decoration: line-through;}
.text-shadow-none{ text-shadow: none !important}
.text-hyperlink{ border-bottom: 1px dashed rgba(255, 170, 0, 0.5)}


/* Paddings */
.p-0 { padding: 0px !important}
.p-1 { padding: 2px !important}
.p-2 { padding: 4px !important}
.p-3 { padding: 8px !important}
.p-4 { padding: 10px !important}
.p-5 { padding: 12px !important}
.pt-0 { padding-top: 0px !important;}
.pt-1 { padding-top: 2px !important;}
.pt-2 { padding-top: 4px !important;}
.pt-3 { padding-top: 8px !important;}
.pt-4 { padding-top: 10px !important;}
.pt-5 { padding-top: 12px !important;}
.pl-1 { padding-left: 2px !important;}
.pl-2 { padding-left: 4px !important;}
.pl-3 { padding-left: 8px !important;}
.pl-4 { padding-left: 10px !important;}
.pl-5 { padding-left: 12px !important;}
.pr-1 { padding-right: 2px !important;}
.pr-2 { padding-right: 4px !important;}
.pr-3 { padding-right: 8px !important;}
.pr-4 { padding-right: 10px !important;}
.pr-5 { padding-right: 12px !important;}
.pb-0 { padding-bottom: 0px !important;}
.pb-1 { padding-bottom: 2px !important;}
.pb-2 { padding-bottom: 4px !important;}
.pb-3 { padding-bottom: 8px !important;}
.pb-4 { padding-bottom: 10px !important;}
.pb-5 { padding-bottom: 12px !important;}
.px-1 { padding-left: 2px !important; padding-right: 2px !important}
.px-2 { padding-left: 4px !important; padding-right: 4px !important}
.px-3 { padding-left: 8px !important; padding-right: 8px !important}
.px-4 { padding-left: 10px !important; padding-right: 10px !important}
.px-5 { padding-left: 12px !important; padding-right: 12px !important}
.py-1 { padding-top: 2px !important; padding-bottom: 2px !important}
.py-2 { padding-top: 4px !important; padding-bottom: 4px !important}
.py-3 { padding-top: 8px !important; padding-bottom: 8px !important}
.py-4 { padding-top: 10px !important; padding-bottom: 10px !important}
.py-5 { padding-top: 12px !important; padding-bottom: 12px !important}


/* Margin */
.m-0 { margin: 0px !important}
.m-1 { margin: 2px !important}
.m-2 { margin: 4px !important}
.m-3 { margin: 8px !important}
.m-4 { margin: 10px !important}
.m-5 { margin: 12px !important}
.mt-1 { margin-top: 2px !important;}
.mt-2 { margin-top: 4px !important;}
.mt-3 { margin-top: 8px !important;}
.mt-4 { margin-top: 10px !important;}
.mt-5 { margin-top: 12px !important;}
.ml-1 { margin-left: 2px !important;}
.ml-2 { margin-left: 4px !important;}
.ml-3 { margin-left: 8px !important;}
.ml-4 { margin-left: 10px !important;}
.ml-5 { margin-left: 12px !important;}
.mr-1 { margin-right: 2px !important;}
.mr-2 { margin-right: 4px !important;}
.mr-3 { margin-right: 8px !important;}
.mr-4 { margin-right: 10px !important;}
.mr-5 { margin-right: 12px !important;}
.mb-1 { margin-bottom: 2px !important;}
.mb-2 { margin-bottom: 4px !important;}
.mb-3 { margin-bottom: 8px !important;}
.mb-4 { margin-bottom: 10px !important;}
.mb-5 { margin-bottom: 12px !important;}
.mx-1 { margin-left: 2px !important; margin-right: 2px !important}
.mx-2 { margin-left: 4px !important; margin-right: 4px !important}
.mx-3 { margin-left: 8px !important; margin-right: 8px !important}
.mx-4 { margin-left: 10px !important; margin-right: 10px !important}
.mx-5 { margin-left: 12px !important; margin-right: 12px !important}
.my-1 { margin-top: 2px !important; margin-bottom: 2px !important}
.my-2 { margin-top: 4px !important; margin-bottom: 4px !important}
.my-3 { margin-top: 8px !important; margin-bottom: 8px !important}
.my-4 { margin-top: 10px !important; margin-bottom: 10px !important}
.my-5 { margin-top: 12px !important; margin-bottom: 12px !important}
.mb-n1 { margin-bottom: -2px !important;}
.mb-n2 { margin-bottom: -4px !important;}
.mb-n3 { margin-bottom: -8px !important;}
.mb-n4 { margin-bottom: -10px !important;}
.mb-n5 { margin-bottom: -12px !important;}
.mt-n1 { margin-top: -2px !important;}
.mt-n2 { margin-top: -4px !important;}
.mt-n3 { margin-top: -8px !important;}
.mt-n4 { margin-top: -10px !important;}
.mt-n5 { margin-top: -12px !important;}
.ml-n1 { margin-left: -2px !important;}
.ml-n2 { margin-left: -4px !important;}
.ml-n3 { margin-left: -8px !important;}
.ml-n4 { margin-left: -10px !important;}
.ml-n5 { margin-left: -12px !important;}
.mr-n1 { margin-right: -2px !important;}
.mr-n2 { margin-right: -4px !important;}
.mr-n3 { margin-right: -8px !important;}
.mr-n4 { margin-right: -10px !important;}
.mr-n5 { margin-right: -12px !important;}
.my-n1 { margin-top:  -2px !important; margin-bottom:  -2px !important}
.my-n2 { margin-top:  -4px !important; margin-bottom:  -4px !important}
.my-n3 { margin-top:  -8px !important; margin-bottom:  -8px !important}
.my-n4 { margin-top: -10px !important; margin-bottom: -10px !important}
.my-n5 { margin-top: -12px !important; margin-bottom: -12px !important}
.mx-n1 { margin-left:  -2px !important; margin-right:  -2px !important}
.mx-n2 { margin-left:  -4px !important; margin-right:  -4px !important}
.mx-n3 { margin-left:  -8px !important; margin-right:  -8px !important}
.mx-n4 { margin-left: -10px !important; margin-right: -10px !important}
.mx-n5 { margin-left: -12px !important; margin-right: -12px !important}
.mx-auto { margin-left: auto; margin-right: auto};
.my-auto { margin-top: auto; margin-bottom: auto};



/* Opacity */
.op-0{ opacity: 0.0}
.op-1{ opacity: 0.1}
.op-2{ opacity: 0.2}
.op-3{ opacity: 0.3}
.op-4{ opacity: 0.4}
.op-5{ opacity: 0.5}
.op-6{ opacity: 0.6}
.op-7{ opacity: 0.7}
.op-8{ opacity: 0.8}
.op-9{ opacity: 0.9}
.op-10{ opacity: 1}


/* Icons/Images */
.itop img{ vertical-align: top;}
.ibottom img{ vertical-align: bottom;}
.imiddle img{ vertical-align: middle;}
.img-fluid { max-width: 100%; height: auto}


/* Col */
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto { position: relative; width: 100%}
.col {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  -webkit-box-flex: 1;
  flex-grow: 1;
  max-width: 100%;
}
.col-1 {
  -ms-flex: 0 0 8.333333%;
  -webkit-box-flex: 0;
  flex: 0 0 8.333333%;
  max-width: 8.333333%;
}
.col-2 {
  -ms-flex: 0 0 16.666667%;
  -webkit-box-flex: 0;
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}
.col-3 {
  -ms-flex: 0 0 25%;
  -webkit-box-flex: 0;
  flex: 0 0 25%;
  max-width: 25%;
}
.col-4 {
  -ms-flex: 0 0 33.333333%;
  -webkit-box-flex: 0;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}
.col-5 {
  -ms-flex: 0 0 41.666667%;
  -webkit-box-flex: 0;
  flex: 0 0 41.666667%;
  max-width: 41.666667%;
}
.col-6 {
  -ms-flex: 0 0 50%;
  -webkit-box-flex: 0;
  flex: 0 0 50%;
  max-width: 50%;
}
.col-7 {
  -ms-flex: 0 0 58.333333%;
  -webkit-box-flex: 0;
  flex: 0 0 58.333333%;
  max-width: 58.333333%;
}
.col-8 {
  -ms-flex: 0 0 66.666667%;
  -webkit-box-flex: 0;
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
}
.col-9 {
  -ms-flex: 0 0 75%;
  -webkit-box-flex: 0;
  flex: 0 0 75%;
  max-width: 75%;
}
.col-10 {
  -ms-flex: 0 0 83.333333%;
  -webkit-box-flex: 0;
  flex: 0 0 83.333333%;
  max-width: 83.333333%;
}
.col-11 {
  -ms-flex: 0 0 91.666667%;
  -webkit-box-flex: 0;
  flex: 0 0 91.666667%;
  max-width: 91.666667%;
}
.col-12 {
  -ms-flex: 0 0 100%;
  -webkit-box-flex: 0;
  flex: 0 0 100%;
  max-width: 100%;
}
.col-auto {
  -ms-flex: 0 0 auto;
  -webkit-box-flex: 0;
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}