/* #region Colors */

.color-cc {
    color: #268bd2 !important;
}
.background-color-cc {
    background-color: #268bd2 !important;
}

/* #endregion /Colors */

/* #region Borders */
.border-top-cc {
    border-top-color: #268bd2 !important;
}

.border-right-cc {
    border-right-color: #268bd2 !important;
}

.border-bottom-cc {
    border-bottom-color: #268bd2 !important
}

.border-left-cc {
    border-left-color: #268bd2 !important;
}
.border-thick-top-cc {
    border-top-width: 2px;
    border-top-color: #268bd2;
}

.border-thick-right-cc {
    border-right-width: 2px;
    border-right-color: #268bd2;
}

.border-thick-bottom-cc {
    border-bottom-width: 2px;
    border-bottom-color: #268bd2;
}

.border-thick-left-cc {
    border-left-width: 2px;
    border-left-color: #268bd2;
}
/* #endregion /Borders */

/* #region Cards */

/* #endregion /Cards */

/* #region Icons */
.custom-underline-cc {
    display: inline-block; /* Important for border-bottom to work properly */
    border-bottom: 3px solid #268bd2 !important;
    padding-bottom: 2px; /* Space between text and underline */
}

.badge-cc {
    color: #fff !important;
    background-color: #268bd2 !important;
}
/* #endregion /Icons */

/* #region Select2 */
/*#hourglassProjects .select2-container .select2-dropdown {
	top: 100% !important;*/ /* Forces the dropdown to open downward */
/*bottom: auto !important;
}*/

/* Remove the blue border on focus */
#campbellsCodeAdminUsers .select2-container--default .select2-selection--single .select2-selection__rendered,
#campbellsCodeAdminLogger .select2-container--default .select2-selection--single .select2-selection__rendered {
    outline: none !important;
    border: none !important; /* Removes the border */
    box-shadow: none !important; /* Removes the shadow */
}

/* Remove the default focus border on the entire selection */
#campbellsCodeAdminUsers .select2-container--default .select2-selection--single,
#registerMainCard .select2-container--default .select2-selection--single,
#myProfileMainCard .select2-container--default .select2-selection--single,
#userLogModal .select2-container--default .select2-selection--single {
    border-color: #202125 !important;
    box-shadow: none;
}

/* Blue bottom border on focus */
#campbellsCodeAdminUsers .select2-container--default .select2-selection--single:focus,
#registerMainCard .select2-container--default .select2-selection--single:focus,
#myProfileMainCard .select2-container--default .select2-selection--single:focus,
#userLogModal .select2-container--default .select2-selection--single:focus {
    border-bottom-color: #268bd2 !important;
    box-shadow: none;
}

/* Background color when hovering over an option */
#campbellsCodeAdminUsers .select2-container--default .select2-results__option--highlighted,
#registerMainCard .select2-container--default .select2-results__option--highlighted,
#myProfileMainCard .select2-container--default .select2-results__option--highlighted,
#userLogModal .select2-container--default .select2-results__option--highlighted {
    background-color: lightgray !important; /* Light grey for hover state */
    /*color: #000;*/ /* Black text */
}

/* Background color when an option is selected */
#campbellsCodeAdminUsers .select2-container--default .select2-results__option[aria-selected=true],
#registerMainCard .select2-container--default .select2-results__option[aria-selected=true],
#myProfileMainCard .select2-container--default .select2-results__option[aria-selected=true],
#userLogModal .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #268bd2 !important;
    /*color: #000;*/ /* Black text */
}

/* Ensure no blue background appears when hovering off */
#campbellsCodeAdminUsers .select2-container--default .select2-results__option--highlighted[aria-selected=false],
#registerMainCard .select2-container--default .select2-results__option--highlighted[aria-selected=false],
#myProfileMainCard .select2-container--default .select2-results__option--highlighted[aria-selected=false],
#userLogModal .select2-container--default .select2-results__option--highlighted[aria-selected=false] {
    background-color: #8e919d !important; /* Same as hover state */
    /*color: #000;*/
}

