@font-face {
    font-family: 'Raleway';
    src: url('../fonts/Raleway-Thin.woff2') format('woff2'),
         url('../fonts/Raleway-Thin.woff') format('woff'),
         url('../fonts/Raleway-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/Raleway-ThinItalic.woff2') format('woff2'),
         url('../fonts/Raleway-ThinItalic.woff') format('woff'),
         url('../fonts/Raleway-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/Raleway-ExtraLight.woff2') format('woff2'),
         url('../fonts/Raleway-ExtraLight.woff') format('woff'),
         url('../fonts/Raleway-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/Raleway-ExtraLightItalic.woff2') format('woff2'),
         url('../fonts/Raleway-ExtraLightItalic.woff') format('woff'),
         url('../fonts/Raleway-ExtraLightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/Raleway-Light.woff2') format('woff2'),
         url('../fonts/Raleway-Light.woff') format('woff'),
         url('../fonts/Raleway-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/Raleway-LightItalic.woff2') format('woff2'),
         url('../fonts/Raleway-LightItalic.woff') format('woff'),
         url('../fonts/Raleway-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/Raleway-Regular.woff2') format('woff2'),
         url('../fonts/Raleway-Regular.woff') format('woff'),
         url('../fonts/Raleway-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/Raleway-Italic.woff2') format('woff2'),
         url('../fonts/Raleway-Italic.woff') format('woff'),
         url('../fonts/Raleway-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/Raleway-Medium.woff2') format('woff2'),
         url('../fonts/Raleway-Medium.woff') format('woff'),
         url('../fonts/Raleway-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/Raleway-MediumItalic.woff2') format('woff2'),
         url('../fonts/Raleway-MediumItalic.woff') format('woff'),
         url('../fonts/Raleway-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/Raleway-SemiBold.woff2') format('woff2'),
         url('../fonts/Raleway-SemiBold.woff') format('woff'),
         url('../fonts/Raleway-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/Raleway-SemiBoldItalic.woff2') format('woff2'),
         url('../fonts/Raleway-SemiBoldItalic.woff') format('woff'),
         url('../fonts/Raleway-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/Raleway-Bold.woff2') format('woff2'),
         url('../fonts/Raleway-Bold.woff') format('woff'),
         url('../fonts/Raleway-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/Raleway-BoldItalic.woff2') format('woff2'),
         url('../fonts/Raleway-BoldItalic.woff') format('woff'),
         url('../fonts/Raleway-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/Raleway-ExtraBold.woff2') format('woff2'),
         url('../fonts/Raleway-ExtraBold.woff') format('woff'),
         url('../fonts/Raleway-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/Raleway-ExtraBoldItalic.woff2') format('woff2'),
         url('../fonts/Raleway-ExtraBoldItalic.woff') format('woff'),
         url('../fonts/Raleway-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/Raleway-Black.woff2') format('woff2'),
         url('../fonts/Raleway-Black.woff') format('woff'),
         url('../fonts/Raleway-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/Raleway-BlackItalic.woff2') format('woff2'),
         url('../fonts/Raleway-BlackItalic.woff') format('woff'),
         url('../fonts/Raleway-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

body {
    font-family: 'Raleway', Arial, sans-serif;
  	font-weight: 400;
	font-size:12px;
    color:#212427;
}

body a {
    color: #076e6c; 
}

body a:hover {
    color: #212427; 
}

label {
    display: inline-block;
    max-width: 100%; /*  Force IE8 to wrap long content */
    margin-bottom: 5px;
    font-weight: 700;
  }

/* Custom styles */

/* BS button styles  */

.btn-primary {
    background-color: #076e6c !important;
    border-color: #669291 !important;
    color: #ffffff !important;
    font-size:12px;
}

.btn-primary:active,
.btn-primary:focus,
.btn-primary:hover {
    background-color: #669291 !important;
    border-color: #669291 !important;
    color: #ffffff !important;
}


.btn-secondary {
    background-color: #FFF !important;
    border-color: #076e6c !important;
    color: #212427 !important;
    font-size:12px;
}

.btn-secondary:active,
.btn-secondary:focus,
.btn-secondary:hover {
    background-color: #eff2f2 !important;
    color: #212427 !important;
    border-color: #076e6c !important;
}

.btn-default {
    background-color: #FFF !important;
    border-color: #076e6c !important;
    color: #212427 !important;
    font-size:12px;
}

.btn-default:active,
.btn-default:focus,
.btn-default:hover {
    background-color: #eff2f2 !important;
    color: #212427 !important;
    border-color: #076e6c !important;
}

.btn-danger {
    background-color: #d6000b !important;
    border-color: #d6000b !important;
    color: #ffffff !important;
    font-size:12px;
}

.btn-danger:active,
.btn-danger:focus,
.btn-danger:hover {
    background-color: #ff0a17 !important;
    border-color: #ff0a17 !important;
    color: #ffffff !important;
}

.btn-outline-primary {
    color: #076e6c;
    border-color: #076e6c;
    font-size:12px;
}

.btn-outline-primary:hover, 
.btn-outline-primary:focus {
    color: white;
    background-color: #076e6c;
    border-color: #076e6c;
}

.btn-check:checked + .btn-outline-primary {
    color: #076e6c;
    background-color: #E0E5E5;
    border-color: #076e6c;
}

.btn-check:focus + .btn-outline-primary {
    box-shadow: 0 0 0 0.25rem rgba(7, 110, 108, 0.5);
}


.lead {
    color: #212427; /* Dark gray for lead text on white backgrounds */
    font-size: 16px;
    font-weight: normal;
}

/* Form field styles */

input[type="text"],
input[type="email"],
textarea,
select {
    color: #212427; 
}

/* Pagination styles */

.pagination .page-item.active .page-link,
.pagination .page-item.active .page-link:hover,
.pagination .page-item.active .page-link:focus {
    background-color: #076e6c;
    border-color: #076e6c;
    color: #ffffff;
}

.pagination .page-link {
    color: #076e6c;
}

.pagination .page-link:hover,
.pagination .page-link:focus {
    background-color: #eff2f2;
    color: #076e6c;
}

/* Menu styles */

.navbar {
    background-color: #FFFFFF !important;
}

.navbar.border {
    border: 1px solid #669291 !important;
}

.navbar .navbar-nav .nav-link,
.navbar .dropdown-menu .dropdown-item {
    color: #212427 !important;
    font-size: 12px;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:focus,
.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus {
    background-color: #eff2f2 !important;
    color: #076e6c !important;
}

.navbar .navbar-nav .nav-link.active,
.navbar .navbar-nav .nav-link.active:hover,
.navbar .navbar-nav .nav-link.active:focus {
    background-color: #076e6c !important;
    color: #ffffff !important;
}

.navbar .dropdown-menu .dropdown-item.active,
.navbar .dropdown-menu .dropdown-item.active:hover,
.navbar .dropdown-menu .dropdown-item.active:focus {
    background-color: #076e6c !important;
    color: #ffffff !important;
}

.navbar .nav-item.dropdown .nav-link:hover {
    background-color: inherit;
    color: #076e6c !important;
}

.navbar .nav-item.dropdown .dropdown-toggle.active {
    color: #076e6c !important;
    background-color: #FFF !important;
}

.navbar-toggler {
    border: none;
    background-color: #eff2f2 !important;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' fill='%23076e6c' class='bi bi-list' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M2.5 12.5a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-11zm0-4a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-11zm0-4a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-11z'/%3E%3C/svg%3E");
}

.navbar-collapse.show {
    margin-top:8px;
}

.navbar-collapse.show .navbar-nav .nav-item a {
    padding: 8px !important;
}

.navbar .nav-item.dropdown {
    color: #076e6c !important;
    line-height: 1;
}

.navbar .nav-item .dropdown-toggle {
    line-height: 1;
    padding: 8px !important;
    outline: none !important;
    box-shadow: none !important;
}

.navbar .nav-item .dropdown-toggle:active {
    background-color: #bfcdcd !important;
}

.navbar .dropdown-menu {
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
}

.navbar-brand {
    padding:0;
}

.navbar-brand img {
    width:30px;
    line-height:1em;
}

/* Breadcrumbs background color */
.breadcrumb {
    background-color: #eff2f2;
}

/* Breadcrumbs active state text color */
.breadcrumb > .active {
    color: #212427; /* Dark gray for active breadcrumb item */
}

/* Login form styles */

.login-form-container .card {
    background-color: #eff2f2; /* Light gray background */
    border: 1px solid #669291; /* Light green border */
}

/* Login form styles */ 

.login-form-container {
    height: 80vh; 
    display: flex; 
    align-items: center; 
    justify-content: center;
}

/* Styling for the Cookie alert.  */

#cookie-alert {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    margin:0;
    background-color: #eff2f2;
    padding: 15px;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    border:none;
}

#cookie-alert.alert {
    display:none; /* Hides the Cookie Alert by default. */ 
}

/* Datatables styles */

.dataTables_wrapper {
	font-family: 'Raleway', Arial, sans-serif;
	font-size:8pt;
}

table.table-striped.table-bordered {
    font-family: 'Raleway', Arial, sans-serif;
    font-size: 10pt;
}

.table-striped>tbody>tr:nth-of-type(odd) {
    background-color:#eff2f2;
}

/* JS validation styles */

label.error {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
    padding: 5px;
    margin-top: 5px;
    border: 1px solid transparent;
    border-radius: 4px;
    display:block;
}

#account_type-error, #account_status-error, #listing_status-error, #status-error {
    display:block;
    margin-top:39px;
}

