@font-face{font-family:yekan;src:url(fonts/yekan/Yekan.eot);src:url(fonts/yekan/Yekan.eot?#iefix) format("embedded-opentype"),url(fonts/yekan/Yekan.woff) format("woff"),url(fonts/yekan/Yekan.ttf) format("truetype"),url(fonts/yekan/Yekan.svg#BYekan) format("svg");font-weight:400;font-style:normal}@font-face{font-family:IRANSans;font-style:normal;font-weight:700;src:url(fonts/iran/IRANSansWeb_Bold.eot);src:url(fonts/iran/IRANSansWeb_Bold.eot?#iefix) format("embedded-opentype"),url(fonts/iran/IRANSansWeb_Bold.woff2) format("woff2"),url(fonts/iran/IRANSansWeb_Bold.woff) format("woff"),url(fonts/iran/IRANSansWeb_Bold.ttf) format("truetype")}@font-face{font-family:IRANSans;font-style:normal;font-weight:400;src:url(fonts/iran/IRANSansWeb.eot);src:url(fonts/iran/IRANSansWeb.eot?#iefix) format("embedded-opentype"),url(fonts/iran/IRANSansWeb.woff2) format("woff2"),url(fonts/iran/IRANSansWeb.woff) format("woff"),url(fonts/iran/IRANSansWeb.ttf) format("truetype")}@font-face{font-family:vazir;src:url(fonts/vazir/Vazir-FD.eot);src:url(fonts/vazir/Vazir-FD.eot) format("embedded-opentype"),url(fonts/vazir/Vazir-FD.woff) format("woff"),url(fonts/vazir/Vazir-FD.woff2) format("woff2"),url(fonts/vazir/Vazir-FD.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:dana;font-style:normal;font-weight:10;src:url("fonts/dana/woff2/Dana-Hairline.woff2") format("woff2"),url("fonts/woff/Dana-Hairline.woff") format("woff")}@font-face{font-family:dana;font-style:normal;font-weight:100;src:url("fonts/dana/woff2/Dana-Thin.woff2") format("woff2"),url("fonts/woff/Dana-Thin.woff") format("woff")}@font-face{font-family:dana;font-style:normal;font-weight:200;src:url("fonts/dana/woff2/Dana-UltraLight.woff2") format("woff2"),url("fonts/woff/Dana-UltraLight.woff") format("woff")}@font-face{font-family:dana;font-style:normal;font-weight:300;src:url("fonts/dana/woff2/Dana-Light.woff2") format("woff2"),url("fonts/woff/Dana-Light.woff") format("woff")}@font-face{font-family:dana;font-style:normal;font-weight:500;src:url("fonts/dana/woff2/Dana-Medium.woff2") format("woff2"),url("fonts/woff/Dana-Medium.woff") format("woff")}@font-face{font-family:dana;font-style:normal;font-weight:600;src:url("fonts/dana/woff2/Dana-DemiBold.woff2") format("woff2"),url("fonts/woff/Dana-DemiBold.woff") format("woff")}@font-face{font-family:dana;font-style:normal;font-weight:800;src:url("fonts/dana/woff2/Dana-ExtraBold.woff2") format("woff2"),url("fonts/woff/Dana-ExtraBold.woff") format("woff")}@font-face{font-family:dana;font-style:normal;font-weight:900;src:url("fonts/dana/woff2/Dana-Black.woff2") format("woff2"),url("fonts/woff/Dana-Black.woff") format("woff")}@font-face{font-family:dana;font-style:normal;font-weight:930;src:url("fonts/dana/woff2/Dana-ExtraBlack.woff2") format("woff2"),url("fonts/woff/Dana-ExtraBlack.woff") format("woff")}@font-face{font-family:dana;font-style:normal;font-weight:960;src:url("fonts/dana/woff2/Dana-Heavy.woff2") format("woff2"),url("fonts/woff/Dana-Heavy.woff") format("woff")}@font-face{font-family:dana;font-style:normal;font-weight:990;src:url("fonts/dana/woff2/Dana-Fat.woff2") format("woff2"),url("fonts/woff/Dana-Fat.woff") format("woff")}@font-face{font-family:dana;font-style:normal;font-weight:700;src:url("fonts/dana/woff2/Dana-Bold.woff2") format("woff2"),url("fonts/woff/Dana-Bold.woff") format("woff")}@font-face{font-family:dana;font-style:normal;font-weight:400;src:url("fonts/dana/woff2/Dana-Regular.woff2") format("woff2"),url("fonts/woff/Dana-Regular.woff") format("woff")}a,body,html,p{font-family:vazir,dana!important}[dir=rtl] body.hide-sidebar:not(.show-sidebar) #menu{margin-right:-230px!important}[dir=rtl] body.hide-sidebar:not(.show-sidebar) #wrapper{margin-right:0!important}[dir=rtl] .sidebar li a i.menu-icon{margin-left:13px!important;margin-right:unset!important;float:right!important}[dir=rtl] .sidebar .arrow{float:left;padding-top:5px}[dir=rtl] .sidebar li .nav-second-level li a{padding:7px 43px 7px 10px}[dir=rtl] #newsfeed .close_newsfeed{left:30px;right:unset}[dir=rtl] #newsfeed .post-time-ago{left:55px;right:unset}[dir=rtl] #newsfeed .newsfeed_post .dropdown{left:20px;right:unset}[dir=rtl] #newsfeed .comment-image,[dir=rtl] .form-wrap.form-builder .frmb-control li::before{margin-left:10px;margin-right:unset}[dir=rtl] .dropdown-submenu>a:after{border-color:transparent #94a3b8 transparent transparent;border-width:5px 5px 5px 0;float:left;margin-left:-71px;margin-right:unset}[dir=rtl] .dropdown-submenu>.dropdown-menu{right:100%;left:unset}[dir=rtl] .widget-dragger{right:-15px;left:unset}[dir=rtl] .main-tasks-table-href-name{float:unset}[dir=rtl] .todo-title{padding:0 10px 0 0}[dir=rtl] .fa-regular.fa-plus.fa-lg{line-height:1.05em}[dir=rtl] #setup-menu .arrow,[dir=rtl] #side-menu .arrow{margin-left:unset}.fa-regular,.fa-solid{vertical-align:middle}[dir=rtl] .customer-profile-group-heading{right:0;left:unset}[dir=rtl] .btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle){border-radius:0 .25rem .25rem 0}.btn-group>.dropdown-toggle:not(:first-child),[dir=rtl] .btn-group>.btn:last-child:not(:first-child){border-radius:.25rem 0 0 .25rem}.popover-content,.popover-title{font-family:vazir;text-align:center}.popover{z-index:99999!important}#kan-ban,.kb-kan-ban .container-fluid{display:flex}[dir=rtl] .input-group .form-control:last-child{border-top-left-radius:.375rem;border-bottom-left-radius:.375rem}[dir=rtl] #contract-form .input-group-addon,[dir=rtl] #discount-total.input-group .input-group-addon,[dir=rtl] #new_lead_lead_status_inline .input-group-addon,[dir=rtl] #tab_staff_profile .input-group-addon,[dir=rtl] .client_password_set_wrapper .input-group-addon,[dir=rtl] .colorpicker-element .input-group-addon,[dir=rtl] .form-group-select-task_select .input-group-addon,[dir=rtl] .input-group.date .input-group-addon,[dir=rtl] .lead-wrapper .input-group-addon,[dir=rtl] .recurring-cycles .input-group-addon{border-radius:.375rem 0 0 .375rem;border-left:1px solid #cbd5e1}[dir=rtl] ._transaction_form .table.items thead>tr>th:first-child{border-left:0;border-right:unset}[dir=rtl] .table.items thead th{border-left:1px solid #e2e8f0;border-right:unset}[dir=rtl] table.dataTable thead>tr>td.sorting,table.dataTable thead>tr>td.sorting_asc,table.dataTable thead>tr>td.sorting_desc,table.dataTable thead>tr>th.sorting,table.dataTable thead>tr>th.sorting_asc,table.dataTable thead>tr>th.sorting_desc{padding-left:30px;padding-right:10px}[dir=rtl] table.dataTable thead .sorting:after{margin-right:5px;margin-left:unset}[dir=rtl] table.dataTable thead .sorting:after,table.dataTable thead .sorting_asc:after,table.dataTable thead .sorting_asc_disabled:after,table.dataTable thead .sorting_desc:after,table.dataTable thead .sorting_desc_disabled:after{left:8px;right:unset}[dir=rtl] .activity-feed .feed-item{padding-right:30px;border-right:2px solid #22c55e;border-left:unset}[dir=rtl] .activity-feed .feed-item:after{right:-6px;left:unset}[dir=rtl] .jquery-comments .textarea-wrapper .inline-button,[dir=rtl] .kan-ban-expand-top{left:0;right:unset}.tab-separator{border-left-width:1px;border-right:unset}[dir=rtl] .mleft10{margin-right:10px!important;margin-left:0!important}.table>tfoot>tr>td .bg-primary,[data-name=md-persiandatetimepicker] table.table [data-name=today],[data-name=md-persiandatetimepicker] table.table td.bg-info{color:#fff}[dir=rtl] .task-info .task-info-icon{margin-right:-9px!important;margin-left:8px}[dir=rtl] ul.tagit li.tagit-new{padding:.25em 0 .25em 4px}[dir=rtl] ul.tagit li{margin:2px 0 2px 5px}[dir=rtl] ul.tagit input[type=text]{padding-right:5px;padding-left:unset}[dir=rtl] ul.tagit li.tagit-choice-editable{padding:2px 10px 2px 20px}[dir=rtl] ul.tagit li.tagit-choice .tagit-close{left:.4em;right:unset}[dir=rtl] .checklist .remove-checklist{margin-right:unset}[dir=rtl] .checklist-items-template-select .checklist-item-template-remove{right:unset;left:17px}.tooltip{font-family:dana!important}[dir=rtl] .mime{padding:1px 26px 4px 0}[dir=rtl] #project_view_name .bootstrap-select button[data-id=project_top],[dir=rtl] #project_view_name .bootstrap-select button[data-id=project_top]:focus,[dir=rtl] #project_view_name .bootstrap-select button[data-id=project_top]:hover{padding-right:0;padding-left:unset}[dir=rtl] .svg-rotate svg{transform:rotate(180deg)}[dir=rtl] .task-action-select .dropdown-toggle .filter-option{padding-left:1rem;padding-right:0}[dir=rtl] .jquery-comments ul.navigation li[data-sort-key=attachments] i{margin-left:.25em;margin-right:unset}[dir=rtl] .form-wrap.form-builder .cb-wrap.pull-left .form-actions,[dir=rtl] .jquery-comments .profile-picture,[dir=rtl] .jquery-comments ul.main li.comment .child-comments>:before{float:right}[dir=rtl] .jquery-comments .textarea-wrapper .control-row>span,[dir=rtl] .jquery-comments ul.navigation li[data-sort-key=attachments],[dir=rtl] .submenu{float:left}[dir=rtl] .jquery-comments .textarea-wrapper{padding-right:21px;padding-left:unset}[dir=rtl] .jquery-comments .textarea-wrapper .control-row>span:not(:first-child){margin-left:.5em;margin-right:unset}[dir=rtl] .save_predefined_reply_from_message{float:left!important}[dir=rtl] .system-popup .popup-message{font-family:dana}[dir=rtl] .jquery-comments ul.main li.comment .comment-wrapper>.profile-picture{margin-left:1rem;margin-right:unset}[dir=rtl] .jquery-comments ul.main li.comment time{float:left;margin-right:.5em;margin-left:unset}[dir=rtl] .jquery-comments ul.main li.comment .actions .action:first-child{margin-right:0;margin-left:1em}.tc-content ol,[dir=rtl] .tc-content ul{margin-right:16px;margin-left:unset}[dir=rtl] .jquery-comments .textarea-wrapper:before{right:5px;left:unset}[dir=rtl] #kan-ban .panel-body .lead-name,[dir=rtl] #kan-ban .panel-body .task-name{padding-right:22px;padding-left:unset;background-position-x:289px}#kan-ban.kb-kan-ban{display:none}.alert-dismissable,.alert-dismissible{padding-left:unset;padding-right:unset}[dir=rtl] .input-group-addon:not(:first-child):not(:last-child){border-radius:0!important}[dir=rtl] #tab_form_build li{text-align:right}[dir=rtl] [id^=frmb-][id$="-form-wrap"] .frmb{margin-left:0!important;margin-right:20px!important}[dir=rtl] .form-wrap.form-builder .frmb .form-elements .false-label:first-child,[dir=rtl] .form-wrap.form-builder .frmb .form-elements label:first-child{float:right!important}[dir=rtl] .form-wrap.form-builder .frmb .form-elements .input-wrap{margin-right:2%!important;margin-left:unset!important;float:right!important}[dir=rtl] .form-wrap.form-builder .frmb .required-asterisk{margin-left:.25rem;margin-right:unset!important;float:right!important}.laniakea-date{display:inline-block}[dir=rtl] .dataTables_empty{text-align:right!important}[data-name=day]:hover{color:#2563eb!important}[dir=rtl] .navbar-default .navbar-nav>li>a{margin-left:3px;margin-right:unset}[dir=rtl] .navbar-default .navbar-nav>li.customers-nav-item-profile>a{padding-right:10px;padding-left:0}[dir=rtl] .submenu li{margin-left:15px;margin-right:0}[dir=rtl] .submenu li:last-child{margin-left:0}[dir=rtl] .kb-search button[type=submit]{border-radius:.375rem 0 0 .375rem}[dir=rtl] .question_update{margin-right:15px;margin-left:unset}[dir=rtl] .alert.float-alert .alert-title{margin-right:30px!important;margin-left:unset!important}[dir=rtl] .float-alert.alert span[data-notify=icon]{left:unset!important;right:13px!important}[dir=rtl] .alert.float-alert button.close{left:10px!important;right:unset!important}[dir=rtl] .float-alert{left:20px!important;right:unset!important}.w-50{width:50%!important}#sms_gateways_options hr.c-hr{border-top:2px solid #2563eb!important}.c_disabled{background-color:#eef1f6;border-color:#d1dbe5;color:#8babcc;pointer-events:none;cursor:not-allowed}.lani-purple-color{color:#5002a5;font-weight:700}.onoffswitch-label:before{height:20px}.tw-divide-x>:not([hidden])~:not([hidden]){--tw-divide-x-reverse:0;border-left-width:calc(1px * var(--tw-divide-x-reverse));border-right-width:calc(1px * calc(1 - var(--tw-divide-x-reverse)))}.tw-space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.75rem * var(--tw-space-x-reverse));margin-right:calc(.75rem * calc(1 - var(--tw-space-x-reverse)))}.tw-space-x-1\.5>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.375rem * var(--tw-space-x-reverse));margin-right:calc(.375rem * calc(1 - var(--tw-space-x-reverse)))}[dir=rtl] #credit-note-form .input-group .input-group-addon,[dir=rtl] #estimate-form .input-group .input-group-addon,[dir=rtl] #invoice-form .input-group .input-group-addon,[dir=rtl] body.custom_fields .input-group-addon{border-top-right-radius:.375rem;border-bottom-right-radius:.375rem;border-right:1px solid #cbd5e1;border-top-left-radius:unset;border-bottom-left-radius:unset;border-left:unset}[dir=rtl] #credit-note-form .input-group.date .input-group-addon,[dir=rtl] #credit-note-form .input-group.input-group-select .input-group-addon,[dir=rtl] #estimate-form .input-group.date .input-group-addon,[dir=rtl] #estimate-form .input-group.input-group-select .input-group-addon,[dir=rtl] #invoice-form .input-group.date .input-group-addon,[dir=rtl] #invoice-form .input-group.input-group-select .input-group-addon{border-top-left-radius:.375rem;border-bottom-left-radius:.375rem;border-left:1px solid #cbd5e1;border-top-right-radius:unset;border-bottom-right-radius:unset;border-right:unset}.dropdown-menu-right:where([dir=rtl],[dir=rtl] *){left:0;right:unset!important}.tw-space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.5rem * var(--tw-space-x-reverse));margin-right:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}#timer-select-task .inner.open{overflow-y:unset!important}.sidebar ul.nav li .nav-second-level li a{padding: 5px 48px 5px 15px !important;}[dir="rtl"] .sidebar li .nav-second-level li.active a{margin: 0}#setup-menu li .nav-second-level li a{padding: 5px 24px 5px 10px !important;}.tw-pr-4{padding-right: 1rem;} .tw-pl-2-5{padding-left: .625rem;} @font-face {font-family: "Orbitron";src: url(fonts/Orbitron/Orbitron-Regular.ttf) format("truetype");font-weight: normal;font-style: normal;}.clock-section{font-family: 'Orbitron', sans-serif;width: 100%;display: flex;align-items: center;direction: ltr;justify-content: center;background: #F0F8FF;border-radius: 6px;}.clock-section.dark{background: #24292D;border-radius: 6px;}.clock-section .c-container{display: flex;flex-direction: column;align-items: center;justify-content: space-around;height: 247px;max-width: 560px;width: 100%;background: #fff;box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);border-radius: 12px;position: relative;}.clock-section.dark .c-container{background: #323840;}.clock-section .c-container .icons i{position: absolute;right: 17px;top: 17px;height: 30px;width: 30px;background: #24292D;color: #fff;text-align: center;line-height: 30px;border-radius: 50%;font-size: 14px;cursor: pointer;}.clock-section.dark .c-container .icons i{background: #fff;color: #323840;}.c-container .icons i.fa-sun{opacity: 0;pointer-events: none;}.clock-section.dark .c-container .icons i.fa-sun{opacity: 1;pointer-events: auto;font-size: 16px;}.clock-section .c-container .time{display: flex;align-items: center;}.c-container .time .time-colon{display: flex;align-items: center;position: relative;}.time .time-colon .am_pm{position: absolute;top: 0;right: -50px;font-size: 20px;font-weight: 700;letter-spacing: 1px;}.clock-section.dark .time .time-colon .am_pm{color: #fff;}.time .time-colon .time-text{height: 100px;width: 100px;display: flex;align-items: center;flex-direction: column;justify-content: center;background: #F0F8FF;border-radius: 6px;box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);}.clock-section.dark .time .time-colon .time-text{background: #24292D;}.time .time-colon .time-text, .time .time-colon .colon{font-family: 'Orbitron', sans-serif;font-size: 35px;font-weight: 600;}.clock-section.dark .time .time-text .num, .clock-section.dark .time .colon{color: #fff;}.time .time-colon .colon{font-size: 40px;margin: 0 10px;}.time .time-colon .time-text .text{font-size: 12px;font-weight: 700;letter-spacing: 2px;}.clock-section.dark .time .time-colon .text{color: #fff;}.clock-section .clock-date{font-family: 'vazir';display: flex;align-items: center;padding: 11px;border-radius: 11px;background-color: antiquewhite;}[dir="rtl"] #expense-form .input-group-select .inner.open{overflow-y: auto !important;width: 100% !important;}

#side-menu li.menu-item-modules {
    display: none !important;
}


/* =========================================================
   CODITYSOFT CRM UI
   Custom Theme for Perfex CRM

   Primary Navy:   #00207F
   Accent Orange:  #FD4C06
   Background:     #F6F8FC
   White:          #FFFFFF

   IMPORTANT:
   Do not edit Perfex core CSS files.
   Put this code inside:
   assets/css/custom.css
   ========================================================= */


/* =========================================================
   01. DESIGN TOKENS
   ========================================================= */

:root {
    --cs-primary: #00207F;
    --cs-primary-dark: #00165C;
    --cs-primary-soft: #EDF2FF;

    --cs-accent: #FD4C06;
    --cs-accent-dark: #D93D00;
    --cs-accent-soft: #FFF1EB;

    --cs-bg: #F6F8FC;
    --cs-surface: #FFFFFF;
    --cs-surface-soft: #F8FAFD;

    --cs-text: #172033;
    --cs-text-muted: #6B7280;
    --cs-text-soft: #9CA3AF;

    --cs-border: #E6EAF0;
    --cs-border-dark: #D8DEE8;

    --cs-success: #16A34A;
    --cs-warning: #D97706;
    --cs-danger: #DC2626;
    --cs-info: #0284C7;

    --cs-radius-xs: 6px;
    --cs-radius-sm: 8px;
    --cs-radius-md: 12px;
    --cs-radius-lg: 16px;

    --cs-shadow-xs:
        0 1px 2px rgba(15, 23, 42, 0.03);

    --cs-shadow-sm:
        0 3px 12px rgba(15, 23, 42, 0.06);

    --cs-shadow-md:
        0 8px 30px rgba(15, 23, 42, 0.08);

    --cs-transition: 0.2s ease;
}


/* =========================================================
   02. GENERAL
   ========================================================= */

html,
body {
    background: var(--cs-bg) !important;
}

body,
button,
input,
textarea,
select,
table,
.dropdown-menu,
.modal,
.panel,
.card {
    font-family:
        Vazirmatn,
        IRANSansX,
        IRANSans,
        Tahoma,
        Arial,
        sans-serif !important;
}

body {
    color: var(--cs-text);
}

a {
    color: var(--cs-primary);
    transition: var(--cs-transition);
}

a:hover,
a:focus {
    color: var(--cs-accent);
    text-decoration: none;
}

::selection {
    background: var(--cs-primary);
    color: #fff;
}


/* =========================================================
   03. MAIN BACKGROUND / CONTENT
   ========================================================= */

#wrapper,
#content,
.content,
.content-wrapper,
.main-content,
.page-content {
    background: var(--cs-bg) !important;
}

#content {
    padding-top: 20px;
}


