/****************************************************************************
 -----> mobile.css  
 ---------> Author: cburt
 ---------> Created: 9 Dec 2015
 *
 * TODO (Description)
 *
 * Usage Ex: This is the style that is loaded for mobile devices (based on screen size)
 *           It's mostly styles that were already written, adapted for smaller screens
 * 			 This file is loaded from v_header.php 
 *
 ****************************************************************************/

/*----------------------------------Styles for Mobile -----------------------------------------------------*/

    .popover{
        max-width:99%;
    }

.doghouse {
	display:block;
	margin-left:auto;
	margin-right:auto;


}

h1{
	
	font-size:125%;
	margin-top:-15px;
	margin-bottom:-10px;
	text-align:center;
}


body{
	
/*font-family: Andale Mono, monospace;*/
font-family: Arial, Helvetica;
	
}

/* Text input fields throughout the app*/


input.default[type="text"], input.default[type="password"], label.default, select.default, textarea.default, .drop-toggle {
    font-size: 12pt;
    margin: 0.5em;
    padding: 0.3em;
}

input.default, textarea.default, .drop-toggle {
    background-color: #fafafa;
    border: 1px solid #919191;
    border-radius: 4px;
}

/* dove colored table headers throughout the app*/

.dove_hdr {
	
	border: 1px solid gray;
	border-collapse: border-collapse;
	padding:.5em;
	border-collapse: border-collapse;
	padding:.5em;
	background-color: #caccb6;
	color:#000000;
	text-align:left;
	font-size:110%;
	
} 

.dove_hdr_small {
	border: 1px solid gray;
	border-collapse: border-collapse;
	padding:.5em;
	border-collapse: border-collapse;
	padding:.5em;
	background-color: #caccb6;
	color:#000000;
	text-align:left;
	font-size:90%;
	
}

th.default {
    background-color: #fafafa;
    border-bottom: 1px solid #686868;
    table-layout: fixed;
    text-align: left;
}

th.appt td.appt {

color:black;
text-align:center;
font-size:85%;

}

.white {
background-color: #ffffff;
padding-top:5px;
padding-bottom:5px;
}

table.appt {
	
	width:90%;
	
}

td.BS{
	font-size:75%;
	border:1px solid #000000;
	border-style:solid;
	color: #000000;
}

/*Standard yellow highlight throughout the app */

.yello {

	background-color: #f0e47e;
}


/* Buttons throughout the app*/

.button:not(.drop-toggle), input[type="submit"], button:not([class*="drop-toggle"]) {
    background-color: #8e9e82;
    border: 1px solid #808e75;
    border-radius: 3px;
    color: #000000;
    font-size: 12px;
    padding: 5px 10px;
    text-decoration: none;
}

/*Class for hiding stuff*/
.unseen {
            display: none;
        }


/* Nav menu*/

