body {
   background: #ffffff;
   padding-top: 10px;
   font-size: 100%;
}

#loadingdiv {
	background: rgba(0,0,0, .7) url('https://asp.thegymmh.com/images/loading.gif') no-repeat 50% 50%;
	display: none;
	text-align: center;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 999;
}
#cinmain {
   display: inline-block;
   font-size: 20px;
   border: 1px solid #229954;
   background-color: #52be80;
   background: #52be80;
   width: 94%;
   padding-top: 8px;
   padding-bottom: 8px;
   margin-bottom: 8px;
   border-radius: 10px 10px 10px 10px;
   box-shadow: 2px 2px 5px #229954;
}

#cinmainmobile {
   display: inline-block;
   font-size: 36px;
   border: 1px solid #229954;
   background-color: #52be80;
   background: #52be80;
   width: 100%;
   padding-top: 15px;
   padding-bottom: 15px;
   margin-bottom: 20px;
   border-radius: 10px 10px 10px 10px;
   box-shadow: 2px 2px 5px #229954;
}

#cinmainb {
   display: inline-block;
   font-size: 20px;
   border: 1px solid #21618c;
   background-color: #5dade2;
   background: #5dade2;
   width: 94%;
   padding-top: 8px;
   padding-bottom: 8px;
   margin-bottom: 8px;
   border-radius: 10px 10px 10px 10px;
   box-shadow: 2px 2px 5px #21618c;
}

#cinmainmobileb {
   display: inline-block;
   font-size: 36px;
   border: 1px solid #21618c;
   background-color: #5dade2;
   background: #5dade2;
   width: 100%;
   padding-top: 15px;
   padding-bottom: 15px;
   margin-bottom: 20px;
   border-radius: 10px 10px 10px 10px;
   box-shadow: 2px 2px 5px #21618c;
}

#coutpu {
   display: inline-block;
   font-size: 20px;
   border: 1px solid #633974;
   background-color: #AF7AC5;
   background: #AF7AC5;
   width: 94%;
   padding-top: 8px;
   padding-bottom: 8px;
   margin-bottom: 8px;
   border-radius: 10px 10px 10px 10px;
   box-shadow: 2px 2px 5px #633974;
}

#coutpumobile {
   display: inline-block;
   font-size: 36px;
   border: 1px solid #633974;
   background-color: #AF7AC5;
   background: #AF7AC5;
   width: 100%;
   padding-top: 15px;
   padding-bottom: 15px;
   margin-bottom: 20px;
   border-radius: 10px 10px 10px 10px;
   box-shadow: 2px 2px 5px #633974;
}

#cout {
   display: inline-block;
   font-size: 20px;
   color: #a6acaf;
   border: 1px solid #333333;
   background-color: #797d7f;
   background: #797d7f;
   width: 94%;
   padding-top: 8px;
   padding-bottom: 8px;
   margin-bottom: 8px;
   border-radius: 10px 10px 10px 10px;
   box-shadow: 2px 2px 5px #333333;
}

#coutmobile {
   display: inline-block;
   font-size: 36px;
   color: #a6acaf;
   border: 1px solid #333333;
   background-color: #797d7f;
   background: #797d7f;
   width: 100%;
   padding-top: 15px;
   padding-bottom: 15px;
   margin-bottom: 20px;
   border-radius: 10px 10px 10px 10px;
   box-shadow: 2px 2px 5px #333333;
}

#cpu {
   display: inline-block;
   font-size: 20px;
   border: 1px solid #d4ac0d;
   background-color: #f7dc6f;
   background: #f7dc6f;
   width: 94%;
   padding-top: 8px;
   padding-bottom: 8px;
   margin-bottom: 8px;
   border-radius: 10px 10px 10px 10px;
   box-shadow: 2px 2px 5px #d4ac0d;
}

#cpumobile {
   display: inline-block;
   font-size: 36px;
   border: 1px solid #d4ac0d;
   background-color: #f7dc6f;
   background: #f7dc6f;
   width: 100%;
   padding-top: 15px;
   padding-bottom: 15px;
   margin-bottom: 20px;
   border-radius: 10px 10px 10px 10px;
   box-shadow: 2px 2px 5px #d4ac0d;
}