/* =========================================================
   04. ADMIN SIDEBAR
   ========================================================= */

#menu,
aside#menu,
.sidebar,
.admin-sidebar,
.navbar-default.sidebar {
    background:
        linear-gradient(
            180deg,
            var(--cs-primary) 0%,
            var(--cs-primary-dark) 100%
        ) !important;

    border: 0 !important;
}


/* Main menu items */

#side-menu > li > a,
#menu .nav > li > a,
.sidebar .nav > li > a {
    color: rgba(255, 255, 255, 0.82) !important;

    border-radius: 8px;

    margin: 3px 8px;

    padding-top: 10px;
    padding-bottom: 10px;

    transition:
        background var(--cs-transition),
        color var(--cs-transition),
        transform var(--cs-transition);
}


/* Menu icons */

#side-menu > li > a i,
#side-menu > li > a svg,
#menu .nav > li > a i,
.sidebar .nav > li > a i {
    color: rgba(255, 255, 255, 0.80) !important;
}


/* Hover */

#side-menu > li > a:hover,
#menu .nav > li > a:hover,
.sidebar .nav > li > a:hover {
    background:
        rgba(255, 255, 255, 0.10) !important;

    color: #fff !important;
}


/* Active menu */

#side-menu > li.active > a,
#side-menu > li > a.active,
#menu .nav > li.active > a,
.sidebar .nav > li.active > a {
    background: var(--cs-accent) !important;

    color: #fff !important;

    box-shadow:
        0 6px 18px rgba(253, 76, 6, 0.24);

    font-weight: 600;
}