#frame_body
	{
		background-color:#F0F0F0;
	}
	 #frame_logo
	{
		display: inline;
		/*position: absolute;*/
	    top: 5px;
	    left: 60px;
	 }
	 #frame_logo_l
	{
		display: inline;
		/*position: absolute;*/
	    top: 5px;
	    left: 60px;
	 }
	 #frame_header
	 {
	 	width:100%;
	 	height:60px;
	 	background-color: white;
	 }
	 
	 #frame_hr
	 {
	 	width:100%;
	 	height:2px;
	 	background-color: #C0C0C0;	
	 }
	
	#frame_hr2
	{
	 	width:100%;
	 	height:6px;
	 	background-image: linear-gradient(to bottom, #989898  0%, #989898 5%, #F0F0F0 100%);
	}
	
	#frame_logo
	{
		display: inline;
		position: absolute;
	    top: 5px;
	    left: 60px;
	 }
	
	#frame_main
	{
    	display: block;
    	position: relative;
    	background-color: white;
		background-image: repeating-linear-gradient(45deg, transparent 5px, rgba(250, 250, 250, 0.5) 5px, rgba(250, 250, 250, 0.5) 10px, transparent 10px, transparent 35px, rgba(238, 238, 238, 0.5) 35px, rgba(238, 238, 238, 0.5) 40px, rgba(250, 250, 250, 0.5) 40px, rgba(250, 250, 250, 0.5) 50px, transparent 50px, transparent 60px, rgba(238, 238, 238, 0.5) 60px, rgba(238, 238, 238, 0.5) 70px, rgba(213, 255, 159, 0.3) 70px, rgba(213, 255, 159, 0.3) 80px, transparent 80px, transparent 90px, rgba(238, 238, 238, 0.5) 90px, rgba(238, 238, 238, 0.5) 110px, transparent 110px, transparent 120px, rgba(250, 250, 250, 0.5) 120px, rgba(250, 250, 250, 0.5) 140px), repeating-linear-gradient(135deg, transparent 5px, rgba(250, 250, 250, 0.5) 5px, rgba(250, 250, 250, 0.5) 10px, transparent 10px, transparent 35px, rgba(238, 238, 238, 0.5) 35px, rgba(238, 238, 238, 0.5) 40px, rgba(250, 250, 250, 0.5) 40px, rgba(250, 250, 250, 0.5) 50px, transparent 50px, transparent 60px, rgba(238, 238, 238, 0.5) 60px, rgba(238, 238, 238, 0.5) 70px, rgba(213, 255, 159, 0.3) 70px, rgba(213, 255, 159, 0.3) 80px, transparent 80px, transparent 90px, rgba(238, 238, 238, 0.5) 90px, rgba(238, 238, 238, 0.5) 110px, transparent 110px, transparent 140px, rgba(250, 250, 250, 0.5) 140px, rgba(250, 250, 250, 0.5) 160px);
		margin: 0;
		padding: 0;
		height: 300px;
		float: left; 
		white-space: nowrap;
		overflow-y: auto;
		overflow-x: hidden;
		z-index: 9999;
		display:block;
		width:100%;
	}
	
#frame_nav_button
{
	color: #000000;
	background-image: linear-gradient(to bottom, #BDC1AC 0%, #BDC1AC 25%, #8E9E82 100%);
	display:block;
  	width:100%;
  	border: #5f7247;
  	font-size: 20px;
}
	
	#frame_submenu a
	{
		/* appearance: button;
	    -moz-appearance: button;
	    -webkit-appearance: button;*/
	   	text-decoration: none; font: menu; color: black;
	    display: inline-block; padding: 2px 8px;
	    font-size: 18px;
	    font-family: Arial, Helvetica;
	}
	
	#frame_side_nav 
	{
		background-image: repeating-linear-gradient(45deg, transparent 5px, rgba(250, 250, 250, 0.5) 5px, rgba(250, 250, 250, 0.5) 10px, transparent 10px, transparent 35px, rgba(238, 238, 238, 0.5) 35px, rgba(238, 238, 238, 0.5) 40px, rgba(250, 250, 250, 0.5) 40px, rgba(250, 250, 250, 0.5) 50px, transparent 50px, transparent 60px, rgba(238, 238, 238, 0.5) 60px, rgba(238, 238, 238, 0.5) 70px, rgba(213, 255, 159, 0.3) 70px, rgba(213, 255, 159, 0.3) 80px, transparent 80px, transparent 90px, rgba(238, 238, 238, 0.5) 90px, rgba(238, 238, 238, 0.5) 110px, transparent 110px, transparent 120px, rgba(250, 250, 250, 0.5) 120px, rgba(250, 250, 250, 0.5) 140px), repeating-linear-gradient(135deg, transparent 5px, rgba(250, 250, 250, 0.5) 5px, rgba(250, 250, 250, 0.5) 10px, transparent 10px, transparent 35px, rgba(238, 238, 238, 0.5) 35px, rgba(238, 238, 238, 0.5) 40px, rgba(250, 250, 250, 0.5) 40px, rgba(250, 250, 250, 0.5) 50px, transparent 50px, transparent 60px, rgba(238, 238, 238, 0.5) 60px, rgba(238, 238, 238, 0.5) 70px, rgba(213, 255, 159, 0.3) 70px, rgba(213, 255, 159, 0.3) 80px, transparent 80px, transparent 90px, rgba(238, 238, 238, 0.5) 90px, rgba(238, 238, 238, 0.5) 110px, transparent 110px, transparent 140px, rgba(250, 250, 250, 0.5) 140px, rgba(250, 250, 250, 0.5) 160px);
   		left: 0px;
		top: 10px;
		height: 52px;
		width: 57px;
		margin: 0;
		padding: 0;
		position: fixed;
		z-index: 9999;
		display:block;
		background-color: #8e9e82;
	}	
	
	.frame_title
{
	display: flex;
	position: relative;
    top: 5px;
    left:130px;
    font-size: 12px;
    text-align:left;
}

.frame_welcome
{
	display: flex;
	position: relative;
    top: 10px;
    left: 125px;
    right:0px;
    font-size:11px;
    width:100%;
    
}	

/* These are here to correct the distortion on the badges that is caused by using display: flex - CB 31 Mar 2016 */
#mobileimg {
        display: flex;
        position:relative;
        margin-top: 20px;
    }
    
    .img-badge {
        width: 100%;
        height: 100%;
    }
    
    /* End flex display correction */

.frame_logout {
	
	display: flex;
	position:relative;
	left:6px;
}



/* Dashboard page- boxes and headers */

.top10title{
	border-bottom: 3px solid #808e75;
	padding:2px;
	text-align:center;
	font-size:large;
	font-weight:bold;
	background-color:#caccb6;
	color:#000000;
}

.top10box{
	min-width: 14em;
	width: 90%; 

	display:inline-block;
	border:1px solid #808e75;
	padding:1px;
	margin:.3em;
	background-color: #fff;
	font-size: 90%;

}

.top10name{
	clear: both;
	overflow: hidden; 
	width: auto;
	height: auto;
	float: left;
	display:table-cell;
	padding: .2em;
	color:#000000;
}
.top10dol{
	width: 50%;
	padding: .15em;
	color:#000000;
	text-align: center;
	float: right;
}

/*Login Buttons*/


	input[type="submit"].rounded_full
{
    padding: 5px 10px;
    font-size: large;
    text-decoration: none;
    border: 1px solid #23506d;
    background-color: #5795BB;
    border-radius: 10px;
    color: #ffffff;
   	width: 100%;
}
input[type="submit"].btn-5 {
  border: 2 solid;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
  outline: 2px solid;
  outline-color: rgba(255, 255, 255, .5);
  outline-offset: 0px;
  text-shadow: none;
  transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
  color: #ffffff;
  width: 100%;
  border-radius: 10px;
  padding: 5px 10px;
  font-size: large;
  background-color: #5795BB;
} 

input[type="submit"].btn-5:hover {
  border: 2px solid;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, .5), 0 0 20px rgba(255, 255, 255, .2);
  outline-color: rgba(255, 255, 255, 0);
  outline-offset: 15px;
  color: #ffffff;
  width: 100%;
  border-radius: 10px;
  padding: 5px 10px;
  font-size: large;
  background-color: #6fbfed;
}