#coutn {
   display: inline-block;
   font-size: 20px;
   color: #959b9e;
   border: 1px solid #333333;
   background-color: #b3b6b7;
   background: #b3b6b7;
   width: 94%;
   padding-top: 8px;
   padding-bottom: 8px;
   margin-bottom: 8px;
   border-radius: 10px 10px 10px 10px;
   box-shadow: 2px 2px 5px #333333;
}

#coutnmobile {
   display: inline-block;
   font-size: 36px;
   color: #959b9e;
   border: 1px solid #333333;
   background-color: #b3b6b7;
   background: #b3b6b7;
   width: 100%;
   padding-top: 15px;
   padding-bottom: 15px;
   margin-bottom: 20px;
   border-radius: 10px 10px 10px 10px;
   box-shadow: 2px 2px 5px #333333;
}

#clate {
   display: inline-block;
   font-size: 20px;
   border: 1px solid #7b241c;
   background-color: #e74c3c;
   background: #e74c3c;
   width: 94%;
   padding-top: 8px;
   padding-bottom: 8px;
   margin-bottom: 8px;
   border-radius: 10px 10px 10px 10px;
   box-shadow: 2px 2px 5px #7b241c;
}

#clatemobile {
   display: inline-block;
   font-size: 36px;
   border: 1px solid #7b241c;
   background-color: #e74c3c;
   background: #e74c3c;
   width: 100%;
   padding-top: 15px;
   padding-bottom: 15px;
   margin-bottom: 20px;
   border-radius: 10px 10px 10px 10px;
   box-shadow: 2px 2px 5px #7b241c;
}

.studentmenu, #daysabs {
   display: none;
   font-size: 34px;
   position: fixed;
   height: auto;
   background-color: #cccccc;
   border: 1px solid #333333;
   border-radius: 10px 10px 10px 10px;
   box-shadow: 2px 2px 5px #333333;
   padding: 5px;
   top: 50%;
   left: 50%;
   height: 530px;
   width: 515px;
   margin-top: -250px;
   margin-left: -250px;
}

.studentmenu div#close {
   position: absolute;
   top: 0px;
   right: 0px;
   height: 30px;
   width: 30px;
   padding: 8px;
   cursor: pointer;
}

.studentmenu img#closeb {
   position: absolute;
   top: 0px;
   right: 0px;
   height: 30px;
   width: 30px;
   padding: 8px;
   cursor: pointer;
}

img#closeb {
   position: absolute;
   top: 0px;
   right: 0px;
   height: 30px;
   width: 30px;
   padding: 8px;
   cursor: pointer;
}

.micon {
   border-radius: 10px 10px 10px 10px;
   box-shadow: 2px 2px 5px #333333;
   border: 1px solid #333333;
   height: 143px;
   width: 143px;
   margin-left: 10px;
   margin-right: 10px;
   margin-top: 10px;
   background-color: white;
   cursor: pointer;
}

.miconoff {
   border-radius: 10px 10px 10px 10px;
   box-shadow: 2px 2px 5px #333333;
   border: 1px solid #333333;
   height: 143px;
   width: 143px;
   margin-left: 10px;
   margin-right: 10px;
   margin-top: 10px;
   opacity: 0.2;
   cursor: not-allowed;
}

.schoolname {
   display: inline-block;
   text-align: center;
   font-size: 36px;
   border: 1px solid #333333;
   background-color: #a6acaf;
   width: 100%;
   padding-top: 15px;
   padding-bottom: 15px;
   margin-bottom: 20px;
   border-radius: 10px 10px 10px 10px;
   box-shadow: 2px 2px 5px #333333;
}

.driverselect {
   font-size: 56px;
}

.satsin {
   display: inline-block;
   font-size: 36px;
   text-align: center;
   border: 1px solid #229954;
   background-color: #52be80;
   width: 100%;
   padding-top: 15px;
   padding-bottom: 15px;
   margin-bottom: 5px;
   border-radius: 10px 10px 10px 10px;
   box-shadow: 2px 2px 5px #229954;
   cursor: pointer;
}