/*  */

.datepicker table tr td.active.active, .datepicker table tr td.active.highlighted.active, .datepicker table tr td.active.highlighted:active, .datepicker table tr td.active:active, .datepicker table tr td.active.active:hover {
    color: #fff;
    background-color: #076e6c;
    border-color: #076e6c;
}

.datepicker table tr td, .datepicker table tr th {
    font-size:14px;
}

/* Media queries  */

@media (min-width: 601px) and (max-width: 1024px) {
    
    table.dataTable {
        width: 100% !important;
    }

}

/* Handle the datatable elements */ 
@media (max-width: 768px) {

    #records_wrapper > .row > .col-sm-6:first-child,
    #records_wrapper > .row > .col-sm-6:nth-child(2),
    #users_wrapper > .row > .col-sm-6:first-child,
    #users_wrapper > .row > .col-sm-6:nth-child(2) {
        width: 50%; /* Adjusted to 50% for even distribution */
        float: left; /* Ensure columns float left for alignment */
    }

    #records_wrapper > div:first-child > div, #users_wrapper > div:first-child > div {
        width:50%;
    }

    #dt-search-0 {
        width:70%;
    }

}

@media (min-width: 992px) {
    .navbar .nav-item .dropdown-menu {
        border: 1px solid #669291 !important;
        border-radius:6px;
    }
}