@charset "utf-8";

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, 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 
                  {margin: 0;padding: 0;border: 0;outline: 0;
                  font-size: 100%; background: transparent;}
ol, ul            {list-style: none;}
blockquote, q     {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';	content: none;}
:focus            {outline: 0;}
ins               {text-decoration: none;}
del               {text-decoration: line-through;}
table             {border-collapse: collapse;border-spacing: 0;}



*                 {  padding: 0px; margin: 0px;  }

@font-face {
    font-family: "regular";
    src:url("fonts/ru/opensans-regular.ttf");
}

@font-face {
    font-family: "semibold";
    src:url("fonts/ru/opensans-semibold.ttf");
}


body {
    background: #333;
    font-family: "regular";
    font-family: 'Noto Sans', sans-serif;                        
    font-size:18px;
    color:#333; 
}

div.navigation {
    overflow: auto;
    position: fixed;
    left: 10px;
    top: 10px;
    z-index: 99;
    background:#ffd60e;
    border-right: 1px solid #e6c009;
    width: 250px;
    height: calc(100% - 20px); 
}

div.user-header,
ul.footer-data,
div.page-container {
    opacity: 1;
}

div.page,
div.page-container {
    margin-left: 261px;
    margin-top:10px;
    background: #f7f7f7;
    width: 700px;
    min-height: 700px;
}

div.page {

    margin: 0 auto;
}

div.flash-fail,
div.flash-ok {
    position: relative;
    width: 700px;
    
    margin: 10px 0px -10px 261px;
    
    color:#fff;
    
    padding: 10px 0px;
    text-align: center;
}

div.flash-ok {
    background:#31C81D;
}

div.flash-fail {
    background:#c83333;    
}

div.flash-fail span,
div.flash-ok span {
    position: absolute;
    right:10px;
    top:50%;
    cursor:pointer;
    font-size:25px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    
}

div.flash-ok span {
    color:#1D830D;
}

p.desc {
    padding: 5px 20px;
    font-size:16px;
}

div.flash-ok span:before {
    content:"\2715"; 
    color:#1D830D;   

}    

div.flash-fail span:before {
    content:"\2715";
    color:#861010;    
}

br {
    clear: both;
}

div.field-error-cred,
div.field-error {
    display: none;
    font-family: "semibold";
    padding: 5px 10px;
    background: #e0586b;
    color: #fff;
    font-size:15px;
    position: relative;
    border-radius: 2px;
    text-align: left;
}

div.field-error {
    margin: -10px 17px 5px 10px;
}

div.field-error-cred {
    text-align: center;
    font-size:18px;
    margin: 5px 17px -10px 10px;
}

div.field-error li {
    margin-left: 15px;
}

div.field-error-cred:before,
div.field-error:before{
    position: absolute;
    content: " ";
    border: solid transparent;
    border-width: 8px;
    left:15px;
    margin-left: -4px;
}

div.field-error:before{
    bottom:100%;
    border-bottom-color: #e0586b;
}


div.field-error-cred:before{
    top:100%;
    border-top-color: #e0586b;
}

div.alert-bg {
    z-index:100;
    opacity: 0.7;
    position: fixed;
    left: 0px;
    width:100%;
    top:0px;
    height: 100%;
    background: #000;
}

div.alert-body {
    border-radius: 4px;
    padding:10px;
    background: #333;
    z-index: 101;
    position: fixed;

    min-height: 100px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}


div.alert-body input {
    margin:4px;
}

div.alert-body input[type=password] {
    background: #fff;
    border: none;
    border-radius: 3px;
    width:calc(100% - 40px);
}    

div.alert-body input[type=button]{
    
    background: #fff;
    color: #333;
    width:calc(50% - 8px); 
    height: 40px;
}    

div.alert-body input[type=button].cancel {
    background: rgb(9, 131, 231);
}

div.alert-body p {
    color: #fff;
    text-align: center;
    font-family: "semibold";
    padding:20px;
    margin-bottom:10px;
}

div.alert-body p.state {
    text-align: center;
    margin-bottom:10px;
    font-size:14px;
    color:#ff2d4b;
}

ul.footer-data{
    width: 700px;
    margin-left: 261px;;    
    background: #f7f7f7;
    border-top:1px solid #eee;
}

ul.footer-data li {
    cursor: default;
    float:right;
    margin:15px 20px;
    font-size:14px;
    color:#888;
    list-style: none;
}

p.title {
    color: #333;
    padding:20px 25px;
    font-size:20px;
    font-family: "semibold";

}

div.navigation-button {
    display: none;
    position: fixed;
    left: 0px;
    top: 10px;
    background: #ffd60e;
    z-index:99;
    padding: 10px;
}   

div.navigation-button:before {
    content: "\276D";    
}

@media screen and (max-width:980px){

    div.navigation-button {
        display: block;        
    }

    div.navigation {
        display: none;
        left: 0px;
        top:0px;
        height: 100%;
        width: 80%;
    }

    ul.footer-data,
    div.flash-fail,        
    div.flash-ok,
    div.page,
    div.page-container {
        margin-left: 0;
        width: 100%;
    }
}

hr {
    border:1px solid #eee;
}

table {
    border-spacing: 0px;
    width:100%;
    border-top:1px solid #ccc;
    border-left:1px solid #ccc;
    
}

td,th {
    border-bottom:1px solid #ccc;
    border-right:1px solid #ccc;
    
}

p.process_indicator {
    color:#2C83DF;
    margin:10px 15px;
    text-shadow: none;
}

p.process_indicator >img {
    margin-right: 5px;
    vertical-align: -5px;
    height:25px;
}


div.popup-window {
    z-index: 100;
    position: fixed;
    left: 50%;
    padding:10px;
    min-height: 100px;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size:14px;
    background: #f7f7f7;
}

div.popup-window > p.title {
    display: block;
    font-size: 18px;
}    

div.popup-window > p.button {
    margin:4px 7px;

    padding:5px 20px;
    float: left;

    background: #333;
    color:#fff;

    cursor: pointer;
}
    

div.popup-window > p.close {
    position: absolute;
    right: 10px;
    top: 5px;
    font-size:13px;
    cursor: pointer;
}

div.popup-window > p.close:hover {
    text-decoration: underline;
}