:root {
    --primary-blue: #182e51;
    --secondary-blue: #3e67aa;
    --primary-grey: #96a0b0;
    --secondary-grey: #e1e8f2;
    --border-grey: #b5b7b9;
    --light-grey: #f5f6f7;
    --gold: #cabca9;
    --font-4c: 'Foglihten-Petitecaps';

}

.callout-info {
    border-left-color: var(--primary-blue) !important;
}

a {
    color: var(--secondary-blue)
}

.lc {
text-transform: lowercase !important;
}

.w-5 {
    width: 5%;
}

.w-10 {
    width: 10%;
}

.w-20 {
    width: 20%;
}

.w-30 {
    width: 30%;
}

.w-40 {
    width: 40%;
}

.w-50 {
    width: 50%;
}

.w-60 {
    width: 60%;
}

.w-70 {
    width: 70%;
}

.w-80 {
    width: 80%;
}

.w-90 {
    width: 90%;
}

.w-100 {
    width: 100%;
}

.form-control {
    box-shadow: none;
    border: 1px solid var(--border-grey)
}

.form-select {
    display: inline-block;
    width: 100%;
    height: calc(2.25rem + 2px);
    padding: .375rem 1.75rem .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    vertical-align: middle;
    background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right .75rem center / 8px 10px no-repeat;
    border: 1px solid var(--border-grey);
    border-radius: .25rem;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.custom-control-label::before, .custom-file-label, .custom-select, .form-select {
    transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

@font-face {
    font-family: 'Foglihten-Petitecaps';
    src: url('../font/foglihten/Foglihten-Petitecaps.ttf.woff') format('woff'),
        url('../font/foglihten/Foglihten-Petitecaps.ttf.svg#Foglihten-Petitecaps') format('svg'),
        url('../font/foglihten/Foglihten-Petitecaps.ttf.eot'),
        url('../font/foglihten/Foglihten-Petitecaps.ttf.eot?#iefix') format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
}

.nav-pills .nav-link:not(.active):hover {
    color: var(--gold);
}

.brand-font {
    font-family: var(--font-4c);
}

.footer-brand {
    font-size: 18px;
}

.footer-aa {
    font-size: 10px;
    letter-spacing: 2px;
    margin-right: 20px;
}

.text-primary-blue {
    color: var(--primary-blue);
}

.brand-text {
    font-family: var(--font-4c);
    font-size: 22px !important;
}

.gold {
    color: var(--gold);
}



body {
    background-color: white;
    font-family: "Instrument Sans", sans-serif;
}

#main {
    background-color: white;
}

header {
    position: fixed
}

td.actions {
    text-align: right;
}

.dropzone {
    border: 0px;
    min-height: 150px;
}

.card-header-pointer {
    cursor: pointer;
}

.c-pointer {
    cursor: pointer;
}

.dt-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-flat .nav-item>.nav-link>.nav-icon {
    margin-left: .78rem;
    margin-top: .35rem;
}

.font-weight-light {
    font-weight: 500 !important;
    font-size: 16px;
}

.elevation-4 {
    box-shadow: 0 14px 28px rgba(0, 0, 0, .06), 0 10px 10px rgba(0, 0, 0, .06) !important;
}

.table-striped tbody tr:nth-of-type(2n+1) {
    background-color: rgba(0, 0, 0, .02) !important
}

.table td,
.table th {
    vertical-align: middle !important;
}

.brand-link.text-sm .brand-image,
.text-sm .brand-link .brand-image {
    margin-left: .82rem !important
}

.sidebar {
    background-color: var(--primary-blue);
}

[class*="sidebar-dark-"] .sidebar a,
[class*="sidebar-dark-"] .nav-treeview>.nav-item>.nav-link {
    color: white;
}

[class*="sidebar-dark-"] .nav-sidebar>.nav-item.menu-open>.nav-link,
[class*="sidebar-dark-"] .nav-treeview>.nav-item>.nav-link:focus,
[class*="sidebar-light-"] .nav-treeview>.nav-item>.nav-link:hover,
[class*="sidebar-dark-"] .nav-sidebar>.nav-item:hover>.nav-link {
    color: var(--gold)
}

[class*="sidebar-dark-"] .nav-sidebar>.nav-item>.nav-link:active,
[class*="sidebar-light-"] .nav-sidebar>.nav-item>.nav-link:focus {
    color: var(--gold)
}

.brand-link {
    background-color: var(--primary-blue);
}

.nav-item {
    color: white
}

.nav-item:hover {
    color: var(--gold)
}

.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
    color: var(--secondary-blue);
}

.navbar-white {
    background-color: var(--primary-blue);
}

.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
    color: var(--gold);
}

.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link {
    color: white
}

