.fb {
    padding:3px;	
    float:left;
    color:white; 
 
     margin: 0px;   
    text-align:center;
    box-shadow:0 8px 20px rgba(0,0,0,0.3);
    margin-left:8px;
    cursor: pointer;
    border-radius:4px;
    background-color:#2B65EC;
     
}

	.fb_green {
    padding:3px;	
    float:left;
    color:white; 
 
     margin: 0px;   
    text-align:center;
    box-shadow:0 8px 20px rgba(0,0,0,0.3);
    margin-left:8px;
    cursor: pointer;
    border-radius:4px;
    background-color:green;
     
}

.cas_box
{
    
  
background-color:white; 
box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.1); 
align:center;
border-radius:5px;
/* z-index:999; */
/* position:relative; */
 
float: right;
margin:20px;
}

 

.cas_box .innerr
{
height:52px;
width: 95%; 
box-shadow:0 8px 6px rgba(0,0,0,0.2);
background-color:#2B65EC;
padding-left: 2cm;
text-align:center;
z-index:0;
position:relative;
bottom:25px;
color:white;
font-family:Serif;
font-weight:bold;
border-radius:5px;
margin: auto;
padding:5px;
/* text-shadow:1px 1px 1px rgba(255,192,203,0.4); */
 }
 
 .cas_box .innerr p
{
 
 
text-align:center;
z-index:0;
position:relative;
bottom:-5px;
font-size:20px;
font-family:Serif;
 
 }
.tablee
{

box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.1); 
height:80%;
background-color:white;
border: 1px solid #dddfee;
 

}  

.tablee td
{

/* color:#03a9f4; */
 
font-weight:bold;
font-size:15px;
height: 30px;
padding:8px; 
 font:300 16px/19px Roboto,sans-serif;
	 border: 1px solid #dddfee;
	 

}

.tablee th
{

/* color:#03a9f4; */
 
font-weight:bold;
font-size:15px;
height: 30px;
padding:8px; 
 
border: 1px solid #dddfee;

color:white;
background-color:#2B65EC;
text-align: center;
 font:300 16px/19px Roboto,sans-serif;
	 

}

 			.tablee tr:nth-child(even) {
             background-color:rgba(189, 237, 255,0.1);
         }
         
 

 .dashboard
 {
color:#0000FF;
background-color:white;
text-align:center;
 /* box-shadow:1px 1px 15px black;   */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
min-height: 150px; 
width:290px;
 
 

 /* background: url("<%=basePath%>img/logo.png");
  background: url("logo.png");
   background-color:whitesmoke;
   background-repeat: no-repeat;
    background-position: center; 
     background-position: 0% 90%; 
      background-size: 100px 100px;
    position: relative;*/
 

 
 }
 
 
 .dashboard:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: rotate scale(1.1);
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
 
background: url("../img/logo.png");
   background-color:white;
   background-repeat: no-repeat;
    background-position: center; 
     background-position: 0% 100%; 
      background-size: 100px 100px;
    position: relative;
 
    
}

 

 
 
.dashboard:hover i{
   -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
font-size:20px;
    
}
 
 
 
  .dashboard div
 {
 
height:50px;
 
 
 
 }
 
 .dashboard div p
 
 {
  color:white;
  z-index:0;
  position:relative;
  top:10px;
   text-shadow:0 0 0 whitesmoke;
   

 
 }
 
  
  .dashboard p
 {
  color:black;
  z-index:0;
  position:relative;
  top:10px;
  text-align:center;
 
 
 }
 
   .dashboard div i
 {
 z-index:0;
 position:relative;
 top:0px;
 height:29px;
 width:29px;
 border-radius:50%;
 font-size:20px;
 color:white;
  -webkit-transition: -webkit-transform .4s ease-in-out;
   transition:         transform .4s ease-in-out;
 
 }
 
 
 .snippet

{


float:left;
width:170px;
height:40px;
margin:5px;
box-shadow:0 8px 6px rgba(0,0,0,0.2);
border-radius:2px;

}

 .snippet:hover

{


float:left;
width:170px;
height:40px;
margin:5px;
transition: box-shadow 0.3s ease-in-out;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.15);
border-radius:2px;
cursor: pointer;

}


.snippet i

{

color:white;
font-size:15px;
z-index:999;
position:relative;
top:5px;
left:145px;
font: sans-serif;
}

 

.snippet p

{

color:white;
font-size:350px;
z-index:999;
position:relative;
top:-3px;
left:20px;
font:300 13px/19px Roboto,sans-serif;
font-size:20px;
}


.snippet font

{

color:whitesmoke;
font-size:25px;
z-index:999;
position:relative;
top:-51px;
left:20px;
font:300 13px/19px Roboto,sans-serif;
font-size:11px;
}
 .floating-box,.floating-box a {
    float:left;
    height:30px;;
    margin: 10px;
    border-radius:3px;
    box-shadow:0px 10px 20px rgba(0,0,0,0.3);
    color:white;
    text-shadow:1px 1px 1px rgba(0,0,0,0.3);
    width: 50;
     padding:5px;
     
}

.floating-box:hover {
     -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: rotate scale(1.1);
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
     
}
 
 
 .form-group {
  position: relative;
  margin-bottom: 1.5rem;
  
 
}


.form-group  i{
 position: relative;
 top:30px;
 left:-20px;
font-size:18px;
 
}
.inpu

{
  outline: 0;
  border-width: 0 0 2px 0;
  border-color: grey;
  box-shadow:0 0 0 rgba(0,0,0,0);
  border-radius:0px;
  width:200px;
  font-size:20px;
  color:black;



}

.inpu:focus

{
    
  outline: 0;
  border-width: 0 0 2px 0;
  border-color: #03a9f4;
  box-shadow:0 0 0 rgba(0,0,0,0);
  border-radius:0px;
  width:200px;


}
.form-control-placeholder {
  position: absolute;
 top:20px;
 left:0px;
  padding: 7px 0 0 0px;
  transition: all 200ms;
  opacity: 0.5;
    cursor:auto;
     
  
  
}

.form-control:focus + .form-control-placeholder,
.form-control:valid + .form-control-placeholder {
  font-size: 100%;
   color:#03a9f4;
  transform: translate3d(0, -100%, 0);
  opacity: 1;
  
}