/* Clear any background color on hover off */
#campbellsCodeAdminUsers .select2-container--default .select2-results__option--highlighted:hover,
#registerMainCard .select2-container--default .select2-results__option--highlighted:hover,
#myProfileMainCard .select2-container--default .select2-results__option--highlighted:hover,
#userLogModal .select2-container--default .select2-results__option--highlighted:hover {
    background-color: #8e919d !important;
}
/* #endregion /Select2 */

/* #region DataTables */
/* #region Export Buttons */
#usersListCard .dt-button,
#organizationsListCard .dt-button,
#passwordVaultListCard .dt-button,
#loggerClientListCard .dt-button,
#loggerServerListCard .dt-button,
#loggerNavHistoryListCard .dt-button {
    color: black !important;
    background-color: white !important;
    margin-left: 5px !important;
    border-radius: 7px !important;
    border: none !important;
    padding: 5px !important;
}

#usersListCard .dt-button:hover,
#organizationsListCard .dt-button:hover,
#passwordVaultListCard .dt-button:hover,
#loggerClientListCard .dt-button:hover,
#loggerServerListCard .dt-button:hover,
#loggerNavHistoryListCard .dt-button:hover {
    color: white !important;
    background-color: #268bd2 !important;
}
/* #endregion /Export Buttons */

/* #region DataTable Links */
.dt-link-cc {
    color: white;
}

.dt-link-cc:hover {
    color: #268bd2;
    text-decoration: underline;
}

#campbellsCodeAdminUsers .dt-email-link:hover {
    color: #268bd2;
}
/* #endregion /DataTable Links */

/* #region DataTable Filters */
/* Keep dropdown icons highlighted as long as dropdown is shown */
#campbellsCodeAdminOrganizations .dropdown.show i.main-icon,
#campbellsCodeAdminUsers .dropdown.show i.main-icon,
#campbellsCodeAdminRoles .dropdown.show i.main-icon,
#campbellsCodeAdminPermissions .dropdown.show i.main-icon,
#campbellsCodePasswordVault .dropdown.show i.main-icon,
#campbellsCodeAdminLogger .dropdown.show i.main-icon {
    color: #268bd2;
}

#campbellsCodeAdminOrganizations .datatable-filters-wrapper i:hover,
#campbellsCodeAdminUsers .datatable-filters-wrapper i:hover,
#campbellsCodeAdminRoles .datatable-filters-wrapper i:hover,
#campbellsCodeAdminPermissions .datatable-filters-wrapper i:hover,
#campbellsCodePasswordVault .datatable-filters-wrapper i:hover,
#campbellsCodeAdminLogger .datatable-filters-wrapper i:hover {
    cursor: pointer;
    color: #268bd2;
}

#campbellsCodeAdminOrganizations #showDeletedButton[data-state="on"] i,
#campbellsCodeAdminUsers #showDeletedButton[data-state="on"] i {
/*#campbellsCodePasswordVault #showDeletedButton[data-state="on"] i {*/
    color: #cc4744 !important;
}

#campbellsCodeAdminOrganizations #showDeletedButton[data-state="off"] i,
#campbellsCodeAdminUsers #showDeletedButton[data-state="off"] i {
/*#campbellsCodePasswordVault #showDeletedButton[data-state="off"] i {*/
    color: white !important;
}

#campbellsCodeAdminOrganizations #showDeletedButton[data-state="off"] i:hover,
#campbellsCodeAdminUsers #showDeletedButton[data-state="off"] i:hover,
#campbellsCodePasswordVault #showDeletedButton[data-state="off"] i:hover {
    color: #268bd2 !important;
}
/* #endregion /DataTable Filters */