input[type="submit"].submit
{
    padding: 5px 10px;
    font-size: large;
    text-decoration: none;
    border: 1px solid #23506d;
    background-color: #5795BB;
    border-radius: 3px;
    color: #000;
}

input[type="text"].rounded_large, input[type="password"].rounded_large
{
    border: 1px solid #23506d;
    background-color: #fff;
    font-size: 12pt;
	padding: 0.3em;
	margin: 0.5em;
    border-radius: 4px;
}

input[type=radio].login_large
{
	width: 1.5em;
    height: 1.5em;
}

select.rounded_left
{
	height: 28px;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	border: 1px solid #CCC;
	font-weight: 150;
	font-size: 12px;
	font-family: Verdana;
	box-shadow: 1px 1px 5px #CCC;
}
input[type="submit"].rounded_right
{
    padding-right: 1px;
    padding-left: 1px;
    padding-bottom: 3px;
    padding-top: 1px;
    font-size: large;
    text-decoration: none;
    border: 1px solid #23506d;
    background-color: #5795BB;
    border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
    color: #000;
}

input[type="submit"].rounded_right:hover 
{
    padding-right: 1px;
    padding-left: 1px;
    padding-bottom: 3px;
    padding-top: 0px;
    font-size: large;
    text-decoration: none;
    border: 1px solid #23506d;
    background-color: #6fbfed;
    border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
    color: #000;
} 

