/*below styles are custom for this portal*/
body {
background-color: #f6f6f8;
}

.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
max-width: 1520px !important;
}

html[dir=ltr] li a {
    margin-left: 0px !important;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
}



/* Compact overall popup */
.swal2-popup {
width: 30em !important;
padding: 0.6em 1.2em !important;
/* less vertical padding */
font-size: 0.8rem !important;
border-radius: 8px !important;
min-height: auto !important;
line-height: 1.2 !important;
}

/* Title — bigger but closer */
.swal2-title {
font-size: 1.3rem !important;
font-weight: 600 !important;
margin: 0.2em 0 !important;
/* tighten above & below title */
}

/* Text — compact spacing */
.swal2-text {
font-size: 0.85rem !important;
margin: 0.2em 0 !important;
/* reduced margin */
}

/* Icon — smaller & closer */
.swal2-icon {
transform-origin: center center;
margin: 0.1em auto !important;
/* less space around icon */
}

/* Buttons — compact */
.swal2-button {
font-size: 0.75rem !important;
padding: 0.25em 0.8em !important;
min-width: 4.5em !important;
margin: 0 0.2em !important;
/* reduce gap between buttons */
}

/* Action buttons wrapper */
.sw-compact .swal2-actions {
margin-top: 0.4em !important;
/* bring buttons closer to text */
}

.footer-para {
color: white;
font-weight: 400;
text-align: right;
}

.white-text {
color: #FAFCFC;
text-decoration: underline !important;
font-weight: 400 !important;
}


.white-text:hover {
color: #FAFCFC;
text-decoration: none !important;
}


.wrapper-page {
min-height: 750px;
background-color: white;
padding-bottom: 2rem;
margin-bottom: 20px;
border-radius: 0 0 10px 10px;
box-shadow: 0 3px 5px rgb(57 63 72 / 30%);
-webkit-box-shadow: 0 3px 5px rgb(57 63 72 / 30%);
-moz-box-shadow: 0 3px 5px rgb(57 63 72 / 30%);
}

.wrapper-page-wide {
margin-left: 30px;
margin-right: 30px;
width: auto;
}

hr {
border-bottom: 7px solid #0b80d0 !important;
}

.gmb_tablelist {
margin-bottom: 60px !important;
}

.gmb_tablelistheader {
/*color: #666666 !important;
font-size: 26px !important; */
padding-bottom: 10px !important;
border-bottom: 6px solid #0b4d4e !important;
margin-bottom: 15px !important;
}

.btn-tablelist {
display: block;
margin-left: auto;
}

/* Disabled button styling */
.btn.disabled,
.btn:disabled,
fieldset:disabled .btn {
background-color: #b4c2c9;
color: #5d646f;
cursor: not-allowed !important;
border: 1px solid #5d646f;
}

.breadcrumb {
padding: 3px 15px;
margin-top: -3px;
margin-bottom: 20px;
list-style: none;
}

.styled-table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}

.styled-table th,
.styled-table td {
padding: 12px;
text-align: left;
cursor: pointer;
min-width: 150px;
/* Ensure columns do not shrink */
height: 70px
}

.styled-table thead {
color: #1b2225;
font-weight: bold;
text-decoration: underline;
border-bottom: 2px solid #ddd;
}



.styled-table tbody tr:nth-child(even) {
background-color: #f9f9f9;
}

.styled-table tbody tr {
border-bottom: 1px solid #ddd;
}

.styled-table tbody tr:last-child {
border-bottom: none;
}

.styled-table tbody tr:hover {
background-color: #f9f9f9;
transition: 0.3s;
}

/* Full wrapper for pagination + total + view all */
.pagination-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
/* allows wrapping on smaller widths */
gap: 10px;
padding-top: 10px;
border-top: 1px solid #eee;
}

.pagination {
display: flex;
}

.pagination button {
border: none;
background: none;
cursor: pointer;
padding: 8px 12px;
}

.pagination button.active {
background-color: #003d59;
color: white;
border-radius: 50%;
text-align: center;
font-weight: bold;
height: 33px;
}

