@import url(https://fonts.googleapis.com/css?family=Roboto:500,900,100,300,700,400&subset=latin,latin-ext);
@import url(https://fonts.googleapis.com/css?family=Raleway:400,100,300,500,700,900);
@import url(https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400italic);
@import url(https://fonts.googleapis.com/css?family=Playfair+Display:400,700);
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);

html {margin: 0 auto; padding:0px; height:100%;}
body {margin: 0 auto; padding:0px; font-size:100%; height: 100vh; min-height: 100vh; width:100%; font-family: 'Roboto', sans-serif; color:#000; background-color: #fff;   overflow-x: hidden;
  background-image: url("/images/background.png");
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}






.sticky {
  position: relative;
  top:0px;
  height: 60px;
  width: 100%;

}


.navigation {
  width: 100px;
  background: transparent;
   position: relative;
   float:right;
  
}

.logimage {
  width: 25px;
  border-radius: 50px;
  float: left;
}

.logout {
  font-size: .8em;

	position: relative;
  right: 20px;
  bottom: -4px;
  overflow: hidden;
  letter-spacing: 3px;
  opacity: 0;
  transition: opacity .45s;
  -webkit-transition: opacity .35s;
  
}

.logoutbutton {
	text-decoration: none;
	float: right;
  padding: 2px;
  margin: 15px;
  color: black;
  width: 25px;
  padding-right:25px;
  padding-left:15px;
  transition: width .35s;
  -webkit-transition: width .35s;
  overflow: hidden;
  position:relative;
  bottom:3px;
  left:20px;
  border-radius: 15px 15px 0px 0px;
}

.logoutbutton:hover {
  background-color: #33BBFF; /* Green */
  color: white;
  width: 100px;
}



.newrecordbutton {
	text-decoration: none;
	float: right;
  padding: 2px;
  margin: 15px;
  color: black;
  width: 30px;
  padding-right:25px;
  padding-left:15px;
  transition: width .35s;
  -webkit-transition: width .35s;
  overflow: hidden;
  position:relative;
  bottom:3px;
  left:10px;
  border-radius: 15px 15px 0px 0px;
}

.newrecordbutton:hover {
  background-color: #33BBFF; /* Green */
  color: white;
  width: 170px;
}







.supportbutton {
	text-decoration: none;
	float: right;
  padding: 2px;
  margin: 15px;
  color: black;
  width: 30px;
  padding-right:25px;
  padding-left:15px;
  transition: width .35s;
  -webkit-transition: width .35s;
  overflow: hidden;
  position:relative;
  bottom:3px;
  left:10px;
  border-radius: 15px 15px 0px 0px;
}

.supportbutton:hover {
  background-color: #33BBFF; /* Green */
  color: white;
  width: 170px;
}













.searchbutton {
	text-decoration: none;
	float: right;
  padding: 2px;
  margin: 15px;
  color: black;
  width: 25px;
  padding-right:25px;
  padding-left:15px;
  transition: width .35s;
  -webkit-transition: width .35s;
  overflow: hidden;
  position:relative;
  bottom:3px;
  left:20px;
  border-radius: 15px 15px 0px 0px;
}

.searchbutton:hover {
  background-color: #33BBFF; /* Green */
  color: white;
  width: 100px;
}



a:hover {
  
}

a:hover .logout{
  opacity: .9;
}

a {
  text-decoration: none;
}

.alphabtn {
  display:block;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  border: 2px solid #33BBFF;
    background-color: #FFFFFF; /* Green */
    color: black;
  box-shadow: 1px 1px;
}
.alphabtn:hover {
  display:block;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  border: 2px solid #FFFFFF;
    background-color: #33BBFF; /* Green */
    color: white;
    box-shadow: 0px 0px;
}
.alphatxt {
position:relative; 
bottom:0px; 
text-align:center; 
vertical-align:middle; 
font-size:30px;
}



.wildbtn {
	position:relative;
	right:2px;
  display:block;
  height: 34px;
  width: 34px;
  border-radius: 0px 50% 50% 0px;
  border-top: 2px solid #33BBFF;
  border-bottom: 2px solid #33BBFF;
  border-left: none;
  border-right: 2px solid #33BBFF;
    background-color: #FFFFFF; /* Green */
    color: black;
  box-shadow: 0px 0px;
}
.wildbtn:hover {
  display:block;
  height: 35px;
  width: 35px;
  border-radius: 0px 50% 50% 0px;
  border: 2px solid #FFFFFF;
    background-color: #33BBFF; /* Green */
    color: white;
    box-shadow: 0px 0px;
}
.wildtxt {
position:relative; 
bottom:0px; 
text-align:center; 
vertical-align:middle; 
font-size:30px;
}







.roundbtn {
	position:relative;
	right:2px;
	float:right;
  display:block;
  height: 34px;
  width: 34px;
  border-radius: 50% 50% 50% 50%;
  border-top: 2px solid #33BBFF;
  border-bottom: 2px solid #33BBFF;
  border-left: 2px solid #33BBFF;
  border-right: 2px solid #33BBFF;
    background-color: #FFFFFF; /* Green */
    color: black;
  box-shadow: 0px 0px;
}
.roundbtn:hover {
  display:block;
  height: 35px;
  width: 35px;
  border-radius: 50% 50% 50% 50%;
  border: 2px solid #FFFFFF;
    background-color: #33BBFF; /* Green */
    color: white;
    box-shadow: 0px 0px;
}
.roundtxt {
position:relative; 
bottom:0px; 
text-align:center; 
vertical-align:middle; 
font-size:30px;
}











#searchtableother td{
   padding-top:10px;
   padding-bottom:0px;
   padding-left:0px;
   padding-right:0px;
}



.formtxt {
position:relative; 
top:2px; 
text-align:right; 
vertical-align:middle; 
font-size:20px;
padding-left:5px;
padding-right:5px;
}

.formbtn {
	position:relative;
	text-align:right;
  display:block;
  height: 34px;
  width: 100px;
  border-radius: 10px 0px 0px 10px ;
  border-top: 2px solid #33BBFF;
  border-bottom: 2px solid #33BBFF;
  border-right: none;
  border-left: 2px solid #33BBFF;
    background-color: #eaeaea; /* Green */
    color: black;
   box-shadow: 1px 1px #000000;
}



.formwild{
	float:right;
	      border-top: 2px solid #33BBFF;
  border-bottom: 2px solid #33BBFF;
  border-right: 2px solid #33BBFF;
  border-left: none;
	     border-radius: 0px 10px 10px  0px;
    padding: 15px; 
    width: 200px;
    height: 20px;
    box-shadow: 1px 1px #000000;
	}




.fancybox {
    width: 600px;
    height: 600px;
}

.fancybox-title {
  width: auto;
  height: auto;
}

.fancybox-title .child {
  min-width: auto; 
  height: auto;
}







.alphawild{
	float:right;
	      border-top: 2px solid #33BBFF;
  border-bottom: 2px solid #33BBFF;
  border-left: 2px solid #33BBFF;
  border-right: none;
	     border-radius:  40px 0px 0px 40px;
    padding: 15px; 
    width: 150px;
    height: 15px;
	}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}