td.login_large_right
{
	color: #787878;
	font-family: "Arial", sans-serif;;
	font-size: x-large;
	text-align: right;
	padding-top: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
}

td.login_large_center
{
	color: #787878;
	font-family: "Arial", sans-serif;
	font-size: 90%;
	text-align:center;
	padding-top:5px;
    padding-right: 15px;
   
    padding-left: 15px;
}

/*General Table style*/

table.info, table.info th.r, table.info td.r {
	border: 1px solid gray;
	border-collapse: collapse;
	padding:.5em;
	font-size:100%;
}

table.info_wide {
	
	border: 1px solid gray;
	border-collapse: collapse;
	padding:.5em;
	background-color:#ffffff;
	font-size:100%;
	width:100%
}

table.info_33{
	border: 1px solid gray;
	border-collapse: collapse;
	padding:.5em;
	background-color:#ffffff;
	font-size:100%;
	width:33%
}


.info_grid {
	border: 1px solid gray;
	border-collapse: collapse;
	padding:.5em;
	background-color:#ffffff;
	font-size:90%;
	width:100%;
	text-align:right;
	margin-right:10px;
}

.info_grid_left {
border: 1px solid gray;
	border-collapse: collapse;
	padding:.5em;
	background-color:#ffffff;
	font-size:70%;	
}

.info_grid_wide {
border: 1px solid gray;
	border-collapse: collapse;
	padding:.5em;
	background-color:#ffffff;
	font-size:90%;	
	width:100%;
}

table.report_table, td.report_table, tr.report_table {
	border-collapse: collapse;
	border-right: 1px solid gray;
	border-collapse: collapse;
	border-bottom: 1px solid gray;
	padding:.5em;
	text-align:center;
	width: 100%;
	font-size:95%;
	
}

.info-grid-format {
	
	border: 1px solid gray;
	border-collapse: collapse;
	padding:.5em;
	background-color:#ffffff;
}

div.info	{
	border: 1px solid gray;
	border-collapse: collapse;
	padding:.5em;
	background-color:#ffffff;
	font-size:90%;
	width:100%;
}
	
	
/*Styles for contact page*/
	
	.repbg {
	background-color: #ffffff;
}

.bmbg {
	
	background-color: #caccb6;
}

.rmbg{
	background-color: #a9c1d9;
	
}

th.header
{
	font-size: 100%;
	 background-color: #8E9E82;
	 color: #363d30;
	 text-align:left;
}

.dk_hdr {
	border-right: 1px solid gray;
	border-collapse: collapse;
	padding:.5em;
	background-color: #8E9E82;
	color:#000000;
	text-align:left;
	font-size:125%;
}

.dk_hdr_small {
	border-right: 1px solid gray;
	border-collapse: collapse;
	padding: 0px;
	background-color: #8E9E82;
	color:#000000;
	text-align:left;
}

.sub_hdr {
	border-right: 1px solid gray;
	border-collapse: collapse;
	border-bottom: 1px solid gray;
	padding:.5em;
	background-color: #f2f0df;
	color:#000000;
	text-align:center;
	font-size:90%;
	
}

.sub_hdr_small {
	/*border-right: 1px solid gray;*/
	border-collapse: collapse;
	border-bottom: 1px solid gray;
	border-top: 1px solid gray;
	padding:.5em;
	background-color: #f2f0df;
	color:#000000;
	text-align:center;
	font-size:80%;
	
}

/* Classes for search forms & results*/

.srch {
	
	border: solid 1px; 
	background-color:#ffffff;
	width:100%;
	margin-left:0px;
	font-size:95%;
	
}

td.result {
	border-collapse: collapse;
	border-bottom: solid 1px;
	background-color:#fff;
	
}


