*, *:before, *:after {
    padding: 0px; 
    margin: 0px; 
    box-sizing: border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
input[!type],input[type="text"],input[type="password"]{background-color:white !important;background:white !important;}


html {width: 100%;height: 100%;font: 12pt sans-serif;margin:0px; padding: 0px;}
body {width: 100%;height: 100%;margin:0px; padding: 0px;}
a {color: #700;}
h2 {font-size: 24pt}

h1 a img,
h2 a img,
h3 a img {vertical-align: middle}

div#menu {
    display:block;
    position:absolute;
    left:0px;
    top:0px;
/*    bottom:25px;*/bottom: 0px;
/*    background:#FAA;*/
    background: #888; /* Для старых браузров */
    background: linear-gradient(to top, #AAA, #666);
    width:190px;
    overflow:auto;
    padding-top: 20px;
}
div#menu.dev{
    background: linear-gradient(to top, #5C5, #363);

}
div#content {
    position:absolute;
    left:190px;
    top:0px;
/*    bottom:25px;*/bottom: 0px;
    right:0px;
/*    background:#AFA;*/
    overflow:auto;
    padding: 10px;
}

#switch{
    float:left;
    margin-right: 1em;
    cursor: pointer;
}
div#footer {
    position:absolute;
    bottom:0px;
    left:0px;
    right:0px;
    height:25px;
    background:#EEE;
    display:none;
}
div#bottomhint {
    position: absolute;
    bottom:3px;
    right: 3px;
    background-color: #EEE;
    border: solid 1px gray;
    border-radius: 4px;
    padding: 3px;
    font:10pt sans-serif;
    }
div#bottomhint:hover {
    display:none;
    }
    
    
div#menu ul{
    list-style-type:none;
}

div#menu ul li{
    text-align: center;
}
div#menu ul li a{
     text-decoration: none;
     color: white;
     font: 1em sans-serif;
     padding: 7px;
     display:block;
}

div#menu ul li:hover{
	background-color:rgba(0,0,0,0.1);
}
div#menu ul li.current{
	background-color:rgba(255,255,255,0.2);
}

div#menu h3{
     text-decoration: none;
     color: #D2D2D2;
     text-align: center;
     font: bold 1.2em sans-serif;
}
div#menu h3 a{
     text-decoration: none;
     color: #D2D2D2 !important;
     text-align: center;
     font: bold 1.1em sans-serif !important;
}




form h3 {
	text-align: center;
	margin-bottom: 10px;
}



table.list{
    border-collapse: collapse;
}
table.list button{
    padding: 0px;
    margin: 0px;
    width: 32px;
    height: 32px;
}


table.list tr th{
    padding: 4px 14px 10px 14px;
    border-bottom: 1px solid #D0D0D0;
    background-color: white;
}
table.list tr td{
    padding: 4px 14px 4px 14px;
    background-color:white;
}
table.list tr td table.trans *{
    background: transparent;
}
table.list tr td.c,td.c a.cell,table.list tr th.c{
    text-align: center;
}

table.list tr td a.cell {
    display: block;
    vertical-align: middle;
    line-height: auto;
    text-decoration: none;
    color: inherit;

}
table.list tr[data-href] td.mymodal,
table.list tr td[data-href],
table.list tr th[data-href]{
    cursor:pointer;
}



table.list tr:nth-child(odd) td {
    background-color:#EFEFEF;
}


table.active tr {
    cursor: pointer;
}

