/*************************************************************
*
*	BODY
*
*************************************************************/

body
{
	display: flex;
	flex-direction: column;
	min-height: 100vh; /* Full height of the viewport */
	font-family: 'Lato', 'Roboto', sans-serif;
	font-weight: 400;
}

main {
	flex: 1;
}

/***************************************************************
*
* NAV
*
****************************************************************/

nav
{
	background-color: #4285f4 !important;
	border-bottom:4px solid #ffc201;
}

nav .logo a {
	color: #ffffff !important;
}

/***************************************************************
*
* OFF CANVAS NAVIGATION
*
****************************************************************/

/* Dark grey, slightly opaque background for the offcanvas */
.offcanvas-start
{
	background-color: rgba(33, 33, 33, 0.95) !important; /* Dark grey with opacity */
}

/* Ensure the text color inside the offcanvas is white and not opaque */
.offcanvas-start .offcanvas-body, .offcanvas-start .offcanvas-header
{
	color: #ffffff;
}

.offcanvas-body h2
{
	color: #ffffff;
}

/* Apply white color to nav-links only inside the offcanvas */
.offcanvas-start .nav-link
{
	color: #ffffff;
}

/* Optional: Adjust hover or focus states of links inside offcanvas */
.offcanvas-start .nav-link:hover, .offcanvas-start .nav-link:focus
{
	color: #ffffff;
}

/*************************************************************
*
*	OFFSETS
*
*************************************************************/

a.anchor
{
	display: block;
	position: relative;
	top: -40px;
	visibility: hidden;
}

/*************************************************************
*
*	TEXT COLORS
*
*************************************************************/

.text-primary
{
	color: #4285f4 !important;
}

.text-danger
{
	color: #ff0000 !important;
}

.text-success
{
	color: #049f56 !important;
}

.text-warning
{
	color: #ffc201 !important;
}

/*************************************************************
*
*	CONTAINERS
*
*************************************************************/

.container-active, .container-pending-expired
{
	width:220px;
	height:121px;
	margin:0 auto 30px auto;
}

.container-active
{
	background-image: url('/_core/images/bg-container-active.png');
}

.container-pending-expired
{
	background-image: url('/_core/images/bg-container-pending-expired.png');
}

.container-active:hover
{
	cursor:pointer;
}

.cid
{
	padding:50px 0px 0px 0px;
	text-align: center;
}

.cid h2
{
	color: #ffffff;
}

/*************************************************************
*
*	ITEM IMAGES
*
*************************************************************/

.item-image
{
	height:250px;
	width:250px;
	background-color: #ffffff;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position:center;
	margin:0 0 20px 0px;
}

.item-image-popup
{
	width:800px;
	height:600px;
	overflow: hidden;
	background-color: #ffffff;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position:center;
	margin:0 0 20px 0px;
}

/*************************************************************
*
*	FORMS
*
*************************************************************/

form .form-control
{
	background-color: #f5f5f5; /* Light grey background */
	border: 2px solid #f5f5f5; /* No border */
	padding: 0.75rem 1rem; /* Larger padding */
	font-size: 1.1rem; /* Slightly larger font size */
	border-radius: 0.25rem; /* Optional: Rounded corners */
}

/* Remove focus box-shadow and slightly darker background when focused */
form .form-control:focus
{
	box-shadow: none; /* Remove focus shadow */
	background-color: #f5f5f5; /* Light grey background */
	border: 2px solid #000000; /* No border */
}

.g-recaptcha
{
	margin:0 0 1em 0;
}

/***************************************************************
*
* BUTTONS
*
****************************************************************/

.btn-nav
{
	background-color: #ffffff !important;
	color: #000000 !important;
	border: none !important;
}

.btn-nav:hover
{
	background-color: #000000 !important;
	color: #ffffff !important;
	border: none !important;
}

.btn-primary
{
	background-color: #4285f4 !important;
	color: #ffffff !important;;
	border: none !important;
}

.btn-success
{
	background-color: #049f56 !important;
	color: #ffffff !important;;
	border: none !important;
}

.btn-warning
{
	background-color: #f5ba00 !important;
	color: #ffffff !important;;
	border: none !important;
}

.btn-danger
{
	background-color: #cc0000 !important;
	color: #ffffff !important;;
	border: none !important;
}

/*************************************************************
*
*	BOXES
*
*************************************************************/

.box-grey
{
	background-color: #f7f7f7;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	padding:20px 30px 10px 30px;
}

.box-danger
{
	border: 3px solid #ff0000 !important;
	padding:20px 30px 10px 30px;
}

/*************************************************************
*
*	SOCIAL ICONS
*
*************************************************************/

#social-icons
{

}

#social-icons span
{
	font-size: 2em;
	margin: 0 0.58em 0 0 !important;
}

#social-icons span:last-of-type
{
    margin: 0 0 0 !important;
}

/*************************************************************
*
*	ADS
*
*************************************************************/

.ad
{
	height:120px;
}

/*************************************************************
*
*	FADE IN
*
*************************************************************/

.fade-in
{
	animation: fade-in 2s;
}

@keyframes fade-in
{
	0%
	{
		opacity: 0;
	}

	100%
	{
		opacity: 1;
	}
}

/***************************************************************
*
* FOOTER
*
****************************************************************/

footer
{
	background-color: #052739 !important;
	color: #aaaaaa !important;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 100;
}

footer a
{
	color: #aaaaaa !important;
}

footer a:hover
{
	color: #ffffff !important;
}