.btn-link {
	
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: solid 1px #808e75;
    background:#8E9E82;
    color:#000;
    padding:1px;
    text-decoration:none;
}

.total {
    background-color: #f0e47e;
    font-size: 90%;
    padding-bottom: 3px;
    padding-top: 3px;
}

/*Loader */

#inTurnFadingTextG{
	width:234px;
	margin:auto;
}

.inTurnFadingTextG{
	color:rgb(0,0,0);
	font-family:Arial;
	font-size:24px;
	text-decoration:none;
	font-weight:normal;
	font-style:normal;
	float:left;
	animation-name:bounce_inTurnFadingTextG;
		-o-animation-name:bounce_inTurnFadingTextG;
		-ms-animation-name:bounce_inTurnFadingTextG;
		-webkit-animation-name:bounce_inTurnFadingTextG;
		-moz-animation-name:bounce_inTurnFadingTextG;
	animation-duration:2.09s;
		-o-animation-duration:2.09s;
		-ms-animation-duration:2.09s;
		-webkit-animation-duration:2.09s;
		-moz-animation-duration:2.09s;
	animation-iteration-count:infinite;
		-o-animation-iteration-count:infinite;
		-ms-animation-iteration-count:infinite;
		-webkit-animation-iteration-count:infinite;
		-moz-animation-iteration-count:infinite;
	animation-direction:normal;
		-o-animation-direction:normal;
		-ms-animation-direction:normal;
		-webkit-animation-direction:normal;
		-moz-animation-direction:normal;
}

#inTurnFadingTextG_1{
	animation-delay:0.75s;
		-o-animation-delay:0.75s;
		-ms-animation-delay:0.75s;
		-webkit-animation-delay:0.75s;
		-moz-animation-delay:0.75s;
}
#inTurnFadingTextG_2{
	animation-delay:0.9s;
		-o-animation-delay:0.9s;
		-ms-animation-delay:0.9s;
		-webkit-animation-delay:0.9s;
		-moz-animation-delay:0.9s;
}
#inTurnFadingTextG_3{
	animation-delay:1.05s;
		-o-animation-delay:1.05s;
		-ms-animation-delay:1.05s;
		-webkit-animation-delay:1.05s;
		-moz-animation-delay:1.05s;
}
#inTurnFadingTextG_4{
	animation-delay:1.2s;
		-o-animation-delay:1.2s;
		-ms-animation-delay:1.2s;
		-webkit-animation-delay:1.2s;
		-moz-animation-delay:1.2s;
}
#inTurnFadingTextG_5{
	animation-delay:1.35s;
		-o-animation-delay:1.35s;
		-ms-animation-delay:1.35s;
		-webkit-animation-delay:1.35s;
		-moz-animation-delay:1.35s;
}
#inTurnFadingTextG_6{
	animation-delay:1.5s;
		-o-animation-delay:1.5s;
		-ms-animation-delay:1.5s;
		-webkit-animation-delay:1.5s;
		-moz-animation-delay:1.5s;
}
#inTurnFadingTextG_7{
	animation-delay:1.64s;
		-o-animation-delay:1.64s;
		-ms-animation-delay:1.64s;
		-webkit-animation-delay:1.64s;
		-moz-animation-delay:1.64s;
}




@keyframes bounce_inTurnFadingTextG{
	0%{
		color:rgb(0,0,0);
	}

	100%{
		color:rgb(255,255,255);
	}
}

@-o-keyframes bounce_inTurnFadingTextG{
	0%{
		color:rgb(0,0,0);
	}

	100%{
		color:rgb(255,255,255);
	}
}

@-ms-keyframes bounce_inTurnFadingTextG{
	0%{
		color:rgb(0,0,0);
	}

	100%{
		color:rgb(255,255,255);
	}
}

@-webkit-keyframes bounce_inTurnFadingTextG{
	0%{
		color:rgb(0,0,0);
	}

	100%{
		color:rgb(255,255,255);
	}
}

@-moz-keyframes bounce_inTurnFadingTextG{
	0%{
		color:rgb(0,0,0);
	}

	100%{
		color:rgb(255,255,255);
	}
}