body,html{
    padding:0;
    margin:0;
    
    font-family: arial;
    overflow: hidden;
}
a{
    cursor: pointer !important;
}
input.srch{
    
    
}

h4{
    margin: 0;
}

.clsrchcont{
    position: relative;
    
    margin-top: 30px;
}



.srchcont{
    position: relative;
    
}
.srchcont input{
    font-size: 1.4em;
    width: 90%;
    
}
.srchcont textarea{
    font-size: 1em;
    width: 90%;
    height: 200px;
    
}

.clearinp{
    position: absolute;
    right: 10px; top: 8px;
    color: #aaa;
    font-size: 180%;
    z-index: 99;
    
}

#clearinput{
}

.srcres{
    cursor: pointer;
    
}



.srcmkb,.srccl{
    cursor: pointer;
    text-align: left;
    padding: 10px;
    margin: 10px;
    border: 1px solid gray;
    border-radius: 5px;
    
    background-color: #eeeeee;
}


div.b_off {
    text-decoration: none;    
    background-image: linear-gradient(#58c043, #58c043);
    background-position: 100% 0%;
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition: background-size .3s;
}

div.b_on {
    background-size: 100% 100%;
    background-position: 0% 100%;
    transition: background-size .3s;
}



.b_rep{
    border-radius: 5px;
    color: white;
    font-weight: bold;
    display: inline-block;
    margin: 10px 0;
    padding: 10px;
    width: 80%;
    background-color: rgb(25, 111, 230);
    text-align:left;
    
}

.b_rep .cladditional{
    position: relative;
    margin-top: 5px;
    
}
.b_rep .cladditional small{
    
   font-weight: normal;
    
}


#main{
    width:100%;
    text-align: center;
    /*border: 2px solid green;*/
    position: relative;
}

#container{
    width: 100%;
    max-width: 500px;
    margin: auto;
/*    border: 1px solid red;*/
    position: relative;
    padding-top: 70px;
    overflow-y: auto;
    
}
#popup{
    background-color: white;
    width: 98%;
    max-width: 464px;
    margin: 0 10%;
    position: fixed;
    top:0; left:21%;
    padding: 10px;
    text-align: center;
    z-index: 10;
    border: 2px solid #666;
    
}

#show_datepick{
    text-align: center;
    margin: 30% 20%;
}

#daynav{
    padding: 10px;
    background-color: white;
    
    
}
#daynav > a#back{
    float: left;
   
}
#daynav > a#forw{
    float: right;
   
}

#daylist{
    padding: 10px;
}

#daylist > div.pos{
    padding: 5px;
    
    border: 1px solid #cccccc;
    background-color: #eeeeee;
    margin: 5px;
    
}
#daylist > div.pos .time{
    color: #666;
    font-size: 0.9em;
    float: left;
    
}
#daylist > div.pos .cab{
    color: #666;
    font-size: 0.9em;
    margin: 0 5px;
    float: left;
    
}



.pick_cont{
    text-align: center;
    position: absolute;
    
    z-index: 9;
    
}
form#login{
    margin: 20% 10%;
}

div#hf{
    
    position: fixed;
    width: 100%;
    max-width: inherit;
    top: 0;
    
        
}

div#hf > div#head{
    height: 20px;
    position: relative;
}
div#hf > div#head > div#mainhead{
    background-color: #b0252b;
    color: white;
    padding: 10px;
    height: inherit;
    position: relative;
    box-shadow:0px 5px 9px 0px rgba(0,0,0,0.11);
-webkit-box-shadow:0px 5px 9px 0px rgba(0,0,0,0.11);
-moz-box-shadow:0px 5px 9px 0px rgba(0,0,0,0.11);
}

#error{
    
    
    
}
.error{
    margin: 5px;
    position: absolute;
    width:96%;
    top: 36px; left:0;
    padding: 5px;
    color:white;
    background-color: #e22f3a;
}

#loading{
    position: absolute; top: 10px; left: 50%;
    color: white;
}
.hidden{
    display: none;
}


#logout{
    float: right;
    
}
#nick{
    float: right;
   margin-right: 15px;
}

#clsrch{
    float: left;
    margin-left: 10px;
}



form{
    
}

form textarea{
    width: 95%;
    font-size: 1.2em;
    
}

form select{
    font-size: 1.2em;
}
form#login{
    background-color: #eeeeee;
    border: 2px solid gray;
    padding:2em;
    
}

input[type="checkbox"]{
    width: auto;
}


form label{
    display: block;
    position: relative;
    text-align: left;
}

form#login label{
    display: block;
    position: relative;
}


label input {
    line-height: 2em;
    width: 100%;
    padding: 0.5em 1em;
    box-sizing: border-box;
}


form#login label input{
    width: auto;
    line-height: 2em;
    width: 100%;
    padding: 0.5em 1em;
    box-sizing: border-box;
}

