@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&subset=cyrillic');
body{
background: #e2e1e0;

}
@media (max-width: 600px) {
  .navbar {position: top;
    position: absolute!important;
    margin-bottom: 100px;


  }
  .dyncont{
    padding-top: 90px!important;
  }
}


.icn {
  font-size: 28px;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 12px!important;
}
.icn p{
  font-size: 0px;
  padding-top: 0px!important;

}

.icn:hover p{
  font-size: 14px;
  color: #fff;

}
.icn:active{
  color: #ffff99;
}





.navbar{
    -webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
position: fixed ;
width: 100%!important;
opacity: 0.9 !important;
height: 30px!important;


}
.navbar:hover{
  opacity: 1 !important;
}


.ImportantButon {
  background-color: #ccffff!important;
  color: #000!important;

  padding: 3px 7px 3px 7px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24) !important;
  transition: all 0.3s cubic-bezier(.25,.8,.25,1)!important;

  width: 60% !important;
    
  

}
.ImportantButon:hover{
-webkit-box-shadow: inset -1px 1px 24px 0px rgba(0,0,0,0.75);
-moz-box-shadow: inset -1px 1px 24px 0px rgba(0,0,0,0.75);
box-shadow: inset -1px 1px 24px 0px rgba(0,0,0,0.75);
  background-color: #66cc66!important;
color: #fff;

color: #fff!important;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)!important;
}

.ImportantButon:active{
-webkit-box-shadow: inset -1px 1px 24px 0px rgba(0,0,0,0.75);
-moz-box-shadow: inset -1px 1px 24px 0px rgba(0,0,0,0.75);
box-shadow: inset -1px 1px 24px 0px rgba(0,0,0,0.75);
  background-color: #ccff99!important;
color: #fff;

color: #fff!important;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)!important;
}

.ImportantButon a {
  color: #000!important;

}

.navbar-header a:hover{

  -webkit-box-shadow: inset -1px 1px 24px 0px rgba(0,0,0,0.75)!important;
-moz-box-shadow: inset -1px 1px 24px 0px rgba(0,0,0,0.75)!important;
box-shadow: inset -1px 1px 24px 0px rgba(0,0,0,0.75)!important;

  
color: #fff;

}

.navbar-header a:active{


  
color: #ffff99;


}

.navbar-header a{
  top: 50%!important;
}
input {

 
  
  border: none;
 
 
  transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #000 4%);
 background-color:rgba(252, 252, 252, 0.5);
   


 
 


  color: #000;

  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24) !important;
  transition: all 0.3s cubic-bezier(.25,.8,.25,1)!important;


  
 
}
input:focus, input:valid {
  box-shadow: none;

  

 
    
}
input:focus::-webkit-input-placeholder, input:valid::-webkit-input-placeholder {
  color: #000;
  font-size: 11px;
  -webkit-transform: translateY(-20px);
          transform: translateY(-20px);
  visibility: visible !important;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)!important;
  background-color: #66cc66;

   
}
input:hover {

    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)!important;
   
  
  

}
textarea{
   box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24) !important;
  transition: all 0.3s cubic-bezier(.25,.8,.25,1)!important;

}
textarea:hover{
   box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)!important;


}

table {
background-color: #fff;


 box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24) !important;
  transition: all 0.3s cubic-bezier(.25,.8,.25,1)!important;

}
table:hover{
   box-shadow: 0 14px 20px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)!important;

}
  
table td{ 
  line-height: 18px; 


}

table tr:hover{
  box-shadow: 0 14px 20px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)!important;

}
table th {

  padding: 15px; 
  background: rgba(255,255,255,1);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(204,204,204,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(246,246,246,1)), color-stop(100%, rgba(204,204,204,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(204,204,204,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(204,204,204,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(204,204,204,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(204,204,204,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cccccc', GradientType=0 );

  font-weight: 700;
 
}
table tr:nth-child(odd) {
  background-color: #f2f2f2;
}








table th div,
table thead tr:last-child th,
table td,th {
  padding: 0 8px 0 14px; 
  
}

table th:not(:first-child) div,
table td:not(:first-child) { 
  border-left: 1px solid rgba(0, 0, 0, 0.075);
}

table td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.075);
}

table thead tr:last-child th { 
  line-height: 0;
  opacity: 0;
}

table thead th div {  
  position: absolute !important;
  line-height: 22px;
  top: 0;
  
}

table tbody tr:hover {
  cursor: pointer;
  background-color: #EDEDF2;
  box-shadow: 10px 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)!important;
  z-index: 9999999999 !important;
}


table tr hover{
   box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)!important;
   z-index: 9999999999!important;
}


select {
 
  background-color: transparent;
 

  color: #000;
  border: none;
  border-bottom: 1px solid #000;
  border-radius: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24) !important;
  transition: all 0.3s cubic-bezier(.25,.8,.25,1)!important;
  
}

table th{
  background-color: #ccccff!important;

}
select:hover{
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)!important;
}

