html {
	background-color: #f1f1f1;
	
}
body {
	display: flex;
	display: -webkit-flex;
	flex-direction: column;
	-webkit-flex-direction: column;
	min-height: 100vh;
	max-width: 600px;
	margin: 0 auto;
	background-color: #815932;
	font-family:Arial, Helvetica, sans-serif;
}
header {
	background-color: #f0f0f0;
	padding: 0px 5px;
}
.main-fill {
	display: flex;
	display: -webkit-flex;
	flex-direction: column;
	-webkit-flex-direction: column;
	flex: 1;
	padding: 10px;
	align-items: center;
	-webkit-align-items: center;
	justify-content: center;
	-webkit-justify-content: center;	
}
.main-col{
	display: flex;
	display: -webkit-flex;
	flex-direction: column;
	-webkit-flex-direction: column;
	padding: 10px;
	align-items: center;
	-webkit-align-items: center;
	flex-grow: 1;	

}
.mainHeader {
	display: flex;
	display: -webkit-flex;
	align-items: center;
	-webkit-align-items: center;
	justify-content: space-between;
	-webkit-justify-content: space-between;
	max-width:600px;
	background-color: #ffa500;
	height: 48px;
}

footer {
	background-color: #333;
	color: #fff;
	text-align: center;
	display: flex;
	justify-content: center;
	margin-bottom:50px;
	
}
#bottom-div {
	height: 50px;
	bottom: 0;
	background-color: #004777;
	min-width: 320px;
	max-width:600px;
	z-index: 100;
	position: fixed;
	bottom: 0;
	width: 100%;
}
#bottom-items {
	display: flex;
	display: -webkit-flex;
	justify-content: center;
	-webkit-justify-content: center;
	align-items: center;
	-webkit-align-items: center;
	width: 100%;
	font-size: 22px;
	color: white;
}

a {
	color: #007bff;
	text-decoration: none;
}
img {
	max-width: 100%;
	height: auto;
}
/* Heading Styles */
h1 {
	font-size: 1.5rem;
	margin: 10px 0;
	text-align: center;
	padding: 5px 0px;
}
h2 {
	font-size: 1.50rem;
	margin: 5px 0;
	text-align: center;
	padding: 5px 0px;
	color:#ffffd9;

}
h3 {
	font-size: 1.00rem;
	margin: 5px 0;
	text-align: center;
	padding: 5px 0px;
}
.sub-title,.sub-header {
	color: white;
	font-size: 1.25rem;
	font-weight: bold;
	padding: 5px 5px;
}
.responsive {
    width: 100%;
    height: 100%;
    overflow: hidden;
    max-width: 500px;
}
#drill-text{
	font-size: 20px;
    margin: 15px 5px 15px 5px;
    line-height: 24px;
    font-weight: bold;
    max-width: 500px;
    color: #ffffd9;
}
.responsive-icons{
	max-width: 100%;
	height: 40px;
}

.index-box {
	height: 150px;
	width: 150px;
	background-color: #815932;
	margin: 20px 0px;
}
.description {
	font-size: 28px;
	font-weight: bold;
}
.inner-box {
	height: 130px;
	width: 130px;
}
#result{
	text-align:center;
	font-weight:bold;
	color:lime;
	padding:10px;

}

/* Drill List CSS */
.mainHeader {
	display: flex;
	display: -webkit-flex;
	align-items: center;
	-webkit-align-items: center;
	justify-content: space-between;
	-webkit-justify-content: space-between;
	background-color: #ffa500;
	height: 48px;
}
.listview {
	display: flex;
	display: -webkit-flex;
	align-items: center;
	-webkit-align-items: center;
	height: 40px;
	width: 90%;
	background-color: #ffffd9;
	margin: 15px;
	padding: 3px;
	border-radius: 5px;
}
.editlistview {
	display: flex;
	display: -webkit-flex;
	height: 45px;
	width: 90%;
	background-color: #ffffd9;
	margin: 10px 10px 30px 10px;
	padding: 3px;
	border-radius: 5px;
}

#back-button2 {
	background-image: url('icons/menu.png');
	background-size: cover;
	background-repeat: no-repeat;
	border: none;
	background-color: #996633;
	padding-left: 10px;
}
#back-button {
	border: none;
	background-color: #996633;
	padding-left: 5px;
	font-weight: bold;
	font-size: 18px;
	color: orange;
}
#favorite-button {
	border: none;
	background-color: #996633;
	padding-right: 5px;
	font-weight: bold;
	font-size: 18px;
	color: orange;
}
.name {
	font-size: 20px;
	font-weight: bold;
	color: black;
}
.category {
	font-size: 18px;
	color: gray;
}
.lvicon {
	height: 32px;
	width: 32px;
	background-color: silver;
	margin: 3px;
}
.favicon {
	height: 32px;
	width: 32px;
	margin: 3px;
	margin-left: auto;
}
.lvtitle {
	padding-left: 5px;
}