[class*="sidebar-dark-"] .nav-treeview>.nav-item>.nav-link:focus, [class*="sidebar-dark-"] .nav-treeview>.nav-item>.nav-link:hover {
    color: var(--gold);
}

.sidebar-mini.sidebar-collapse.layout-fixed .main-sidebar .brand-link {
    background-color: var(--primary-blue);
}

.working-icon,
.solved-icon,
.waiting-icon,
.waitingFor-icon {
    color: white;
}

.status-icon {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dark-blue {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
}

.dark-blue:hover {
    background-color: var(--secondary-blue);
    border-color: var(--secondary-blue);
}


.dark-blue-outline {
    color: var(--primary-blue);
    border-color: var(--primary-blue);
}

.dark-blue-outline:hover {
    color: white;
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
}

.dark-blue:active {
    background-color: var(--primary-blue) !important;
    border-color: var(--primary-blue);
}

.dark-blue:focus {
    background-color: var(--primary-blue) !important;
    border-color: var(--primary-blue);
}

.page-link {
    color: var(--primary-blue)
}

.page-item.active .page-link {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue)
}

.page-link:hover {
    color: var(--secondary-blue)
}

.main-footer {
    background-color: #F4F6F9;
}

/* .breadcrumb a {
  color:var(--primary-blue)
}

.breadcrumb a:hover{
  color: var(--secondary-blue)
} */

.card-primary:not(.card-outline)>.card-header {
    background-color: var(--primary-blue)
}

.bg-primary {
    background-color: var(--primary-blue) !important
}

.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue)
}

[class*="sidebar-dark"] .brand-link .pushmenu:hover, [class*="sidebar-dark"] .brand-link:hover {
    color: white
}

.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link {
    color: white;
}

.card {
    box-shadow: none;
    border: 1px solid darkgray
}

.layout-navbar-fixed .wrapper .sidebar-dark-primary .brand-link:not([class*="navbar"]) {
    background-color: var(--primary-blue)
}

[class*="sidebar-dark"] .brand-link, [class*="sidebar-dark"] .brand-link .pushmenu {
    color: rgba(255, 255, 255, .8);
    text-decoration: none;
}

.small-box .icon>i.fa, .small-box .icon>i.fab, .small-box .icon>i.fad, .small-box .icon>i.fal, .small-box .icon>i.far, .small-box .icon>i.fas, .small-box .icon>i.ion {
    font-size: 50px;
    top: 20px;
}

.content-wrapper>.content {
    background-color: white;
}

.text-sm .content-header {
    background-color: white;
}

.main-footer.text-sm, .text-sm .main-footer {
    background-color: white;
}

.main-header.text-sm .nav-link>.fa, .main-header.text-sm .nav-link>.fab, .main-header.text-sm .nav-link>.fad, .main-header.text-sm .nav-link>.fal, .main-header.text-sm .nav-link>.far, .main-header.text-sm .nav-link>.fas, .main-header.text-sm .nav-link>.ion, .main-header.text-sm .nav-link>.svg-inline--fa, .text-sm .main-header .nav-link>.fa, .text-sm .main-header .nav-link>.fab, .text-sm .main-header .nav-link>.fad, .text-sm .main-header .nav-link>.fal, .text-sm .main-header .nav-link>.far, .text-sm .main-header .nav-link>.fas, .text-sm .main-header .nav-link>.ion, .text-sm .main-header .nav-link>.svg-inline--fa {
    font-size: .999rem;
}

.text-sm .content-header h1 {
    color: var(--primary-blue);
    font-weight: bold;
}

.dropdown-menu-lg .dropdown-item:active {
    background-color: white;
}

.content-wrapper {
    background-color: white !important;
}

.counter-number {
    font-family: var(--font-4c);
    font-size: 44px !important;
}

.status-box {
    border-radius: 0.25rem;
    border: 1px solid var(--secondary-grey);
    margin-bottom: 20px;
    padding: 10px;
}

.status-box h1 {
    margin-bottom: 0;
    font-size: 32px;
    font-weight: 600;
}

.status-box h4 {
    color: #747474;
    margin: 10px 0px;
    font-size: 16px;
    height: 100%;
    text-transform: uppercase;
}

.status-box-main {
    background-color: var(--primary-blue);
    border: 1px solid var(--primary-blue);
}

.status-box-main h1 {
    color: var(--gold);
}

.status-box-main h4 {
    color: #fff;
}

.status-badge {
    color: var(--primary-blue);
    border: 2px solid black;
    border-radius: 0.25rem;
    padding: 3px;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    font-size: 12px;
    -webkit-border-radius: 0.25rem;
    -moz-border-radius: 0.25rem;
    -ms-border-radius: 0.25rem;
    -o-border-radius: 0.25rem;
}

.status-badge-legend {
    width: 150px;
    margin-bottom: 5px;
}

