/*

*/
html {
    min-height: 100%;
}
body.primary {
    min-height: 100%;
    background: #1f1f1f url('/img/igc-bgweb-grad.jpg') bottom center no-repeat !important;
    background-size: cover;
}

figure.image {
  display: inline-block;
  text-align: center;
  margin: 10px auto;
  background: #f5f5f5;
  border-radius: 8px;
  clip: 8px;
}

figure.image img {
  margin: 0 8px 0 8px;
}

figure.align-left {
  float: left;
  margin: 20px 20px 20px 0;
}

figure.align-right {
  float: right;
  margin: 20px 0 20px 20px;
}

figure.align-center {
  display: inline-block;
  text-align: center;
  margin: 0 auto;
}



figure.image figcaption {
  margin: 6px 8px 6px 8px;
  text-align: center;
  max-width: 100%;
}

/*
 Alignment using classes rather than inline styles
 check out the "formats" option
*/

img.align-left {
  float: left;
}

img.align-right {
  float: right;
}

/* Basic styles for Table of Contents plugin (tableofcontents) */
.mce-toc {
  border: 1px solid gray;
}

.mce-toc h2 {
  margin: 4px;
}

.mce-toc li {
  list-style-type: none;
}


.inner {
  text-align: center;
}
.inner p {
  text-align: left;
}


.fe-custom-container {
    max-width: 80vw; /* Adjust the percentage as needed */
    margin: 0 auto; /* Center the container */
    /*display: flex;*/
}

.custom-card {
    width: 80%;
    margin-bottom: 6rem;
}

.dash-link-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background-color: #fff;
    color: #444;
    padding: 0;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    overflow: hidden;
}

.dash-link-card {
    /*font-size: 100%;*/
    display: flex; /* Use flex to align content within the link */
    flex-direction: column; /* Align items vertically */
    align-items: center; /* Center items horizontally */
    justify-content: center; /* Center items vertically */
    width: 100%; /* Make the card link fill its grid cell */
    height: 100%; /* Make the card link fill its grid cell */
    color: #dee2e7;
    /*color: inherit;*/
    background-color: #2b2e31;
    transition: background-color 0.3s ease;
    text-decoration: none;
}

.dash-link-wrapper2 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background-color: #fff;
    color: #444;
    padding: 0;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    overflow: hidden;
}

.dash-link-card2 {
    /*font-size: 100%;*/
    display: flex; /* Use flex to align content within the link */
    flex-direction: column; /* Align items vertically */
    align-items: center; /* Center items horizontally */
    justify-content: center; /* Center items vertically */
    width: 100%; /* Make the card link fill its grid cell */
    height: 100%; /* Make the card link fill its grid cell */
    color: #dee2e7;
    /*color: inherit;*/
    background-color: #2b2e31;
    transition: background-color 0.3s ease;
    text-decoration: none;
}


/*.dash-links-wrapper {*/
/*    border-radius: 8px;*/
/*    overflow: hidden;*/
/*}*/

/*.dash-links-container {*/
/*    display: grid;*/
/*    grid-template-columns: repeat(3, 1fr);*/
/*    !*gap: 1rem; !* Optional: gap between grid items *!*!*/
/*    padding: 1rem;*/
/*}*/

/*.dash-links-container2 {*/
/*    display: grid;*/
/*    grid-template-columns: repeat(5, 1fr);*/
/*    !*gap: 1rem; !* Optional: gap between grid items *!*!*/
/*    padding: 1rem;*/
/*}*/

/*.dash-card-link {*/
/*    display: flex; !* Use flex to align content within the link *!*/
/*    flex-direction: column; !* Align items vertically *!*/
/*    align-items: center; !* Center items horizontally *!*/
/*    justify-content: center; !* Center items vertically *!*/
/*    width: 100%; !* Make the card link fill its grid cell *!*/
/*    height: 100%; !* Make the card link fill its grid cell *!*/
/*    text-decoration: none;*/
/*    color: #dee2e7;*/
/*    !*color: inherit;*!*/
/*    background-color: #2b2e31;*/
/*    transition: background-color 0.3s ease;*/
/*    !*display: flex;*!*/
/*    !*align-items: center;*!*/
/*    !*justify-items: center;*!*/
/*}*/

.dash-card-body {

}

.account-links-wrapper {
    border-radius: 8px;
    overflow: hidden;
}

.account-links-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 1rem;
}

.account-card-link {
    text-decoration: none;
    color: inherit;
    background-color: #232934;
    transition: background-color 0.3s ease;
    /*display: flex;*/
    /*align-items: center;*/
    /*justify-items: center;*/
}

.page-container {
    padding: 0.25rem;
    margin: 0.25rem;
    border: 1px solid #1a1a1a;
    border-radius: 5px;
}

/* Parent Page Styles */
.page-active {
    background-color: #2b2e31; /* Active parent pages */
}

.page-draft {
    background-color: #383b3f; /* Draft parent pages */
}

.page-replaced {
    background-color: #6b6e72; /* Replaced parent pages */
}

.page-hidden {
    background-color: #4e5155; /* Hidden parent pages */
}

.parent-page.page-active {
    background-color: #2b2e31; /* Active parent pages */
}

.parent-page.page-draft {
    background-color: #383b3f; /* Draft parent pages */
}