/* #region DataTable Actions */
/*#campbellsCodeAdminOrganizations #dataTableActions .edit-btn,
#campbellsCodeAdminUsers #dataTableActions .edit-btn,
#campbellsCodeAdminRoles #dataTableActions .edit-btn,
#campbellsCodeAdminPermissions #dataTableActions .edit-btn 
{
    background-color: #268bd2;
}

#campbellsCodeAdminOrganizations #dataTableActions .delete-btn,
#campbellsCodeAdminUsers #dataTableActions .delete-btn,
#campbellsCodeAdminRoles #dataTableActions .delete-btn,
#campbellsCodeAdminPermissions #dataTableActions .delete-btn 
{
    background-color: #268bd2;
}*/
/* #endregion /DataTable Actions */

/* #region DataTable Pagination */
#campbellsCodeAdminOrganizations .dataTables_wrapper .dataTables_paginate .paginate_button.current,
#campbellsCodeAdminUsers .dataTables_wrapper .dataTables_paginate .paginate_button.current,
#campbellsCodeAdminRoles .dataTables_wrapper .dataTables_paginate .paginate_button.current,
#campbellsCodeAdminPermissions .dataTables_wrapper .dataTables_paginate .paginate_button.current,
#campbellsCodePasswordVault .dataTables_wrapper .dataTables_paginate .paginate_button.current,
#campbellsCodeAdminLogger .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background-color: #268bd2;
}
/* #endregion /DataTable Pagination */
/* #endregion /DataTables */

/* #region Tooltips */
/* The .ui-tooltip class is declared in each cshtml view file */
/*.ui-tooltip {
    border-top: 2px solid #268bd2 !important;
    border-left: 2px solid #268bd2 !important;
    box-shadow: 2px 2px 5px #268bd2 !important;
    color: white;
    background-color: black;
}*/

.tooltip-icon-cc {
    color: white;
    cursor: pointer;
}

.tooltip-icon-cc:hover {
    color: #268bd2;
    cursor: pointer;
}

.tooltip-icon-cc:active {
    color: #268bd2;
    cursor: pointer;
}
/* #endregion /Tooltips */

/* #region Password Vault */
#passwordVaultScrollArea {
    max-height: 100%;
    overflow: auto;
}

#passwordVaultScrollArea th {
    position: sticky;
    top: 0;
    background-color: #1d1e21;
    color: white;
    z-index: 2;
}
/* #endregion /Password Vault */


