@charset "utf-8";
/*@import url("simple-line-icons.css");*/
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800|Roboto:300,400,700&subset=cyrillic,cyrillic-ext,latin-ext');
/*
font-family: 'Open Sans', sans-serif;
font-family: 'Rubik Mono One', sans-serif;
*/

div,span,applet,object,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,iframe{vertical-align:baseline;background:none repeat scroll 0% 0% transparent;}img{border-image-width:0px;vertical-align:bottom;}
.bbox,div,iframe,input,textarea,button,a,i,label,aside,header,main,nav,dd,dt{margin:0px auto;padding:0px;border:0px none;outline:0px none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}.cbox{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;}.block{display:block;}.inblock{display:inline-block;}.table{display:table;}.row{display:table-row;}.cell{display:table-cell;}.inline{display:inline;}.cleara:after{content:"";display:block;height:0px;clear:both;visibility:hidden;}.clearb{overflow:auto;}.hide{display:none;}iframe{width:100%;overflow-x:hidden;}.left{float:left;}.right{float:right;}.nofloat{float:none;}.vat{vertical-align:top;}.vam{vertical-align:middle;}.vab{vertical-align:bottom;}.tal{text-align:left;}.tac{text-align:center;}.tar{text-align:right;}.taj{text-align:justify;}a{cursor:pointer;}span{box-sizing:border-box;}
.tabel{display:table;border-spacing:0px;border-collapse:collapse;}.trow{display:table-row;}.tcell{display:table-cell;}
/* 
FLEX 1 COLUMN

    display: flex;
    justify-content: space-around;
    flex-direction: column;

*/

/*  STRUCTURE */
html {
    width:100%;margin:0px auto;font-size:10px;/*font-size:24px;*/
}
body {
    width:100%;
    margin:0px auto;
    position: relative;
    min-width:252px;
    text-rendering: optimizeLegibility;
    color:#626974;
    padding: 0px;
    min-height: 100vh;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif,'Open Sans', sans-serif;
    font-size:1.4rem;
    overflow-x:hidden;
    overflow-y:scroll;
    display: block;
    background: #fff;
    /*display: flex;
    justify-content:flex-start;*/
   /* font-family: 'Roboto', sans-serif;*/
   font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}



.smallappholder { width: 100%; height: 100%; position: fixed; top:50%; left: 50%; max-width: 96rem; max-height: 54rem; overflow-y: auto; padding:0px; transform: translate(-50%,-50%); }
.h100 { height:100%; }
.w100 { width:100%; }

h1,h2,h3,h4,h5,h6 { line-height: 1.4em; }
h1 { font-weight: 300; }
h2 { font-weight: 400; }

h1.xlargetext { font-size: 5.4rem; font-weight: 700; line-height: 1.6em; }
h2.xlargetext { font-size: 3.4rem; font-weight: 500; line-height: 1.6em; }
p.xlargetext { font-size: 1.4rem; font-weight: 400; line-height: 1.6em; }

aside,main,header,footer { display: block; }

.smallappholder { height: auto; max-height: 100%; width: auto; box-shadow: 0px 25px 75px 20px rgba(0, 0, 0, 0.59); }
body {
    background-color: #000;
}


.gameHolder { color: #fff; background: #2c2a4a; border-radius: 10px; box-shadow: 0 4px 30px 0 rgba(0,0,0,.5); border: 2px solid #f2dc5d; padding: 20px 20px 30px; }

#gameArea {
    box-sizing: content-box;
}

.cell {
    width:32px;
    height: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    background-color: #424242;
    margin:0px; padding:0px;
    float:left;
    text-align: center;
    position: relative;
    box-sizing: border-box;
}
.cell:hover {
    opacity: .9;
}
.cell[counter="10"] { background-color: red; }