table.list tr td.payment_state_1 {background-color: #FFD0D0;}
table.list tr td.payment_state_2 {background-color: #D0FFD0;}

table.list>tbody>tr[data-href]:nth-child(odd):hover>td,
table.list>tbody>tr[data-href]:nth-child(odd):hover>th,
table.list>tbody>tr[data-href]:nth-child(odd):hover>td *,
table.list>tbody>tr[data-href]:nth-child(odd):hover>th *,
table.list>tr[data-href]:nth-child(odd):hover>td,  
table.list>tr[data-href]:nth-child(odd):hover>th{
    background-color:#CFCFCF;
}

table.list>tr[data-href]:nth-child(even):hover>td,
table.list>tr[data-href]:nth-child(even):hover>th,
table.list>tbody>tr[data-href]:nth-child(even):hover>td,
table.list>tbody>tr[data-href]:nth-child(even):hover>th,
table.list>tbody>tr[data-href]:nth-child(even):hover>td *,
table.list>tbody>tr[data-href]:nth-child(even):hover>th * {
    background-color:#AAA;
}


table.list tr.vip td:nth-child(2),
table.list tr.vip td:nth-child(3)
 {font-weight: bold;color:red;}

table.list tr.ready td:nth-child(2),
table.list tr.ready td:nth-child(3),
span.notify 
 {font-weight: bold;color:green;}
table.list tr.readyvip td:nth-child(2),
table.list tr.readyvip td:nth-child(3)
 {font-weight: bold;color:#E80;}




table.form{
/*    table-layout:fixed;*/
    width: 100%;
    cell-spacing: 0px;
    border-collapse:collapse;
}
table.form tr td{

    padding:1px 2px 1px 5px;
    background-color:#EEE;
}
table.form tr td input,table.form tr td select{
    box-sizing : padding-box;
    border-style: none;
    height: 3.2em;;
    width: 100%;
    padding: 1em;
    
   min-height: 2em;
}
table.form tr td input:not([type]),
table.form tr td input[type='text'],
table.form tr td input[type='password']
{
    border-style: solid;
    border-width: 1px;
    
    border-color: #DDD;
    
}
table.form tr td li{
    list-style-type: none;
}
table.form tr td li * {
    float: left;
    line-height: 1.6em;
    height: 1.6em;
    margin: 0px 2px;
    padding: 0px;
    font-size: inherit;
}
table.form tr td br{
    clear:left;
}
table.form tr td input[type=checkbox]{
    width:auto;
    height:auto;
    vertical-align: middle;
}
table.form tr td  input[type=image]{
    width:auto;
    height:auto;
}

table.form tr td label{
    vertical-align: middle;
}
table.form tr td:first-child{
    width: 10%;
    white-space:nowrap;
    padding-right: 10px;
}

table.form tr:nth-child(odd) td{
    background-color:#E0E0E0;
}


table.form tr td table {
   border-collapse: collapse;
    width: 100%;
    padding: 0px;
    margin: 0px;
}
table.form tr td table tr td.w:first-child {
    width: 100%;
    padding: 0px;
}
table.form tr td table tr td.n:nth-child(2) {
    padding: 0px;
}

table.form tr td.c,table.form tr th.c {text-align: center;}

table.form tr td textarea {
    width: 100%;
    box-sizing : border-box;
    min-height: 4em;
}

form.login, form.login * {
    box-sizing: border-box;  
    -moz-box-sizing: border-box;  
    -webkit-box-sizing: border-box;  
}
form.login h2 {
    text-align: center;
    margin-bottom: 50px;
}
form.login table {
    margin-left: auto;
    margin-right: auto;
}
form.login table td {
    padding: 5px 50px 5px 50px;

}
div#debug {
	z-index: 9999;
	position:absolute;
	right:10px !important;
	top: 10px;
	border: solid 1px #999;
	border-radius: 8px;
	padding:10px;
	font: 10px sans-serif;
	background-color: rgba(255,255,200,0.7);
	color:black;
}
div#debug:hover {
	display:none !important;
	visibility:hidden;
}


.green {color: #60BF60}
span.alert{color: red;}
.wide {width: 100%}

.tabs input.tab{
    display:none;
}
.tabs label.tab{
    border: solid 1px gray;
    background-color: #eee;
    padding: 1em;
    margin: 1em;
}
.tabs:after {
    content: '';
    display: table;
    clear: both;
}
.tabs .tab-content {
    display:none;
}
.tab-content {margin-top: 1.5em}
#tab1,#tab2,#tab3{display:none}
tabs [id^="tab"]:checked + label {
    background: #FFF;
    box-shadow: inset 0 4px #3498db;
    border-bottom: 4px solid #3498db;
    color: #3498db;
}
                 
#tab1:checked ~ #tab-content1,
#tab2:checked ~ #tab-content2,
#tab3:checked ~ #tab-content3 {
    display: block;
}



div.status_ok, div.status_fail,div.small{
    border-radius: 10px;
    border: solid 2px #777;
    padding: 10px;
    margin: 10px;
    font-weight: bold;
}
div.status_ok>hr, div.status_fail>hr{
    margin: 10px;
}

div.status_ok{
    border-color: green;
    background-color: #D0FFD0;
    color:green;
}
div.status_ok>hr{border-color:green}


div.status_fail{
    border-color: red;
    background-color: #FFFFD0;
    color:red;
}
div.status_fail>hr{border-color:red}

div.small{
    border-color: gray;
    background-color: #F0F0F0;
    color:#555;
    font-weight: normal;
    font-size: small;
}
div.small>hr{border-color:gray}

div#attachment_form,div#comment_form{
    display:none;
    text-align: center;
}
div#attachment_form input{
    vertical-align: middle;
}