/* #region MOBILE DEVICES */
/* CSS for screens up to 767px width (typically mobile devices) */
@media only screen and (max-width: 767px) {
    /* #region DataTables */
    /* #region Layout for Page Length and Button Controls */
    .organizations-table-toolbar .dataTables_filter input,
    .organizations-table-toolbar .dataTables_length select,
    .organizations-table-toolbar .dt-buttons button,
    .users-table-toolbar .dataTables_filter input,
    .users-table-toolbar .dataTables_length select,
    .users-table-toolbar .dt-buttons button,
    .password-vault-table-toolbar .dataTables_filter input,
    .password-vault-table-toolbar .dataTables_length select,
    .password-vault-table-toolbar .dt-buttons button,
    .logger-client-table-toolbar .dataTables_filter input,
    .logger-client-table-toolbar .dataTables_length select,
    .logger-client-table-toolbar .dt-buttons button,
    .logger-server-table-toolbar .dataTables_filter input,
    .logger-server-table-toolbar .dataTables_length select,
    .logger-server-table-toolbar .dt-buttons button,
    .logger-navhistory-table-toolbar .dataTables_filter input,
    .logger-navhistory-table-toolbar .dataTables_length select,
    .logger-navhistory-table-toolbar .dt-buttons button {
        font-size: 0.7rem !important; /* Smaller font size */
    }

    .organizations-table-toolbar .dataTables_length label,
    .users-table-toolbar .dataTables_length label,
    .password-vault-table-toolbar .dataTables_length label,
    .logger-client-table-toolbar .dataTables_length label,
    .logger-server-table-toolbar .dataTables_length label,
    .logger-navhistory-table-toolbar .dataTables_length label {
        width: 65px; /* Adjust to desired width */
        /*padding: 0.25rem;*/ /* Smaller padding for compactness */
        text-align: center; /* Center-align text within the dropdown */
    }

    .organizations-table-toolbar .dataTables_length label,
    .users-table-toolbar .dataTables_length label,
    .password-vault-table-toolbar .dataTables_length label,
    .logger-client-table-toolbar .dataTables_length label,
    .logger-server-table-toolbar .dataTables_length label,
    .logger-navhistory-table-toolbar .dataTables_length label {
        display: flex;
        flex-direction: column; /* Keep the dropdown visible on a separate line */
        align-items: center; /* Center-align the dropdown */
    }
    /* #endregion /Layout for Page Length and Button Controls */

    /* #region Export Buttons */
    #usersListCard .dt-button:hover,
    #organizationsListCard .dt-button:hover,
    #passwordVaultListCard .dt-button:hover,
    #loggerClientListCard .dt-button:hover,
    #loggerServerListCard .dt-button:hover,
    #loggerNavHistoryListCard .dt-button:hover {
        color: black;
        background-color: white;
    }
    /* #endregion /Export Buttons */
    /* #region DataTable Links */
    .dt-link-cc {
        color: white;
        text-decoration: underline;
    }
    .dt-email-link-cc {
        color: #268bd2;
        text-decoration: underline;
    }
    /* #endregion /DataTable Links */

    /* #region DataTable Filters */
    #campbellsCodeAdminOrganizations #filterColumns.active,
    #campbellsCodeAdminOrganizations #mainIcon.active,
    #campbellsCodeAdminOrganizations #settings.active,
    #campbellsCodeAdminUsers #filterColumns.active,
    #campbellsCodeAdminUsers #mainIcon.active,
    #campbellsCodeAdminUsers #settings.active,
    #campbellsCodeAdminRoles #filterColumns.active,
    #campbellsCodeAdminRoles #mainIcon.active,
    #campbellsCodeAdminRoles #settings.active,
    #campbellsCodeAdminPermissions #filterColumns.active,
    #campbellsCodeAdminPermissions #mainIcon.active,
    #campbellsCodeAdminPermissions #settings.active,
    #campbellsCodePasswordVault #filterColumns.active,
    #campbellsCodePasswordVault #mainIcon.active,
    #campbellsCodePasswordVault #settings.active,
    #campbellsCodeAdminLogger #filterColumns.active,
    #campbellsCodeAdminLogger #mainIcon.active,
    #campbellsCodeAdminLogger #settings.active {
        color: #268bd2 !important;
    }

    #campbellsCodeAdminOrganizations #refreshButton i,
    #campbellsCodeAdminUsers #refreshButton i,
    #campbellsCodeAdminRoles #refreshButton i,
    #campbellsCodeAdminPermissions #refreshButton i,
    #campbellsCodePasswordVault #refreshButton i,
    #campbellsCodeAdminLogger #refreshButton i {
        color: white !important;
    }

    #campbellsCodeAdminOrganizations #showDeletedButton[data-state="on"] i,
    #campbellsCodePasswordVault #showDeletedButton[data-state="on"] i,
    #campbellsCodeAdminUsers #showDeletedButton[data-state="on"] i {
        color: #dc3545 !important;
    }

    #campbellsCodeAdminOrganizations #showDeletedButton[data-state="off"] i,
    #campbellsCodePasswordVault #showDeletedButton[data-state="off"] i,
    #campbellsCodeAdminUsers #showDeletedButton[data-state="off"] i {
        color: white !important;
    }

    #campbellsCodeAdminOrganizations #showDeletedButton[data-state="off"] i:hover,
    #campbellsCodePasswordVault #showDeletedButton[data-state="off"] i:hover,
    #campbellsCodeAdminUsers #showDeletedButton[data-state="off"] i:hover {
        color: white !important;
    }   
    /* #endregion /DataTable Filters */
    /* #endregion /DataTables */

    
}
/* #endregion /MOBILE DEVICES */