h1.legend-title {
    font-size: 14px;
    text-transform: uppercase;
    color: var(--primary-grey);
    font-weight: 300;
    text-align: center;
}

.legend-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}


.legend-single {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    width: 30%;
}

thead tr th,
thead tr td {
    font-size: 12px;
    text-transform: uppercase;
    color: var(--primary-grey);
    font-weight: 600;
}

table thead th {
    border: none !important;
}

.table td, .table th {
    border-top: 1px solid var(--light-grey);
}

h3.card-title {
    font-size: 14px;
    text-transform: uppercase;
    color: var(--primary-grey);
    font-weight: 300;
}

.card {
    border: 1px solid var(--secondary-grey)
}

.card-header {
    border: none;
}

.card-tr,
.card-tr .card-header {
    border: none;
}

.graph-card-header {
    display: flex;
    justify-content: center;
    padding-bottom: 15px;
}

.status-square {
    margin-right: 10px;
    display: inline-block;
    width: 40px;
    height: 20px;
    border-radius: 0.25rem;
    -webkit-border-radius: 0.25rem;
    -moz-border-radius: 0.25rem;
    -ms-border-radius: 0.25rem;
    -o-border-radius: 0.25rem;
}

.resolution-rate-container {
    position: relative;
}

.resolution-rate-number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--primary-blue);
    font-size: 40px;
    font-family: var(--font-4c);
}

.bl-g {
    border-left: 1px solid var(--secondary-grey);
}

.br-g {
    border-right: 1px solid var(--secondary-grey);
}

.btn-outline-secondary {
    color: var(--secondary-blue);
    border:1px solid var(--secondary-blue);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
    color: #fff !important;
    background-color: var(--secondary-blue) !important;
    border:1px solid var(--secondary-blue) !important;
}


/* Search Bar Styles */
.navbar .search-bar {
    min-width: 400px;
    padding: 0 15px;
    position: relative;
}

.navbar .search-form {
    width: 100%;
}

.navbar .search-form input {
    border: 1px solid var(--border-grey);
    font-size: 14px;
    color: var(--primary-blue);
    padding: 6px 35px 6px 12px;
    border-radius: 4px;
    transition: 0.3s;
    width: 100%;
    background-color: #fff;
}

.navbar .search-form input:focus,
.navbar .search-form input:hover {
    outline: none;
    box-shadow: 0 0 5px rgba(24, 46, 81, 0.25);
    border-color: var(--secondary-blue);
}

.navbar .search-form button {
    border: 0;
    padding: 0;
    margin-left: -30px;
    background: none;
    z-index: 10;
    position: relative;
}

.navbar .search-form button i {
    color: var(--primary-grey);
    font-size: 16px;
}

.navbar .search-form button:hover i {
    color: var(--primary-blue);
}

/* Search Results Dropdown */
.search-results-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--border-grey);
    border-top: none;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 12px rgba(24, 46, 81, 0.15);
    z-index: 1000;
    max-height: 400px;
    overflow-y: auto;
}

.search-results-content {
    padding: 0;
}

.search-result-item {
    padding: 12px 16px;
    border-bottom: 1px solid var(--light-grey);
    cursor: pointer;
    transition: background-color 0.2s;
    display: block;
    text-decoration: none;
    color: inherit;
}