.pagination button:disabled {
color: #ccc;
cursor: not-allowed;
background-color: white;
}

.pagination button:hover:not(.active):not(:disabled) {
text-decoration: underline;
}

/* View All link container */
.viewall-container {
display: flex;
align-items: center;
gap: 8px;
}

/* Style for the "View All" link */
.view-all-link {
color: #0B4D4E;
text-decoration: underline;
font-weight: 500;
font-size: 14px;
cursor: pointer;
}

/* Hover effect for the "View All" link */
.view-all-link:hover {
color: #0B4D4E;
text-decoration: none;
}

/* Container for the search box */
.table-search-container {
position: relative;
width: 300px;
/* Adjust width of the search box */
display: flex;
align-items: center;
margin-top: 20px;
margin-left: auto;
/* Align the search box to the right */
margin-right: 10px;
/* Optional: Adds space from the right */
}

/* Style for the search input */
.table-search-input {
width: 100%;
padding: 8px 10px;
/* Adjust padding since no icon */
font-size: 14px;
border: 1px solid #ddd;
/* Subtle border */
border-radius: 4px;
/* Rounded corners */
outline: none;
}

/* Style for the search input placeholder */
.table-search-input::placeholder {
color: #a0a0a0 !important;
/* Set placeholder text color to light gray */
opacity: 1;
/* Ensure the placeholder is fully opaque */
}

/* When the user types something, the text will appear in normal color */
.table-search-input:not(:placeholder-shown) {
color: #000;
/* Change text color to black when the user types */
}

/* Clear button (inside the search input) */
.table-search-clear-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
/* Vertically center the button */
right: 10px;
background: none;
border: none;
cursor: pointer;
}

/* ─── SORT ARROWS CSS (inline, no gap) ─────────────────────────────────────────── */
.styled-table th {
cursor: pointer;
/* remove any right padding—you’ll see the arrow immediately after the text */
padding-right: 0;
white-space: nowrap;
}

/* inline pseudo-element, with a tiny left-margin to separate it from the text */
.styled-table th.sort-asc::after,
.styled-table th.sort-desc::after {
content: "";
display: inline-block;
margin-left: 0.2em;
/* just enough to breathe */
font-size: 0.8em;
line-height: 1;
color: #003d59;
}

/* ▲ up‐arrow for ascending */
.styled-table th.sort-asc::after {
content: "▲";
}

/* ▼ down‐arrow for descending */
.styled-table th.sort-desc::after {
content: "▼";
}

/* Icons style for the clear button */
.table-search-clear-icon {
font-size: 18px;
color: #666666;
/* Light color for the clear icon */
}

/* Common link style for applications and licenses */
.table-link {
color: #075EAD;
/* Blue color */
text-decoration: none;
/* No underline by default */
}

/* Hover effect */
.table-link:hover {
color: #075EAD;
/* Darker blue on hover */
text-decoration: underline;
/* Underline on hover */
}


.dropdowndiv {
display: none;
position: absolute;
background-color: #fff;
min-width: 120px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
z-index: 10;
/*right: 0; */
border-radius: 5px;
}

.dropdownDiv {
display: none;
position: absolute;
background-color: #fff;
min-width: 120px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
z-index: 10;
border-radius: 5px;
/* top: 35px; */
}

.dropdowndiv a {
color: #333;
padding: 8px 12px;
text-decoration: none;
display: block;
font-size: 14px;
}

.dropdownButton {
border: 2px solid #003d59;
background-color: white;
color: #003d59;
cursor: pointer;
font-size: 8px;
padding: 5px 10px;
border-radius: 4px;
}

.dropdownButton:hover {
border-color: #006d8b;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.Modal {
display: none;
position: fixed;
z-index: 1050;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
}

/* Modal Dialog */
.Modal-dialog {
position: relative;
width: auto;
max-width: 600px;
margin: 5% auto;
}

/* Modal Content */
.Modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
overflow: visible;
width: 70%;
height: fit-content;
border-radius: 20px;
}

