body{
	background-color: #fafafa !important;
}

.selectit{
  display: none;
}

.searchbox {

    background-image: url('/verselocker/graphics/searchicon.png'); /* Add a search icon to input */
    background-position: 10px 12px; /* Position the search icon */
    background-repeat: no-repeat; /* Do not repeat the icon image */
    width: 250px;; /* Full-width */
    font-size: 16px; /* Increase font-size */

    padding: 12px 20px 12px 40px !important; /* Add some padding */
    border: 1px solid #ddd; /* Add a grey border */
    margin-top: 15px; /* Add some space below the input */
    margin-left: 15px;
    max-width: 100%;
}

/*
Generic Styling, for Desktops/Laptops
*/
table {
  font-family: Arial, Helvetica, sans-serif;

  border-collapse: collapse;
  border-radius: 10px;
  overflow: hidden;
  margin: 0 auto;
  position: relative;
  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);



}

.refcolumn{
	width: 150px;
}



td, th {
  padding: 6px;
  border: 1px solid #ccc;
  text-align: left;
}

#deletecolumn {
	width: 30px;
}

#mp3player{
	min-width: 150px;
}

#playcolumn {
	width: 45px;
  font-family: icomoon;
  text-align: center;
}

td[class="td-lessontitle"]{

	 text-align: center;

	}


/*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media only screen and (max-width: 10000px)  {

	/* Force table to not be like tables anymore */
	  table, thead, tbody, th, td, tr {
		display: block;
    border-radius: 0px;
    box-shadow: unset;
    width: 95%;
    text-align: center;
    margin: auto;

	  }

    .selectit{
      display: inline-block;
    }

    .td-checkbox {
      display: none;
    }


    tbody{
      margin-top: 10px;
    }

    .selected{
      background-color: #105166 !important;
      color: white;
      transition: background-color 500ms linear;
    }



    td, th {

      border: none !important;

    }


    tr{
      margin-bottom: 30px;
      box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.2);
      -webkit-box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.2);
      -moz-box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.2);
      border-radius: 10px;
      background-color: white;
      transition: background-color 500ms linear;
      width: 30%;
      min-width: 300px;
      display: inline-block;
      margin: 10px;
 


    }

    .scripture-container{
    	height: 160px;
    	overflow: hidden;
    }


    .scripturetext{
    	text-align: left;
    	height: 80%;
    	padding-left: 7px;
      padding-right: 7px;
      overflow: auto;
      font-weight: bold;
    	
    }
  }

        @media only screen and (max-width:7000px) {

    	tr{
    		width: 100%;
    		min-width: 220px;
    		margin: unset;
    		margin-bottom: 20px;    	
    		height: unset;	
 

    	}
  

 .scripture-container{
    height: unset;
    max-height: 160px;
 }

 .scripturetext{
    max-height: 128px; 
 }

 
    
     
    }



	.refcolumn{
	width: unset;
	}



	#deletecolumn {
		width: auto;
	}




	#playcolumn {
		width: auto;
	}

	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}


	td:nth-child(1) {
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee;
		position: relative;
		text-align: center;
		font-weight: bold;
	}

	td:nth-child(2) {
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee;
		position: relative;

	}

	td:nth-child(4) {
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee;
		position: relative;
		
	}

	   td[class="td-audio"] {
		/* Behave  like a "row" */
		height: auto;
	}

	td[class="td-checkbox"]:before{
		content: "Select";

	}


	td:nth-child(5) {
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee;
		position: relative;
		height: 23px;
	}
		td:nth-child(3) {
		/* Behave  like a "row" */

	}


	td:nth-child(1):before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%;
		padding-right: 10px;
		white-space: nowrap;
	}
		td:nth-child(2):before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%;
		padding-right: 10px;
		white-space: nowrap;
	}

	td:nth-child(4):before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%;
		padding-right: 10px;
		white-space: nowrap;
	}

	td:nth-child(5):before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%;
		padding-right: 10px;
		white-space: nowrap;
	}




th:nth-child(1)  {
    display: none;
}
th:nth-child(3)  {
    display: none;
}
th:nth-child(2)  {
    display: none;
}
th:nth-child(4) {
  visibility: hidden;
  text-align: center;

}

th:nth-child(5) {
  display: none;
  text-align: center;

}

t:nth-child(3)  {
    display: none;
}

th:nth-child(4):after {
  visibility: visible;
  color: black;
  text-align: center;
  content: "My Memory Verses";

}





 .now-playing{
		  background-color: #ffe692 !important;
		  color: black;
		 }

th a {
    text-decoration: none;
}

.theplayer{
	    width: 250px;
}
table thead tr {
  height: 45px;
  background: #005C97;  /* fallback for old browsers */
color: white;
border-radius: 10px;
}

table thead th{
	border: none;
}

.changessaved{
  background-color: #fcf5de;
  color: black;
}

.lessonHeader{
	display: block;
	width: 100%;
	box-shadow: unset;
  -webkit-box-shadow: unset;
  -moz-box-shadow: unset;
  height: unset;
  background-color: unset;
  margin: auto;
  margin: 8px auto;

}

.lessonHeaderTitle{
	 background-color: #005c97;
  color: white;
  border-radius: 10px;
  display: inline-block;
}