input[type=checkbox]:checked  {

    content: "\2713";

    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);

    font-size: 15px;

    color: #f3f3f3;

    text-align: center;

    line-height: 15px;

}


.dyncont{
  margin-top: 70px!important;
}
.actbtn{
  
  background-color: #ccffff!important;
  color: #000!important;
padding: 0px!important;
padding-left: 5px!important;
padding-right: 5px!important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24) !important;
  transition: all 0.3s cubic-bezier(.25,.8,.25,1)!important;
 
}
.actbtn:hover{
  -webkit-box-shadow: inset -1px 1px 24px 0px rgba(0,0,0,0.75);
-moz-box-shadow: inset -1px 1px 24px 0px rgba(0,0,0,0.75);
box-shadow: inset -1px 1px 24px 0px rgba(0,0,0,0.75);
  background-color: #66cc66!important;
color: #fff;

color: #fff!important;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)!important;

}

.actbtn:active{
  box-shadow: inset 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)!important;
}

.conttt {
  box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
  position: relative;
  margin: 0 auto;
  margin-top: 0px;
  font-family: 'Roboto', sans-serif;
  overflow:hidden;
  width: 75px;
  height:75px;
  cursor: pointer;
  color:white;
  background-color: #000;
  opacity: 0.95;
  border-bottom-left-radius: 75px;
  border-top-left-radius: 75px;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  transition: all 1s ease-in-out; 
  -webkit-transition: all 1s ease-in-out; 
  position: absolute;
  margin:5px;
 
}
.conttt a
{
  padding-left: 15px;
  margin-left: 60px;
  padding-right: 5px;
  margin-top: -50px;
  text-align:left;
  font-size:18px;
  display:none;
  color: #fff!important;
}
#icon
{
  position: absolute;
  width:30px;
  height:30px;
/*   margin-left:10px; */
/*    right:0; */
  top:25px;
  left:25px;
  margin: 0 auto;
  font-size:30px;
  transition: all 0.3s ease-in-out; 
  -webkit-transition: all 0.3s ease-in-out; 
}
#icon.expand
{
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}
.conttt.expand
{
/*  color:#89aeed; */
  animation: expandWidth 0.5s 1 forwards, expandHeight 0.1s 1 forwards;
 -webkit-animation: expandWidth 0.5s 1 forwards, expandHeight 0.1s 1 forwards;
  border-radius:0;
}
.conttt.shrink
{
  transition: all 1.2s ease-in-out; 
  -webkit-transition: all 1.2s ease-in-out; 
 animation: shrinkWidth 0.5s 1 forwards, shrinkHeight 0.1s 1 forwards;
 -webkit-animation: shrinkWidth 0.5s 1 forwards, shrinkHeight 1s 1 forwards;
  
  
}
.photo a{
  margin-left:30px;
  
}
.shrink a{
   display:none;
}

.expand a{

  display:block;
}
.photo
{
 
  height:75px;
  width:75px;
  border-radius:10%;
/*   background-color:#76a1e8; */
}





@keyframes expandWidth {
  from {
    width: 75px;
  }
  to {
    width: 300px;
  }
}

@-webkit-keyframes expandWidth {
  from {
    width: 75px;
  }
  to {
    width: 300px;
  }
}

@keyframes shrinkWidth {
    0%,50% {
    width: 300px;
  }
  100% {
    width: 75px;
  }
}

@-webkit-keyframes shrinkWidth {
    0%,50% {
    width: 300px;
  }
  100% {
    width: 75px;
  }
}
.icns{
height: 50px;
width: 50px;
background-color: #fff;
}

.icns:hover{
 color: #fff;
box-shadow: 0 6px 8px rgba(252,252,252,0.25), 0 10px 10px rgba(252,252,252,0.22)!important;
}