/* Active icon */

#side-menu > li.active > a i,
#side-menu > li.active > a svg,
#menu .nav > li.active > a i {
    color: #fff !important;
}


/* =========================================================
   05. SIDEBAR SUB MENUS
   ========================================================= */

#side-menu .nav-second-level,
#side-menu .nav-third-level,
#menu .nav-second-level {
    background:
        rgba(0, 0, 0, 0.10) !important;

    padding-top: 5px;
    padding-bottom: 5px;
}


#side-menu .nav-second-level li a,
#side-menu .nav-third-level li a {
    color:
        rgba(255, 255, 255, 0.70) !important;

    border-radius: 7px;

    margin:
        2px 8px;

    transition: var(--cs-transition);
}


#side-menu .nav-second-level li a:hover,
#side-menu .nav-third-level li a:hover {
    color: #fff !important;

    background:
        rgba(255, 255, 255, 0.09) !important;
}


#side-menu .nav-second-level li.active > a,
#side-menu .nav-third-level li.active > a {
    color: #fff !important;

    background:
        rgba(253, 76, 6, 0.25) !important;

    border-right:
        3px solid var(--cs-accent);
}


/* =========================================================
   06. SIDEBAR USER AREA
   ========================================================= */

#menu .sidebar-user-profile,
.sidebar-user-profile,
#menu .profile {
    background:
        rgba(255, 255, 255, 0.07) !important;

    border:
        1px solid rgba(255, 255, 255, 0.10) !important;

    border-radius: 12px;

    margin: 10px;
}