/*CHECKBOXES ACCESS*/
#chk1:checked ~ label[for="chk1"],#chk1:checked ~ [parent="1"]{background-color:#FDD;}
#chk2:checked ~ label[for="chk2"],#chk2:checked ~ [parent="2"]{background-color:#FD6;}
#chk3:checked ~ label[for="chk3"],#chk3:checked ~ [parent="3"]{background-color:#DAF;}
#chk4:checked ~ label[for="chk4"],#chk4:checked ~ [parent="4"]{background-color:#AFA;}
#chk5:checked ~ label[for="chk5"],#chk5:checked ~ [parent="5"]{background-color:#FDC;}
#chk6:checked ~ label[for="chk6"],#chk6:checked ~ [parent="6"]{background-color:#AFF;}

#menuswitch{
    display: none;
}

body>label[for="menuswitch"]{
    z-index: 1000;
    position:absolute;
    left: 190px;
    margin-left: -24px;
    top:50%;
    margin-top: -24px;
/*    display: table;*/
    height: 48px;
    width: 48px;
    background:  url('/static/img/left48.png');
    opacity: 0.5;
}
body>#menuswitch:checked ~ #menu{ display:none}
body>#menuswitch:checked ~ #content{ left:0px}
body>#menuswitch:checked ~ label[for="menuswitch"] { 
    background: url('/static/img/right48.png'); 
    left: 0px;
    margin-left: -10px;
}
/*body>label[for="menuswitch"]:after{content:'';}*/