/* Modal Header */
.Modal-header {
padding: 2px 16px;
color: white;
background: #007bff;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}

/* Modal Body */
.Modal-body {
padding: 10px 16px;
max-height: 400px;
overflow-y: auto;
}

/* Modal Footer */
.Modal-footer {
padding: 10px 16px;
color: white;
background: #007bff;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}

/* Smooth fade-in and fade-out effect for the modal */
.modal.fade .modal-dialog {
transform: translate(0, -50px);
transition: transform 0.3s ease-in-out, opacity 0.2s ease-in-out;
opacity: 0;
}

.modal.show .modal-dialog {
transform: translate(0, 0);
opacity: 1;
}

/* Optional: Slow down the fade in for the backdrop */
.modal.fade .modal-backdrop {
opacity: 0;
transition: opacity 0.3s ease-in-out;
}

.modal.show .modal-backdrop {
opacity: 0.5;
}

.toggleButton {
border: 2px solid #003d59;
background-color: white;
color: #003d59;
cursor: pointer;
font-size: 15px;
padding: 5px 10px;
border-radius: 4px;
float: right;
margin-top: 2px;
}

.toggleButton:hover {
border-color: #006d8b;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}


.show {
display: block;
}

.form-group {
margin-bottom: 20px;
}

.fieldset {
margin-bottom: 20px;
}


/* Style for the tabs */
.tab-content {
display: none;
padding: 20px;
border: 1px solid #ddd;
border-top: none;
}

.tab-content.active {
display: block;
}

.nav-tabs {
border-bottom: 2px solid #ddd;
}

.nav-tabs>li {
float: left;
margin-bottom: -1px;
border: 1px solid #ccc;
border-radius: 8px 8px 0 0;
}

.nav-item .active {
background-color: #f8f9fa;
/* Or any color you prefer */
color: #007bff;
}

.nav-tabs .nav-item {
margin-right: 5px;
}

.nav-tabs .nav-link {
/* background-color: #D9D9D9; */
color: #075ead;
border: none;
padding: 15px 15px;
text-align: center;
font-weight: bold;
}

.nav-tabs .nav-link.active {
background-color: #003d59;
color: white;
opacity: 80%;
}

.nav-tabs .nav-link:hover {
background-color: #bfbfbf;
}

.section-container {
display: flex;
flex-wrap: wrap;
}

.section {
flex: 1;
min-width: 50px;
margin: 10px;
}

.border-section {
padding: 10px;
margin-top: 20px;
padding: 10px;
border: 1px solid #0b4d4e;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.section-header {
background-color: #d2dbdf;
color: #073334;
padding: 10px;
font-size: 20px;
font-weight: bold;
border-radius: 8px 8px 0 0;
margin-left: -10px !important;
margin-top: -10px !important;
margin-right: -10px !important;
}

.section-content {
padding: 5px;
}

.form-group input::placeholder {
color: gray !important;
}

.form-group label {
font-weight: bold;
font-size: 15px;
color: #202124;
display: block;
margin-bottom: 5px;
}

.form-group input,
.form-group select {
width: 100%;
padding: 6px;
margin-bottom: 20px;
border: 1px solid #949494;
border-radius: 4px;
font-size: 14px;
display: block;
outline: none;
}

.form-group p {
font-size: 13px;
color: #202124;
margin-top: -10px;
margin-bottom: 20px;
display: block;
}

.btn-danger {
font-size: 14px;
font-weight: 600;
border-radius: 2px;
}

.btn-primary,.button2, .btn-secondary, .btn-default, .btn-danger  {
       font-family: 'Fira Sans', sans-serif !important;
}

.section.container {
border: #0869c4 1px solid;
border-radius: 6px;
max-width: 90% !important;
}

input:focus,
select:focus {
border: 1px solid #007bff;
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.required {
color: #d81616;
}

.form-flex-container {
display: flex;
align-items: center;
padding: 10px;
gap: 20px;
}

.form-flex-container label {
margin-right: 4px;
}

.instructiontext {
background-color: #d2dbdf !important;
color: #666666;
margin-bottom: 0px;
font-weight: bold;
}

.alert-info {
color: #073334;
background-color: #d9edf7;
border-color: #0b4d4e;
}

.alert {
border-radius: 4px;
}

.alert-danger {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
/* padding: 10px; */
border-radius: 5px;
}

.spinner-icon {
font-size: 22px;
vertical-align: middle;
}

/* Force hide initially */
.hide {
display: none !important;
}

/* Define custom spin animation */
@keyframes spin {
from {
transform: rotate(0deg);
}

to {
transform: rotate(360deg);
}
}

/* Custom spinning class */
.custom-spin {
animation: spin 1s linear infinite;
}

/* fontawesome-icon */
.fontawesome-icon {
font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", sans-serif;
font-weight: 900;
font-style: normal;
font-size: 8px;
cursor: pointer;
margin: 0 10px;
color: #003d59;
}

.download-btn {
background: none;
/* No background */
border: none;
/* No border/box */
cursor: pointer;
font-size: 18px;
/* Slightly bigger icon for visibility */
color: #003d59;
/* Your brand color */
padding: 0;
/* Remove extra padding */
outline: none;
/* No outline on focus */
}

.download-btn:hover {
color: #005a8c;
/* Slightly darker on hover for feedback */
}

@media (max-width: 768px) {

.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
padding-right: calc(var(--bs-gutter-x) * .2) !important;
padding-left: calc(var(--bs-gutter-x) * .2) !important;
}

.gmb_tablelistheader {
padding-top: 10px !important;
padding-bottom: 13px !important;
}

.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger {
padding: 6px 12px !important;
font-size: 12px !important;
margin: 0 5px 5px !important;
}

.h3,
h3 {
font-size: calc(1rem + 1vw) !important;
white-space: normal !important;
word-wrap: break-word !important;
}

.swal2-popup {
width: 85% !important;
height: auto !important;
font-size: 14px !important;
padding: 15px !important;
transform: scale(0.9);
max-width: 100% !important;
}

.swal2-title,
.swal2-content,
.swal2-actions {
font-size: 14px !important;
}

.swal2-button {
font-size: 10px !important;
padding: 8px 16px !important;
}

.swal2-icon {
font-size: 10px !important;
}

.message-container {
flex-direction: column;
gap: 15px;
}

.left-section,
.right-section {
flex: 0 0 100%;
}

.nav.nav-tabs {
flex-direction: column;
gap: .25rem;
}

.nav-tabs>li {
width: 100%;
}

.nav-tabs>li>a,
.nav-tabs .nav-link {
width: 100%;
text-align: center;
}

.section-container {
flex-direction: column;
align-items: stretch;
}

.section {
width: 100%;
margin-bottom: 20px;
}

.form-group {
width: 100%;
}

.styled-table {
width: 100%;
min-width: 600px;
}

.styled-table th,
.styled-table td {
min-width: 100px;
}

.table-container {
overflow-x: auto;
}

.pagination-wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding: 10px;
}

.pagination-button {
margin: 0 5px;
}

.pagination {
display: flex;
}

.table-search-container {
width: 260px;
}

.Modal-dialog {
width: 95%;
margin: 20% auto;
}

.Modal-header,
.Modal-footer {
padding: 10px 20px;
}
}

/* For screens wider than mobile (max-width: 767px) and up to tablet range (max-width: 1024px) */
@media only screen and (max-width: 1024px) {
.styled-table {
width: 100%;
min-width: 600px;
}

.styled-table th,
.styled-table td {
min-width: 120px;
}

.table-container {
overflow-x: auto;
}

.message-container {
flex-direction: column;
gap: 15px;
}

.left-section,
.right-section {
flex: 0 0 100%;
}

.sw-compact {
width: 20em !important;
padding: 0.55em 1.1em !important;
}

.sw-compact-title {
font-size: 1.25rem !important;
}

.sw-compact-text {
font-size: 0.8rem !important;
}

.sw-compact-btn {
font-size: 0.75rem !important;
padding: 0.25em 0.7em !important;
}

.sw-compact-icon {
transform: scale(0.6);
}
}