#menu .sidebar-user-profile,
#menu .sidebar-user-profile *,
.sidebar-user-profile,
.sidebar-user-profile * {
    color: #fff !important;
}


/* =========================================================
   07. TOP NAVBAR
   ========================================================= */

.navbar,
.navbar-default,
.navbar-static-top,
.admin-navbar,
.navbar-custom,
.topbar {
    background: rgba(255,255,255,0.98) !important;

    border: 0 !important;

    border-bottom:
        1px solid var(--cs-border) !important;

    box-shadow:
        0 2px 10px rgba(15, 23, 42, 0.035) !important;
}


/* Navbar icons */

.navbar a,
.navbar i,
.navbar svg,
.admin-navbar a,
.admin-navbar i {
    color: #536174;
}


.navbar a:hover,
.admin-navbar a:hover {
    color: var(--cs-primary) !important;
}


/* Plus button */

.navbar .btn-info,
.navbar .btn-primary,
.admin-navbar .btn-info,
.admin-navbar .btn-primary {
    background: var(--cs-primary) !important;

    border-color: var(--cs-primary) !important;
}


/* =========================================================
   08. SEARCH BOX
   ========================================================= */

#top_search,
.top-search,
.navbar input[type="search"],
.navbar input[type="text"] {
    background: #F3F5F9 !important;

    border:
        1px solid transparent !important;

    border-radius: 9px !important;

    box-shadow: none !important;

    transition: var(--cs-transition);
}


#top_search:focus,
.top-search:focus,
.navbar input[type="search"]:focus,
.navbar input[type="text"]:focus {
    background: #fff !important;

    border-color: var(--cs-primary) !important;

    box-shadow:
        0 0 0 3px rgba(0, 32, 127, 0.08) !important;
}


/* =========================================================
   09. PANELS / CARDS
   ========================================================= */

.panel,
.panel_s,
.card,
.widget,
.quick-stats,
.dashboard-widget,
.top_stats_wrapper {
    background:
        var(--cs-surface) !important;

    border:
        1px solid var(--cs-border) !important;

    border-radius:
        var(--cs-radius-md) !important;

    box-shadow:
        var(--cs-shadow-sm) !important;
}


.panel_s {
    overflow: hidden;
}