.search-result-item:hover {
    background-color: var(--light-grey);
    text-decoration: none;
    color: inherit;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-title {
    font-weight: 500;
    color: var(--primary-blue);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
}

.search-result-tag {
    display: inline-block;
    color: white;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 3px;
    margin-right: 8px;
    font-weight: normal;
    text-transform: uppercase;
}

.search-result-tag.article {
    background: var(--secondary-blue);
}

.search-result-tag.folder {
    background: var(--gold);
    color: var(--primary-blue);
}

.search-result-tag.attachment {
    background: var(--primary-grey);
}

.search-result-path {
    font-size: 12px;
    color: var(--primary-grey);
    margin-top: 2px;
}

.search-no-results {
    padding: 16px;
    text-align: center;
    color: var(--primary-grey);
    font-style: italic;
}

.search-loading {
    padding: 16px;
    text-align: center;
    color: var(--primary-grey);
}

/* Responsive styles */
@media (max-width: 991.98px) {
    .navbar .search-bar {
        position: fixed;
        top: 56px;
        left: 0;
        right: 0;
        padding: 15px 20px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        background: white;
        z-index: 1050;
        transition: 0.3s;
        visibility: hidden;
        opacity: 0;
        transform: translateY(-10px);
    }

    .navbar .search-bar.search-bar-show {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
    }

    .search-results-dropdown {
        position: relative;
        top: 10px;
        box-shadow: 0 2px 8px rgba(24, 46, 81, 0.15);
    }
}

/* Dark theme compatibility */
.dark-mode .navbar .search-form input {
    background-color: #3c4043;
    border-color: #5a6268;
    color: #fff;
}

.dark-mode .navbar .search-form input:focus,
.dark-mode .navbar .search-form input:hover {
    border-color: var(--secondary-blue);
}

.dark-mode .navbar .search-bar {
    background: #343a40;
}

.dark-mode .search-results-dropdown {
    background: #343a40;
    border-color: #495057;
}

.dark-mode .search-result-item {
    border-color: #495057;
}

.dark-mode .search-result-item:hover {
    background-color: #495057;
}

.dark-mode .search-result-title {
    color: #fff;
}

.dark-mode .search-result-path {
    color: #adb5bd;
}

/* Dashboard Status Boxes */
.status-box {
    background: #ffffff;
    border: 1px solid #e1e8f2;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
    margin-bottom: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.status-box:hover {
    border-color: var(--secondary-blue);
    box-shadow: 0 4px 8px rgba(62, 103, 170, 0.15);
    transform: translateY(-2px);
}

.status-box-main {
    border-color: var(--primary-blue);
    background: var(--primary-blue);
}

.status-box-main:hover {
    border-color: var(--secondary-blue);
    background: var(--secondary-blue);
    transform: translateY(-2px);
}

.counter-number {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: var(--primary-blue);
    font-family: var(--font-4c), sans-serif;
}

.status-box-main .counter-number {
    color: var(--gold);
}

.status-box h4 {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0;
    color: var(--primary-grey);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-box-main h4 {
    color: #ffffff;
}

/* Dark mode for status boxes */
.dark-mode .status-box {
    background: #343a40;
    border-color: #495057;
}

.dark-mode .status-box:hover {
    border-color: var(--secondary-blue);
    background: #495057;
}

.dark-mode .status-box-main {
    background: var(--primary-blue);
}

.dark-mode .status-box-main:hover {
    background: var(--secondary-blue);
}

.dark-mode .status-box-main .counter-number {
    color: var(--gold);
}

.dark-mode .status-box-main h4 {
    color: #ffffff;
}

.dark-mode .counter-number {
    color: #ffffff;
}

.dark-mode .status-box h4 {
    color: #adb5bd;
}

/* Admin User Profile Dropdown Styles */
.nav-profile {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    transition: background-color 0.2s;
}

.nav-profile:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.nav-profile .dropdown-toggle {
    font-weight: 500;
    color: #ffffff !important;
}

.nav-profile i {
    color: #ffffff !important;
}

.nav-profile .dropdown-toggle::after {
    margin-left: 0.5rem;
}

/* Dropdown menu styling */
.action-dropdown-menu.show {
    animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* User info in dropdown */
.action-dropdown-menu .badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

/* Dropdown items styling */
.action-dropdown-menu .dropdown-item {
    font-size: 0.9rem;
    padding: 0.5rem 0;
    border-radius: 0.25rem;
    transition: all 0.2s;
    text-decoration: none;
    color: #495057;
}

.action-dropdown-menu .dropdown-item:hover {
    background-color: #f8f9fa;
    padding-left: 0.5rem;
    text-decoration: none;
}

.action-dropdown-menu .dropdown-item i {
    width: 20px;
    text-align: center;
    font-size: 1rem;
}

.action-dropdown-menu .dropdown-item.text-danger {
    color: #dc3545;
}

.action-dropdown-menu .dropdown-item.text-danger:hover {
    background-color: #fff5f5;
    color: #c82333;
}

/* Dark mode support for admin dropdown */
.dark-mode .nav-profile:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .nav-profile .dropdown-toggle {
    color: #e9ecef;
}

.dark-mode .action-dropdown-menu {
    background-color: #343a40;
    border-color: #495057;
}

.dark-mode .action-dropdown-menu h6,
.dark-mode .action-dropdown-menu strong {
    color: #f8f9fa;
}

.dark-mode .action-dropdown-menu .text-muted {
    color: #adb5bd !important;
}

.dark-mode .action-dropdown-menu hr {
    border-color: #495057;
}

.dark-mode .action-dropdown-menu .dropdown-item {
    color: #adb5bd;
}

.dark-mode .action-dropdown-menu .dropdown-item:hover {
    background-color: #495057;
    color: #f8f9fa;
}

.dark-mode .action-dropdown-menu .dropdown-item.text-danger {
    color: #f8787c;
}

.dark-mode .action-dropdown-menu .dropdown-item.text-danger:hover {
    background-color: rgba(248, 120, 124, 0.1);
    color: #ff6b6f;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .nav-profile .dropdown-toggle {
        display: none !important;
    }
    
    .nav-profile i {
        font-size: 1.6rem !important;
    }
}