.parent-page.page-replaced {
    background-color: #6b6e72; /* Replaced parent pages */
    color: black;
}

.parent-page.page-hidden {
    background-color: #4e5155; /* Disabled parent pages */
}

/* Child Page Styles */
.child-page.page-active {
    background-color: #0e2c4f; /* Active child pages */
}

.child-page.page-draft {
    background-color: #1f4e81; /* Draft child pages */
}

.child-page.page-replaced {
    background-color: #2d343b; /* Replaced child pages */
}

.child-page.page-hidden {
    background-color: #3b5877; /* Disabled child pages */
}

/* Grandchild Page Styles */
.grandchild-page.page-active {
    background-color: #0e2c4f; /* Active grandchild pages */
}

.grandchild-page.page-draft {
    background-color: #1f4e81; /* Draft grandchild pages */
}

.grandchild-page.page-replaced {
    background-color: #2d343b; /* Replaced grandchild pages */
}

.grandchild-page.page-hidden {
    background-color: #3b5877; /* Disabled grandchild pages */
}

/* Make the dash buttons inside btn-group the same width */
.dash-btn-group {
    width: 3rem;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
}

.avatar-container {
    position: relative;
    display: inline-block;
}

.avatar-name {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 0);
    display: none;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px;
    border-radius: 3px;
    font-size: 12px;
    white-space: nowrap;
}

.avatar-link:hover .avatar-name {
    display: block;
}

/* Show title on hover */
.btn[title]:hover::before {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.5rem;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    white-space: nowrap;
}

/* Media query for screens less than 1000px */
@media screen and (max-width: 1000px) {
    .dash-links-container {
        grid-template-columns: repeat(4, 1fr); /* Change to 4 equal columns */
    }
    .dash-card-link > div {
        margin: 0.2rem;
    }
}

/* Task dropdown styling */
.btn-group .dropdown-toggle::after {
    display: none;
}

.page-depth1 {
    margin-left: 30px !important;
}

.page-depth2 {
    margin-left: 60px !important;
}

.img-selectable.highlight {
    border: 2px solid #007bff;
}

.img-selectable.selectable {
    cursor: pointer;
}

.sharp-left-corners {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.sharp-right-corners {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.custom-tab {
    background-color: rgba(105,105,105, 0.2) !important; /* Darker shade for non-active tabs */
    color: #fff; /* Text color for tabs */
}

.custom-tab.active {
    background-color: rgba(255, 255, 255, 0.1) !important; /* Lighter shade for active tab */
}

.input-group-text.fixed-width {
    width: 100px; /* Set a fixed width for all input-group-text elements */
}



@media (max-width: 991.98px) { /* Bootstrap breakpoint for large devices */
    #nav-pages-icon {
        display: none;
    }

    #nav-images-icon {
        display: none;
    }
}

@media (min-width: 992px) {
    #dropdown-pages-link {
        display: none;
    }
    #dropdown-images-link {
        display: none;
    }
}

show-account-table {
    table-layout: auto; /* Adjusts the table layout */
}


/* set max-width for show-account email col */
@media (max-width: 575px) {
    .email-column {
        max-width: 125px; /* Set the maximum width for the email column */
        word-wrap: break-word; /* Ensure text wraps */
        overflow-wrap: break-word; /* For better word-breaking */
    }

    .email-column td {
        white-space: normal; /* Allow wrapping */
    }

    .name-column {
        max-width: 125px; /* Set the maximum width for the email column */
        word-wrap: break-word; /* Ensure text wraps */
        overflow-wrap: break-word; /* For better word-breaking */
    }

    .name-column td {
        white-space: normal; /* Allow wrapping */
    }
}

@media (max-width: 767.98px) {
    #viewButton {
        border-top-right-radius: 0.25rem;
        border-bottom-right-radius: 0.25rem;
    }
}

@media (min-width: 768px) {
    #viewButton {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
}

/* Edit User-form Permissions Responsive */
@media (max-width: 768px) {
    /* Hide the table headers on small screens */
    .permissions-table thead {
        display: none;
    }

    /* Display table rows as blocks */
    .permissions-table tr {
        display: block;
        margin-bottom: 15px;
        /*padding: 10px;*/
        background-color: rgba(255, 255, 255, 0.1);
        /*border-radius: 5px;*/
    }

    /* Each table cell is displayed as a block */
    .permissions-table td {
        display: block;
        padding: 10px 0;
        border: none; /* Remove cell borders */
        width: 100%;  /* Ensure full width of container */
    }

    /* Stack the label (th-like behavior) and content (td-like behavior) vertically */
    .permissions-table td:before {
        content: attr(data-label);
        display: block;
        font-weight: bold;
        margin-bottom: 5px;
    }

    /* Content of the actual permissions */
    .permissions-table .permission-item {
        margin-left: 0;
    }
}

@media (max-width: 390px) {
    .nav-tabs .nav-link {
        padding: 5px 8px; /* Adjust padding */
        font-size: 14px; /* Reduce font size */
    }
}

.dropdown-menu {
    left: -10px; /* Adjust the value to control the offset */


    /*left: 0; !* Align the left edge of the dropdown with the left edge of the parent *!*/
    /*right: auto;*/
}