.panel_s .panel-body,
.panel .panel-body,
.card-body {
    background:
        var(--cs-surface) !important;
}


/* Panel heading */

.panel-heading,
.card-header {
    background:
        var(--cs-surface) !important;

    color:
        var(--cs-text) !important;

    border-bottom:
        1px solid var(--cs-border) !important;

    font-weight: 600;
}


/* =========================================================
   10. DASHBOARD WIDGETS
   ========================================================= */

#dashboard .panel_s,
#dashboard .panel,
.dashboard .panel_s,
.dashboard .panel,
.dashboard-widget {
    transition:
        transform var(--cs-transition),
        box-shadow var(--cs-transition);
}


#dashboard .panel_s:hover,
#dashboard .panel:hover,
.dashboard-widget:hover {
    transform: translateY(-2px);

    box-shadow:
        var(--cs-shadow-md) !important;
}


/* Dashboard titles */

#dashboard h4,
#dashboard h5,
.dashboard-widget h4,
.dashboard-widget h5 {
    color:
        var(--cs-text) !important;

    font-weight: 600;
}


/* Dashboard small counters */

.quick-stats,
.top_stats_wrapper {
    position: relative;

    overflow: hidden;
}


.quick-stats:before,
.top_stats_wrapper:before {
    content: "";

    position: absolute;

    right: 0;
    top: 0;

    width: 4px;
    height: 100%;

    background:
        var(--cs-primary);

    border-radius:
        0 12px 12px 0;
}


/* =========================================================
   11. BUTTONS
   ========================================================= */

.btn {
    border-radius:
        var(--cs-radius-sm) !important;

    font-weight: 500;

    transition:
        transform var(--cs-transition),
        box-shadow var(--cs-transition),
        background var(--cs-transition);
}


.btn:hover {
    transform: translateY(-1px);
}


/* Primary */

.btn-primary {
    background:
        var(--cs-primary) !important;

    border-color:
        var(--cs-primary) !important;

    color: #fff !important;
}


.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background:
        var(--cs-primary-dark) !important;

    border-color:
        var(--cs-primary-dark) !important;

    box-shadow:
        0 6px 16px rgba(0, 32, 127, 0.18) !important;
}


/* Info */

.btn-info {
    background:
        var(--cs-primary) !important;

    border-color:
        var(--cs-primary) !important;

    color: #fff !important;
}


.btn-info:hover,
.btn-info:focus {
    background:
        var(--cs-primary-dark) !important;

    border-color:
        var(--cs-primary-dark) !important;
}


/* Orange CTA */

.btn-warning {
    background:
        var(--cs-accent) !important;

    border-color:
        var(--cs-accent) !important;

    color: #fff !important;
}


.btn-warning:hover,
.btn-warning:focus {
    background:
        var(--cs-accent-dark) !important;

    border-color:
        var(--cs-accent-dark) !important;
}


/* Success */

.btn-success {
    background: #16A34A !important;
    border-color: #16A34A !important;
}


/* Danger */

.btn-danger {
    background: #DC2626 !important;
    border-color: #DC2626 !important;
}


/* Default */

.btn-default {
    background:
        #fff !important;

    color:
        var(--cs-text) !important;

    border:
        1px solid var(--cs-border-dark) !important;
}


.btn-default:hover {
    background:
        var(--cs-surface-soft) !important;

    border-color:
        #C9D0DB !important;
}


/* =========================================================
   12. FORM INPUTS
   ========================================================= */

.form-control,
input.form-control,
textarea.form-control,
select.form-control,
.bootstrap-select > .btn,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background:
        #fff !important;

    border:
        1px solid var(--cs-border-dark) !important;

    border-radius:
        var(--cs-radius-sm) !important;

    box-shadow:
        none !important;

    color:
        var(--cs-text) !important;

    transition:
        border-color var(--cs-transition),
        box-shadow var(--cs-transition);
}


/* Input Focus */

.form-control:focus,
input.form-control:focus,
textarea.form-control:focus,
select.form-control:focus {
    border-color:
        var(--cs-primary) !important;

    box-shadow:
        0 0 0 3px rgba(0, 32, 127, 0.08) !important;
}


/* Placeholder */

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color:
        #A4ADBA !important;
}


/* Labels */

.control-label,
label {
    color:
        #445065;
}


/* =========================================================
   13. SELECT2
   ========================================================= */

.select2-dropdown {
    border:
        1px solid var(--cs-border) !important;

    border-radius:
        var(--cs-radius-sm) !important;

    box-shadow:
        var(--cs-shadow-md) !important;
}


.select2-container--default
.select2-results__option--highlighted[aria-selected] {
    background:
        var(--cs-primary) !important;

    color: #fff !important;
}


/* =========================================================
   14. TABLES
   ========================================================= */

.table,
table {
    color:
        var(--cs-text);
}


.table > thead > tr > th,
table > thead > tr > th {
    background:
        #F7F9FC !important;

    color:
        #566176 !important;

    border-bottom:
        1px solid var(--cs-border) !important;

    font-weight: 600;

    padding-top: 12px !important;
    padding-bottom: 12px !important;
}


.table > tbody > tr > td,
table > tbody > tr > td {
    border-top:
        1px solid #EDF0F4 !important;

    vertical-align: middle;
}


.table-hover > tbody > tr:hover {
    background:
        #F8FAFD !important;
}


/* =========================================================
   15. DATATABLES
   ========================================================= */

.dataTables_wrapper {
    color:
        var(--cs-text);
}


.dataTables_wrapper .dataTables_filter input {
    border:
        1px solid var(--cs-border-dark) !important;

    border-radius:
        var(--cs-radius-sm) !important;

    padding: 7px 10px;

    background:
        #fff !important;
}


.dataTables_wrapper .dataTables_length select {
    border:
        1px solid var(--cs-border-dark) !important;

    border-radius:
        var(--cs-radius-sm) !important;

    background:
        #fff !important;
}


/* Pagination */

.pagination > li > a,
.pagination > li > span {
    border:
        1px solid var(--cs-border) !important;

    color:
        var(--cs-primary) !important;

    background:
        #fff !important;
}


.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
    background:
        var(--cs-primary) !important;

    border-color:
        var(--cs-primary) !important;

    color:
        #fff !important;
}


/* =========================================================
   16. TABS
   ========================================================= */

.nav-tabs {
    border-bottom:
        1px solid var(--cs-border) !important;
}


.nav-tabs > li > a {
    color:
        var(--cs-text-muted) !important;

    border:
        0 !important;

    background:
        transparent !important;

    font-weight: 500;
}


.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color:
        var(--cs-primary) !important;

    border:
        0 !important;

    border-bottom:
        2px solid var(--cs-accent) !important;

    background:
        transparent !important;
}


/* =========================================================
   17. BADGES / LABELS
   ========================================================= */

.label,
.badge {
    border-radius:
        6px !important;

    padding:
        5px 8px;
}