.satsinh {
   display: none;
   font-size: 36px;
   text-align: center;
   border: 1px solid #229954;
   background-color: #52be80;
   width: 100%;
   padding-top: 15px;
   padding-bottom: 15px;
   margin-bottom: 5px;
   border-radius: 10px 10px 10px 10px;
   box-shadow: 2px 2px 5px #229954;
   cursor: pointer;
}

.satsout {
   display: inline-block;
   font-size: 36px;
   text-align: center;
   border: 1px solid #d4ac0d;
   background-color: #f7dc6f;
   width: 100%;
   padding-top: 15px;
   padding-bottom: 15px;
   margin-bottom: 5px;
   border-radius: 10px 10px 10px 10px;
   box-shadow: 2px 2px 5px #d4ac0d;
   cursor: pointer;
}

.satsoutn {
   display: inline-block;
   font-size: 36px;
   text-align: center;
   border: 1px solid #333333;
   background-color: #797d7f;
   width: 100%;
   padding-top: 15px;
   padding-bottom: 15px;
   margin-bottom: 20px;
   border-radius: 10px 10px 10px 10px;
   box-shadow: 2px 2px 5px #333333;
}

.schoollist {
   display: none;
}

#studentunloadp{
   width: 100%;
   text-align: center;
}

#studentunload{
   align: center;
   display: inline-block;
   text-align: center;
   font-size: 36px;
   border: 1px solid #333333;
   background-color: #a6acaf;
   width: 60%;
   padding-top: 15px;
   padding-bottom: 15px;
   border-radius: 10px 10px 10px 10px;
   box-shadow: 2px 2px 5px #333333;
}

::placeholder { color: #21618c; opacity: 1; }

input {
	letter-spacing: normal;
	word-spacing: normal;
	text-transform: none;
	text-shadow: none;
	text-indent: 2px;
	text-align: start;
}

#profile { font-size: 1.5em; font-weight: bold; }
#txtname { font-size: 2em; font-weight: bold; }

input[type='text'], input[type='email'], input[type='tel'], input[type='date'], input[type='button'], input[type='submit'], input[type='time'], select, button {
   border: 1px solid #9e9fa0;
   color: #555555;
   background-color: white;
   padding: 2px;
   border-radius: 5px 5px 5px 5px;
   box-shadow: 2px 2px 5px #9e9fa0;
   margin: 2px;
   vertical-align: middle;
}

input[type='time'] {
  width: 115px;
}

input[type='radio'], input[type='checkbox'] {
   border: 1px solid #9e9fa0;
   color: #555555;
   padding: 2px;
   margin: 2px;
   vertical-align: middle;
}
@supports (zoom:2) {
   input[type='checkbox'], input[type='radio'] { zoom: 1.2 }
}
@supports not (zoom:2) {
   input[type='checkbox'], input[type='radio'] { transform: scale(1.2); margin: 15px; }
}

input[type='button'], input[type='submit'], button {
   cursor: pointer;
   font-size: 12px;
   font-weight: bold;
   line-height: 15px;
   text-align: center;
   margin: 0px 2px;
   padding: 2px 8px;
   background-color: #eee;
   border: 1px solid #aaa;
}

label {
   display: inline-block;
   color: #232329;
   font-weight: normal;
   clear: both;
   width: 200px;
   white-space: normal;
   cursor: pointer;
   margin: 0;
   vertical-align: baseline;
}

fieldset { border: 1px solid #333333; border-radius: 10px 10px 10px 10px; }

legend {
   float:left;
   padding-left: 5px;
   width: 100%;
   font-weight: bold;
   color: red;
}

#prelsinner, #addressinner, #contactinner, #editnameinner, #addinfoinner, #asschedinner, #classschedinner, #authpuinner, #ynotesinner, #photoinner, #sactiveinner { display: none; }
#prels, #address, #contact, #editname, #additionalinfo, #assched, #classsched, #authpu, #ynotes, #photo, #sactive, #cnotes {
	margin-bottom: 5px;
	background-color: white;
	border-radius: 10px 10px 10px 10px;
}
.arrow { width: 15px; vertical-align:middle; }

.alert { font-size: 18px; border-radius: 0; padding-top: 1px; padding-bottom: 1px; padding-left: 10px; margin-bottom: 10px; border: 1px solid transparent; }
.alert-info { background-color: #d9edf7; border-color: #bce8f1; color: #31708f; }

#adultinfo {
   width: 96%;
   text-align: left;
   padding: 5px;
}

#adultinfom {
	text-align: center;
	padding: 10px;
	border: 0px solid #D5D8DC;
	background-color: #D5D8DC;
	margin: 10px;
}