/* Drill List CSS */
/* Start Flex Box */
.flex {
	display: flex;
	display: -webkit-flex;
}
.flex-ac-jc {
	display: flex;
	display: -webkit-flex;
	align-items: center;
	-webkit-align-items: center;
	justify-content: center;
	-webkit-justify-content: center;
}
.flex-ac {
	display: flex;
	display: -webkit-flex;
	align-items: center;
	-webkit-align-items: center;
}
.flex-auto {
	display: flex;
	display: -webkit-flex;
	flex: 1 1 auto;
	-webkit-flex: 1 1 auto;
}
.flex-ac-jc-col-100 {
	display: flex;
	display: -webkit-flex;
	align-items: center;
	-webkit-align-items: center;
	justify-content: center;
	-webkit-justify-content: center;
	flex-direction: column;
	-webkit-flex-direction: column;
	width: 100%;
	align-items: center;/*NEW*/;
	-webkit-align-items: center;/*NEW*/
}
.flex-fill {
	display: flex;
	display: -webkit-flex;
	align-items: center;
	-webkit-align-items: center;
	justify-content: center;
	-webkit-justify-content: center;
	width: 100%;
	height: 100%;
}
.flex-jc-100 {
	display: flex;
	display: -webkit-flex;
	justify-content: center;
	-webkit-justify-content: center;
	width: 100%;
}
.flex-100 {
	display: flex;
	display: -webkit-flex;
	width: 100%;
}

.flex-jc {
	display: flex;
	display: -webkit-flex;
	justify-content: center;
	-webkit-justify-content: center;
	width: 100%;
}
.flex-ac-sa {
	display: flex;
	display: -webkit-flex;
	align-items: center;
	-webkit-align-items: center;
	justify-content: space-around;
	-webkit-justify-content: space-around;
	width: 100%;
}
.flex-ac-sb {
	display: flex;
	display: -webkit-flex;
	align-items: center;
	-webkit-align-items: center;
	justify-content: space-between;
	-webkit-justify-content: space-between;
	width: 100%;
}
.flex-ac-end {
	display: flex;
	display: -webkit-flex;
	align-items: center;
	-webkit-align-items: center;
	justify-content: flex-end;
	-webkit-justify-content: flex-end;
	width: 100%;
}

.flex-col {
	display: flex;
	display: -webkit-flex;
	flex-direction: column;
	-webkit-flex-direction: column;
}

.flex-ac-col {
	display: flex;
	display: -webkit-flex;
	flex-direction: column;
	-webkit-flex-direction: column;
	align-items: center;/*NEW*/;
	-webkit-align-items: center;/*NEW*/
}
.flex-col-100 {
	display: flex;
	display: -webkit-flex;
	flex-direction: column;
	-webkit-flex-direction: column;
	width: 100%;
	align-items: center;/*NEW*/;
	-webkit-align-items: center;/*NEW*/
}
.flex-jc-col {
	display: flex;
	display: -webkit-flex;
	justify-content: center;
	-webkit-justify-content: center;
	flex-direction: column;
	-webkit-flex-direction: column;
	align-items: center;/*NEW*/;
	-webkit-align-items: center;/*NEW*/
}
.flex-jc-col-100 {
	display: flex;
	display: -webkit-flex;
	justify-content: center;
	-webkit-justify-content: center;
	flex-direction: column;
	-webkit-flex-direction: column;
	width: 100%;
	align-items: center;/*NEW*/;
	-webkit-align-items: center;/*NEW*/
}
.flex-ac-jc-col {
	display: flex;
	display: -webkit-flex;
	align-items: center;
	-webkit-align-items: center;
	justify-content: center;
	-webkit-justify-content: center;
	flex-direction: column;
	-webkit-flex-direction: column;
	width: 100%;
	align-items: center;/*NEW*/;
	-webkit-align-items: center;/*NEW*/
}
.flex-sa-wrap {
	display: flex;
	display: -webkit-flex;
	justify-content: space-around;
	-webkit-justify-content: space-around;
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	margin-bottom: 10px;
	width: 100%;
}
.flex-sb-wrap {
	display: flex;
	display: -webkit-flex;
	justify-content: space-between;
	-webkit-justify-content: space-between;
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	margin-bottom: 10px;
	width: 100%;
}

/* End Flex Box */
/* Start Dropdown Css */
.hide {
	display: none;
}
.burgerhash {
	background-image: url('../icons/hamburger.png');
	background-size: cover;
	background-repeat: no-repeat;
	width: 40px;
	height: 40px;
	border: none;
	cursor: pointer;
	text-align: center;
	color: white;
}
.burgerx {
	background-image: url('../icons/menu-x.png');
	background-size: cover;
	background-repeat: no-repeat;
	width: 40px;
	height: 40px;
	border: none;
	cursor: pointer;
	text-align: center;
	color: white;
}
#burger {
	height: 40px;
	width: 40px;
}
#menu {
	width: 100%;
	background-color: #004777;
	font-size: 18px;
	font-weight: bold;
	color: black;
}
#menu a {
	padding: 10px;
	color: #ffffd9;
	
}
.sub{
	border-bottom: 3px gray solid;
	height:30px;
	color: #ffffd9;
}
.extra-bottom {
	padding-bottom:10px;
}

/* End Dropdown Css */



/* Media Queries */
@media (min-width: 500px) {
/* Adjust styles for smaller screens */
h1 {
	font-size: 1.75rem;
}
h2 {
	font-size: 1.50rem;
}
h3 {
	font-size: 1.25rem;
}
.sub-title {
	
	font-size: 1.00rem;
	
}

}