.label-primary,
.badge-primary {
    background:
        var(--cs-primary) !important;
}


.label-info,
.badge-info {
    background:
        #0284C7 !important;
}


.label-success,
.badge-success {
    background:
        #16A34A !important;
}


.label-warning,
.badge-warning {
    background:
        var(--cs-accent) !important;
}


.label-danger,
.badge-danger {
    background:
        #DC2626 !important;
}


/* =========================================================
   18. PROGRESS BARS
   ========================================================= */

.progress {
    background:
        #EDF1F6 !important;

    border-radius:
        50px !important;

    height:
        7px;

    box-shadow:
        none !important;
}


.progress-bar {
    background:
        var(--cs-primary) !important;

    border-radius:
        50px;
}


.progress-bar-success {
    background:
        #16A34A !important;
}


.progress-bar-warning {
    background:
        var(--cs-accent) !important;
}


.progress-bar-danger {
    background:
        #DC2626 !important;
}


/* =========================================================
   19. DROPDOWN MENUS
   ========================================================= */

.dropdown-menu {
    background:
        #fff !important;

    border:
        1px solid var(--cs-border) !important;

    border-radius:
        var(--cs-radius-md) !important;

    box-shadow:
        var(--cs-shadow-md) !important;

    padding:
        7px !important;
}


.dropdown-menu > li > a {
    border-radius:
        7px;

    color:
        var(--cs-text) !important;

    padding:
        8px 12px !important;
}


.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background:
        var(--cs-primary-soft) !important;

    color:
        var(--cs-primary) !important;
}


/* =========================================================
   20. MODALS
   ========================================================= */

.modal-content {
    border:
        0 !important;

    border-radius:
        var(--cs-radius-lg) !important;

    overflow:
        hidden;

    box-shadow:
        0 24px 60px rgba(15, 23, 42, 0.18) !important;
}


.modal-header {
    background:
        #fff !important;

    border-bottom:
        1px solid var(--cs-border) !important;
}


.modal-footer {
    background:
        #F8FAFC !important;

    border-top:
        1px solid var(--cs-border) !important;
}


.modal-title {
    color:
        var(--cs-primary);

    font-weight:
        700;
}


/* =========================================================
   21. ALERTS
   ========================================================= */

.alert {
    border:
        0 !important;

    border-radius:
        var(--cs-radius-md) !important;
}


.alert-info {
    background:
        #EFF8FF !important;

    color:
        #075985 !important;
}


.alert-success {
    background:
        #F0FDF4 !important;

    color:
        #166534 !important;
}


.alert-warning {
    background:
        #FFF7ED !important;

    color:
        #9A3412 !important;
}


.alert-danger {
    background:
        #FEF2F2 !important;

    color:
        #991B1B !important;
}


/* =========================================================
   22. CHECKBOX / RADIO
   ========================================================= */

input[type="checkbox"],
input[type="radio"] {
    accent-color:
        var(--cs-primary);
}


/* =========================================================
   23. PAGE HEADINGS
   ========================================================= */

.page-header,
.page-title,
h1,
h2,
h3 {
    color:
        var(--cs-text);
}


.page-header h1,
.page-header h2,
.page-title {
    font-weight:
        700;
}


/* =========================================================
   24. DIVIDERS
   ========================================================= */

hr {
    border-color:
        var(--cs-border) !important;
}


/* =========================================================
   25. LINKS / TEXT UTILITIES
   ========================================================= */

.text-info {
    color:
        var(--cs-primary) !important;
}


.text-warning {
    color:
        var(--cs-accent) !important;
}


.text-muted {
    color:
        var(--cs-text-muted) !important;
}


/* =========================================================
   26. CALENDAR
   ========================================================= */

.fc .fc-toolbar-title,
.fc-toolbar h2 {
    color:
        var(--cs-text) !important;

    font-weight:
        700;
}


.fc-button,
.fc .fc-button {
    background:
        var(--cs-primary) !important;

    border-color:
        var(--cs-primary) !important;

    border-radius:
        7px !important;
}


.fc-button:hover,
.fc .fc-button:hover {
    background:
        var(--cs-primary-dark) !important;
}


/* =========================================================
   27. KANBAN
   ========================================================= */

.kan-ban-col,
.kanban-column {
    background:
        #F2F5FA !important;

    border-radius:
        var(--cs-radius-md) !important;
}


.kan-ban-content,
.kanban-card {
    background:
        #fff !important;

    border:
        1px solid var(--cs-border) !important;

    border-radius:
        var(--cs-radius-md) !important;

    box-shadow:
        var(--cs-shadow-xs) !important;
}


/* =========================================================
   28. TICKETS / NOTES / ACTIVITY
   ========================================================= */

.feed-item,
.activity-feed .feed-item,
.ticket-reply,
.note {
    border-color:
        var(--cs-border) !important;
}


/* =========================================================
   29. ADMIN LOGIN PAGE
   ========================================================= */

body.login_admin,
.login_admin {
    background:
        linear-gradient(
            135deg,
            #F5F8FF 0%,
            #FFFFFF 45%,
            #FFF3EE 100%
        ) !important;
}


.login_admin .panel_s,
.login_admin .panel,
.login_admin .login-panel {
    border:
        1px solid var(--cs-border) !important;

    border-radius:
        18px !important;

    box-shadow:
        0 20px 60px rgba(15, 23, 42, 0.10) !important;

    overflow:
        hidden;
}


.login_admin .btn-primary,
.login_admin .btn-info {
    width:
        100%;

    background:
        var(--cs-primary) !important;

    border-color:
        var(--cs-primary) !important;
}


/* =========================================================
   30. CLIENT AREA
   ========================================================= */

body.clients,
body.customer-area {
    background:
        var(--cs-bg) !important;
}


body.clients .navbar,
body.customer-area .navbar {
    background:
        #fff !important;

    border-bottom:
        1px solid var(--cs-border) !important;
}


body.clients .panel,
body.clients .panel_s,
body.customer-area .panel,
body.customer-area .panel_s {
    border:
        1px solid var(--cs-border) !important;

    border-radius:
        var(--cs-radius-md) !important;

    box-shadow:
        var(--cs-shadow-sm) !important;
}


/* =========================================================
   31. SCROLLBAR
   Chrome / Edge
   ========================================================= */

::-webkit-scrollbar {
    width:
        8px;

    height:
        8px;
}


::-webkit-scrollbar-track {
    background:
        #EEF1F5;
}


::-webkit-scrollbar-thumb {
    background:
        #BBC3CF;

    border-radius:
        20px;
}


::-webkit-scrollbar-thumb:hover {
    background:
        var(--cs-primary);
}


/* =========================================================
   32. FOCUS ACCESSIBILITY
   ========================================================= */

button:focus,
a:focus,
input:focus,
textarea:focus,
select:focus {
    outline:
        none !important;
}


