body {
  	box-sizing: border-box;
  	//font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
  	font-family:'Ropa Sans';
  	font-size: 18px;
}
body {
  	background-color: #514943;
}
.login {
  	width: 400px;
  	background-color: #ffffff;
  	box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
  	margin: 100px auto;
}
.login h1 {
  	text-align: center;
  	color: #5b6574;
  	font-size: 24px;
  	padding: 20px 0 20px 0;
  	border-bottom: 1px solid #dee0e4;
}
.login form {
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: center;
  	padding-top: 20px;
}
.login form label {
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	width: 50px;
  	height: 50px;
  	background-color: #EF7F2A;
  	color: #ffffff;
}
.login form input[type="password"], .login form input[type="text"] {
  	width: 310px;
  	height: 50px;
  	border: 1px solid #dee0e4;
  	margin-bottom: 20px;
  	padding: 0 15px;
}
.login form input[type="submit"] {
  	width: 100%;
  	padding: 15px;
 	margin-top: 20px;
  	background-color: #EF7F2A;
  	border: 0;
  	cursor: pointer;
  	font-weight: bold;
  	color: #ffffff;
  	transition: background-color 0.2s;
}
.login form input[type="submit"]:hover {
	background-color: #DF6F1A;
  	transition: background-color 0.2s;
}




.earnbox {
    display:flex;
}
.earn {
    display:flex;
}
.earnicon {
    
}
.earnvalue {
    
}
.earnicon img {
    max-height:25px;
    max-width:25px;
}

.cluestatus {
    display:flex;
    flex-wrap:wrap;
    justify-content: space-around;
}
.csicon {
    //margin-right:7px;
}
.csicon img {
    max-height:45px;
    max-width:45px;
}

.cluebox {
    margin: 20px auto;
    background:url('/img/bth_clue-bg.jpg');
    background-size:cover;
    padding:15px;
    font-family: 'Roboto Slab';
    font-weight:700;
    color: #514943;
    text-align:center;
    
}



.navtop {
//	background-color: #fff;
	height: 120px;
	width: 100%;
	border: 0;
	padding: 15px 0;
//	box-shadow: inset 0 -12px 6px -6px #ccc;
}
.navmain {
	display: flex;
	margin: 0 auto;
	//width: 1000px;
	height: 100%;
	flex-wrap:wrap;
}
.navsection h1, .navsection a {
	display: inline-flex;
	align-items: center;
}
.navsection h1 {
	flex: 1;
	font-size: 24px;
	padding: 0;
	margin: 0;
	color: #eaebed;
	font-weight: normal;
}
.navsection a {
	padding: 0 20px;
	text-decoration: none;
	color: #333;
	font-weight: bold;
}
.navsection a i {
	padding: 2px 8px 0 0;
}
.navsection a:hover {
	color: #666;
}
.navsection a:has(img) {
	display:block;
	margin-bottom:20px;
}
body.loggedin {
	background-color: #f3f4f7;
}

.content-wrap {
    background-image:url('https://baltimoretreasurehunt.com/wp-content/uploads/2024/09/bg3.jpg');
    background-size:cover;
    background-position: center;
    background-attachment: fixed;
}
.content-overlay {
    background-color: rgba(255, 255, 255, 0.8);
    min-height: 100vh;
    
}
.content {
	width: 1000px;
	margin: 0 auto;
	max-width: 90%;
}
.content h2 {
	margin: 0;
	padding: 25px 0;
	font-size: 28px;
	border-bottom: 1px solid #e0e0e3;
	color: #514943;
}
.content h3 {
	margin: 0;
	padding: 25px 0;
	font-size: 22px;
	border-bottom: 1px solid #e0e0e3;
	color: #514943;
}
.content > p, .content > .bar {
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
	margin: 25px 0;
	padding: 25px;
	background-color: #fff;
}
.content > p table td, .content > div table td {
	padding: 5px;
}
.content > p table td:first-child, .content > div table td:first-child {
	font-weight: bold;
	color: #514943;
	padding-right: 15px;
}
.content > div p {
	padding: 5px;
	margin: 0 0 10px 0;
}

.section {
    margin: 20px 0;
    margin-right:0 !important;
    margin-left:0 !important;
}

.card {
    margin-bottom: 20px;
    height:100%;
}

.card-header, .card-footer {
    background: transparent !important;
    border:0 !important;
}

.card-holder {
    padding-bottom:25px;
}

.h100 {
    height:100%;
}

.card-text {
    line-height: 20px;
    padding-bottom: 20px;
}
.card-header {
    font-weight:700;
    display:flex;
    justify-content:space-between;
}
.card-body, .card-footer {
    font-size:16px;
}