ul { list-style: none; list-style-type: none; list-style-position: inside; margin: 2px 0px 2px 0px; background-color: #ffffff;}
li { background-color: #ffffff; padding-left: 23px; padding-top: 2px; padding-bottom: 2px; vertical-align: baseline; border: 0; margin: 0; padding: 0;}
img { vertical-align: middle; padding: 0 2px; }
.submit { background: #4b92c5; border-color: #3c86ba; color: #fff; padding: 6px 50px; font-weight: bold; }
.delete { width: 20px; }
#yage {
   color: #555555;
   padding: 2px;
   margin: 2px;
   vertical-align: middle;
}

.hw { display: inline-block; }

.dayofweek { text-align: right; font-weight: bold; padding-right: 30px; width: 90px; }

span.s-birthday-present-16px {
    background-position: 0 -1406px;
    width: 16px;
    height: 16px;
    padding-right: 5px;
}

span.s-gender-pref-male-dark-10px {
    background-position: -198px -512px;
    width: 10px;
    height: 10px;
    zoom: 1.3;
}

span.s-gender-pref-female-dark-10px {
    background-position: -198px -392px;
    width: 6px;
    height: 10px;
    zoom: 1.3;
}
span.s-client-notes-16px {
    background-position: -88px -132px;
    width: 15px;
    height: 16px;
}

.s-icon {
    background: url(../images/adm-s1.png) no-repeat;
    vertical-align: middle;
    display: inline-block;
}

.photoBox {

    float: left;
    padding-bottom: 20px;
    text-align: center;
}

.photos {
    width: 100%;
    overflow: hidden;
}

.photoBox img {
    margin-bottom: 5px;
}


#targetOuter{
	position:relative;
    text-align: center;
    background-color: #F0E8E0;
    margin: 20px auto;
    width: 200px;
    height: 200px;
	border-radius: 4px;
}
.btarget { margin-top: -17px; margin-bottom: 5px; }
.btnSubmit {
    background-color: #565656;
    border-radius: 4px;
    padding: 10px;
    border: #333 1px solid;
    color: #FFFFFF;
    width: 200px;
	cursor:pointer;
}
.inputFile {
    padding: 5px 0px;
	margin-top:8px;
    background-color: #FFFFFF;
    width: 48px;
    overflow: hidden;
	opacity: 0;
	cursor:pointer;
}
.icon-choose-image {
    position: absolute;
    opacity: 0.1;
    top: 50%;
    left: 50%;
    margin-top: -24px;
    margin-left: -24px;
    width: 48px;
    height: 48px;
}

.menubar {  background-image: url('../images/Hamburger_icon.png'); }

.upload-preview {border-radius:4px;}
#body-overlay {background-color: rgba(0, 0, 0, 0.6);z-index: 999;position: absolute;left: 0;top: 0;width: 100%;height: 100%;display: none;}
#body-overlay div {position:absolute;left:50%;top:50%;margin-top:-32px;margin-left:-32px;}

#coheader {
   background: #2f2f2f;
   background-image: -ms-linear-gradient(top, #6f6f6f 0%, #1b1a1a 100%);
   background-image: -moz-linear-gradient(top, #6f6f6f 0%, #1b1a1a 100%);
   background-image: -o-linear-gradient(top, #6f6f6f 0%, #1b1a1a 100%);
   background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #6f6f6f), color-stop(1, #1b1a1a));
   background-image: -webkit-linear-gradient(top, #6f6f6f 0%, #1b1a1a 100%);
   background-image: linear-gradient(top, #6f6f6f 0%, #1b1a1a 100%);
   filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#6f6f6f', endColorstr='#1b1a1a');
}

#coheader { clear:both; }

#coheader-inside { margin: 0 auto; padding-top: 20px; padding-bottom: 20px; padding-left: 20px; overflow:hidden; }

.center-ch { text-align: center; }
.center { text-align: center; margin: 0 auto; }
.left { text-align: left; }
.right { text-align: right; }
.nosize { width: auto; }
.centerline { vertical-align: middle; }
.mtextbig { font-size: 1.5em; color: black !important; }
.mtext { font-size: 1.3empx; color: black !important; }
.nowrap { white-space: nowrap; }
.headtext { float: left; margin: 0px; padding: 0px; font-size: 1.7em;}
h4 { line-height: 23.4px; }
h1, h2, h3, h4, h5 { margin: 0; padding: 0; text-rendering: optimizelegibility; }
table { border-collapse: collapse; border-spacing: 0; }
.selrel { font-weight: bold; }
.selrelm { font-weight: bold; }
.selrel2 { font-weight: bold; font-size: 22px; }
.newrelform { display: none; }
table.classes { width: 350px; border: 1px solid #333333; }
.brder { border: 1px solid #000000; border: collapse; }

/* Style the navigation menu */
.topnav {
  overflow: hidden;
  background-color: #fff;
  position: relative;
}

/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
  display: none;
  background-color: #333;
}

/* Style navigation menu links */
.topnav a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}

/* Style the hamburger menu */
.topnav a.icon {
  background: black;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

.topnav #myLinks a:hover {
  background-color: #ddd;
  color: black;
}



@media screen and (max-width: 999px) {
	.studentmenu img#closeb { width: 45px; height: 45px; }
	legend {
		font-size: 3em;
	}
	table.classes { width: 100%; }
        input[type='text'], input[type='email'], input[type='tel'], input[type='date'], input[type='button'], input[type='submit'], button, select, label, .selrel, .selrelnb { font-size: 2.5em; }
        .selrelm, .selrelmnb { font-size: 2em; }
        input[type='submit'].submitm { font-size: 1.8em; }
        .nhead, .selrelnbm { font-size: 1.7em; }
        @supports (zoom:2) {
           input[type='checkbox'], input[type='radio'] { zoom: 2.5 }
        }
        @supports not (zoom:2) {
           input[type='checkbox'], input[type='radio'] { transform: scale(2.5); margin: 15px; }
        }
	#mailicon { width: 50px; }
	#profile { font-size: 2em; font-weight: bold; }
	#txtname { font-size: 4em; font-weight: bold; }
	.submit, #relname, #reltype, #assignrel, .typelbl { font-size: 2.5em; }
        .delete { width: 50px; }
        #yage { font-size: 3em; }
        .dayofweek { width: 275px; }
        .arrow { width: 50px; }
        label { white-space: nowrap; width: 300px; }
        .selrel2 { font-size: 2.6em; }

	span.s-birthday-present-16px {
	    background-position: 0 -1406px;
	    width: 16px;
	    height: 16px;
	    padding-right: 5px;
	    zoom: 2.2;
	}
	span.s-gender-pref-male-dark-10px {
	    background-position: -198px -512px;
	    width: 10px;
	    height: 10px;
	    zoom: 2.5;
	}
	span.s-gender-pref-female-dark-10px {
	    background-position: -198px -392px;
	    width: 6px;
	    height: 10px;
	    zoom: 2.5;
	}
	span.s-client-notes-16px {
	    background-position: -88px -132px;
	    width: 15px;
	    height: 16px;
	    zoom: 2.2;
	}
	#targetOuter{
	    width: 350px;
	    height: 350px;
	}
	.btnSubmit {
	    width: 350px;
	}
	.icon-choose-image {
	    margin-top: -48px;
	    margin-left: -48px;
	    width: 96px;
	    height: 96px;
	}
}

.col-centered {
    float: none;
    margin: 0 auto;
    text-align: center;
}

.widget-box {
    padding: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    margin: 3px 0;
    border: 1px solid #ccc;
}
.widget-header {
    background: #f7f7f7;
    background-image: -webkit-linear-gradient(top,#fff 0%,#eee 100%);
    background-image: -o-linear-gradient(top,#fff 0%,#eee 100%);
    background-image: linear-gradient(to bottom,#fff 0%,#eee 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffeeeeee',GradientType=0);
    color: #669fc7;
    border-bottom: 1px solid #ddd;
    padding-left: 12px;
    vertical-align: middle;
}

.widget-main {
    padding: 12px;
}
@media print {
    .pagebreak { page-break-before: always; } 
}