/* =========================================================
   33. DASHBOARD TABLES
   ========================================================= */

#dashboard .table,
.dashboard .table {
    background:
        transparent !important;
}


#dashboard .table thead th {
    background:
        #F8FAFD !important;
}


/* =========================================================
   34. ROUND ICON BUTTONS
   ========================================================= */

.btn-circle,
.round-icon,
.icon-btn {
    border-radius:
        50% !important;
}


/* =========================================================
   35. HEADER USER DROPDOWN
   ========================================================= */

.navbar .dropdown-menu,
.admin-navbar .dropdown-menu {
    margin-top:
        8px !important;
}


/* =========================================================
   36. TOOLTIP
   ========================================================= */

.tooltip-inner {
    background:
        #172033 !important;

    border-radius:
        6px;
}


/* =========================================================
   37. CUSTOMER PROFILE / COMPANY BOX
   ========================================================= */

.customer-profile-group-heading,
.company-info,
.client-info {
    background:
        #F8FAFC !important;

    border:
        1px solid var(--cs-border) !important;

    border-radius:
        var(--cs-radius-md) !important;
}


/* =========================================================
   38. LIST GROUP
   ========================================================= */

.list-group-item {
    border-color:
        var(--cs-border) !important;

    background:
        #fff;
}


.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
    background:
        var(--cs-primary) !important;

    border-color:
        var(--cs-primary) !important;
}


/* =========================================================
   39. BREADCRUMBS
   ========================================================= */

.breadcrumb {
    background:
        transparent !important;

    padding-right:
        0;

    color:
        var(--cs-text-muted);
}


/* =========================================================
   40. SMALL VISUAL POLISH
   ========================================================= */

.panel_s,
.panel,
.card,
.modal-content,
.dropdown-menu,
.form-control,
.btn {
    -webkit-font-smoothing:
        antialiased;
}


.panel_s,
.card,
.widget {
    transition:
        box-shadow var(--cs-transition),
        border-color var(--cs-transition);
}


/* =========================================================
   41. ORANGE ACCENTS
   Use orange only for emphasis
   ========================================================= */

.cs-accent,
.codity-accent {
    color:
        var(--cs-accent) !important;
}


.cs-accent-bg,
.codity-accent-bg {
    background:
        var(--cs-accent) !important;

    color:
        #fff !important;
}


/* =========================================================
   42. RESPONSIVE
   ========================================================= */

@media (max-width: 991px) {

    .panel,
    .panel_s,
    .card,
    .widget {
        border-radius:
            10px !important;
    }

    #content {
        padding-left:
            12px !important;

        padding-right:
            12px !important;
    }

}


@media (max-width: 767px) {

    .panel-body,
    .card-body {
        padding:
            12px !important;
    }

    .btn {
        min-height:
            36px;
    }

}


/* =========================================================
   43. RTL FIXES
   ========================================================= */

html[dir="rtl"] #side-menu .nav-second-level li.active > a,
html[dir="rtl"] #side-menu .nav-third-level li.active > a {
    border-right:
        3px solid var(--cs-accent);

    border-left:
        0;
}


/* =========================================================
   44. PERFEX SPECIFIC PANEL POLISH
   ========================================================= */

.panel_s > .panel-body {
    border-radius:
        var(--cs-radius-md) !important;
}


.panel_s > .panel-body + .panel-footer {
    border-top:
        1px solid var(--cs-border) !important;
}


/* =========================================================
   45. TABLE ACTION BUTTONS
   ========================================================= */

.table .btn-xs,
.table .btn-sm {
    border-radius:
        6px !important;
}


/* =========================================================
   46. FILE / ATTACHMENT CARDS
   ========================================================= */

.file-preview-frame,
.attachment,
.attachment-preview {
    background:
        #fff !important;

    border:
        1px solid var(--cs-border) !important;

    border-radius:
        var(--cs-radius-md) !important;
}


/* =========================================================
   47. FINAL BRAND OVERRIDES
   ========================================================= */

.bg-info,
.bg-primary {
    background:
        var(--cs-primary) !important;
}


.text-primary {
    color:
        var(--cs-primary) !important;
}


.border-primary {
    border-color:
        var(--cs-primary) !important;
}


/* =========================================================
   CODITYSOFT CRM
   PERFEX 3.4.x - EXACT HEADER + USER PROFILE FIX
   Put at the very END of custom.css
   ========================================================= */


/* =========================================================
   1. REAL PERFEX HEADER
   Actual structure: #header > nav
   ========================================================= */

#header {
    background: #FD4C06 !important;
    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: 0 3px 14px rgba(15, 23, 42, 0.12) !important;
}

#header > nav {
    background: #FD4C06 !important;
    border: 0 !important;
    min-height: 57px !important;
}

#header > nav > .tw-flex {
    background: #FD4C06 !important;
    min-height: 57px !important;
}


/* =========================================================
   2. LOGO / CRM TITLE
   ========================================================= */

#header #logo,
#header #logo a,
#header #logo .logo,
#header #logo .logo-text {
    color: #FFFFFF !important;
}

#header #logo .logo-text {
    font-weight: 700 !important;
}


/* =========================================================
   3. HEADER MENU BUTTON
   ========================================================= */

#header > .hide-menu,
#header .hide-menu {
    color: #FFFFFF !important;
}

#header .hide-menu svg {
    color: #FFFFFF !important;
    stroke: currentColor !important;
}

#header .hide-menu:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    color: #FFFFFF !important;
}


/* =========================================================
   4. TOP HEADER LINKS
   Settings / Share / Todo / Clock / Notifications
   ========================================================= */

#header .navbar-nav > li > a,
#header .navbar-nav > li > a:hover,
#header .navbar-nav > li > a:focus {
    color: #FFFFFF !important;
}

#header .navbar-nav > li > a > i,
#header .navbar-nav > li > a svg,
#header .navbar-nav > li > a span {
    color: #FFFFFF !important;
}

#header .navbar-nav > li > a svg {
    stroke: currentColor !important;
}


/* Force Perfex Tailwind neutral icons to white */

#header .header-notifications i,
#header .header-timers i,
#header .header-todo i,
#header .header-newsfeed svg {
    color: #FFFFFF !important;
}


/* =========================================================
   5. QUICK ADD BUTTON
   ========================================================= */

#header li.icon > a > span.tw-rounded-full {
    background: #00207F !important;
    color: #FFFFFF !important;

    box-shadow:
        0 4px 12px rgba(0, 32, 127, 0.25) !important;
}

#header li.icon > a:hover > span.tw-rounded-full {
    background: #00165C !important;
}


/* =========================================================
   6. SEARCH BOX
   Exact element: #search_input
   ========================================================= */

#header #top_search {
    background: transparent !important;
}