form#login label span{
    position: absolute;
    left: 1em; top: 0.4em;
    color: gray;
    line-height: 2.5em;
    font-size: 0.8em;
    z-index: 1;
    transition: all .1s ease-out;
}
form#login label input ~ span.checked {
    margin-right:0;
    font-size: .6em;
    line-height: .7em;
    left: 1em;
    top: 0.3em;
}
form#login label input:focus ~ span {
    margin-right:0;
    font-size: .6em;
    line-height: .7em;
    left: 1em;
    top: 0.4em;
}
form#login label input:valid ~ span {
    margin-right:0;
    font-size: .6em;
    line-height: .7em;
    left: 1em;
    top: 0.4em;
}

ins{
    text-decoration: none !important;
}

#p_cont{
    text-align: center;
    overflow: hidden;
    width: 100%;
}

.t_buttons{
    border-top: 1px solid gray;
    text-align: center;
    margin-top: 10px;
}
.t_buttons a{
    display: inline-block;
    margin: 5px 20px;
    color: white;
    padding: 5px;
    border-radius: 4px;
}

#close_popup{
    float: right;
    color: #aaa;
}

.report{
    
    background-color: rgb(25, 111, 230);;
    
}
.to_show{
    overflow: auto;
    height: 98%;
}
.to_show *{
    text-align: left;
}

.bill{
    
    background-color: green;
    
}

.cliname{
    padding: 10px;
    border-bottom: 1px solid gray;
    overflow: hidden;
    font-size: 90%;
    margin-bottom: 5px;
}
.jpanel{
    margin: 5px 0;
    text-align: left;
    padding: 0 2px;
    position: absolute;
    top: 8px; width: 50px;
}
#brpanel{
    background-color: #f1a899;
    margin: 5px 0;
    text-align: left;
    padding: 4px;
    position: absolute;
    top: 8px;
    left: 23%;
    width: 200px;
    border-radius: 4px;
    text-align: center;
}

.clbut{
    font-weight: bold;
    color: #003eff;
    display: inline-block;
    padding: 2px;
}
.back,.back2 span{
    color: darkgreen;
    
}
.rback,.back3{
    color: blue;
}

.bpanel{
    position: absolute;
    bottom: 0;
    width: 100%;
}


#cpanel{
    position: absolute;
    width: 93%;
    top: 0;
   /* border: 1px solid blue;*/
    overflow-y: auto;
    min-height: 300px;
    margin: 5px;
    height: 72%;
    padding: 10px;
}

.srccl small{
    display: block;
    
    
}



#opanel{
    position: absolute;
    width: 93%;
    top: 70px;
    overflow-y: auto;
    overflow-x: auto;
    min-height: 300px;
    margin: 5px;
    height: 75%;
    padding: 10px;
}
#opanel div#form{
    position: relative;
    border: 1px solid white;
    min-height: 800px;
    height: 100%;
    padding-bottom: 1000px;
}

#opanel > div#form > div{
    border: 1px solid white;
    margin: 10px 0;
    position: relative;
    
}
 div.txtform{
    position: absolute;
    top: 0; left:0;
    background-color: white;
    width: 98%;
    height: 200px;
    

}
 div.txtform textarea{
    width: 100%;
     
     height: 150px;
 }



#opanel > div#form > div div.txtform textarea{
    
    width: 100%;
    height: 400px;

}

.osave_button{
    position: absolute;
    width:90%;
    bottom: 0;
    padding:10px;
}
.osave_button a{
    display: inline-block;
    padding: 10px;
    border-radius: 5px;
    background-color: blue;
    color: white;
    font-weight: bold;
    width: 80%;
}

#srch_res{
    height: inherit;
    overflow-y: auto;
   /* border: 1px solid #f1a899;*/
}
.srcres{
    margin: 10px 5px;
    padding: 5px;
    background-color: #eeeeee;
    text-align: left;
    border-radius: 5px;
    border: 1px solid gray;
}
.srcres a{
    color: darkgreen;
    margin-right: 5px;
    
}
.srcres small{
   display: block;
   color: gray;
   margin-left: 20px;
}

.srcreport{
    margin: 10px 5px;
    padding: 5px;
    background-color: #eeeeee;
    text-align: left;
    border-radius: 5px;
    border: 1px solid gray;
}
.srcreport a{
    color: blue;
    margin-right: 5px;
    
}


.pr_gr{
    font-weight: bold;
    margin: 5px;
}

.pr_pos{
    margin: 10px 5px;
}
.pr_name{
    background-color: #eeeeee;
    border: 1px solid #cccccc;
    border-radius: 5px 5px 0 0;
    padding: 3px;
}

.pr_kol{
    
    border-left: 1px solid #cccccc;
    border-right: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    border-radius: 0 0 5px 5px;
    background-color: white;
    
    padding: 5px;
    
}

.pr_plus{
    color: darkgreen;
    margin: 0 10px 5px 0;
}
.pr_minus{
    
    margin: 0 0 0 10px;
    color: darkgreen;
}


.bpanel a{
    background-color: darkgreen;
    
}

#sub_cont2{
    position: relative;
