/* Bootstrap 5 icon */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

/* Bootstrap 5 Default */

:root {
    /* Colors */
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-white: #ffffff;
    --bs-black: #000000;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    
    /* Link colors */
    --link-color: #0d6efd;
    --link-hover-color: #0056b3;
    --link-active-color: #0d6efd;
    --link-focus-color: rgba(0, 123, 255, 0.25);

    /* Typography */
    --font-family-sans-serif: 'your-font-family-sans-serif', sans-serif;
    --font-family-monospace: 'your-font-family-monospace', monospace;
    --font-size-base: 1rem;
    --font-size-lg: 1.25rem;
    --font-size-sm: 0.875rem;
    --line-height-base: 1.5;
    --h1-font-size: 2.5rem;
    --h2-font-size: 2rem;
    --h3-font-size: 1.75rem;
    --h4-font-size: 1.5rem;
    --h5-font-size: 1.25rem;
    --h6-font-size: 1rem;
    --font-weight-lighter: 300;
    --font-weight-light: 400;
    --font-weight-normal: 400;
    --font-weight-bold: 700;
    --font-weight-bolder: 700;

    /* Spacing */
    --spacer: 1rem;
    --bs-gap: 1.5rem;

    /* Border radius */
    --border-radius: 0.25rem;

    /* Grid breakpoints */
    --grid-breakpoints-xs: 0;
    --grid-breakpoints-sm: 576px;
    --grid-breakpoints-md: 768px;
    --grid-breakpoints-lg: 992px;
    --grid-breakpoints-xl: 1200px;

    /* Container */
    --container-max-widths-sm: 540px;
    --container-max-widths-md: 720px;
    --container-max-widths-lg: 960px;
    --container-max-widths-xl: 1140px;

    /* Z-index */
    --zindex-dropdown: 1000;
    --zindex-sticky: 1020;
    --zindex-fixed: 1030;
    --zindex-modal-backdrop: 1040;
    --zindex-modal: 1050;

    /* Form control */
    --input-padding-x: 0.75rem;
    --input-padding-y: 0.5rem;
    --input-line-height: 1.25;
    --input-color: #495057;
    --input-bg: #fff;
    --input-border-color: #ced4da;
    --input-border-width: 1px;
    --input-border-radius: 0.25rem;
    --input-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    --input-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

    /* Button */
    --btn-padding-x: 0.75rem;
    --btn-padding-y: 0.375rem;
    --btn-font-size: 1rem;
    --btn-line-height: 1.5;
    --btn-font-weight: 400;
    --btn-border-width: 1px;
    --btn-border-radius: 0.25rem;
    --btn-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

    /* Costum Colors */
    --site-main-color: #394891;     /* site main color (hex to be confirm) */

}

html {
    scroll-behavior: smooth;
  }

.bg-main {
    background-color: var(--site-main-color);
}

.text-main {
    color: var(--site-main-color);
}

.border-main {
    border-color: var(--site-main-color);
}


/* Top Navigation Bar */

.navbar {
    background-color: var(--site-main-color);
    width: 100%;
    min-height: 120px;
}

.toggler-icon {
    color: white;
} 

.nav-item, .nav-item > a{
    background-color:  var(--site-main-color); 
    color: white;
}

.nav-item > a:hover, .nav-item .nav-link.active{
    background-color: white;
    color: var(--site-main-color);
}


/* usr portal nav */
.navbar .dropdown-menu, .navbar .dropdown  {
    background-color: #394891;
}


.dropdown-item {
    color: white;
}

#divContainer {
    width: 200px;
    height: 150px;
    background-color:  var(--site-main-color);
    color: white;
    text-align: center;
}

#divContainer .d-flex {
    height: 150px;
}



/* CARD */
.card {
    border: 1px solid var(--site-main-color);
}

.card-header {
    background-color: var(--site-main-color);
    color: white;
}


#sideCard {
    width: auto;
    margin-bottom: 20px;
}

.square-scanner {
    width: 250px;
    height: 250px;
    max-width: 100%;
    object-fit: cover;
    aspect-ratio: 1;
}


/* Site List */

.box-container {
    border: 1px solid var(--site-main-color);
}


.modal-content {
    background-color: var(--site-main-color);
    color: white;
}

#modalImage {
    width: auto;
    height: auto;
    max-height: 100%; /* Adjust as needed */
    max-width: 100%;
}


/* Access List */

.list-group > a:hover  {
    background-color: var(--site-main-color);
    color: white;
}















/* Hover Animation/Transition */
#divContainer, #photo {
    transition: transform 0.3s ease;
}

#divContainer:hover, #photo:hover {
    transform: scale(1.05);
}




#findbox {
	background: #eee;
	border-radius:.125em;
	border:2px solid #1978cf;
	box-shadow: 0 0 8px #999;	
	margin-bottom: 10px;
	padding: 2px 0;
	width: auto;
	height: 26px;
}
.search-tooltip {
	width: 200px;
}
.leaflet-control-search .search-cancel {
	position: static;
	float: left;
	margin-left: 0px;
}








/* Site List */
.site-card {
    cursor: pointer;
}

.site-thumb {
    width: 100px;
    height: 100px;
}

.site-list-map {
    height: 300px;
}

@media (min-width: 992px) {
    .site-list-scroll {
        height: calc(100vh - 230px);
        overflow-y: auto;
    }
}


/* Phones */
@media (max-width: 767.98px) {
    .navbar {
        min-height: 0;
    }

    .navbar-brand {
        padding-left: .5rem !important;
    }

    .navbar-brand img {
        width: auto;
        height: 56px;
    }

    .navbar-collapse {
        padding-bottom: .5rem;
    }

    #divContainer {
        max-width: 100%;
    }

    .site-thumb {
        width: 72px;
        height: 72px;
    }

    .site-list-map {
        height: 220px;
    }
}

/* Main site photo (F2025052601) */
.site-main-photo {
    display: block;
    width: 100%;
    max-height: 260px;
    object-fit: cover;
}