@-o-keyframes fadeIt {
  0%   { background-color: #FFFFFF; }
  50%  { background-color: #00b2e5; }
  100% { background-color: #FFFFFF; }
}
@keyframes fadeIt {
  0%   { background-color: #FFFFFF; }
  50%  { background-color: #00b2e5; }
  100% { background-color: #FFFFFF; }
}

.backgroundAnimated{    
    background-image:none !important; 
         -o-animation: fadeIt 2s ease-in-out; 
            animation: fadeIt 2s ease-in-out; 
}



@-o-keyframes fadeDel {
  0%   { background-color: #FFFFFF; }
  50%  { background-color: #f9757e; }
  100% { background-color: #FFFFFF; }
}
@keyframes fadeDel {
  0%   { background-color: #FFFFFF; }
  50%  { background-color: #f9757e; }
  100% { background-color: #FFFFFF; }
}

.backgroundDel{    
    background-image:none !important; 
         -o-animation: fadeDel 2s ease-in-out; 
            animation: fadeDel 2s ease-in-out; 
}


#addingdiv{
display:none; 
width:175px; 
height:30px; 
padding-top:0px;
border:solid;
background-color:#FFFFFF;
	      border-top: 2px solid #33BBFF;
  border-bottom: 2px solid #33BBFF;
  border-right: 2px solid #33BBFF;
  border-left:  2px solid #33BBFF;
	     border-radius: 10px 10px 10px  10px;
	
	}





.form-style-9{
	



}
.form-style-9 ul{
	padding:0;
	margin:0;
	list-style:none;
}
.form-style-9 ul li{
	display: block;
	margin-bottom: 10px;
	min-height: 35px;
}
.form-style-9 ul li  .field-style{
	box-sizing: border-box; 
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	padding: 8px;
	outline: none;
	border: 1px solid #B0CFE0;
	-webkit-transition: all 0.30s ease-in-out;
	-moz-transition: all 0.30s ease-in-out;
	-ms-transition: all 0.30s ease-in-out;
	-o-transition: all 0.30s ease-in-out;

}.form-style-9 ul li  .field-style:focus{
	box-shadow: 0 0 5px #B0CFE0;
	border:1px solid #B0CFE0;
}
.form-style-9 ul li .field-split{
	width: 49%;
}
.form-style-9 ul li .field-full{
	width: 100%;
}
.form-style-9 ul li input.align-left{
	float:left;
}
.form-style-9 ul li input.align-right{
	float:right;
}
.form-style-9 ul li textarea{
	width: 100%;
	height: 100px;
}
.form-style-9 ul li input[type="button"], 
.form-style-9 ul li input[type="submit"] {
	-moz-box-shadow: inset 0px 1px 0px 0px #3985B1;
	-webkit-box-shadow: inset 0px 1px 0px 0px #3985B1;
	box-shadow: inset 0px 1px 0px 0px #3985B1;
	background-color: #216288;
	border: 1px solid #17445E;
	display: inline-block;
	cursor: pointer;
	color: #FFFFFF;
	padding: 8px 18px;
	text-decoration: none;
	font: 12px Arial, Helvetica, sans-serif;
}
.form-style-9 ul li input[type="button"]:hover, 
.form-style-9 ul li input[type="submit"]:hover {
	background: linear-gradient(to bottom, #2D77A2 5%, #337DA8 100%);
	background-color: #28739E;
}


.savebutton {
	
	position:relative;
	top:15px;
background-color:#FFFFFF;
	      border-top: 2px solid #33BBFF;
  border-bottom: 2px solid #33BBFF;
  border-right: 2px solid #33BBFF;
  border-left:  2px solid #33BBFF;
	     border-radius: 10px 10px 10px  10px;
    padding-top: 7px; 
    padding-bottom: 24px; 
    padding-right: 5px; 
    padding-left: 5px; 
    width: 140px;
    height: 30px;
    font-size:18px;
    box-shadow: 1px 1px #000000;

    cursor:pointer;
}
.savebutton:hover {
     background-color:#3985B1;
     color:#ffffff;
}


.deletebutton {
	
	position:relative;
	top:15px;
margin-left:10px;
	      border-top: 2px solid #33BBFF;
  border-bottom: 2px solid #33BBFF;
  border-right: 2px solid #33BBFF;
  border-left:  2px solid #33BBFF;
	     border-radius: 10px 10px 10px  10px;
    padding-top: 8px; 
    padding-bottom: 5px; 
    padding-right: 5px; 
    padding-left: 5px; 

    font-size:18px;
    box-shadow: 1px 1px #000000;

    cursor:pointer;
}
.deletebutton:hover {
     background-color:#3985B1;
     color:#ffffff;
}




#footer {
	text-align:center;
    position: fixed;
    bottom: -10px;
    width: 100%;
    height: 15px;
    background-color:#eaeaea; 
    padding-bottom:0px; 
    border-top: solid 5px #33BBFF; opacity:1;
}



#trashcanicon {

     color:black;
}

#trashcanicon:hover {

     color:red;
}


.fancybox-content {
  
  padding-top:30px;
  padding-left:20px;
  padding-right:10px;
  padding-bottom:10px;
  border: 3px solid #33BBFF;
  border-radius: 10px;
  background-image: url("/images/background.png");
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */


}	

.fancybox-lock{
    margin-right:0 !important;
}
    
.fancybox-close-small {

right:200px;
}


.noinputstyle{
border:solid 1px;
width:140px;	
	}

.trclass:hover { background: #D8D8D8 !important; cursor:pointer;}
.trclass:hover td { background: transparent; cursor:pointer;}