@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&display=swap');

:root {
  --main-color: #00184a;
  --main-color2: #ffc350;  
  --main-color3: #ee9c00;  
  --main-color-h1: #00184a;   
  --main-color-h2: #00184a;   
  --main-color-h3: #00184a;   
  --main-color-h4: #00184a;   
  --main-color-btn-default: #00184a;
  --main-color-btn-action: #00184a; 
  --font-family: 'Open Sans', sans-serif;  
  --btn-border-radius: 0px;
  --form-border-radius: 0px;
  --primary-bg-color: #00184a;
  --primary-bg-hover: #25aea7; 
  --color-blue: #00184a;
  --color-green: #5f9470;  
  --color-red: #ad181c;  
  --color-yellow: #ffc350;   
  
}

body {
	font-family: var(--font-family);
	color: var(--main-color);
	font-size: 16px;
	line-height:1.5;
	font-weight: 400;
	background:#f8f8f8; 
	margin:0; 
	height:100%;
	-webkit-font-smoothing: auto;
}


.site-color {color:var(--main-color-btn-action) !important;}

/*=========== Typography ===============*/
h1, h2, h3, h4, h5, h6, p, btn, .h1, .h2, .h3, .h4, .h5, .h6, .p, .btn {font-family: var(--font-family);}
h1, .h1 {font-size: 48px; font-weight: 800; color:var(--main-color-h1); margin-bottom:20px; text-transform:uppercase;}
h2, .h2 {font-size: 36px; font-weight: 800;  color:var(--main-color-h2); margin-bottom:20px}
h3, .h3 {font-size: 32px; font-weight: 700;  color:var(--main-color-h3); margin-bottom: 5px}
h4, .h4 {font-size: 20px; font-weight: 400;  color:var(--main-color-h4); margin-bottom: 5px}
h5, .h5 {font-size: 18px; font-weight: 500;  color:#FFFFFF; }
h6, .h6 {font-size: 24px; font-weight: 600;  color:#FFFFFF; }
p, .p, li, div, normal {font-size: 16px; font-weight: 400; color:var(--main-color); line-height:1.5;}
a, a:visited  {color:var(--main-color); text-decoration:underline !important;}

strong {color:var(--color-blue)}

.text-small {font-size:12px}
.text-green {color:var(--color-green)}
.text-red {color:var(--color-red)}
.text-yellow {color:var(--color-yellow)}

/*=========== End Typography ===============*/

/*=========== Buttons ===============*/
a.btn, a.dropdown-item {text-decoration:none !important}

.btn {border-radius: var(--btn-border-radius)}

.btn-site-default, a.btn-site-default {background-color: var(--main-color-btn-default) ; border-color: var(--main-color-btn-default); color: #FFFFFF;  border-radius:10px }
.btn-site-default:hover, .btn-site-default:active, .btn-site-default:focus {background-color: var(--main-color-btn-default) !important; opacity: 0.8; border-color: var(--main-color-btn-default) !important; color: #FFFFFF;}

.btn-site-action {background-color: var(--main-color-btn-action); border-color: var(--main-color-btn-action); color:#ffffff;  border-radius:10px}
.btn-site-action:hover, .btn-site-action:active, .btn-site-action:focus {background-color: var(--main-color-btn-action) !important; opacity: 0.8; border-color: var(--main-color-btn-action) !important; color:#ffffff;}

.btn-site-blue, a.btn-site-blue, a.btn-site-blue:visited {background-color: var(--color-blue); border-color: var(--color-blue); color:#ffffff; border-radius:10px; font-size:20px;}
.btn-site-blue:hover, .btn-site-blue:active, .btn-site-blue:focus {background-color: var(--color-blue) !important; opacity: 0.8; border-color: var(--color-blue) !important; color:#ffffff;}

.btn-site-green, a.btn-site-green, a.btn-site-green:visited {background-color: var(--color-green); border-color: var(--color-green); color:#ffffff; border-radius:10px; font-size:20px;}
.btn-site-green:hover, .btn-site-green:active, .btn-site-green:focus {background-color: var(--color-green) !important; opacity: 0.8; border-color: var(--color-green) !important; color:#ffffff;}

.btn-site-yellow, a.btn-site-yellow, a.btn-site-yellow:visited {background-color: var(--color-yellow); border-color: var(--color-yellow); color:#ffffff; border-radius:10px; font-size:20px;}
.btn-site-yellow:hover, .btn-site-yellow:active, .btn-site-yellow:focus {background-color: var(--color-yellow) !important; opacity: 0.8; border-color: var(--color-yellow) !important; color:#ffffff;}


i.btn-view {color:#365dcd;}
i.btn-delete {color:#F44336;}

.btn-fa, .cursor-pointer {cursor:pointer}

/*=========== End Buttons ===============*/

#wrapper {
	min-height: calc(100vh - 220px);
}

#body-wrapper {
    padding: 50px 0px;
	background: transparent;	
}

.form-control, .form-select {border-radius:10px}
.form-label, .form-check-label, .col-form-label {color:var(--color-blue); font-weight:600;}

#header {position:relative; z-index:99}
#header-menu {background-color: var(--primary-bg-color); border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; padding:5px 0px 10px; position:relative; }
#footer-wrapper {background-color: var(--primary-bg-color); border-top-left-radius: 15px; border-top-right-radius: 15px; padding:30px 0px 20px;}
#footer-wrapper h3, #footer-wrapper a, #footer-wrapper a:visited {color:#ffffff; text-decoration:none !important;}
#footer-wrapper li {margin-bottom:5px}

.nav-link, .nav-link:visited {display: block; color: #ffffff ; font-size: 16px; padding-right:1rem !important; padding-left:1rem !important; text-decoration:none !important;}
.nav-link:hover {color: var(--color-yellow);}


.custom-toggler.navbar-toggler {
    border-color: #ffffff;
}

.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.navbar-brand img {position: absolute; top: 0px; right: 10px; height: 120px}

.icon-button {background-color: #ffffff; padding: 12px; border-radius: 10px; box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); }

.accordion-item {background-color:transparent; border-style:none; border-radius:0.5rem; margin-bottom: 0.8rem!important;}

.accordion-button {padding:0px; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;}
.accordion-button:focus {border-style:none; box-shadow:none}
.accordion-button .icon {min-width: 50px; height: 50px; z-index: 0; border-top-left-radius:0.5rem; border-bottom-left-radius:0.5rem}
.accordion-button .icon-blue {background: var(--color-blue);}
.accordion-button .icon-green {background: var(--color-green);}
.accordion-button .icon-yellow {background: var(--color-yellow);}
.accordion-button:after {
    display: none;
}


.accordion-button .icon .fa:before {content: "\f067"; color:#ffffff}
.accordion-button:not(.collapsed) .icon .fa:before {content: "\f068"; color:#ffffff}


.mappage {
    height: 600px;
}

.PubListingDetail {
        padding: 10px;
	border-top:1px solid #dddddd;
	border-left:1px solid #dddddd;
        margin: 0px auto 10px auto;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
-webkit-box-shadow: 5px 5px 5px 0px #dddddd;
box-shadow: 5px 5px 5px 0px #dddddd;
}

.PubListingDetail h5 {
	color:#00184a;
	font-weight:bold;
	margin:0px;
}

.PubListingDetail #bubblephoto {
	display:inline-block;
	width:20%;
}
.PubListingDetail #bubbletext {
	display:inline-block;
	font-size:16px;
	line-height:20px;
	padding-top:10px;
	width:75%;
	float:right;
}

.PubListingDetail #address {
	font-size:10px;
}

.infobubble {
	background:#ffffff;
	width:300px;
}

.infobubble h5 {
	font-size:14px;
	margin:0px 0px 5px 0px;
	font-weight:bold;
	color: var(--site-color);
}

.infobubble #bubblephoto {
	display:inline-block;
	float:left;
	width:150px;
}

#bubblephoto img {width:100px}

.infobubble #bubbletext {
	display:inline-block;
	float:right;
	width:150px;
	font-size:14px;	
}

.topcard {
	background-color: #ccc;
    position: relative;
    top: 0;
    margin-top: -150px;
    height: 250px;
    padding: 160px 0px 100px;
    z-index: 1;
    border-radius: 20px;
	margin-bottom:50px;
}	

.topcard-green {
	background-color: var(--color-green);
	
}
.topcard-blue {
	background-color: var(--color-blue);
}
.topcard-yellow {
	background-color: var(--color-yellow);
}

#login-wrapper {max-width:500px; padding:20px; margin-bottom:30px; box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;}
#login-wrapper h2 {font-weight:700; font-size:36px}