@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

* {
  box-sizing: border-box;
}

.row {
  margin-left:-5px;
  margin-right:-5px;
}
  
.column {
  float: left;
  
  padding: 5px;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}

tr:nth-child(even) {
  background-color: #D6EEEE;
}
table {
    border: 1px solid black;
}
th {
    background-color: #757cba;
    border: 1px solid black;
}
td {
    border: 1px solid black;
}
tr {

    border-bottom: 1px solid #ddd;
    border: 1px solid black;
    vertical-align:top;
}
form {
    margin-bottom: 0px;
}
@viewport {
  width: device-width ;
  zoom: 1.0 ;
}

@-ms-viewport {
  width: device-width ;
} 

@media screen and (max-width:320px) {
  /* CSS for screens that are 320 pixels or less will be put in this section */
}

@media screen and (min-width:320px) and (max-width:640px) {
  /* for screens that are at least 320 pixels wide but less than or equal to 640 pixels wide */
} 
div.signature-pad {
    margin: auto;
    border: 3px solid #73AD21;
    width: 500px;
}
#present-icon {
  background-image: url('Images/Present.png'); /* Change url to wanted image */
  background-size: cover;
  border: none;
  width: 156px;
  height: 50px;
  cursor: pointer;
  color: transparent;
}
#book-icon {
  background-image: url('Images/Book.png'); /* Change url to wanted image */
  background-size: cover;
  border: none;
  width: 156px;
  height: 50px;
  cursor: pointer;
  color: transparent;
}
#bible-icon {
  background-image: url('Images/Bible.png'); /* Change url to wanted image */
  background-size: cover;
  border: none;
  width: 156px;
  height: 50px;
  cursor: pointer;
  color: transparent;
}
#vest-icon {
  background-image: url('Images/Vest.png'); /* Change url to wanted image */
  background-size: cover;
  border: none;
  width: 156px;
  height: 50px;
  cursor: pointer;
  color: transparent;
}
#dues-icon {
  background-image: url('Images/Dues.png'); /* Change url to wanted image */
  background-size: cover;
  border: none;
  width: 156px;
  height: 50px;
  cursor: pointer;
  color: transparent;
}
#theme-icon {
  background-image: url('Images/Theme.png'); /* Change url to wanted image */
  background-size: cover;
  border: none;
  width: 156px;
  height: 50px;
  cursor: pointer;
  color: transparent;
}
#friend-icon {
  background-image: url('Images/Friend.png'); /* Change url to wanted image */
  background-size: cover;
  border: none;
  width: 156px;
  height: 50px;
  cursor: pointer;
  color: transparent;
}
#present-icon-check {
  background-image: url('Images/check.png'); /* Change url to wanted image */
  background-size: cover;
  border: none;
  width: 32px;
  height: 32px;
  cursor: pointer;
  color: transparent;
}
#book-icon-check {
  background-image: url('Images/check.png'); /* Change url to wanted image */
  background-size: cover;
  border: none;
  width: 32px;
  height: 32px;
  cursor: pointer;
  color: transparent;
}
#bible-icon-check {
  background-image: url('Images/check.png'); /* Change url to wanted image */
  background-size: cover;
  border: none;
  width: 32px;
  height: 32px;
  cursor: pointer;
  color: transparent;
}
#vest-icon-check {
  background-image: url('Images/check.png'); /* Change url to wanted image */
  background-size: cover;
  border: none;
  width: 32px;
  height: 32px;
  cursor: pointer;
  color: transparent;
}
#dues-icon-check {
  background-image: url('Images/check.png'); /* Change url to wanted image */
  background-size: cover;
  border: none;
  width: 32px;
  height: 32px;
  cursor: pointer;
  color: transparent;
}
#theme-icon-check {
  background-image: url('Images/check.png'); /* Change url to wanted image */
  background-size: cover;
  border: none;
  width: 32px;
  height: 32px;
  cursor: pointer;
  color: transparent;
}
#friend-icon-check {
  background-image: url('Images/check.png'); /* Change url to wanted image */
  background-size: cover;
  border: none;
  width: 32px;
  height: 32px;
  cursor: pointer;
  color: transparent;
}
#all-icon {
  background-image: url('Images/all-friend.png'); /* Change url to wanted image */
  background-size: cover;
  border: none;
  width: 156px;
  height: 50px;
  cursor: pointer;
  color: transparent;
}
#View_Verses {
  background-image: url('Images/View_Verses.png'); /* Change url to wanted image */
  background-size: cover;
  border: none;
  width: 156px;
  height: 50px;
  cursor: pointer;
  color: transparent;
}
#Check_Out {
  background-image: url('Images/Check_Out.png'); /* Change url to wanted image */
  background-size: cover;
  border: none;
  width: 156px;
  height: 50px;
  cursor: pointer;
  color: transparent;
}
#Check_In {
  background-image: url('Images/Check_In.png'); /* Change url to wanted image */
  background-size: cover;
  border: none;
  width: 156px;
  height: 50px;
  cursor: pointer;
  color: transparent;
}
#Shares {
  background-image: url('Images/Shares.png'); /* Change url to wanted image */
  background-size: cover;
  border: none;
  width: 156px;
  height: 50px;
  cursor: pointer;
  color: transparent;
}
#Update {
  background-image: url('Images/Update.png'); /* Change url to wanted image */
  background-size: cover;
  border: none;
  width: 156px;
  height: 50px;
  cursor: pointer;
  color: transparent;
}
#Attendance {
  background-image: url('Images/Attendance.png'); /* Change url to wanted image */
  background-size: cover;
  border: none;
  width: 156px;
  height: 50px;
  cursor: pointer;
  color: transparent;
}
#GoBack10 {
  background-image: url('Images/GoBack10.png'); /* Change url to wanted image */
  background-size: cover;
  border: none;
  width: 156px;
  height: 50px;
  cursor: pointer;
  color: transparent;
}
#GoForward10 {
  background-image: url('Images/GoForward10.png'); /* Change url to wanted image */
  background-size: cover;
  border: none;
  width: 156px;
  height: 50px;
  cursor: pointer;
  color: transparent;
}
#Mark_Incomplete {
  background-image: url('Images/MarkIncomplete.png'); /* Change url to wanted image */
  background-size: cover;
  border: none;
  width: 156px;
  height: 50px;
  cursor: pointer;
  color: transparent;
}
#View_All {
  background-image: url('Images/View_All.png'); /* Change url to wanted image */
  background-size: cover;
  border: none;
  width: 156px;
  height: 50px;
  cursor: pointer;
  color: transparent;
}
#Verse_Information {
  background-image: url('Images/Verse_Information.png'); /* Change url to wanted image */
  background-size: cover;
  border: none;
  width: 156px;
  height: 50px;
  cursor: pointer;
  color: transparent;
}
#Complete {
  background-image: url('Images/Complete.png'); /* Change url to wanted image */
  background-size: cover;
  border: none;
  width: 156px;
  height: 50px;
  cursor: pointer;
  color: transparent;
}
#Incomplete {
  background-image: url('Images/Incomplete.png'); /* Change url to wanted image */
  background-size: cover;
  border: none;
  width: 156px;
  height: 50px;
  cursor: pointer;
  color: transparent;
}
#Dashboard {
  background-image: url('Images/Dashboard.png'); /* Change url to wanted image */
  background-size: cover;
  border: none;
  width: 156px;
  height: 50px;
  cursor: pointer;
  color: transparent;
}
#Student_Information {
  background-image: url('Images/Student_Information.png'); /* Change url to wanted image */
  background-size: cover;
  border: none;
  width: 156px;
  height: 50px;
  cursor: pointer;
  color: transparent;
}
#Submit {
  background-image: url('Images/Submit.png'); /* Change url to wanted image */
  background-size: cover;
  border: none;
  width: 156px;
  height: 50px;
  cursor: pointer;
  color: transparent;
}
#Inactive {
  background-image: url('Images/Inactive.png'); /* Change url to wanted image */
  background-size: cover;
  border: none;
  width: 156px;
  height: 50px;
  cursor: pointer;
  color: transparent;
}
#Daily_Report {
  background-image: url('Images/Daily_Report.png'); /* Change url to wanted image */
  background-size: cover;
  border: none;
  width: 156px;
  height: 50px;
  cursor: pointer;
  color: transparent;
}
#Student_Report {
  background-image: url('Images/Student_Report.png'); /* Change url to wanted image */
  background-size: cover;
  border: none;
  width: 156px;
  height: 50px;
  cursor: pointer;
  color: transparent;
}
#CheckIn_Alt {
  background-image: url('Images/CheckIn_Alt.png'); /* Change url to wanted image */
  background-size: cover;
  border: none;
  width: 156px;
  height: 50px;
  cursor: pointer;
  color: transparent;
}
div {
    color: #fff;
    font-family: Tahoma, Verdana, Segoe, sans-serif;
    padding: 10px;
}
.container {
    background-color:#2E4272;
    display:flex;
}
.fixed {
    background-color:#4F628E;
    width: 200px;
}
.flex-item {
    background-color:#7887AB;
    flex-grow: 1;
}