.card-footer {
    display:flex;
    justify-content:space-between;
}

h1, h2, h3, h4, h5, h6 {
    font-family:'Roboto Slab';
}
body {
    font-family: 'Ropa Sans';
}

.po-status.not-started i {
    display:none;
}
.po-status.not-done i {
    color:#ccc;
    cursor:pointer;
}
.po-status.complete i {
    color:#006600;
}
.po-status.awaiting-approval i {
    color:#FDDA0D;
}

.card-icon img {
    max-height:25px;
    max-width:25px;
}

.bottom-space {
    height:400px;
}

.po-complete {
    background: #eeffee !important;
}

.po-complete .button-wrap {
    display:none;
}

.reflink {
    font-size:25px !important;
    font-weight:700;
}
.reflink a {
    color:#514943;
}


.theitem {
    display:flex;
}
.quest-item {
    display:flex;
    justify-content:space-between;
    margin-bottom: 10px;
}
.thelabel {
    font-weight:700;
    margin-right:15px;
}
.quest-item .theinfo {
    font-family: 'Roboto Slab';
    font-weight:700;
    color: #514943;
}

.checklocbox {
    text-align:center;
}
#checkloc {
    background: #EF7F2A;
    color:white;
    border-radius:25px;
    margin:auto;
    border:0;
    padding:5px 10px;
    font-weight:700;
}


.popup {
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,
            0,
            0,
            0.4);
    display: none;
}

.popup-content {
    background-color: #F0E5DA;
    margin: 10% auto;
    padding: 20px;
    border: 1px solid #888888;
    min-width: 30%;
    max-width: 600px;
    font-weight: bolder;
    min-height: 75%;
    max-height: 600px;
}

.popup-content button {
    display: block;
    margin: 0 auto;
}

#closePopup {
    background: #EF7F2A;
    color:white;
    border-radius:25px;
    margin: 0 auto 25px;
    border:0;
    padding:5px 10px;
    font-weight:700;
}
.popup-headline {
    font-family: 'Roboto Slab';
    color: #514943;
    font-size: 26px;
    margin-bottom: 25px;
}
.popup-text {
    color: #514943;
    font-weight: 400;
    margin-bottom: 25px;
    font-size:18px;
}
.popup-image {
    text-align:center;
    margin-bottom: 25px;
}

.popup-image img {
    max-width:200px;
    max-height:200px;
}


.show {
    display: block;
}

.csicon.active {
    filter: drop-shadow(2px 2px 12px rgba(205,130,20,0.8));
}
.csicon.future {
    opacity: 0.4;
}

    #themap {
        
    }
    #mapwrap {
        display: flex;
        flex-wrap: wrap;
        background: url('/img/baltimore-map-1.jpg');
        background-size:cover;
        justify-content:space-between;
        min-width: 310px;
    }
    .map-square {
        flex-basis: 9%;
        padding: 10px;
        background: rgba(235, 235, 235, 0.8);
        margin: 0.5%;
        text-align: center;
        font-weight: 700;
        font-size: 30px;
        cursor:pointer;
    }
    .map-square.active {
        background:transparent;
        cursor: default;
        font-size:0;
    }





.answerwrap {
    display:flex;
    flex-wrap: wrap;
}

.main-question {
    font-family:'Roboto Slab';
    font-weight:700;
    font-size:18px;
}
.subq-question {
    
}
.item-name {
    font-size:16px;
    font-weight:700;
}
.answerbox {
    width:100%;
}
.answer-textarea {
    min-height:100px;
}
.answer-input {
    
}

.left-side {
    flex-basis: 40%;
    padding:5px 10px;
}
.right-side {
    flex-basis: 50%;
    padding:5px 10px;
}

.item-questions {
    padding: 10px 0;
    margin: 10px 0;
    border-bottom:1px solid #aaa;
}

#todaysdate {
    margin: 10px 0;
}

#sidebar {
    width:500px;
    background:#fff;
    right:0;
    top:0;
    height:100%;
    position:fixed;
    display:none;
}




@media only screen and (max-width: 600px) {
    
    .h1, h1 {
        font-size: 2rem !important;
    }
    
    .navtop {
    	height: 200px;
    }
    .navtop div {
    	//height: 75%;
    }

    .map-square {
        flex-basis: 18%;
        padding: 10px;
        background: rgba(235, 235, 235, 0.8);
        margin: 1%;
        text-align: center;
        font-weight: 700;
        font-size: 25px;
        cursor:pointer;
    }
}