@import url('https://fonts.googleapis.com/css2?family=Abel&display=swap');
/*@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap');*/

/* Ensure the footer sticks to the bottom */
html, body {
    height: 100%;
    margin: 0;
}
body {font-size: 14px; font-family: 'Inter', sans-serif !important;}
/*body {font-size: 14px; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;}*/

body {
  padding-right:0 !important;
}
.modal-open {
  overflow:auto;
  padding-right:0 !important;
}

.abel {font-family: 'Abel', sans-serif !important;}
.ff_normal {font-family: sans-serif !important;}

/* Ensure the content grows if needed */
.content {flex: 1;}

/* Fixed header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030; /* Ensure it's above other content */
}

/* Adjust margin-top to account for fixed header */
.content-wrapper {
    margin-top: 101px; /* Same as header height */
    padding: 0px;
    background-color: #f6f6f6;
}
.stickyTopMain {top: 120px;}

/* Make footer full width at the bottom */
.footer {
    text-align: center;
    padding: 15px 30px;
    /*background-color: #008374;
    border-top: 1px solid #666;*/
    background-color: #333;
    border-top: 1px solid #000;
}


/* HEADER */
.header {background: #fff; border-bottom: 1px solid #ddd;}
.logoCon {padding-left: 30px; padding-right: 30px; border-right: 1px none #ddd;}
.logoCon .logo {height: 60px;}
.menuCon {min-height: 100px;}
.menuHelpCon {background: #d1050c; padding: 5px 30px; border-radius: 0 0 0 60px; border-bottom: 1px solid #862222; font-size: 10px;}
/*@media (min-width: 576px) {
    .menuHelpCon {font-size: 12px;}
    .logoCon .logo {height: 70px;}
}*/
@media (min-width: 480px) {
    .menuHelpCon {font-size: 12px;}
    .logoCon .logo {height: 70px;}
}
@media (min-width: 768px) {
    .menuHelpCon {font-size: 14px;}
    .logoCon .logo {height: 80px;}
}
.menuBarCon {background: #fff; padding-right: 30px;}
.topMenu a {text-decoration: none;}

/* MENU DRAWER */
.drawerButton {font-size: 20px; border: 1px solid #ddd; border-radius: 10px; padding: 5px 12px; cursor: pointer;}
/* For offcanvas on the right (offcanvas-end) */
.offcanvas.offcanvas-end {
    width: 300px; /* Set your custom width here */
}
/* For offcanvas on the left (offcanvas-start) */
.offcanvas.offcanvas-start {
    width: 300px; /* Set your custom width here */
}
.offcanvas-header {height: 31px; background-color: #d1050c; padding: 10px 1rem;}
.offcanvasLabel {font-size: 16px; color: #fff; padding-top: 5px;}
.drawer {padding: 0;}
.drawerMenu {list-style-type: none; padding: 0px;}
.drawerMenu a {text-decoration: none; color: #777;}
.drawerMenu li {padding: 1rem; background-color: #f6f6f6; border-top: 1px solid #fff; border-bottom: 1px solid #e5e5e5; cursor: pointer;}
.drawerMenu li:hover {background-color: #fff;}
.drawerMenu li.active {background-color: #212529; border-top: 1px solid #787878; color: #fff;}


/* Dashboard Slider */
.sliderCon {border: 1px solid #777; border-width: 1px 0;}

section {}
section.sectionWhite {background-color: #fff; border-top: 1px solid #eee;}
section.sectionGrey {border-top: 1px solid #eee;}
.section-header {text-align: center; padding-top: 40px; padding-bottom: 20px;}
.section-header h2 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 20px;
    position: relative;
    font-weight: bold;
    color: #006459;
    font-family: 'Abel', sans-serif !important;
}
.section-header h2:after {
    content: "";
    position: absolute;
    display: block;
    width: 50px;
    height: 3px;
    background: #008374;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.sectionContent {text-align: left; padding: 0px 30px 40px 30px; color: #6f6f6f;}

@media (min-width: 768px) {
    .section-header h2 {font-size: 26px;}
}


/* DASHBOARD TILES */
.containerTiles {margin-left: 30px; margin-right: 30px;}
@media (min-width: 992px) {
    .containerTiles {width: 90%; margin: auto;}
    .containerTiles .alertCon {padding-left: 15px; padding-right: 15px;}
}

.flexWidgetCon .flexWidget {padding: 20px; background-color: #fff; box-shadow: 1px 2px 3px #ddd; border: 1px solid #e7e7e7; border-radius: 10px; height: 100%;}

.tileCon {padding-bottom: 30px;}
@media (min-width: 768px) {
    /* Style Odd tile */
    .dashboardTiles .tileCon:nth-child(odd) {
        /* Your styles for the 4th, 7th, 10th, etc. tiles */
        padding-right: 15px;
    }

    /* Style Even tile */
    .dashboardTiles .tileCon:nth-child(even) {
        /* Your styles for the 4th, 7th, 10th, etc. tiles */
        padding-left: 15px;
    }
}
@media (min-width: 992px) {
    .tileCon {padding-left: 15px; padding-right: 15px;}

    /* Style every third tile starting from the 4th */
    .dashboardTiles .tileCon:nth-child(3n+4) {
    }
}

.widgetTile {cursor: pointer;}
.widgetTile:hover {border: 1px solid #bdd7e7; border-bottom-color: #fff;}
.widgetTile:hover .readmore {background-color: #006459; color: #fff;}

.widgetLeft img {height: 50px;}
.widgetRight {padding-left: 30px; font-size: 16px; text-align: -webkit-right;}
.widgetRight.linkBlue {
    text-decoration: underline;
    text-decoration-thickness: from-font;
}

.widgetBody .readmore {
    margin-top: 10px;
    margin-bottom: 0px;
    text-align: center;
    font-weight: 500;
    border-color: #05608a;
    width: 30px;
    height: 30px;
    border: 1px solid #006459;
    line-height: 28px !important;
    border-radius: 50%;
    transition: 0.5s;
}
.widgetNote {
    font-family: Arial, sans-serif;
    font-size: 13px;
    color: #333;
    padding: 5px 10px;
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-left: 4px solid #f39c12; /* Add an accent to the left */
    margin-top: 15px;
    display: inline-block;
}

.widgetNote .date {
    font-weight: bold;
    color: #e78e00; /* Highlight the date in a different color */
    white-space: nowrap;
}

.labelAbel {font-family: Abel, sans-serif !important; font-weight:600; padding-bottom: 5px;}


.customCard {background-color: #fff; border-radius: 10px; border: 1px solid #ddd;}
.registrationCon {margin-bottom: 30px;}
.customCardRegistration {margin-top: 30px;}
@media (min-width: 992px) {
    .registrationCon {margin-bottom: 0px;}
    .customCardRegistration {margin: 0 10px;}

}
.customCardTracker {margin: 0 10px 20px 10px;}
.customCardCon {padding: 10px 30px 40px 30px;}
.customCardHeader {margin-top: 20px; margin-bottom: 40px; color: #05608a;}
.cardTopFillWarning {
    --bd-callout-color: var(--bs-warning-text-emphasis);
    --bd-callout-bg: var(--bs-warning-bg-subtle);
    --bd-callout-border: var(--bs-warning-border-subtle);
    --bs-link-color-rgb: var(--bd-callout-link);
    --bs-code-color: var(--bd-callout-code-color);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    color: var(--bd-callout-color, inherit);
    background-color: var(--bd-callout-bg, var(--bs-gray-100));
    border-radius: 10px 10px 0 0;
}

.cardTopFillDanger {
    --bd-callout-color: var(--bs-danger-text-emphasis);
    --bd-callout-bg: var(--bs-danger-bg-subtle);
    --bd-callout-border: var(--bs-danger-border-subtle);
    --bs-link-color-rgb: var(--bd-callout-link);
    --bs-code-color: var(--bd-callout-code-color);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    color: var(--bd-callout-color, inherit);
    background-color: var(--bd-callout-bg, var(--bs-gray-100));
    border-radius: 10px 10px 0 0;
}

.cardTopFillSuccess {
    --bd-callout-color: var(--bs-success-text-emphasis);
    --bd-callout-bg: var(--bs-success-bg-subtle);
    --bd-callout-border: var(--bs-success-border-subtle);
    --bs-link-color-rgb: var(--bd-callout-link);
    --bs-code-color: var(--bd-callout-code-color);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    color: var(--bd-callout-color, inherit);
    background-color: var(--bd-callout-bg, var(--bs-gray-100));
    border-radius: 10px 10px 0 0;
}

.formLabelHead {
    color: #05608a;
    font-size: 14px;
/*    font-family: 'Abel', sans-serif !important;*/
    font-weight: 600;
}
input, select {border-color: #d3d3d3 !important;}
/*input:required:not(:disabled):not([type="radio"]):not([type="checkbox"]), select:required:not(:disabled) {
  background-color: #f0f8ff !important;
}*/
input:not(:disabled):not([type="radio"]):not([type="checkbox"]), select:not(:disabled) {
  background-color: #f0f8ff !important;
}
.form-check-input-lg {width: 20px; height: 20px; margin-top: 0px; margin-right: 10px;}
input::placeholder {
    color: #999 !important;
/*    font-style: italic;*/
    font-size: 12px;
}


.applicationNumberTrackerCon {padding: 40px 20px 50px 20px;}
@media (min-width: 576px) {
    .applicationNumberTrackerCon {padding: 40px 50px 50px 50px;}
}

.selectFinderContent {padding: 20px;}
@media (min-width: 992px) {
    .selectFinderContent {
        padding: 50px;
    }
}

.uploadTable tr {vertical-align: middle;}
.uploadTable img {width: 50px; height: 50px; border: 1px solid #ddd; padding: 1px;}

.downloadIframe {border: none; width: 100%; height: 50px; color: red !important;}