/*    overflow-y: auto;*/
    width: 99%;
    /*border: 1px solid red;*/
    min-height: 300px;
}

.right{
    float: right;
}
.left{
    float: left;
}

.billbut_class{
    
    border-radius: 5px;
    color: white;
    font-weight: bold;
    display: inline-block;
    margin: 10px 0;
    padding: 10px;
    width: 80%;
    background-color: darkgreen;
    
}

.section{
    
    padding: 8px;
    background-color: #007fff;
    color: white;
    font-weight: bold;
    margin: 10px 0;
    border-radius: 5px;
    
    
}




.rep_tab{
    border-top: 1px solid gray;
    border-left: 1px solid gray;
}
.rep_tab td{
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
    vertical-align: top;
    text-align: left;
}
.rep_tab td textarea{
    min-width: 150px;
    width: 95%;
    font-size: 1em;
}
.rep_tab td select{
    min-width: 150px;
    width: 95%;
}

/*Анимахи*/

.converting{
    color: gray;
    animation: rotate 1s ease-in-out infinite;
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


.yes_go_toleft{
  animation: goingtoleft ease 1s;
  animation-iteration-count: 1;
  
  -webkit-animation: goingtoleft ease 1s;
  -webkit-animation-iteration-count: 1;
  
  -moz-animation: goingtoleft ease 1s;
  -moz-animation-iteration-count: 1;
  
  -o-animation: goingtoleft ease 1s;
  -o-animation-iteration-count: 1;
  
  -ms-animation: goingtoleft ease 1s;
  -ms-animation-iteration-count: 1;
}
.yes_go_toright{
  animation: goingtoright ease 1s;
  animation-iteration-count: 1;
  
  -webkit-animation: goingtoright ease 1s;
  -webkit-animation-iteration-count: 1;
  
  -moz-animation: goingtoright ease 1s;
  -moz-animation-iteration-count: 1;
  
  -o-animation: goingtoright ease 1s;
  -o-animation-iteration-count: 1;
  
  -ms-animation: goingtoright ease 1s;
  -ms-animation-iteration-count: 1;
}

@keyframes goingtoleft{
  0% {
    transform:  translate(1000px,0px)  ;
  }
  20% {
    transform:  translate(20px,0px)  ;
  }
  100% {
    transform:  translate(0px,0px)  ;
  }
}

@-moz-keyframes goingtoleft{
  0% {
    -moz-transform:  translate(1000px,0px)  ;
  }
  20% {
    -moz-transform:  translate(20px,0px)  ;
  }
  100% {
    -moz-transform:  translate(0px,0px)  ;
  }
}

@-webkit-keyframes goingtoleft {
  0% {
    -webkit-transform:  translate(1000px,0px)  ;
  }
  20% {
    -webkit-transform:  translate(20px,0px)  ;
  }
  100% {
    -webkit-transform:  translate(0px,0px)  ;
  }
}

@-o-keyframes goingtoleft {
  0% {
    -o-transform:  translate(1000px,0px)  ;
  }
  20% {
    -o-transform:  translate(20px,0px)  ;
  }
  100% {
    -o-transform:  translate(0px,0px)  ;
  }
}

@-ms-keyframes goingtoleft {
  0% {
    -ms-transform:  translate(1000px,0px)  ;
  }
  20% {
    -ms-transform:  translate(20px,0px)  ;
  }
  100% {
    -ms-transform:  translate(0px,0px)  ;
  }
}

@keyframes goingtoright{
  0% {
    transform:  translate(-1000px,0px)  ;
  }
  20% {
    transform:  translate(-20px,0px)  ;
  }
  100% {
    transform:  translate(0px,0px)  ;
  }
}

@-moz-keyframes goingtoright{
  0% {
    -moz-transform:  translate(-1000px,0px)  ;
  }
  20% {
    -moz-transform:  translate(-20px,0px)  ;
  }
  100% {
    -moz-transform:  translate(0px,0px)  ;
  }
}

@-webkit-keyframes goingtoright {
  0% {
    -webkit-transform:  translate(-1000px,0px)  ;
  }
  20% {
    -webkit-transform:  translate(-20px,0px)  ;
  }
  100% {
    -webkit-transform:  translate(0px,0px)  ;
  }
}

@-o-keyframes goingtoright {
  0% {
    -o-transform:  translate(-1000px,0px)  ;
  }
  20% {
    -o-transform:  translate(-20px,0px)  ;
  }
  100% {
    -o-transform:  translate(0px,0px)  ;
  }
}

@-ms-keyframes goingtoright {
  0% {
    -ms-transform:  translate(-1000px,0px)  ;
  }
  20% {
    -ms-transform:  translate(-20px,0px)  ;
  }
  100% {
    -ms-transform:  translate(0px,0px)  ;
  }
}






@media screen and (max-width: 650px) {
    #popup{
        left:0;
        max-width: 100%;
        width:100%;
        margin: 0;
    }
   #show_datepick{
       margin: 20% 10%;
    }
}