label.master {font-weight: bold}
label.admin {color: #600;}

ul.pages{
    padding:0px 3px 0px 3px;
    font-size: 2em;
    font-size: 36px;
    text-decoration: none;
    color: black;
    float:right;
    font-weight:normal;
    list-style: none;
    background-color: #CCC;
    text-align: center;
    transform: skewX(-10deg);
}
ul.pages>li{display: inline-block;vertical-align: middle;background-color: white;margin:3px;padding:1px;}
ul.pages a{text-decoration: none; color:inherit; display: inline-block;}
ul.pages::after{content: '';display:block;clear:both;}
/*div.pages:after{content:'';display:block;clear:both;}*/
/*input[id^="chk"]{
    float:left;

}

label[parent]{
    display: block;
    position: relative;
    top: 0.5em;
    left: 0.5em;
}
*/

.twocols {
    -webkit-column-count: 2 ;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px;
}

table.comments{
/*    border-bottom: solid 1px #DDD;*/
}
table.comments tr:last-child {
    border-bottom: solid 2px #EEE;
}
table.comments tr:nth-child(odd){
    font-size: 0.7em;
    padding-right: 20px;
    height: auto;
}
table.comments tr:nth-child(odd) td{
    background: #EEE; /* Для старых браузров */
    background: linear-gradient(to top, #EEE, #FFF, #EEE);
    height:auto;
    line-height:auto;
}
table.comments tr:nth-child(even) td:first-child{
    width: 8em;
    background: #EEE;
}
table.comments tr:nth-child(even) td:last-child{
    border-right: solid 2px #EEE;
}

.msg-overlay #switch,
.msg-overlay #menu{display:none}
.msg-overlay #content{left:0px}


div.msg-overlay{
    position:absolute;
    left: 0px;top: 0px;
    right: 0px;
    bottom: 0px;
    background:rgba(0,0,0,.2);
    z-index:1000;
}
div.msg-overlay>div.msg-wrapper{
    border-radius:15px;
    position: absolute;
    top: 40px;
    bottom: 40px;
    left:40px;
    right:40px;
    background:rgba(255,255,255,1);
    z-index:1001;
    overflow:hidden;
}

div.msg-overlay>div.msg-content{
    position: absolute;
    top: 55px;
    bottom: 55px;
    left:55px;
    right:55px;
    background:rgba(255,255,255,1);
    z-index:1002;
    overflow:auto;
}
div.msg-overlay>div.msg-close{
    width:30px;
    height:30px;
    background:url('/static/img/close.png');
    position: absolute;
    z-index:1003;
    right:35px;
    top:35px;
    cursor:pointer;
}



div.msg-overlay:nth-child(4n+2)>.msg-wrapper{left:40px;top:40px;right:40px;bottom:40px}
div.msg-overlay:nth-child(4n+2)>.msg-content{left:55px;top:55px;right:55px;bottom:55px;}
div.msg-overlay:nth-child(4n+2)>.msg-close{right:35px;top:35px;}

div.msg-overlay:nth-child(4n+3)>.msg-wrapper{left:45px;top:45px;right:35px;bottom:35px}
div.msg-overlay:nth-child(4n+3)>.msg-content{left:60px;top:60px;right:50px;bottom:50px;}
div.msg-overlay:nth-child(4n+3)>.msg-close{right:30px;top:40px;}

div.msg-overlay:nth-child(4n)>.msg-wrapper{left:50px;top:50px;right:30px;bottom:30px}
div.msg-overlay:nth-child(4n)>.msg-content{left:65px;top:65px;right:45px;bottom:45px;}
div.msg-overlay:nth-child(4n)>.msg-close{right:25px;top:45px;}

div.msg-overlay:nth-child(4n+1)>.msg-wrapper{left:55px;top:55px;right:25px;bottom:25px}
div.msg-overlay:nth-child(4n+1)>.msg-content{left:70px;top:70px;right:40px;bottom:40px;}
div.msg-overlay:nth-child(4n+1)>.msg-close{right:20px;top:50px;}


div.msg-overlay>div.iframe{
    overflow:hidden;
}
iframe.msg-iframe{
    width: 100%;
    height:100%;
    border:none;
}



div.template, pre.template {
    margin: 20px;
    border: inset 2px;
    padding: 20px;
    min-height: 50%;
}
textarea#template{
    width: 100%;
    min-height: 50%;
    font: fixed;
    font-size: 20px;
}
table.tablesorter thead tr th {
    cursor: pointer;
    text-decoration: underline;
}

table tr .headerSortDown,table tr .headerSortUp {
  white-space: nowrap;
}
table tr .headerSortDown::after {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
  padding-left: 0.5em;
  color: #2A2;
  content: 'arrow_upward';
}
table tr .headerSortUp::after {
  color: #2A2;
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
  padding-left: 0.5em;
  content: 'arrow_downward';
}

/*MOBILE!!!!!!!!1*/


div.floating-frame{
    float: left;
    padding: 10px;
}
.floating-clear{
    clear: both;
}





ul.tab-titles{list-style:none;margin-top: 10px;margin-bottom: 10px;background-color: #CCC;padding: 5px;text-align: center;width: 100%}

ul.tab-titles li{display:inline-block; transition: all 0.3s;background-color: #F3F3F3;margin:0px 3px 0px 3px;transform: skewX(-10deg);}
ul.tab-titles li label {display: block; transition: all 0.3s;padding: 5px 10px 5px 10px;transform: skewX(10deg);}

input.hidenext,input.hidenext~div.tab-content>div{display:none;}

div.tab-content{background-color: #CCC;width: 100%;padding: 5px;transition: all 0.3s}
div.tab-content>div{margin: 0 auto;transition: all 0.3s}
div.tab-content>div>table{margin: 0 auto;transition: all 0.3s}
input#tab1.hidenext:checked~div.tab-content>div.tab1 {display:block;}
input#tab2.hidenext:checked~div.tab-content>div.tab2 {display:block;}
input#tab3.hidenext:checked~div.tab-content>div.tab3 {display:block;}
input#tab4.hidenext:checked~div.tab-content>div.tab4 {display:block;}
input#tab5.hidenext:checked~div.tab-content>div.tab5 {display:block;}
input#tab1.hidenext:checked~ul.tab-titles li label[for="tab1"] {background-color: white;}
input#tab2.hidenext:checked~ul.tab-titles li label[for="tab2"] {background-color: white;}
input#tab3.hidenext:checked~ul.tab-titles li label[for="tab3"] {background-color: white;}
input#tab4.hidenext:checked~ul.tab-titles li label[for="tab4"] {background-color: white;}
input#tab5.hidenext:checked~ul.tab-titles li label[for="tab5"] {background-color: white;}


div.tab4 table.form tr>td:first-child{width: auto}


.button {
	    cursor: pointer;
	    -webkit-touch-callout: none;
	    -webkit-user-select: none;
	    -khtml-user-select: none;
	    -moz-user-select: none;
	    -ms-user-select: none;
	    user-select: none;
}

pre.notes {
    white-space: pre-wrap;       /* CSS 3 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word; 
    font-style: italic;
}


ul.adminmenu {padding: 10px;}
ul.adminmenu>li {list-style:none}
ul.adminmenu>li>a {display:block;padding: 5px;text-decoration:none}


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

div#menu {
    top:0px;
    left:0px;
    right:0px;
    bottom:auto;
    height: 80px;
    width: auto;
    padding: 0px;
}
div#content {
    top:80px;
    left:0px;
    right: 0px;
    bottom:0px;
}

div#menu *{
    display: inline;
    padding: 0px;
    margin: 0px;
}
div#menu li{float:left;line-height: 1.8em;}
div#menu ul{vertical-align: baseline;}
div#menu hr{clear:both;display:block;}
div#menu h3{font-size: 1em;}

.twocols {
    -webkit-column-count: 1 ;
    -moz-column-count: 1;
    column-count: 1;

}
body>label[for="menuswitch"]{
    display:none;
}
}