.cell22::after {
    content: "";
    display: block;
    position: absolute;
    top:0px;
    left: 0px;
    width:100%;
    height: 100%;
    background-color: red;
    background-size:100% 100%;
    box-sizing: content-box;
}
.cell.sure { background-color:pink;}
.cell.unsure { background-color:deepskyblue;}
.cell.open { background-color: #d6d2cd; }

.hide {
    display: none !important;
}
.cell {
    background-image: url("/images/mines/closed.svg");
    background-size: cover;
    background-position: center center;
}
.cell:not(.sure):not(.unsure):not(.open):active {
    background-image: url("/images/mines/pressed.svg");
}
.cell.open[data-mines="0"] {
    background-image: url("/images/mines/type0.svg");
}
.cell.open[data-mines="1"] {
    background-image: url("/images/mines/type1.svg");
}
.cell.open[data-mines="2"] {
    background-image: url("/images/mines/type2.svg");
}
.cell.open[data-mines="3"] {
    background-image: url("/images/mines/type3.svg");
}
.cell.open[data-mines="4"] {
    background-image: url("/images/mines/type4.svg");
}
.cell.open[data-mines="5"] {
    background-image: url("/images/mines/type5.svg");
}
.cell.open[data-mines="6"] {
    background-image: url("/images/mines/type6.svg");
}
.cell.open[data-mines="7"] {
    background-image: url("/images/mines/type7.svg");
}
.cell.open[data-mines="8"] {
    background-image: url("/images/mines/type8.svg");
}
.cell.open[data-mines="10"] {
    background-image: url("/images/mines/mine_red.svg");
}
.cell.sure {
    background-image: url("/images/mines/flag.svg");
}
.cell.unsure {
    background-image: url("/images/mines/questionmark.svg.png");
}
.gameArea-face {
    width:40px;
    height:40px;
    background-image: url("/images/mines/face_unpressed.svg");
    background-size:cover;
}
.gameArea-face:active {
    background-image: url("/images/mines/face_pressed.svg");
}
.gameArea-counterHolder {
    margin:0px;
    background-color:#0c0c0c;

    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;

    border:1px solid #808080;
    border-bottom-color:#fff;
    border-right-color:#fff;
    padding:2px 0;
}
.gameArea-counterItem {
    width:18px;
    height:34px;

    background-image: url("/images/mines/d0.svg");
    background-size:cover;
    margin:0px 2px;
}
.gameArea-counterItem[data-num="1"] {
    background-image: url("/images/mines/d1.svg");
}
.gameArea-counterItem[data-num="2"] {
    background-image: url("/images/mines/d2.svg");
}
.gameArea-counterItem[data-num="3"] {
    background-image: url("/images/mines/d3.svg");
}
.gameArea-counterItem[data-num="4"] {
    background-image: url("/images/mines/d4.svg");
}
.gameArea-counterItem[data-num="5"] {
    background-image: url("/images/mines/d5.svg");
}
.gameArea-counterItem[data-num="6"] {
    background-image: url("/images/mines/d6.svg");
}
.gameArea-counterItem[data-num="7"] {
    background-image: url("/images/mines/d7.svg");
}
.gameArea-counterItem[data-num="8"] {
    background-image: url("/images/mines/d8.svg");
}
.gameArea-counterItem[data-num="9"] {
    background-image: url("/images/mines/d9.svg");
}
.gameArea-uiElementsOuter {
    padding:12px;
}
.gameArea-uiElementsInner {
    display: flex;
    width:100%;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    background-color:#c0c0c0;
    padding:4px;
}
.gameArea-borderThin {
    border: 1px solid #979797;
    border-bottom-color:#e2e2e2;
    border-right-color:#e2e2e2;
}
.gameArea-borderThin-inv {
    border: 1px solid #a3a3a3;
    border-top-color:#ededed;
    border-left-color:#ededed;
    background-color:#c6c6c6;
}
.gameArea-borderThick {
    border-width: 4px;
    border-style: solid;
    border-color: #808080;
    border-right-color: #ffffff;
    border-bottom-color: #ffffff;
}
.gameArea-borderThick-inv {
    border-width: 6px;
    border-style: solid;
    border-color: #808080;
    border-left-color: #ffffff;
    border-top-color: #ffffff;
}
.gameArea-mainHolder {
    background-color:#c6c6c6;
    padding: 12px;
}
#gameArea {
    border-width: 4px;
    border-style: solid;
    border-top-color: #808080;
    border-left-color: #808080;
    border-right-color: #ffffff;
    border-bottom-color: #ffffff;
    min-width:288px;
}