#header #search_input {
    background: rgba(255, 255, 255, 0.17) !important;

    border: 1px solid rgba(255, 255, 255, 0.28) !important;

    color: #FFFFFF !important;

    border-radius: 9px !important;

    box-shadow: none !important;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease !important;
}


#header #search_input::placeholder {
    color: rgba(255, 255, 255, 0.78) !important;
}


/* Search icon */

#header #top_search_button button,
#header #top_search_button button i {
    color: rgba(255, 255, 255, 0.88) !important;
}


/* Search focus */

#header #search_input:focus {
    background: #FFFFFF !important;

    color: #172033 !important;

    border-color: #FFFFFF !important;

    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.20) !important;
}

#header #search_input:focus::placeholder {
    color: #9CA3AF !important;
}

#header #top_search:focus-within #top_search_button button,
#header #top_search:focus-within #top_search_button button i {
    color: #536174 !important;
}


/* =========================================================
   7. HEADER DROPDOWNS
   They must remain WHITE
   ========================================================= */

#header .dropdown-menu,
#header ul.dropdown-menu {
    background: #FFFFFF !important;

    color: #172033 !important;

    border:
        1px solid #E6EAF0 !important;

    border-radius:
        10px !important;

    box-shadow:
        0 12px 35px rgba(15, 23, 42, 0.15) !important;
}


/* Reset white header color inside dropdown */

#header .dropdown-menu li,
#header .dropdown-menu li a,
#header .dropdown-menu li span,
#header .dropdown-menu li i,
#header .dropdown-menu div,
#header .dropdown-menu p {
    color: #172033 !important;
}


/* Dropdown icons slightly muted */

#header .dropdown-menu li a i {
    color: #6B7280 !important;
}


#header .dropdown-menu li a:hover,
#header .dropdown-menu li a:focus {
    background: #EDF2FF !important;
    color: #00207F !important;
}


/* =========================================================
   8. SIDEBAR
   IMPORTANT:
   Remove the extra padding-top we added previously.
   Perfex already handles top spacing via tw-mt-[80px].
   ========================================================= */

#menu,
aside#menu.sidebar {
    padding-top: 0 !important;
}


/* =========================================================
   9. USER PROFILE WRAPPER
   Original Perfex has tw-mt-[80px]
   Keep it below the 57px header.
   ========================================================= */

#menu > .sidebar-user-profile {
    margin-top: 80px !important;

    margin-right: 6px !important;
    margin-left: 6px !important;
    margin-bottom: 0 !important;

    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;

    border-radius: 0 !important;

    box-shadow: none !important;

    overflow: visible !important;

    width: auto !important;
}


/* =========================================================
   10. USER PROFILE CARD
   ========================================================= */

#menu > .sidebar-user-profile > a.profile {
    display: block !important;

    width: 100% !important;

    height: auto !important;

    min-height: 58px !important;

    margin: 0 !important;

    padding: 8px 10px !important;

    box-sizing: border-box !important;

    background: #FFFFFF !important;

    border:
        1px solid rgba(255, 255, 255, 0.18) !important;

    border-radius: 10px !important;

    box-shadow:
        0 5px 16px rgba(0, 0, 0, 0.12) !important;

    overflow: hidden !important;

    color: #172033 !important;
}


/* Profile card hover */

#menu > .sidebar-user-profile > a.profile:hover,
#menu > .sidebar-user-profile > a.profile:focus {
    background: #F8FAFC !important;
    color: #172033 !important;
}


/* =========================================================
   11. PROFILE FLEX CONTAINER
   ========================================================= */

#menu .sidebar-user-profile > a.profile > span {
    display: flex !important;

    align-items: center !important;

    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;

    gap: 9px !important;

    padding-top: 0 !important;

    box-sizing: border-box !important;

    overflow: hidden !important;
}


/* =========================================================
   12. PROFILE IMAGE
   ========================================================= */

#menu .sidebar-user-profile .staff-profile-image-small {
    width: 34px !important;

    height: 34px !important;

    min-width: 34px !important;

    max-width: 34px !important;

    object-fit: cover !important;

    border-radius: 50% !important;

    flex: 0 0 34px !important;

    margin: 0 !important;
}


/* =========================================================
   13. PROFILE TEXT WRAPPER
   Critical fix for email overflow
   ========================================================= */

#menu .sidebar-user-profile > a.profile > span > span {
    flex: 1 1 auto !important;

    width: auto !important;

    max-width: calc(100% - 43px) !important;

    min-width: 0 !important;

    overflow: hidden !important;

    display: block !important;
}


/* Perfex has tw-w-[140px] on these.
   Remove that fixed width. */

#menu .sidebar-user-profile > a.profile > span > span > span {
    display: block !important;

    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;

    overflow: hidden !important;

    white-space: nowrap !important;

    text-overflow: ellipsis !important;

    box-sizing: border-box !important;
}


/* User name */

#menu .sidebar-user-profile > a.profile > span > span > span:first-child {
    color: #172033 !important;

    font-weight: 700 !important;

    font-size: 13px !important;

    line-height: 19px !important;
}


/* User email */

#menu .sidebar-user-profile > a.profile > span > span > span:last-child {
    color: #6B7280 !important;

    font-weight: 400 !important;

    font-size: 11px !important;

    line-height: 17px !important;

    direction: ltr !important;

    text-align: right !important;
}


/* =========================================================
   14. PROFILE DROPDOWN
   ========================================================= */

#menu .sidebar-user-profile > .dropdown-menu {
    width: 100% !important;

    min-width: 100% !important;

    margin-top: 6px !important;

    background: #FFFFFF !important;

    border:
        1px solid #E6EAF0 !important;

    border-radius: 10px !important;

    box-shadow:
        0 12px 30px rgba(15, 23, 42, 0.16) !important;

    overflow: visible !important;
}


#menu .sidebar-user-profile > .dropdown-menu > li > a {
    color: #172033 !important;

    background: transparent !important;

    border-radius: 6px !important;

    margin:
        2px 5px !important;
}


#menu .sidebar-user-profile > .dropdown-menu > li > a:hover {
    background: #EDF2FF !important;

    color: #00207F !important;
}


/* =========================================================
   15. MAIN SIDEBAR MENU SPACING
   ========================================================= */

#menu #side-menu {
    margin-top: 15px !important;
}


/* =========================================================
   16. SIDEBAR COLORS
   Keep CoditySoft navy
   ========================================================= */

#menu {
    background:
        linear-gradient(
            180deg,
            #00207F 0%,
            #00165C 100%
        ) !important;
}


/* =========================================================
   17. MOBILE SAFETY
   ========================================================= */

@media (max-width: 991px) {

    #menu,
    aside#menu.sidebar {
        padding-top: 0 !important;
    }

    #menu > .sidebar-user-profile {
        margin-top: 68px !important;
    }

}


/* =========================================================
   END
   ========================================================= */



/* =========================================================
   END OF CODITYSOFT CRM THEME
   ========================================================= */