@import url(https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap);

.semi-dark,
:root {
    --tab-menu-color: #3e4954;
    --table-header: #f5f5f5;
    --iconbtn-bg: #fff;
    --input-bg: #fff;
    --input-color: #000;
    --outline-btn: #fff;
    --title-color: #292b3a;
    --pra-color: #3e4954;
    --tab-border: rgba(72, 94, 144, 0.16);
    --table-body-bg: #fff;
    --table-search-bg: #efefef;
    --user-list-bg: #fff;
    --tab-bg: #ebebeb;
    --tab-color: #3e4954;
    --dropbtn-color: #212529;
    --nav-color: #000;
    --notfound-bg: #f3f3f3;
    --info-header: #ebebeb;
    --model-bg: #fff;
    --disabled-input-bg: #e9ecef;
    --unresolve-bg: rgba(249, 207, 207, 0.5);
    --checkbox-list-bg: #fff
}

:root {
    --sidebarbg: #fff;
    --sidebarcolor: #6c757d;
    --sidebarbordercolor: rgba(72, 94, 144, 0.16);
    --sidebaractivecolor: #2395e7;
    --sidebarheadingcolor: #6c757d;
    --sidebarheadingbackground: #fff;
    --logobg: #fff;
    --logocolor: #2395e7;
    --headerbackground: #fff;
    --headercolor: #292b3a;
    --searchcolor: #292b3a;
    --primarycolor: #2395e7;
    --bodycolor: #292b3a;
    --bodybackground: #f9f9f9;
    --bordercolor: rgba(72, 94, 144, 0.16);
    --mainbackground: #fff;
    --secondary: #6c757d;
    --success: #52b141;
    --info: #17a2b8;
    --warning: #ffcb12;
    --danger: #ff0000;
    --dark: #343a40;
    --sidebarwidth: 140px;
    --outline-btn-border: var(--primarycolor);
    --outline-btn-color: var(--primarycolor);
    --menu-active: #e6ebed;
    --card-header-bg: rgba(117, 117, 117, 0.41)
}

.dark,
.semi-dark {
    --sidebarbordercolor: rgba(255, 255, 255, 0.1);
    --sidebarheadingbackground: rgba(59, 63, 92, 0.35);
    --outline-btn-border: var(--primarycolor);
    --outline-btn-color: var(--primarycolor);
    --menu-active: #060818;
    --card-header-bg: rgba(117, 117, 117, 0.41)
}

.semi-dark {
    --sidebarbg: #060818;
    --sidebarcolor: rgba(255, 255, 255, 0.8);
    --sidebaractivecolor: #4c75f2;
    --sidebarheadingcolor: #fff;
    --logobg: #060818;
    --logocolor: rgba(255, 255, 255, 0.8)
}

.dark,
.horizontal-menu.dark {
    --sidebarbg: #101329;
    --sidebarheadingcolor: #fff;
    --logobg: #101329;
    --headerbackground: #101329;
    --primarycolor: #17b3a3;
    --bodycolor: #8283a0;
    --bodybackground: #060818;
    --bordercolor: rgba(255, 255, 255, 0.1);
    --mainbackground: #101329;
    --sidebarcolor: rgba(255, 255, 255, 0.8);
    --logocolor: rgba(255, 255, 255, 0.8)
}

.dark,
.gradient {
    --input-bg: transparent;
    --dropbtn-color: #fff;
    --tab-color: #fff;
    --nav-color: #fff
}

.dark {
    --sidebaractivecolor: #17b3a3;
    --headercolor: rgba(255, 255, 255, 0.8);
    --searchcolor: #fff;
    --tab-menu-color: #cbcbcb;
    --table-header: #060818;
    --iconbtn-bg: #060818;
    --input-color: #8283a0;
    --outline-btn: #000;
    --title-color: #cdcdcd;
    --pra-color: #b1b1b1;
    --tab-border: rgba(255, 255, 255, 0.1);
    --table-body-bg: #101329;
    --table-search-bg: #060818;
    --user-list-bg: #060818;
    --tab-bg: #060818;
    --notfound-bg: #060818;
    --disabled-input-bg: #141414;
    --unresolve-bg: rgba(56, 23, 50, 0.5);
    --info-header: #060818;
    --model-bg: #171b36;
    --checkbox-list-bg: rgba(98, 98, 98, 0.15)
}

.horizontal-menu {
    --sidebarbg: #f6f6f7;
    --sidebarcolor: #6c757d;
    --sidebarbordercolor: rgba(72, 94, 144, 0.16);
    --headerbordercolor: rgba(72, 94, 144, 0.16);
    --bodybackground: #fff
}

.gradient,
.horizontal-menu.dark {
    --sidebarbordercolor: rgba(255, 255, 255, 0.1);
    --headercolor: rgba(255, 255, 255, 0.8);
    --headerbordercolor: rgba(255, 255, 255, 0.1);
    --searchcolor: #fff
}

.horizontal-menu.dark {
    --sidebaractivecolor: #4c75f2;
    --sidebarheadingbackground: #060818
}

.horizontal-menu.semi-dark {
    --sidebarbg: #334f7f;
    --sidebarcolor: rgba(255, 255, 255, 0.8);
    --sidebarbordercolor: rgba(72, 94, 144, 0.16);
    --sidebaractivecolor: #4c75f2;
    --sidebarheadingcolor: #6c757d;
    --dropdowncolor: #6c757d;
    --sidebarheadingbackground: var(--sidebarbg);
    --logobg: #060818;
    --logocolor: rgba(255, 255, 255, 0.8);
    --headerbordercolor: rgba(255, 255, 255, 0.16);
    --headerbackground: #1e3d73;
    --headercolor: rgba(255, 255, 255, 0.8);
    --searchcolor: #fff;
    --bodybackground: #fafafa
}

.gradient {
    --sidebarbg: rgba(0, 0, 0, 0.2);
    --sidebarcolor: #fff;
    --sidebaractivecolor: #fff;
    --sidebarheadingcolor: rgba(255, 255, 255, 0.7);
    --sidebarheadingbackground: rgba(0, 0, 0, 0.2);
    --headerbackground: rgba(2, 0, 36, 1);
    --primarycolor: #396e94;
    --bodycolor: #fff;
    --bodybackground: #19606f;
    --bordercolor: rgba(255, 255, 255, 0.2);
    --mainbackground: rgba(0, 0, 0, 0.2);
    --secondary: #fff;
    --dark: #fff;
    --menu-active: rgba(0, 0, 0, 0.22);
    --tab-menu-color: #d3d3d3;
    --title-color: #fff;
    --table-header: rgb(0, 0, 0, 0.2);
    --model-bg: #091722;
    --input-color: #fff;
    --outline-btn: transparent;
    --pra-color: #e1e1e1;
    --table-body-bg: transparent;
    --user-list-bg: rgba(0, 0, 0, 0.25);
    --table-search-bg: transparent;
    --iconbtn-bg: transparent;
    --tab-bg: rgba(0, 0, 0, 0.25);
    --disabled-input-bg: #21303e;
    --unresolve-bg: rgba(249, 132, 132, 0.3);
    --notfound-bg: rgba(0, 0, 0, 0.3);
    --card-header-bg: rgba(0, 0, 0, 0.3);
    --checkbox-list-bg: rgba(0, 0, 0, 0.15);
    --info-header: #182c3a
}

.btn,
.font-w-500,
.sidebar .sidebar-menu>li ul li .sub-menu a,
body {
    font-weight: 500
}

.bg-primary-light:before,
.outline-badge-danger:after,
.outline-badge-dark:after,
.outline-badge-info:after,
.outline-badge-secondary:after,
.outline-badge-success:after,
.outline-badge-warning:after {
    width: 100%;
    height: 100%;
    content: ""
}

.chkbox,
.file-custom {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none
}


.hide-sidebar #header-fix {
    left: 0
}

#header-fix {
    left: 0;
    z-index: 100;
    transition: .5s;
    -webkit-box-shadow: 0 4px 6px 0 rgba(85, 85, 85, .08), 0 1px 20px 0 rgba(0, 0, 0, .07), 0 1px 11px 0 rgba(0, 0, 0, .07);
    -moz-box-shadow: 0 4px 6px 0 rgba(85, 85, 85, .08), 0 1px 20px 0 rgba(0, 0, 0, .07), 0 1px 11px 0 rgba(0, 0, 0, .07);
    box-shadow: 0 4px 6px 0 rgba(85, 85, 85, .08), 0 1px 20px 0 rgba(0, 0, 0, .07), 0 1px 11px 0 rgba(0, 0, 0, .07);
    background: var(--headerbackground);
    padding-right: 15px
}

#header-fix .logo-bar {
    width: 200px;
    padding: 18px;
    background: var(--logobg);
    transition: .5s
}

#header-fix .logo-bar .horizontal-logo {
    color: var(--logocolor);
    line-height: 31px;
    white-space: nowrap
}

#header-fix .logo-bar .horizontal-logo svg {
    margin-top: -3px
}

#header-fix .logo-bar .horizontal-logo svg g {
    fill: var(--logocolor)
}

@media (max-width:991px) {
    #header-fix .logo-bar {
        width: 130px;
        line-height: 36px
    }

    #header-fix .top-icon>li>a {
        padding: 8px
    }
}

#header-fix .collapse-menu-bar {
    width: 50px;
    padding: 16px 0;
    line-height: 39px
}

#header-fix nav {
    height: 65px
}

#header-fix a,
#header-fix a:hover {
    color: var(--headercolor);
    text-decoration: none;
    position: relative
}

#header-fix .search-form {
    width: 32%
}

#header-fix .top-icon>li {
    padding: 18px 0;
    height: 100%
}

@media (max-width:440px) {
    #header-fix .logo-bar {
        width: 55px !important
    }

    #header-fix .logo-bar span {
        display: none
    }

    #header-fix .top-icon>li {
        padding: 18px 0
    }
}

#header-fix .top-icon>li:first-child {
    border-left: none
}

#header-fix .top-icon>li>a>i {
    font-size: 20px;
    line-height: 14px
}

#header-fix .btn-search {
    top: 50%;
    left: auto;
    right: 20px;
    transform: translateY(-50%)
}

#header-fix .btn-search i,
.lg-label {
    font-size: 18px
}

#header-fix .badge {
    position: absolute;
    top: 0;
    right: 0;
    font-weight: 300;
    padding: 3px 6px
}

#header-fix .ring {
    position: absolute;
    top: -13px;
    right: -7px;
    height: 25px;
    width: 25px;
    z-index: 10;
    border: 5px solid var(--headercolor);
    border-radius: 100%;
    animation: 1s ease-out infinite pulsate;
    -webkit-animation: 1s ease-out infinite pulsate;
    opacity: 0
}

#header-fix .ring-point {
    width: 16px;
    height: 16px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 100%;
    background-color: red;
    position: absolute;
    right: 4px;
    top: -3px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1
}

#header-fix .dropdown-menu .dropdown-item,
#jqstooltip .jqsfield,
.body-color,
.breadcrumb-item+.breadcrumb-item::before,
.breadcrumb-item.active,
.ct-label,
.form-control,
.form-control:focus,
.list-group-item-action,
.modal-content .close,
.navbar-light .navbar-brand,
.popover .popover-body,
.ql-editor.ql-blank::before,
.ql-snow .ql-picker.ql-expanded .ql-picker-label,
.ql-snow .ql-picker.ql-header .ql-picker-item::before,
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.table:not(.table-dark),
.tablesaw-bar .tablesaw-bar-section .tablesaw-btn,
.tasks .task a,
a,
body {
    color: var(--bodycolor)
}

@keyframes pulsate {
    0% {
        -webkit-transform: scale(.1, .1);
        opacity: 0
    }

    50% {
        opacity: 1
    }

    100% {
        -webkit-transform: scale(1.2, 1.2);
        opacity: 0
    }
}

@-webkit-keyframes pulsate {
    0% {
        -webkit-transform: scale(.1, .1);
        opacity: 0
    }

    50% {
        opacity: 1
    }

    100% {
        -webkit-transform: scale(1.2, 1.2);
        opacity: 0
    }
}

#header-fix .dropdown-menu {
    font-size: 13px;
    min-width: 200px;
    border-top: none !important;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: 50.5px;
    box-shadow: none;
    transition: .5s;
    display: block;
    visibility: hidden;
    opacity: 0
}

#header-fix .dropdown-menu.show {
    margin-top: .5px;
    visibility: visible;
    opacity: 1
}

#header-fix .dropdown-menu .dropdown-item:hover,
.contact-menu li a.active,
.contact-menu li a:hover,
.document-menu li a.active,
.document-menu li a:hover,
.forgot-link:hover,
.input-primary .form-control:focus+.form-control-placeholder,
.input-primary .form-control:not([value=""])+.form-control-placeholder,
.invoice-menu li a.active,
.invoice-menu li a:hover,
.mail-menu li a.active,
.mail-menu li a:hover,
.notes-menu li a.active,
.notes-menu li a:hover,
.pagination .page-item.next .page-link,
.pagination .page-item.previous .page-link,
.sidebar .sidebar-menu>li .active>a,
.todo-menu li a.active,
.todo-menu li a:hover,
.wizard .nav-link.active {
    color: var(--primarycolor)
}

.btn-link,
.btn-outline-primary,
.color-primary,
.text-primary,
.wizard .nav-link:hover {
    color: var(--primarycolor) !important
}

#header-fix .dropdown-menu:after {
    content: "";
    position: absolute;
    top: -9px;
    right: 25px;
    border-bottom: 9px solid var(--headercolor);
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    display: none
}

#header-fix .dropdown-menu.left:before {
    right: auto;
    left: 22px
}

#header-fix .dropdown-menu.left:after {
    right: auto;
    left: 23px
}

#header-fix .dropdown-menu.dropdown-menu-right {
    right: 0;
    left: auto
}

#header-fix .user-profile .user-info {
    line-height: 11px;
    margin-left: 7px;
    font-size: 12px
}

.header-chart {
    height: 100px;
    width: 200px;
    float: right
}

.hide-sidebar .sidebar {
    margin-left: -250px
}

.sidebar {
    background: var(--sidebarbg);
    position: fixed;
    top: 65px;
    bottom: 0;
    z-index: 5;
    width: 250px;
    transition: .5s;
    border-right: 1px solid var(--sidebarbordercolor);
    border-top: 0 solid var(--sidebarbordercolor);
    overflow-y: scroll
}

.sidebar::-webkit-scrollbar {
    display: none
}

.sidebar .sidebar-menu {
    padding: 0 0 20px;
    list-style: none
}

#header-fix .collapse-menu-bar,
#header-fix .logo-bar .horizontal-logo span,
.card-liner-title {
    font-size: 20px
}

.sidebarCollapse i {
    color: var(--sidebarcolor)
}

.sidebar .sidebar-menu .sub-menu {
    opacity: 0;
    display: none
}

.contact-menu li,
.document-menu li,
.invoice-menu li,
.mail-menu li,
.notes-menu li,
.sidebar .sidebar-menu>li,
.todo-menu li {
    padding: 5px 15px
}

.sidebar .sidebar-menu>li a:hover {
    color: var(--sidebaractivecolor)
}

.sidebar .sidebar-menu>li>a {
    font-weight: 600;
    pointer-events: none;
    font-size: 12px;
    text-transform: uppercase;
    background: var(--sidebarheadingbackground);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);
    border-radius: 6px;
    display: block;
    padding: 10px;
    margin: 15px 0;
    color: var(--sidebarheadingcolor)
}

#settings .gradient-img,
.file-upload input[type=file],
.font-icon-list fieldset,
.list-inline .list-inline-item:last-child .counter-box:after,
.mail-app li.mail-item,
.sidebar .breadcrumb,
.sidebar .sidebar-menu>li ul li .sub-menu i,
.sidebar .sidebar-menu>li>a:after,
table#example tfoot {
    display: none
}

.sidebar .sidebar-menu>li ul {
    list-style: none;
    padding: 0;
    margin: 10px 0 0
}

.sidebar .sidebar-menu>li ul li {
    padding: 10px 0
}

.mail-toolbar a,
.sidebar .sidebar-menu>li ul li i {
    margin-right: 15px
}

.sidebar .sidebar-menu>li ul li a {
    color: var(--sidebarcolor);
    display: block;
    font-size: 14px;
    font-weight: 600
}

.sidebar .sidebar-menu>li ul li a i {
    font-weight: 700;
    width: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 16px 31px rgb(145 96 209 / 28%);
    border-radius: 4px
}

.bg-primary-light,
.form-group,
.notes-list-section .business-note .card,
.notes-list-section .personal-note .card,
.notes-list-section .private-note .card,
.notes-list-section .social-note .card,
.notes-list-section .work-note .card,
.profile-card,
.sidebar .sidebar-menu>li ul li.dropdown>a {
    position: relative
}

.sidebar .sidebar-menu>li ul li.dropdown>a:after {
    content: "\e606";
    font-family: simple-line-icons;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: absolute;
    right: 0;
    top: 10px;
    font-size: 12px
}

.sidebar .sidebar-menu>li ul li.active>a:after {
    transform: rotate(90deg)
}

.sidebar .sidebar-menu>li ul li.active>.sub-menu {
    opacity: 1;
    display: block
}

.sidebar .sidebar-menu>li ul li .sub-menu {
    padding-left: 46px
}

.sidebar .sidebar-menu>li ul li .sub-menu .sub-menu {
    padding-left: 10px
}

.sidebar .sidebar-menu>li ul li .sub-menu .sub-menu a {
    font-weight: 400
}

body {
    font-family: Poppins, sans-serif;
    font-size: 12px;
    background: var(--bodybackground);
    letter-spacing: .3px
}

.compact-menu:not(.horizontal-menu),
.vh-100 {
    min-height: 100vh
}

hr {
    border-top: 1px solid var(--bordercolor)
}

.border,
.border-bottom,
.border-left,
.border-right,
.border-top,
.theme-border {
    border-color: var(--bordercolor) !important
}

.border-white {
    border-color: #fff !important
}

main {
    margin-top: 65px;
    top: 0;
    margin-left: 228px;
    padding: 20px
}

a,
a:hover {
    text-decoration: none
}

.c3-tooltip,
.c3-tooltip tr td,
.c3-tooltip tr th,
.ql-snow .ql-picker-options,
.sweet-alert,
.theme-background {
    background-color: var(--mainbackground)
}

.bg-primary-light .card-body,
.card .card-content,
.chat-menu .call-button,
.outline-badge-primary>*,
.z-index-1 {
    z-index: 1
}

.z-index-0 {
    z-index: 0
}

.pointer-event-none {
    pointer-events: none
}

.fill-color {
    fill: var(--primarycolor)
}

.fill-color-rgba {
    fill: rgba(var(--primarycolor), 0.7)
}

.hide-sidebar .site-footer,
.hide-sidebar main {
    margin-left: 0
}

.btn-outline-primary {
    border-color: var(--primarycolor)
}

.btn-outline-primary.dropdown-toggle,
.btn-outline-primary:active,
.btn-outline-primary:focus,
.btn-outline-primary:hover {
    box-shadow: none !important;
    border-color: var(--primarycolor) !important;
    background: var(--primarycolor) !important;
    color: #fff !important
}

.bg-primary,
.round-button,
body.gradient .status-filter li.settlement a.active,
body.gradient .status-filter li.settlement a:hover {
    background: var(--primarycolor) !important
}

.bg-primary-light:before {
    background: var(--primarycolor);
    opacity: .1;
    position: absolute;
    z-index: 0
}

.bg-light {
    background: #f8f9fa !important
}

.btn-primary.focus,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-secondary:not(:disabled):not(.disabled).active:focus,
.btn-secondary:not(:disabled):not(.disabled):active:focus,
.form-control,
.form-control:focus,
.show>.btn-primary.dropdown-toggle:focus,
.show>.btn-secondary.dropdown-toggle:focus {
    outline: 0;
    box-shadow: none
}

.btn-default,
.btn-primary,
.btn-primary.disabled,
.btn-primary.disabled:hover,
.btn-primary.focus,
.btn-primary:disabled,
.btn-primary:disabled:hover,
.btn-primary:focus,
.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle {
    background-color: var(--primarycolor) !important;
    border-color: var(--primarycolor)
}

a.bg-primary:focus,
a.bg-primary:hover,
button.bg-primary:focus,
button.bg-primary:hover {
    background-color: var(--primarycolor) !important
}

.authentication-area.style2 .forgot-link,
.authentication-area.style2 .form-label,
.authentication-area.style2 .login-box h3,
.btn-default,
.button-action:hover,
.chat-menu .call-button a:hover,
.gradient #header-fix .logo-bar .horizontal-logo,
.round-button:hover,
.scrollup:hover,
.wizard.dark .nav-link,
.wizard.dark .nav-link .small {
    color: #fff
}

.btn {
    font-size: inherit
}

.round-button {
    width: 30px;
    height: 30px;
    color: #fff;
    display: inline-block;
    border-radius: 30px;
    line-height: 30px;
    text-align: center
}

.chkbox input:checked~.checkmark,
.list-group-item.active,
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link,
.show>.btn-secondary.dropdown-toggle {
    background-color: var(--primarycolor);
    border-color: var(--primarycolor)
}

.btn-primary:hover {
    -webkit-box-shadow: 0 8px 25px -8px #000;
    box-shadow: 0 8px 25px -8px #000
}

.btn-primary.nexttab,
.btn-primary.nexttab:focus,
.btn-primary.nexttab:hover,
.btn-primary.prevtab,
.btn-primary.prevtab:focus,
.btn-primary.prevtab:hover,
.note-editor.note-frame .note-editable {
    border: none
}

.circle-40,
.circle-50 {
    border-radius: 50%;
    text-align: center
}

.font-w-600,
.mail-app li.unread,
.mail-app li.unread .mail-date,
.mail-app li.unread .mail-subject,
.mail-app li.unread i,
.sub-header h4 {
    font-weight: 600
}

.form-select,
.mail-toolbar a.dropdown-item i,
.tx-s-12 {
    font-size: 12px
}

.font-15 {
    font-size: 15px
}

.line-h-1,
.line-height-1 {
    line-height: 1
}

.transaction-date {
    min-width: 40px
}

.bg-secondary,
.status-filter li.settlement a.active,
.status-filter li.settlement a:hover {
    background: var(--secondary) !important
}

.bg-success,
.status-filter li.active a.active,
.status-filter li.active a:hover {
    background: var(--success) !important
}

.bg-info {
    background: var(--info) !important
}

.bg-warning,
.status-filter li.due a.active,
.status-filter li.due a:hover {
    background: var(--warning) !important
}

.bg-danger,
.status-filter li.legal a.active,
.status-filter li.legal a:hover,
.status-filter li.rejected a.active,
.status-filter li.rejected a:hover {
    background: var(--danger) !important
}

.bg-dark {
    background: var(--dark) !important
}

.text-secondary {
    color: var(--secondary) !important
}

.text-success {
    color: var(--success) !important
}

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

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

.text-danger {
    color: var(--danger) !important
}

.text-dark {
    color: var(--dark) !important
}

.search-bar-menu {
    line-height: 31px;
    font-size: 20px;
    border-left: 1px solid var(--bordercolor);
    padding: 0 10px;
    margin-top: 3px
}

.input-success .form-control:focus+.form-control-placeholder,
.input-success .form-control:not([value=""])+.form-control-placeholder,
.search-bar-menu.active {
    color: var(--success)
}

.circle-50 {
    width: 50px;
    height: 50px;
    line-height: 55px
}

.circle-40 {
    width: 40px;
    height: 40px;
    line-height: 38px;
    font-size: 15px;
    font-weight: 700
}

.badge {
    font-weight: 400;
    transition: .3s ease-out;
    -webkit-transition: .3s ease-out;
    min-width: 95px
}

.badge.icon-badges,
.summery-listing button.min-width {
    min-width: 110px
}

.badge-primary,
.barfiller .tip.primary,
.custom-control.custom-radio .custom-control-input:checked~.custom-control-label.checkbox-primary.outline::after,
.mail-app li.business-mail .dot,
.notes-list-section .business-note .dot {
    background: var(--primarycolor)
}

.badge-secondary {
    background-color: var(--secondary)
}

.badge-success {
    background-color: var(--success)
}

.badge-info {
    background-color: var(--info)
}

.badge-warning {
    background-color: var(--warning)
}

.badge-dark {
    background-color: var(--dark)
}

.badge-danger {
    background-color: var(--danger)
}

.outline-badge-primary {
    border: 1px solid var(--primarycolor);
    color: var(--primarycolor);
    position: relative;
    overflow: hidden
}

.invoices .invoice .invoice-status:after,
.outline-badge-primary:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--primarycolor);
    opacity: .2;
    left: 0;
    top: 0;
    z-index: 0
}

.outline-badge-secondary {
    border: 1px solid var(--secondary);
    color: var(--secondary);
    position: relative;
    overflow: hidden
}

.outline-badge-secondary:after {
    position: absolute;
    background: var(--secondary);
    opacity: .2;
    left: 0;
    top: 0
}

.outline-badge-success {
    border: 1px solid var(--success);
    color: var(--success);
    position: relative;
    overflow: hidden
}

.outline-badge-success:after {
    position: absolute;
    background: var(--success);
    opacity: .2;
    left: 0;
    top: 0
}

.outline-badge-info {
    border: 1px solid var(--info);
    color: var(--info);
    position: relative;
    overflow: hidden
}

.outline-badge-info:after {
    position: absolute;
    background: var(--info);
    opacity: .2;
    left: 0;
    top: 0
}

.outline-badge-warning {
    border: 1px solid var(--warning);
    color: var(--warning);
    position: relative;
    overflow: hidden
}

.outline-badge-warning:after {
    position: absolute;
    background: var(--warning);
    opacity: .2;
    left: 0;
    top: 0
}

.outline-badge-danger {
    border: 1px solid var(--danger);
    color: var(--danger);
    position: relative;
    overflow: hidden
}

.outline-badge-danger:after {
    position: absolute;
    background: var(--danger);
    opacity: .2;
    left: 0;
    top: 0
}

.outline-badge-dark {
    border: 1px solid var(--dark);
    color: var(--dark);
    position: relative;
    overflow: hidden
}

.outline-badge-dark:after {
    position: absolute;
    background: var(--dark);
    opacity: .2;
    left: 0;
    top: 0
}

.zoom {
    transition: transform .3s
}

.zoom:hover {
    transform: scale(1.02);
    -webkit-box-shadow: 0 4px 6px 0 rgba(85, 85, 85, .08), 0 1px 20px 0 rgba(0, 0, 0, .07), 0 1px 11px 0 rgba(0, 0, 0, .07);
    -moz-box-shadow: 0 4px 6px 0 rgba(85, 85, 85, .08), 0 1px 20px 0 rgba(0, 0, 0, .07), 0 1px 11px 0 rgba(0, 0, 0, .07);
    box-shadow: 0 4px 6px 0 rgba(85, 85, 85, .08), 0 1px 20px 0 rgba(0, 0, 0, .07), 0 1px 11px 0 rgba(0, 0, 0, .07)
}

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

.border-secondary {
    border-color: var(--secondary) !important
}

.border-warning {
    border-color: var(--warning) !important
}

.border-info {
    border-color: var(--info) !important
}

.border-success {
    border-color: var(--success) !important
}

.border-dark {
    border-color: var(--dark) !important
}

.border-danger {
    border-color: var(--danger) !important
}

.border-w-5 {
    border-width: 5px !important
}

body::-webkit-scrollbar {
    width: 1em
}

body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
}

body::-webkit-scrollbar-thumb {
    background-color: #a9a9a9;
    outline: slategrey solid 1px
}

.card-liner-icon {
    font-size: 25px;
    line-height: 31px
}

.card-liner-subtitle {
    font-size: 13px;
    margin-bottom: 0
}

.card-liner-absolute-icon {
    position: absolute;
    right: 10px;
    top: 10px
}

.card-liner-small-tip {
    border-radius: 20px;
    padding: 2px 7px;
    font-size: 11px
}

.card-liner-content {
    margin-left: 10px;
    padding-left: 10px;
    border-left: 1px solid var(--bordercolor)
}

.card {
    border: 1px solid var(--bordercolor);
    background: var(--mainbackground)
}

.card .card-header {
    background-color: transparent;
    border-color: var(--bordercolor);
    padding: 15px
}

.card .card-header h4 {
    line-height: 1;
    font-size: 1rem
}

.bottom-copy-right p,
.card .card-header .card-title,
.contacts p,
.contacts.grid .contact p,
.documents p,
.documents.grid .document p,
.info-header h6,
.invoices .invoice .invoice-content p,
.timeline-app .timeline-item:last-child,
.timeline-app-alt .timeline-item:last-child {
    margin-bottom: 0
}

.morris-hover.morris-default-style {
    background: var(--mainbackground);
    color: var(--bodycolor);
    border: solid 2px var(--bordercolor)
}

.twitter-gradient {
    background: #00aced;
    background: linear-gradient(190deg, #00aced 0, #0081ce 100%);
    color: #fff;
    font-size: 18px
}

.twitter-gradient .love {
    font-size: 13px;
    background: #003952;
    border-radius: 20px;
    -webkit-box-shadow: 0 9px 16px -8px rgba(0, 0, 0, .75);
    -moz-box-shadow: 0 9px 16px -8px rgba(0, 0, 0, .75);
    box-shadow: 0 9px 16px -8px rgba(0, 0, 0, .75)
}

.nav-tabs,
.nav-tabs .nav-link {
    border: none;
    color: var(--bodycolor)
}

#month_statistics,
#week_statistics,
#year_statistics {
    height: 240px
}

.nav-tabs .nav-link {
    padding: .5rem .7rem
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color: var(--primarycolor);
    background-color: transparent;
    border-bottom: 2px solid var(--primarycolor)
}

.caption-bg:hover,
.pic-holder.uploadInProgress .upload-loader,
.pic-holder:hover .upload-file-block,
.portfolio-block .caption-bg:hover,
.tab-content>.active,
.uploadProfileInput:focus~.upload-file-block {
    opacity: 1
}

@media (max-width:450px) {
    .nav-pills .nav-link {
        font-size: 12px;
        padding: .5rem
    }
}

.activities,
.contacts,
.documents,
.iconlist,
.invoices,
.tasks {
    padding: 0;
    margin: 0
}

.tasks .task {
    padding: 0;
    list-style: none;
    border-width: 3px !important;
    border-bottom: 1px solid var(--bordercolor) !important
}

.tasks .task.border-0 {
    border-bottom: none !important
}

.chkbox {
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    user-select: none;
    z-index: 1;
    line-height: 20px;
    margin-bottom: 0
}

.chkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0
}

.chkbox .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    border: 2px solid var(--bordercolor);
    border-radius: 3px
}

.chkbox .checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 1px;
    width: 6px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

.chkbox.smallchk {
    padding-left: 19px;
    line-height: 17px
}

.chkbox.smallchk .checkmark {
    height: 14px;
    width: 14px;
    top: calc(50% - 8px);
    border-radius: 0
}

.chkbox.smallchk .checkmark:after {
    left: 3px;
    top: -1px;
    width: 5px;
    height: 10px
}

.chkbox input[type=radio]:checked~.checkmark,
.chkbox input[type=radio]~.checkmark,
.chkbox:hover input[type=radio]~.checkmark {
    border-radius: 25px
}

.chkbox input:checked+b,
.chkbox input:checked+img+img+span,
.chkbox input:checked+img+span,
.chkbox input:checked+p,
.chkbox input:checked+span,
.todo-list li.todo-item.trashed .todo-content {
    text-decoration: line-through
}

#example .open>.dropdown-menu,
.chkbox input:checked~.checkmark:after,
.docs-options .dropdown-menu .form-check-label,
.editable-checklist label {
    display: block
}

.chkbox input[type=radio]:checked~.checkmark:after {
    top: -2px;
    left: -2px;
    border: none;
    width: 20px;
    height: 20px;
    border-radius: 25px;
    background: var(--primarycolor)
}

.checkbox-btn .chkbox {
    height: 20px
}

.checkbox-btn .chkbox .checkmark {
    border: 2px solid #fff
}

.checkbox-btn .chkbox input:checked~.checkmark {
    background-color: #fff;
    border-color: #fff
}

.checkbox-btn .chkbox .checkmark:after,
.custom-control .custom-control-input:checked~.custom-control-label.checkbox-primary.outline::after,
.input-primary .form-control:focus,
.input-primary .form-control:not([value=""]) {
    border-color: var(--primarycolor)
}

.checkbox-list {
    padding: 10px 15px;
    background: var(--checkbox-list-bg);
    box-shadow: 0 4px 10px rgb(0 0 0 / 15%);
    margin-bottom: 20px;
    border-radius: 4px
}

.absolute-circle {
    width: 50px;
    height: 50px;
    position: absolute;
    border-radius: 50px;
    text-align: center;
    line-height: 53px;
    color: #fff;
    font-size: 20px
}

.absolute-circle.dropbox {
    background: #018f35
}

.absolute-circle.galleries {
    background: #8bc3ea
}

.absolute-circle.comments {
    background: #f28e01
}

.ml-35 {
    margin-left: 35px
}

.activities .activity {
    padding: 0 0 0 40px;
    list-style: none;
    border-width: 2px !important;
    position: relative;
    border-color: var(--bordercolor) !important;
    margin-left: 62px
}

.activities .activity .activity-absolute {
    position: absolute;
    left: -62px;
    top: 0
}

.background-image-maker {
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-color: #1b1b1b
}

.holder-image img {
    opacity: 0
}

.business-card,
.info-card {
    position: relative;
    overflow: hidden
}

.info-card .date {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 30px;
    background: #ff880d;
    width: 60px;
    text-align: center;
    border-radius: 5px;
    padding: 10px;
    line-height: 30px
}

.business-card .like,
.info-card .like {
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    border-radius: 10px;
    padding: 2px 10px;
    position: absolute
}

.info-card .date span {
    display: block;
    font-size: 17px
}

.info-card .like {
    font-size: 13px;
    width: 124px
}

.business-card .title,
.info-card .title {
    position: absolute;
    bottom: 0
}

.business-card .like {
    font-size: 15px;
    width: auto
}

.rating-block {
    position: absolute;
    bottom: 20px;
    left: 20px
}

.progress {
    height: 1rem
}

.progress .progress-bar,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--primarycolor)
}

.barfiller {
    width: 100%;
    height: 10px;
    background: var(--bodybackground);
    box-shadow: 0 2px 2px rgba(224, 230, 237, .458824), 1px 6px 7px rgba(224, 230, 237, .458824)
}

#settings .setting,
.scrollup {
    background: var(--primarycolor);
    z-index: 999;
    color: #fff;
    position: fixed
}

.barfiller.h-2 {
    height: 2px
}

.barfiller.h-3 {
    height: 3px
}

.barfiller.h-4 {
    height: 4px
}

.barfiller.h-5 {
    height: 5px
}

.barfiller.h-6 {
    height: 6px
}

.barfiller.h-7 {
    height: 7px
}

.barfiller .fill {
    display: block;
    position: relative;
    width: 0;
    height: 100%
}

.barfiller .tip {
    margin-top: -39px;
    padding: 4px 7px;
    color: #fff;
    left: 0;
    position: absolute;
    z-index: 2;
    background: #343a40
}

.barfiller .tip:after {
    border: solid;
    border-color: #343a40 transparent;
    border-width: 6px 6px 0;
    content: "";
    display: block;
    position: absolute;
    left: 13px;
    top: 100%;
    z-index: 9
}

.barfiller .tip.primary:after {
    border-color: var(--primarycolor) transparent
}

.barfiller .tip.secondary,
.custom-control.custom-radio .custom-control-input:checked~.custom-control-label.checkbox-secondary.outline::after {
    background: var(--secondary)
}

.barfiller .tip.secondary:after {
    border-color: var(--secondary) transparent
}

.barfiller .tip.success,
.custom-control.custom-radio .custom-control-input:checked~.custom-control-label.checkbox-success.outline::after,
.invoices .invoice.paid-invoice .invoice-status:after,
.mail-app li.personal-mail .dot,
.notes-list-section .personal-note .dot {
    background: var(--success)
}

.barfiller .tip.success:after {
    border-color: var(--success) transparent
}

.barfiller .tip.info,
.custom-control.custom-radio .custom-control-input:checked~.custom-control-label.checkbox-info.outline::after,
.invoices .invoice.pending-invoice .invoice-status:after,
.mail-app li.work-mail .dot,
.notes-list-section .work-note .dot {
    background: var(--info)
}

.barfiller .tip.info:after {
    border-color: var(--info) transparent
}

.barfiller .tip.warning,
.custom-control.custom-radio .custom-control-input:checked~.custom-control-label.checkbox-warning.outline::after,
.mail-app li.social-mail .dot,
.notes-list-section .social-note .dot {
    background: var(--warning)
}

.barfiller .tip.warning:after {
    border-color: var(--warning) transparent
}

.barfiller .tip.danger,
.custom-control.custom-radio .custom-control-input:checked~.custom-control-label.checkbox-danger.outline::after,
.invoices .invoice.canceled-invoice .invoice-status:after,
.mail-app li.private-mail .dot,
.notes-list-section .private-note .dot {
    background: var(--danger)
}

.barfiller .tip.danger:after {
    border-color: var(--danger) transparent
}

#social-chart {
    height: 153px
}

.social-dot {
    width: 10px;
    height: 10px;
    border-radius: 10px;
    display: inline-block;
    margin-right: 10px
}

.social-dot.google {
    background: #dd4b39
}

.social-dot.facebook {
    background: #3b5999
}

.social-dot.twitter {
    background: #55acee
}

footer.site-footer {
    background: var(--mainbackground);
    text-align: center;
    padding: 10px 0;
    margin-top: 20px;
    margin-left: 228px
}

.scrollup {
    width: 38px;
    height: 38px;
    bottom: 30px;
    right: 16px;
    display: none;
    border-radius: 5px;
    line-height: 38px;
    font-size: 20px;
    font-weight: 700;
    box-shadow: 0 1px 20px 1px var(--primarycolor);
    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08) !important
}

.filter a,
.pra {
    font-weight: 400
}

@-moz-keyframes spin {
    from {
        -moz-transform: rotate(0)
    }

    to {
        -moz-transform: rotate(360deg)
    }
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0)
    }

    to {
        -webkit-transform: rotate(360deg)
    }
}

@keyframes spin {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

#settings .gradient-img .gradient-img-block {
    width: 100px;
    height: 90px;
    overflow: hidden;
    cursor: pointer
}

#settings .gradient-img .gradient-img-block.active {
    border: 1px solid #fff
}

#settings.active .setting {
    right: 300px
}

#settings.active .sidbarchat {
    margin-right: 0;
    border-left: 1px solid var(--bordercolor)
}

#settings .setting {
    width: 35px;
    height: 35px;
    top: 45%;
    right: 0;
    transition: .3s;
    line-height: 35px;
    text-align: center;
    font-size: 25px;
    -webkit-border-top-left-radius: 50px !important;
    -webkit-border-bottom-left-radius: 50px !important;
    -moz-border-radius-topleft: 50px !important;
    -moz-border-radius-bottomleft: 50px !important;
    border-top-left-radius: 50px !important;
    border-bottom-left-radius: 50px !important
}

#settings .setting h5 {
    -webkit-animation: 4s linear infinite spin;
    -moz-animation: 4s linear infinite spin;
    animation: 4s linear infinite spin
}

#settings .setting h5 i {
    line-height: 35px
}

#settings .sidbarchat {
    width: 300px;
    position: fixed;
    height: 100vh;
    top: 0;
    right: 0;
    background: var(--mainbackground);
    z-index: 10000;
    margin-right: -300px;
    transition: .3s;
    box-shadow: 0 0 38px 0 rgba(0, 0, 0, .11);
    overflow-y: scroll
}

#settings .color-box,
#settings input.color,
#settings input.sidebarcolor {
    width: 40px;
    height: 40px
}

#settings .color-box {
    border-radius: 40px
}

#settings .color-box.color1 {
    background: #036
}

#settings .color-box.color2 {
    background: #0bb2d4
}

#settings .color-box.color3 {
    background: #17b3a3
}

#settings .color-box.color4 {
    background: #eb6709
}

#settings .color-box.color5 {
    background: #76c335
}

#settings .color-box.color6 {
    background: #3e8ef7
}

.dropdown-menu {
    font-size: 13px;
    background: var(--mainbackground);
    border: 1px solid var(--bordercolor)
}

.dropdown-menu .media img {
    max-width: 40px
}

.dropdown-menu .dropdown-divider {
    border-top: 1px solid var(--bordercolor);
    margin: 0
}

.dropdown-menu .dropdown-item {
    padding: 8px 10px;
    color: var(--bodycolor)
}

.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item:hover {
    background: 0 0;
    color: var(--primarycolor)
}

.fc-day-grid-event {
    padding: 5px
}

.fc-event,
.fc-event-dot,
a:not([href]).fc-event {
    background-color: rgba(0, 51, 102, .2);
    border-color: var(--primarycolor);
    color: var(--primarycolor)
}

.c3-tooltip tr,
.fc-unthemed .fc-content,
.fc-unthemed .fc-divider,
.fc-unthemed .fc-list-heading td,
.fc-unthemed .fc-list-view,
.fc-unthemed .fc-popover,
.fc-unthemed .fc-row,
.fc-unthemed tbody,
.fc-unthemed td,
.fc-unthemed th,
.fc-unthemed thead,
.modal-content .modal-footer,
.modal-content .modal-header,
.ql-container.ql-snow,
.ql-toolbar.ql-snow,
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label,
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options,
.table:not(.table-dark).table-bordered,
.tablesaw .tablesaw-swipe-cellpersist,
.tablesaw-stack tbody tr,
.tablesaw.table-bordered td,
.tablesaw.table-bordered th {
    border-color: var(--bordercolor)
}

.fc-unthemed .fc-divider,
.fc-unthemed .fc-list-heading td,
.fc-unthemed .fc-popover,
.fc-unthemed .fc-popover .fc-header {
    background-color: var(--bodybackground)
}

.fc-ltr .fc-h-event.fc-not-start,
.fc-rtl .fc-h-event.fc-not-end {
    position: relative;
    display: block;
    font-size: .85em;
    line-height: 1.4;
    border-radius: 3px;
    border: 1px solid #3788d8;
    margin-left: 2px;
    padding-left: 4px
}

.pill {
    border-radius: 15px
}

.pill.cl-personal {
    background: #a7f4ec
}

.pill.cl-professional {
    background: #ddd6ff
}

.pill.cl-work {
    background: #afe0ff
}

.pill.cl-home {
    background: #ffd0f2
}

.pill.cl-office {
    background: #fdc7af
}

.se-pre-con {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: var(--mainbackground)
}

.loader {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: var(--primarycolor);
    font-size: 90px;
    text-indent: -9999em;
    overflow: hidden;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: 1.7s infinite load6, 1.7s infinite round;
    animation: 1.7s infinite load6, 1.7s infinite round
}

@-webkit-keyframes load6 {

    0%,
    100%,
    5%,
    95% {
        box-shadow: 0 -.83em 0 -.4em, 0 -.83em 0 -.42em, 0 -.83em 0 -.44em, 0 -.83em 0 -.46em, 0 -.83em 0 -.477em
    }

    10%,
    59% {
        box-shadow: 0 -.83em 0 -.4em, -.087em -.825em 0 -.42em, -.173em -.812em 0 -.44em, -.256em -.789em 0 -.46em, -.297em -.775em 0 -.477em
    }

    20% {
        box-shadow: 0 -.83em 0 -.4em, -.338em -.758em 0 -.42em, -.555em -.617em 0 -.44em, -.671em -.488em 0 -.46em, -.749em -.34em 0 -.477em
    }

    38% {
        box-shadow: 0 -.83em 0 -.4em, -.377em -.74em 0 -.42em, -.645em -.522em 0 -.44em, -.775em -.297em 0 -.46em, -.82em -.09em 0 -.477em
    }
}

@keyframes load6 {

    0%,
    100%,
    5%,
    95% {
        box-shadow: 0 -.83em 0 -.4em, 0 -.83em 0 -.42em, 0 -.83em 0 -.44em, 0 -.83em 0 -.46em, 0 -.83em 0 -.477em
    }

    10%,
    59% {
        box-shadow: 0 -.83em 0 -.4em, -.087em -.825em 0 -.42em, -.173em -.812em 0 -.44em, -.256em -.789em 0 -.46em, -.297em -.775em 0 -.477em
    }

    20% {
        box-shadow: 0 -.83em 0 -.4em, -.338em -.758em 0 -.42em, -.555em -.617em 0 -.44em, -.671em -.488em 0 -.46em, -.749em -.34em 0 -.477em
    }

    38% {
        box-shadow: 0 -.83em 0 -.4em, -.377em -.74em 0 -.42em, -.645em -.522em 0 -.44em, -.775em -.297em 0 -.46em, -.82em -.09em 0 -.477em
    }
}

@-webkit-keyframes round {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes round {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

.modal-content {
    background: var(--model-bg);
    border-color: var(--bordercolor)
}

.popover,
.select2-container--bootstrap4 .select2-selection,
.select2-container--bootstrap4.select2-container--disabled .select2-selection,
.select2-container--bootstrap4.select2-container--disabled.select2-container--focus .select2-selection,
.select2-dropdown {
    background-color: var(--mainbackground);
    border-color: var(--bordercolor)
}

.popover .popover-header {
    background-color: var(--bodybackground);
    border-color: var(--bordercolor);
    color: var(--primarycolor)
}

.popover.bs-popover-auto[x-placement^=right]>.arrow::after,
.popover.bs-popover-right>.arrow::after {
    border-right-color: var(--mainbackground)
}

.popover.bs-popover-auto[x-placement^=left]>.arrow::after,
.popover.bs-popover-left>.arrow::after {
    border-left-color: var(--mainbackground)
}

.popover.bs-popover-auto[x-placement^=right]>.arrow::before,
.popover.bs-popover-right>.arrow::before {
    border-right-color: var(--bordercolor);
    border-left-color: var(--bordercolor)
}

.popover.bs-popover-auto[x-placement^=top]>.arrow::after,
.popover.bs-popover-top>.arrow::after {
    border-top-color: var(--mainbackground)
}

.popover.bs-popover-auto[x-placement^=top]>.arrow::before,
.popover.bs-popover-top>.arrow::before {
    border-top-color: var(--bordercolor)
}

.popover.bs-popover-auto[x-placement^=bottom]>.arrow::after,
.popover.bs-popover-bottom>.arrow::after {
    border-bottom-color: var(--mainbackground)
}

.popover.bs-popover-auto[x-placement^=bottom]>.arrow::before,
.popover.bs-popover-bottom>.arrow::before {
    border-bottom-color: var(--bordercolor)
}

.custom-control.custom-checkbox .custom-control-input:disabled~.custom-control-label::before,
.list-group-item {
    background-color: transparent;
    border-color: var(--bordercolor)
}

.layout-primary thead,
.list-group-item-action:focus,
.list-group-item-action:hover {
    background-color: var(--primarycolor);
    color: #fff
}

.select2-container--bootstrap4 .select2-dropdown,
.select2-container--bootstrap4 .select2-dropdown.select2-dropdown--above,
.select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder,
.select2-search--dropdown .select2-search__field {
    color: var(--bodycolor);
    border-color: var(--bordercolor)
}

.custom-control .custom-control-input:checked~.custom-control-label.outline::before,
.select2-container .select2-search--inline .select2-search__field,
.select2-search--dropdown .select2-search__field {
    background-color: transparent
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b {
    border-color: var(--bodycolor) transparent transparent
}

.select2-container .select2-search--inline .select2-search__field {
    color: var(--bodycolor);
    margin-top: 8px
}

.chat-menu li {
    position: relative;
    border-bottom: 1px solid var(--bordercolor);
    z-index: 1
}

.chat-menu li:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--primarycolor);
    opacity: 0;
    left: 0;
    z-index: -1;
    top: 0
}

.chat-menu li.active:after,
.chat-menu li:hover:after {
    opacity: .1
}

.chat-menu li .online-status:before {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 8px;
    z-index: 1
}

.chat-menu li .online-status.green:before {
    background-color: #52c41a
}

.chat-menu li .online-status.yellow:before {
    background-color: #fadb14
}

.chat-menu li:last-child,
.layout-danger thead th,
.layout-dark thead th,
.layout-info thead th,
.layout-primary thead th,
.layout-secondary thead th,
.layout-success thead th,
.todo-list li.todo-item:last-child {
    border-bottom: none
}

.chat-menu li a,
.chat-menu li a:hover {
    color: var(--bodycolor);
    z-index: 1;
    position: inherit
}

.chat-menu li .new-message {
    width: 19px;
    height: 19px;
    line-height: 19px;
    border-radius: 10px;
    text-align: center
}

.chat-menu .call-button a {
    width: 30px;
    height: 30px;
    border-radius: 30px;
    color: #fff;
    display: inline-block;
    line-height: 34px;
    text-align: center;
    font-size: 20px
}

.chat-menu .call-button a.call {
    background: #0abb87
}

.chat-menu .call-button a.video-call {
    background: #ffb822
}

.scrollerchat {
    background-image: url(../images/chat.png);
    background-size: cover;
    background-position: center
}

.chat-box .form-control {
    height: 50px
}

.chat-box a {
    position: absolute;
    right: 22px;
    top: 22px
}

.chat-contact,
.chat-profile {
    position: fixed;
    top: 94px;
    right: 0;
    z-index: 10
}

.chat-profile {
    top: 134px
}

.chat-contact-list,
.contact-menu-section,
.document-menu-section,
.invoice-menu-section,
.mail-menu-section,
.notes-menu-section,
.todo-menu-section {
    -webkit-border-radius: 5px;
    -webkit-border-top-right-radius: 0px;
    -webkit-border-bottom-right-radius: 0px;
    -moz-border-radius: 5px;
    -moz-border-radius-topright: 0px;
    -moz-border-radius-bottomright: 0px;
    border-radius: 5px 0 0 5px;
    transition: .5s
}

.chat-user-profile {
    -webkit-border-radius: 0px;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius: 0;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomright: 5px;
    border-radius: 0 5px 5px 0;
    transition: .5s
}

.speech-bubble {
    position: relative;
    background: var(--primarycolor);
    border-radius: .4em;
    color: #fff;
    z-index: 1
}

.speech-bubble:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 100%;
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-top-color: var(--primarycolor);
    border-bottom: 0;
    border-left: 0;
    margin-left: 0;
    top: 20px;
    z-index: 1
}

.speech-bubble.alt {
    color: var(--bodycolor);
    background: 0 0
}

.speech-bubble.alt:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--primarycolor);
    opacity: .1;
    top: 0;
    left: 0;
    border-radius: .4em;
    z-index: 1
}

.speech-bubble.alt:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: auto;
    right: 100%;
    width: 0;
    height: 0;
    opacity: .1;
    border: 20px solid transparent;
    border-right-color: var(--primarycolor);
    border-bottom: 0;
    border-left: 0;
    margin-left: 0;
    top: 10px
}

.card-header-area .icon-box img,
.docs-cropped .modal-body>canvas,
.docs-cropped .modal-body>img,
.img-container>img,
.img-preview>img,
.speech-bubble img {
    max-width: 100%
}

.speech-bubble iframe {
    max-width: 300px;
    z-index: 2
}

.ui-sortable-placeholder {
    visibility: visible !important;
    border: 1px dotted var(--primarycolor)
}

.flip-menu-toggle {
    line-height: 31px;
    font-size: 20px;
    border-right: 1px solid var(--bordercolor);
    padding: 0 10px;
    margin-top: 3px
}

.carbon-wrap,
.contact-list-section,
.document-list-section,
.invoice-list-section,
.mail-list-section,
.todo-list-section {
    overflow: hidden
}

.contact-menu,
.document-menu,
.invoice-menu,
.mail-menu,
.notes-menu,
.todo-menu {
    margin-top: 30px
}

.contact-menu li a,
.document-menu li a,
.invoice-menu li a,
.todo-menu li a {
    font-weight: 700;
    position: relative
}

.contact-menu li a.active:after,
.contact-menu li a:hover:after,
.document-menu li a.active:after,
.document-menu li a:hover:after,
.invoice-menu li a.active:after,
.invoice-menu li a:hover:after,
.mail-menu li a.active:after,
.mail-menu li a:hover:after,
.notes-menu li a.active:after,
.notes-menu li a:hover:after,
.todo-menu li a.active:after,
.todo-menu li a:hover:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--primarycolor);
    opacity: .2;
    left: 0;
    top: 0;
    z-index: 0;
    border-radius: 20px
}

.jsgrid-pager span,
.todo-list {
    padding: 0
}

.todo-list li.todo-item {
    border-bottom: 1px solid var(--bordercolor);
    padding: 20px;
    display: flex
}

.todo-list li.todo-item h3 {
    font-size: 16px;
    font-weight: 600
}

.todo-list li.todo-item p {
    -webkit-transition: .35s;
    transition: .35s;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: calc(100vw - 730px);
    margin-bottom: 0
}

.Notification-table tr td:first-child,
.Notification-table tr th:first-child,
.btn-toggle .tooltip-inner,
.btn-upload .tooltip-inner,
.contacts.list .contact .contact-content .contact-phone,
.documents.list .document .document-content .document-phone,
.loan-table tr td:first-child,
.loan-table tr th:first-child,
.permission-table td,
.permission-table th,
span.logo-content {
    white-space: nowrap
}

.todo-list li.todo-item .max-w-auto {
    min-width: 20px
}

.input-warning .form-control:focus+.form-control-placeholder,
.input-warning .form-control:not([value=""])+.form-control-placeholder,
.mail-app li.important .icon-exclamation,
.mail-app li.starred .icon-star,
.notes-list-section .important .icon-exclamation,
.notes-list-section .starred .icon-star,
.todo-list li.todo-item.important .icon-exclamation,
.todo-list li.todo-item.starred .icon-star {
    color: var(--warning)
}

.form-control,
.form-control:disabled,
.form-control:focus,
.form-control[readonly] {
    background: 0 0;
    border-color: var(--bordercolor);
    font-size: 12px
}

#jqstooltip,
.toggle-handle,
.view-email {
    background: var(--mainbackground)
}

.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%
}

.embed-container embed,
.embed-container iframe,
.embed-container object {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

#jqstooltip {
    color: var(--bodycolor);
    border-color: var(--bordercolor);
    width: auto !important;
    height: auto !important
}

.ct-series-a .ct-bar,
.ct-series-a .ct-line,
.ct-series-a .ct-point,
.ct-series-a .ct-slice-donut {
    stroke: var(--primarycolor)
}

.ct-grid,
.tick line,
path.domain {
    stroke: var(--bordercolor)
}

.height-300 {
    min-height: 300px
}

.height-175 {
    height: 175px;
    min-height: 175px;
    overflow: auto
}

.height-200 {
    height: 200px;
    min-height: 200px;
    overflow: auto
}

.height-235 {
    height: 235px;
    min-height: 235px;
    overflow: auto
}

.height-350 {
    min-height: 350px
}

.height-400 {
    height: 400px;
    min-height: 400px;
    overflow: auto
}

.height-500 {
    min-height: 500px
}

.flot-svg text,
.google-chart svg g react,
.google-chart svg g text {
    fill: var(--bodycolor)
}

.google-chart svg rect {
    fill: var(--mainbackground)
}

.apexcharts-canvas.dark {
    background: 0 0 !important
}

.c3-legend-item text,
.ql-snow .ql-stroke,
.tick text {
    stroke: var(--bodycolor)
}

.mail-menu li a,
.notes-menu li a {
    font-weight: 700;
    position: relative;
    display: flex;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important
}

.font-icon-list i+span,
.font-icon-list span+span,
.font-normal,
.mail-menu li a i,
.notes-menu li a i {
    font-size: 14px
}

.dot,
.mail-app li .dot {
    width: 10px;
    height: 10px;
    border-radius: 10px
}

.dot {
    margin-top: 5px;
    display: inline-block
}

.view-email {
    position: absolute;
    z-index: 100000000;
    width: 100%;
    height: 100%;
    display: none
}

.mail-app li {
    border-bottom: 1px solid var(--bordercolor);
    transition: transform .3s;
    line-height: 20px;
    font-size: 13px
}

.mail-app li:hover {
    transform: scale(1.01);
    -webkit-box-shadow: 0 4px 6px 0 rgba(85, 85, 85, .08), 0 1px 20px 0 rgba(0, 0, 0, .07), 0 1px 11px 0 rgba(0, 0, 0, .07);
    -moz-box-shadow: 0 4px 6px 0 rgba(85, 85, 85, .08), 0 1px 20px 0 rgba(0, 0, 0, .07), 0 1px 11px 0 rgba(0, 0, 0, .07);
    box-shadow: 0 4px 6px 0 rgba(85, 85, 85, .08), 0 1px 20px 0 rgba(0, 0, 0, .07), 0 1px 11px 0 rgba(0, 0, 0, .07)
}

.mail-app li .mail-user {
    min-width: 200px
}

.mail-app li .mail-subject {
    margin-bottom: 0;
    line-height: 19px;
    margin-left: 15px;
    cursor: pointer
}

.mail-app li .mail-type-icon {
    font-size: 15px;
    margin-top: 2px
}

.mail-app li .dot {
    margin-top: 5px
}

.mail-app li.mail-item.inbox {
    display: inherit
}

.mail-toolbar a i {
    font-size: 17px
}

.mail-toolbar a:last-child {
    margin-right: 0
}

.notes-list-section {
    padding: 15px;
    overflow: hidden
}

.notes-list-section .dot {
    width: 19px;
    height: 19px;
    border-radius: 19px;
    margin-top: 0
}

.notes-list-section .personal-note .card:before {
    content: "";
    background: var(--success);
    opacity: .1;
    position: absolute;
    width: 100%;
    height: 100%
}

.notes-list-section .work-note .card:before {
    content: "";
    background: var(--info);
    opacity: .1;
    position: absolute;
    width: 100%;
    height: 100%
}

.notes-list-section .social-note .card:before {
    content: "";
    background: var(--warning);
    opacity: .1;
    position: absolute;
    width: 100%;
    height: 100%
}

.notes-list-section .private-note .card:before {
    content: "";
    background: var(--danger);
    opacity: .1;
    position: absolute;
    width: 100%;
    height: 100%
}

.notes-list-section .business-note .card:before {
    content: "";
    background: var(--primarycolor);
    opacity: .1;
    position: absolute;
    width: 100%;
    height: 100%
}

.notes-list-section .notes-tool {
    font-size: 18px;
    line-height: 18px
}

.file-custom,
.file-custom:before {
    height: 2.5rem;
    padding: .5rem 1rem;
    line-height: 1.5;
    color: var(--bodycolor);
    background-color: var(--mainbackground)
}

.ql-editor {
    position: absolute;
    width: 100%
}

.file {
    position: relative;
    display: inline-block;
    cursor: pointer;
    height: 2.5rem
}

.file input {
    min-width: 14rem;
    margin: 0;
    opacity: 0
}

.file-custom {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 5;
    border: .075rem solid var(--bordercolor);
    border-radius: .25rem;
    box-shadow: inset 0 .2rem .4rem rgba(0, 0, 0, .05);
    user-select: none
}

.heart,
.wizard {
    position: relative
}

.file-custom:after {
    content: "Choose file..."
}

.file-custom:before {
    position: absolute;
    top: -.075rem;
    right: -.075rem;
    bottom: -.075rem;
    z-index: 6;
    display: block;
    content: "Browse";
    border: .075rem solid var(--bordercolor);
    border-radius: 0 .25rem .25rem 0
}

.file input:focus~.file-custom {
    box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9
}

.input-group-prepend .input-group-text {
    background-color: transparent;
    border: 1px solid var(--bordercolor);
    border-right: none;
    font-size: 13px
}

.input-group-append .input-group-text {
    background-color: transparent;
    border: 1px solid var(--bordercolor);
    border-left: none;
    font-size: 13px
}

.custom-control {
    line-height: 2
}

.custom-control .custom-control-label::before {
    width: 18px;
    height: 18px;
    background: 0 0
}

.custom-control .custom-control-input:checked~.custom-control-label.checkbox-primary::before,
.custom-control .custom-control-input:checked~.custom-control-label::before {
    border-color: var(--primarycolor);
    background-color: var(--primarycolor)
}

.custom-control .custom-control-input:checked~.custom-control-label::after {
    background-image: none;
    content: "";
    width: 7px;
    height: 12px;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 5px;
    left: -18px
}

.custom-control .custom-control-input:checked~.custom-control-label.checkbox-secondary::before {
    border-color: var(--secondary);
    background-color: var(--secondary)
}

.custom-control .custom-control-input:checked~.custom-control-label.checkbox-secondary.outline::after,
.input-secondary .form-control:focus,
.input-secondary .form-control:not([value=""]) {
    border-color: var(--secondary)
}

.custom-control .custom-control-input:checked~.custom-control-label.checkbox-warning::before {
    border-color: var(--warning);
    background-color: var(--warning)
}

.custom-control .custom-control-input:checked~.custom-control-label.checkbox-warning.outline::after,
.input-warning .form-control:focus,
.input-warning .form-control:not([value=""]) {
    border-color: var(--warning)
}

.custom-control .custom-control-input:checked~.custom-control-label.checkbox-danger::before {
    border-color: var(--danger);
    background-color: var(--danger)
}

.custom-control .custom-control-input:checked~.custom-control-label.checkbox-danger.outline::after,
.input-danger .form-control:focus,
.input-danger .form-control:not([value=""]) {
    border-color: var(--danger)
}

.custom-control .custom-control-input:checked~.custom-control-label.checkbox-info::before {
    border-color: var(--info);
    background-color: var(--info)
}

.custom-control .custom-control-input:checked~.custom-control-label.checkbox-info.outline::after,
.input-info .form-control:focus,
.input-info .form-control:not([value=""]) {
    border-color: var(--info)
}

.custom-control .custom-control-input:checked~.custom-control-label.checkbox-dark::before {
    border-color: var(--dark);
    background-color: var(--dark)
}

.custom-control .custom-control-input:checked~.custom-control-label.checkbox-dark.outline::after,
.input-dark .form-control:focus,
.input-dark .form-control:not([value=""]) {
    border-color: var(--dark)
}

.custom-control .custom-control-input:checked~.custom-control-label.checkbox-success::before {
    border-color: var(--success);
    background-color: var(--success)
}

.custom-control .custom-control-input:checked~.custom-control-label.checkbox-success.outline::after,
.input-success .form-control:focus,
.input-success .form-control:not([value=""]) {
    border-color: var(--success)
}

.custom-control.custom-checkbox .custom-control-label::before {
    border-radius: 0;
    background-color: transparent;
    border-color: var(--bordercolor)
}

.custom-control.custom-checkbox .custom-control-input:disabled:checked~.custom-control-label::before,
.custom-control.custom-radio .custom-control-input:disabled:checked~.custom-control-label::before {
    background-color: var(--primarycolor);
    opacity: .7
}

.custom-control.custom-radio .custom-control-input:checked~.custom-control-label::after {
    content: "";
    width: 6px;
    height: 6px;
    border: none;
    border-radius: 7px;
    top: 10px;
    left: -18px;
    background: #fff
}

.custom-control.custom-radio .custom-control-input:checked~.custom-control-label.checkbox-dark.outline::after {
    background: var(--dark)
}

.toggle-handle {
    border-color: var(--bordercolor)
}

.toggle.btn {
    margin-bottom: 10px
}

.input-group-text {
    color: var(--bodycolor);
    cursor: pointer
}

.input-group .input-group-text {
    background-color: var(--outline-btn);
    border-color: var(--outline-btn-border);
    color: var(--outline-btn-color)
}

.wizard-dark .form-control,
.wizard.dark .form-control,
.wizard.dark .nav-link.active i {
    border-color: #fff;
    color: #fff !important
}

.form-group .form-control+.form-control-placeholder {
    position: absolute;
    top: 0;
    padding: 7px 0 0 13px;
    transition: .2s;
    opacity: .5
}

.form-group .form-control:focus+.form-control-placeholder,
.form-group .form-control:not([value=""])+.form-control-placeholder {
    transform: translate3d(0, -100%, 0);
    opacity: 1
}

.form-group .form-control.form-control-lg+.form-control-placeholder {
    padding: 14px 0 0 13px
}

.form-group .form-control.form-control-lg.float-input:focus {
    padding: 1.2rem 1rem .3rem
}

.form-group .form-control.form-control-lg.float-input:focus+.form-control-placeholder {
    font-size: 70%;
    transform: translate3d(0, -40%, 0)
}

.form-group .input-group .input-group-prepend+.form-control+.form-control-placeholder {
    left: 40px
}

.input-secondary .form-control:focus+.form-control-placeholder,
.input-secondary .form-control:not([value=""])+.form-control-placeholder {
    color: var(--secondary)
}

.input-danger .form-control:focus+.form-control-placeholder,
.input-danger .form-control:not([value=""])+.form-control-placeholder {
    color: var(--danger)
}

.input-info .form-control:focus+.form-control-placeholder,
.input-info .form-control:not([value=""])+.form-control-placeholder {
    color: var(--info)
}

.input-dark .form-control:focus+.form-control-placeholder,
.input-dark .form-control:not([value=""])+.form-control-placeholder {
    color: var(--dark)
}

.wizard {
    z-index: 1
}

.wizard .round-tab i {
    width: 50px;
    height: 50px;
    background-color: var(--primarycolor);
    border: 2px solid var(--primarycolor);
    font-size: 1.25rem;
    line-height: 45px;
    text-align: center !important;
    top: 15px;
    z-index: 99;
    display: inline-block
}

.Notification-table tr td:not(:last-child),
.Notification-table tr th:not(:last-child),
.accordion-alt a:after,
.active-manager-table tr td,
.active-manager-table tr th,
.activity-table tr td,
.activity-table tr th,
.advertise-permit-table tr td:not(:first-child, :last-child),
.advertise-permit-table tr th:not(:first-child, :last-child),
.alert-table tr td,
.alert-table tr th,
.bank-address-table tr td:not(:first-child),
.bank-address-table tr th:not(:first-child),
.borrower-listing-table tbody tr td:not(:nth-child(3)),
.borrower-listing-table thead tr th:not(:nth-child(3)),
.company-access-table tr td:not(:first-child),
.company-access-table tr th:not(:first-child),
.company-listing-table tr td:not(:nth-child(2), :nth-child(3), :last-child),
.company-listing-table tr th:not(:nth-child(2), :nth-child(3), :last-child),
.consultant-listing-table tr td:first-child,
.consultant-listing-table tr td:nth-child(3),
.consultant-listing-table tr td:nth-child(4),
.consultant-listing-table tr td:nth-child(5),
.consultant-listing-table tr td:nth-child(6),
.consultant-listing-table tr th:first-child,
.consultant-listing-table tr th:nth-child(3),
.consultant-listing-table tr th:nth-child(4),
.consultant-listing-table tr th:nth-child(5),
.consultant-listing-table tr th:nth-child(6),
.cunsultant-active-profile-table tr td:not(:last-child, :first-child, :nth-child(3)),
.cunsultant-active-profile-table tr th:not(:last-child, :first-child, :nth-child(3)),
.cunsultant-listing-table tr td:not(:nth-child(2)),
.cunsultant-listing-table tr th:not(:nth-child(2)),
.cunsultant-search-table tr td,
.cunsultant-search-table tr th,
.cunsultant-settle-profile-table tr td:not(:last-child, :first-child, :nth-child(3)),
.cunsultant-settle-profile-table tr th:not(:last-child, :first-child, :nth-child(3)),
.director-active-profile-table tr td:not(:last-child, :first-child),
.director-active-profile-table tr th:not(:last-child, :first-child),
.directors-table tr td:not(:first-child),
.directors-table tr th:not(:first-child),
.docs-cropped .modal-body,
.dropzone,
.duerepayment-table tbody tr td:not(:nth-child(2), :last-child),
.duerepayment-table thead tr th:not(:nth-child(2), :last-child),
.heart,
.img-container,
.img-preview,
.jsgrid-pager,
.licence-table tr td:not(:first-child, :last-child),
.licence-table tr th:not(:first-child, :last-child),
.loan-table tr td:not(:last-child),
.loan-table tr th:not(:last-child),
.manager-listing-table tr td:not(:first-child),
.manager-listing-table tr th:not(:first-child),
.permanent-address-table tr td:not(:first-child),
.permanent-address-table tr th:not(:first-child),
.referance-table tr td:not(:first-child),
.referance-table tr th:not(:first-child),
.register-device-table tr td:not(:last-child),
.register-device-table tr th:not(:last-child),
.roles-listing-table tr td:not(:first-child),
.roles-listing-table tr th:not(:first-child),
.summery-listing li,
.transection-listing-table tr td,
.transection-listing-table tr th,
.upcoming-listing-table tbody tr td:not(:nth-child(3)),
.upcoming-listing-table thead tr th:not(:nth-child(3)),
.user-listing-table tr td:not(:nth-child(2)),
.user-listing-table tr th:not(:nth-child(2)) {
    text-align: center
}

.wizard .nav-link.active i {
    background-color: var(--mainbackground);
    border-color: var(--primarycolor);
    color: var(--primarycolor) !important
}

.wizard .connecting-line {
    height: 2px;
    background: var(--primarycolor);
    position: absolute;
    width: 99%;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 40px;
    z-index: 1
}

.wizard.dark .round-tab i {
    color: var(--primarycolor);
    background-color: #fff;
    border: 2px solid var(--bordercolor)
}

.wizard.dark .connecting-line {
    background-color: #fff
}

.wizard.dark .nav-link:hover {
    color: #fff !important
}

.wizard.dark .nav-link.active i {
    background-color: var(--primarycolor)
}

.wizard-dark .nav-tabs .nav-link.active {
    border-bottom: 1px solid #fff
}

.custom-file-label,
.pagination .page-item.disabled .page-link {
    background-color: transparent;
    border-color: var(--bordercolor);
    color: var(--bodycolor)
}

.custom-file-label:after {
    background-color: var(--bodybackground);
    color: var(--bodycolor)
}

#dropzone [type=file],
.dropzone [type=file] {
    cursor: pointer;
    position: absolute;
    opacity: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 80px
}

.dropzone [type=file] {
    width: 20px !important
}

.redial-process {
    width: 271px;
    height: 271px;
    background: -webkit-gradient(linear, left bottom, right top, color-stop(15%, #3a5fd8), color-stop(100%, #fff))
}

.redial-process .redial-middle-bar {
    width: 195px;
    height: 195px;
    background-color: #fff;
    position: absolute;
    left: 0;
    right: 0;
    top: 40px
}

.dropzone {
    min-height: 150px;
    border: 2px dashed;
    padding: 20px;
    font-size: 20px;
    cursor: pointer
}

.carbonads,
.footer {
    font-size: .875rem
}

.dropzone.h-auto {
    min-height: auto
}

.dropzone .dz-message {
    margin: 2em 0
}

.dropzone-primary {
    color: var(--primarycolor);
    border-color: var(--primarycolor)
}

.dropzone-danger {
    color: var(--danger);
    border-color: var(--danger)
}

.dropzone-secondary {
    color: var(--secondary);
    border-color: var(--secondary)
}

.dropzone-dark {
    color: var(--dark);
    border-color: var(--dark)
}

.dropzone-warning {
    color: var(--warning);
    border-color: var(--warning)
}

.dropzone-success {
    color: var(--success);
    border-color: var(--success)
}

.dropzone-info {
    color: var(--info);
    border-color: var(--info)
}

.check-listing li:not(:last-child),
.contacts.grid .contact div,
.documents.grid .document div,
.skin .list li,
.summery-colored-list li:not(:last-child) {
    margin-bottom: 15px
}

.carbonads {
    border: 1px solid #ccc;
    border-radius: .25rem;
    overflow: hidden;
    padding: 1rem
}

.carbon-img {
    clear: left;
    display: block;
    float: left
}

.carbon-poweredby,
.carbon-text {
    display: block;
    margin-left: 140px
}

.carbon-text,
.carbon-text:focus,
.carbon-text:hover {
    color: #fff;
    text-decoration: none
}

.carbon-poweredby,
.carbon-poweredby:focus,
.carbon-poweredby:hover {
    color: #ddd;
    text-decoration: none
}

.heart {
    color: #ddd;
    display: block;
    height: 2rem;
    line-height: 2rem;
    margin-bottom: 0;
    margin-top: 1rem;
    width: 100%
}

.heart:hover {
    color: #ff4136
}

.heart::before {
    border-top: 1px solid #eee;
    content: " ";
    display: block;
    height: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 50%
}

.heart::after {
    background-color: #fff;
    content: "?";
    padding-left: .5rem;
    padding-right: .5rem;
    position: relative;
    z-index: 1
}

.tt-suggestion.tt-cursor,
.tt-suggestion:hover {
    background-color: var(--primarycolor);
    color: #fff
}

.img-container,
.img-preview {
    background-color: #f7f7f7;
    width: 100%
}

.img-container {
    margin-bottom: 1rem;
    max-height: 497px;
    min-height: 200px
}

.docs-data>.input-group,
.docs-toggles>.btn,
.docs-toggles>.btn-group,
.docs-toggles>.dropdown,
.img-preview {
    margin-bottom: .5rem
}

.docs-preview {
    margin-right: -1rem
}

.img-preview {
    float: left;
    margin-right: .5rem;
    overflow: hidden
}

.preview-lg {
    height: 9rem;
    width: 16rem
}

.preview-md {
    height: 4.5rem;
    width: 8rem
}

.preview-sm {
    height: 2.25rem;
    width: 4rem
}

.preview-xs {
    height: 1.125rem;
    margin-right: 0;
    width: 2rem
}

.docs-data .input-group-prepend .input-group-text {
    min-width: 4rem;
    color: var(--bodycolor)
}

.docs-data .input-group-append .input-group-text {
    min-width: 3rem;
    color: var(--bodycolor)
}

.docs-buttons>.btn,
.docs-buttons>.btn-group,
.docs-buttons>.form-control {
    margin-bottom: .5rem;
    margin-right: .25rem
}

.docs-tooltip {
    display: block;
    margin: -.5rem -.75rem;
    padding: .5rem .75rem
}

.docs-tooltip>.icon {
    margin: 0 -.25rem;
    vertical-align: top
}

.tooltip-inner {
    white-space: normal
}

.btn-toggle {
    padding: .5rem
}

.btn-toggle>.docs-tooltip {
    margin: -.5rem;
    padding: .5rem
}

@media (max-width:400px) {

    .btn-group-crop .docs-tooltip,
    .btn-group-crop>.btn {
        padding-left: .5rem;
        padding-right: .5rem
    }

    .btn-group-crop {
        margin-right: -1rem !important
    }

    .btn-group-crop .docs-tooltip {
        margin-left: -.5rem;
        margin-right: -.5rem
    }
}

.docs-options .dropdown-menu,
.label-listing,
.twitter-typeahead {
    width: 100%
}

.docs-options .dropdown-menu>li {
    font-size: .875rem;
    padding: .125rem 1rem
}

.tt-query {
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075)
}

.tt-hint {
    color: #999
}

.tt-menu {
    width: 422px;
    margin: 12px 0;
    padding: 8px 0;
    background-color: var(--mainbackground);
    border: 1px solid var(--bordercolor);
    border: 1px solid rgba(0, 0, 0, .2);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, .2)
}

.tt-suggestion {
    padding: 3px 20px;
    font-size: 18px;
    line-height: 24px
}

.tt-suggestion:hover {
    cursor: pointer
}

.tt-suggestion p {
    margin: 0
}

.note-editor .note-editable {
    border: 1px solid var(--bordercolor);
    padding: 15px
}

.note-editor.note-frame {
    z-index: 0;
    border-color: var(--bordercolor)
}

.tablesaw-btn,
.tablesaw-columntoggle-btnwrap.visible .tablesaw-columntoggle-popup {
    background-color: var(--mainbackground);
    border-color: var(--bordercolor);
    box-shadow: none
}

.tablesaw-bar .tablesaw-bar-section .tablesaw-btn:after {
    padding-top: 1.5em
}

.table:not(.table-dark) td,
.table:not(.table-dark) tfoot th,
.table:not(.table-dark) th,
.table:not(.table-dark) thead th {
    padding: 1em;
    border-color: var(--bordercolor)
}

.table.pick-table td,
.table.pick-table tfoot th,
.table.pick-table th,
.table.pick-table thead th {
    padding: 8px 10px
}

.layout-primary.bordered {
    border: 2px solid var(--primarycolor)
}

.layout-secondary thead {
    background-color: var(--secondary);
    color: #fff
}

.layout-secondary.bordered {
    border: 2px solid var(--secondary)
}

.layout-danger thead {
    background-color: var(--danger);
    color: #fff
}

.layout-danger.bordered {
    border: 2px solid var(--danger)
}

.layout-warning thead {
    background-color: var(--warning);
    color: #fff
}

.layout-warning.bordered {
    border: 2px solid var(--warning)
}

.layout-info thead {
    background-color: var(--info);
    color: #fff
}

.layout-info.bordered {
    border: 2px solid var(--info)
}

.layout-success thead {
    background-color: var(--success);
    color: #fff
}

.layout-success.bordered {
    border: 2px solid var(--success)
}

.layout-dark thead {
    background-color: var(--dark);
    color: #fff
}

.layout-dark.bordered {
    border: 2px solid var(--dark)
}

.pagination .page-link {
    background-color: transparent;
    border-color: var(--bordercolor);
    color: var(--primarycolor)
}

.pagination .page-item.active .page-link {
    background-color: var(--primarycolor);
    border-color: var(--primarycolor);
    color: #fff;
    z-index: 1
}

.footable-sortable span,
.pagination .page-item,
.withfile-input .input-wrapper .icon-btn {
    margin-left: 10px
}

#header-fix .language-dropdown .dropdown-menu .dropdown-item,
.footable-pagination-wrapper .pagination {
    justify-content: center
}

.footable-pagination-wrapper .pagination li:first-child .page-link,
.jsgrid-pager span:first-child a {
    margin-left: 0;
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem
}

.footable-pagination-wrapper .pagination li:last-child .page-link,
.jsgrid-pager span:last-child a {
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem
}

.footable-pagination-wrapper .pagination .footable-page-link,
.jsgrid-pager .jsgrid-pager-nav-button,
.jsgrid-pager .jsgrid-pager-page a {
    padding: .5rem .75rem;
    border: 1px solid var(--bordercolor)
}

.footable-pagination-wrapper .pagination .active .footable-page-link {
    border: 1px solid var(--primarycolor);
    background-color: var(--primarycolor);
    color: #fff
}

.jsgrid {
    height: auto !important;
    min-height: 400px
}

.jsgrid-pager {
    margin-top: 20px
}

.jsgrid-pager .jsgrid-pager-current-page {
    padding: .5rem .75rem;
    border: 1px solid var(--primarycolor);
    background-color: var(--primarycolor);
    color: #fff
}

.tablesaw-columntoggle td.title a,
.tablesaw-swipe td.title a {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 40vw
}

@media (min-width:40em) {
    td.title {
        max-width: 12em
    }
}

.btn-secondary {
    background-color: var(--secondary);
    border-color: var(--secondary)
}

.btn-success {
    background-color: var(--success);
    border-color: var(--success)
}

.btn-info,
.swal2-confirm.btn.btn-info {
    background-color: var(--info);
    border-color: var(--info)
}

.btn-warning {
    background-color: var(--warning);
    border-color: var(--warning)
}

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

.btn-danger,
.swal2-confirm.btn.btn-danger {
    background-color: var(--danger);
    border-color: var(--danger)
}

.btn.rounded-btn {
    border-radius: 60px;
    padding: 7px 18px
}

.accordion-alt a {
    line-height: 50px
}

.accordion-alt a:after {
    font-family: FontAwesome;
    content: "\f068";
    float: left;
    width: 50px;
    margin-right: 15px;
    background-color: var(--primarycolor);
    color: #fff
}

.accordion-alt a.collapsed:after {
    content: "\f067"
}

.lockscreen {
    max-width: 600px;
    float: none;
    margin: 0 auto;
    background: var(--mainbackground);
    border-radius: 20px;
    overflow: hidden;
    -webkit-box-shadow: -2px 7px 23px -5px rgba(0, 0, 0, .75);
    -moz-box-shadow: -2px 7px 23px -5px rgba(0, 0, 0, .75);
    box-shadow: -2px 7px 23px -5px rgba(0, 0, 0, .75)
}

.lockscreen .lock-image {
    background-image: url(../images/cap3.jpg);
    width: 250px;
    float: left;
    background-size: cover
}

.lockscreen .login-form {
    padding: 20px;
    width: 350px;
    float: left
}

.timeline-app,
.timeline-app-alt {
    padding: 0;
    margin-bottom: 22px;
    list-style: none;
    background: 0 0;
    overflow: hidden;
    position: relative
}

.timeline-app .timeline-header {
    position: relative;
    z-index: 6;
    display: block;
    clear: both;
    text-align: center;
    text-transform: uppercase
}

.timeline-app:before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    content: "";
    background-color: var(--primarycolor)
}

.timeline-app .timeline-item {
    position: relative;
    display: block;
    float: left;
    width: 50%;
    padding-right: 40px;
    margin-bottom: 60px;
    padding-top: 0;
    margin-right: 50%
}

.timeline-app .timeline-item .time-strip {
    position: absolute;
    left: calc(100% + 30px);
    font-weight: 700;
    color: var(--primarycolor);
    line-height: 40px
}

.timeline-app .timeline-item.reverse {
    margin-right: 0;
    float: right;
    padding-right: 0;
    padding-left: 40px;
    margin-top: 0;
    clear: right
}

.timeline-app .timeline-item .timeline-dot,
.timeline-app-alt .timeline-item .timeline-dot {
    z-index: 11;
    margin-right: -20px;
    line-height: 45px;
    background-color: var(--primarycolor);
    font-size: 20px;
    color: #fff;
    text-align: center;
    cursor: pointer
}

.timeline-app .timeline-item .timeline-dot {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    border-radius: 40px
}

.timeline-app .timeline-item.reverse .time-strip {
    left: -60px
}

.timeline-app .timeline-item.reverse .timeline-dot {
    margin-left: -20px;
    right: auto;
    left: 0
}

.timeline-app-alt:before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 20px;
    width: 2px;
    margin-left: -1px;
    content: "";
    background-color: var(--primarycolor)
}

.timeline-app-alt .timeline-item {
    position: relative;
    display: block;
    float: left;
    margin-left: 60px;
    margin-bottom: 60px;
    padding-top: 0
}

.timeline-app-alt .timeline-item:after {
    content: "";
    position: absolute;
    left: 0;
    top: 16px;
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-right-color: #fff;
    border-left: 0;
    border-bottom: 0;
    margin-top: -10px;
    margin-left: -18px
}

.timeline-point:after,
.timeline-point:before {
    border-radius: 50px;
    position: absolute;
    content: ""
}

.timeline-app-alt .timeline-item .timeline-dot {
    position: absolute;
    top: 0;
    left: -60px;
    width: 40px;
    height: 40px;
    border-radius: 40px
}

.timeline:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 2px;
    width: 3px;
    height: 100%;
    border-right: 3px solid var(--bordercolor)
}

.timeline-point:after {
    left: 104%;
    width: 11px;
    height: 11px;
    top: 38px;
    background: var(--primarycolor);
    z-index: 1
}

.timeline-point:before {
    width: 5px;
    height: 5px;
    left: 105%;
    background: #e6e6e6;
    top: 41px;
    z-index: 9
}

.timeline-point2:after {
    left: -18px
}

.timeline-point2:before {
    left: -15px
}

.list-inline .list-inline-item .counter-box:after {
    content: "";
    position: absolute;
    right: -29px;
    top: 0;
    width: 3px;
    height: 60px
}

.filter a {
    border: 1px solid var(--bordercolor);
    border-radius: 0;
    padding: 7px 15px;
    margin-right: 5px;
    text-transform: none;
    color: var(--bodycolor);
    font-size: 12px;
    display: block;
    margin-bottom: 10px
}

.filter a.active,
.filter a:hover {
    background: var(--primarycolor);
    color: #fff;
    border-color: var(--primarycolor)
}

.price-table .price-block {
    background: var(--primarycolor);
    color: #fff;
    width: 100px;
    height: 100px;
    margin: 0 auto 10px;
    line-height: 100px;
    border-radius: 100px;
    font-size: 30px
}

.price-table .price-block.active,
.white-circle:hover {
    background: #fff;
    color: var(--primarycolor)
}

.font-icon-list {
    text-align: center;
    width: 19%;
    display: inline-block
}

@media (max-width:991px) {
    #header-fix {
        left: 0
    }

    #header-fix .search-form {
        transition: .5s;
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 100;
        background-color: var(--headerbackground)
    }

    #header-fix .search-form .form-group {
        height: 100%
    }

    #header-fix .search-form .form-group .form-control {
        border-radius: 0 !important;
        height: 100%
    }

    #header-fix .search-form .form-group .btn-search {
        top: 24px
    }

    #header-fix .search-form .form-group .close-button {
        right: 10px;
        top: 24px
    }

    .sidebar {
        -webkit-transform: translateX(-250px);
        transform: translateX(-250px)
    }

    .sidebar.active {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        margin-left: 0;
        z-index: 5
    }

    main {
        margin-left: 0;
        width: 100%
    }

    footer.site-footer {
        margin-left: 0
    }

    .chat-contact-list,
    .chat-user-profile {
        -webkit-border-radius: 5px;
        -webkit-border-top-right-radius: 5px;
        -webkit-border-bottom-right-radius: 5px;
        -moz-border-radius: 5px;
        -moz-border-radius-topright: 5px;
        -moz-border-radius-bottomright: 5px;
        border-radius: 5px;
        position: fixed;
        top: 65px;
        bottom: 0;
        -webkit-transform: translateX(-767px);
        transform: translateX(-767px)
    }

    .chat-contact-list.active,
    .chat-user-profile.active,
    .flip-menu.active {
        -webkit-transform: translateX(-15px);
        transform: translateX(-15px);
        margin-left: 0;
        z-index: 5
    }

    .flip-menu {
        -webkit-border-radius: 5px;
        -webkit-border-top-right-radius: 5px;
        -webkit-border-bottom-right-radius: 5px;
        -moz-border-radius: 5px;
        -moz-border-radius-topright: 5px;
        -moz-border-radius-bottomright: 5px;
        border-radius: 5px;
        position: fixed;
        top: 49px;
        bottom: 0;
        -webkit-transform: translateX(-780px);
        transform: translateX(-780px);
        transition: .5s
    }

    .flip-menu .mail-menu-section {
        z-index: 100
    }

    .flip-menu.active:before {
        position: fixed;
        background: rgba(0, 0, 0, .6);
        width: 100%;
        height: 100vh
    }

    .flip-menu.active .mail-menu-section {
        border-radius: 0
    }

    .flip-menu .flip-menu-close {
        position: absolute;
        right: -7px;
        left: auto;
        top: 0;
        font-size: 20px;
        z-index: 100000
    }

    .font-icon-list {
        width: 30%
    }
}

@media (max-width:767px) {
    .todo-list li.todo-item p {
        max-width: calc(100vw - 200px)
    }

    .header-date-preview {
        display: none
    }

    .mail-app li .mail-subject {
        margin-left: 0;
        margin-top: 10px
    }

    .font-icon-list {
        width: 40%
    }
}

.font-icon-list i,
.font-icon-list span,
.iconlist li i,
.iconlist li:before {
    font-size: 30px;
    display: block
}

.pf-title-area h3,
.tab-title-area h2 {
    font-size: 34px;
    font-style: normal;
    color: var(--title-color)
}

.font-icon-list .font-icon-name {
    border: none;
    text-align: center
}

.iconlist li {
    padding: .5rem;
    margin-bottom: .5rem;
    border: 1px solid var(--bordercolor);
    margin-left: .25rem;
    margin-right: .25rem;
    text-align: center;
    width: 19%;
    display: inline-block;
    list-style: none
}

@media (max-width:991px) {
    .iconlist li {
        width: 30%
    }
}

@media (max-width:767px) {
    .iconlist li {
        width: 40%
    }

    .contacts.list {
        overflow-x: scroll
    }
}

@media (max-width:500px) {

    .font-icon-list,
    .iconlist li {
        width: 80%
    }
}

.flag-wrapper {
    width: 100%;
    display: inline-block;
    position: relative;
    overflow: hidden;
    margin-bottom: 20px
}

.flag-wrapper .flag {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover
}

.flag-wrapper:after {
    padding-top: 75%;
    display: block;
    content: ""
}

.contacts.list .contact,
.documents.list .document,
.invoices .invoice {
    padding: 10px 15px;
    display: inline-flex;
    width: 100%;
    font-size: 15px
}

.contacts.list .contact .contact-content,
.documents.list .document .document-content,
.invoices .invoice .invoice-content {
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-align: center;
    align-items: center;
    padding: 13px 18px;
    position: relative;
    display: inline-flex;
    word-wrap: break-word;
    justify-content: space-between;
    border-radius: 6px;
    width: 100%;
    min-width: 767px;
    transition: .35s;
    box-shadow: 0 0 0 1px rgba(126, 142, 177, .12)
}

.contacts.list .contact .contact-content>div:last-child,
.documents.list .document .document-content>div:last-child {
    margin-left: 10px;
    display: flex
}

.contacts.list .contact .contact-content>div:last-child a,
.documents.list .document .document-content>div:last-child a,
.invoices .invoice .invoice-content>div:last-child a {
    margin: 0 10px
}

.contacts.list .contact .user-image,
.documents.list .document .user-image {
    width: 50px;
    border-radius: 5px;
    align-self: center
}

.contacts.list .contact .contact-profile,
.documents.list .document .document-profile {
    display: inline-flex;
    align-self: center;
    min-width: 250px
}

.contacts.list .contact .contact-info,
.documents.list .document .document-info {
    padding: 0 15px
}

.contacts.list .contact .contact-email,
.contacts.list .contact .contact-location,
.documents.list .document .document-email,
.documents.list .document .document-location,
.min-width-dropdown {
    min-width: 130px
}

.contacts.grid,
.documents.grid {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 15px 0
}

.contacts.grid .contact,
.documents.grid .document {
    margin-bottom: 30px;
    border-radius: 6px;
    transition: .35s;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px
}

@media (max-width:1199px) {

    .contacts.grid .contact,
    .documents.grid .document {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%
    }
}

@media (max-width:767px) {
    .contacts.list .contact {
        width: auto
    }

    .contacts.grid .contact {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%
    }

    .documents.list {
        overflow-x: scroll
    }
}

.contacts.grid .contact .contact-content,
.documents.grid .document .document-content {
    padding: 13px 18px;
    -webkit-box-shadow: 0 2px 4px rgba(126, 142, 177, .12);
    box-shadow: 0 0 0 1px rgba(126, 142, 177, .12);
    border-radius: 6px;
    font-size: 14px
}

.contacts.grid .contact .user-image {
    border-radius: 10px;
    margin-bottom: 15px
}

.documents.list .document .document-profile i {
    font-size: 50px
}

@media (max-width:767px) {
    .documents.list .document {
        width: auto
    }

    .documents.grid .document {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%
    }

    .invoices {
        overflow-x: scroll
    }
}

@media (max-width:575px) {
    .lockscreen .lock-image {
        height: 300px
    }

    .contacts.grid .contact,
    .documents.grid .document {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%
    }
}

.documents.grid .document .document-profile i {
    margin: 0 auto;
    float: none;
    display: table;
    font-size: 120px
}

.view-invoice {
    position: absolute;
    z-index: 100000000;
    background: var(--mainbackground);
    width: 100%;
    height: 100%;
    display: none;
    overflow-y: scroll;
    overflow-x: hidden
}

.invoices .invoice .invoice-content .invoice-info {
    width: 20%;
    cursor: pointer
}

.invoices .invoice .invoice-content .invoice-status-info {
    width: 10%
}

.invoices .invoice .invoice-content>div:last-child {
    margin-left: 10px;
    display: flex;
    width: 10%
}

.invoices .invoice .invoice-status {
    line-height: 1.4;
    padding: 3px 6px;
    font-size: 11px;
    font-weight: 600;
    transition: .3s ease-out;
    -webkit-transition: .3s ease-out;
    position: relative;
    overflow: hidden;
    border-radius: 5px;
    display: inline-block;
    border: 1px solid var(--primarycolor);
    width: 80px;
    height: 25px;
    margin-top: 5px
}

.invoices .invoice .invoice-status:before {
    content: "Generated";
    position: absolute;
    width: 100%;
    height: 100%;
    color: var(--primarycolor);
    text-align: center;
    left: 0;
    top: 0;
    line-height: 22px
}

.invoices .invoice.paid-invoice .invoice-status {
    border: 1px solid var(--success);
    color: var(--primarycolor)
}

.invoices .invoice.paid-invoice .invoice-status:before {
    content: "Paid";
    color: var(--success)
}

.invoices .invoice.pending-invoice .invoice-status {
    border: 1px solid var(--info);
    color: var(--info)
}

.invoices .invoice.pending-invoice .invoice-status:before {
    content: "Pending";
    color: var(--info)
}

.invoices .invoice.canceled-invoice .invoice-status {
    border: 1px solid var(--danger);
    color: var(--danger)
}

.invoices .invoice.canceled-invoice .invoice-status:before {
    content: "Canceled";
    color: var(--danger)
}

.blockquote:before {
    content: open-quote;
    position: absolute;
    left: 8px;
    font-size: 80px;
    color: #fff;
    top: 27px
}

.caption-bg {
    background-color: rgba(0, 0, 0, .7);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    transition: .85s
}

.line-height-21 {
    line-height: 21px
}

.min-height-auto {
    min-height: inherit !important
}

.font-size-60 {
    font-size: 60px
}

.shadow-circle {
    box-shadow: 0 1px 20px 1px var(--primarycolor);
    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08) !important
}

.card,
.table-shadow {
    box-shadow: 0 4px 30px rgba(0, 0, 0, .05)
}

.white-circle {
    width: 25px;
    height: 25px;
    background: rgba(255, 255, 255, .3);
    color: #fff;
    line-height: 29px;
    font-size: 12px;
    border-radius: 25px;
    display: block;
    text-align: center
}

.site-footer {
    text-align: center;
    margin-top: 20px;
    padding: 15px 25px;
    background-color: var(--mainbackground);
    border-top: 1px solid var(--bordercolor);
    text-transform: uppercase
}

.covid {
    background: url(../images/covid.jpg) center/cover;
    margin-top: 20px;
    border-radius: 15px
}

.compact-menu:not(.horizontal-menu) #header-fix .logo-bar {
    width: 168px
}

@media (min-width:992px) {

    .contact-list-section,
    .document-list-section,
    .invoice-list-section,
    .mail-list-section,
    .notes-list-section,
    .todo-list-section {
        -webkit-border-radius: 0px;
        -webkit-border-top-right-radius: 5px;
        -webkit-border-bottom-right-radius: 5px;
        -moz-border-radius: 0;
        -moz-border-radius-topright: 5px;
        -moz-border-radius-bottomright: 5px;
        border-radius: 0 5px 5px 0;
        transition: .5s;
        border-left: none !important
    }

    .compact-menu:not(.horizontal-menu) {
        position: relative
    }

    .compact-menu:not(.horizontal-menu) .sidebar:not(:hover) {
        position: absolute;
        width: 80px;
        height: 100%;
        z-index: 2;
        overflow: scroll;
        top: 0;
        padding-top: 0
    }

    .compact-menu:not(.horizontal-menu) .sidebar:not(:hover) .sidebar-menu {
        padding-top: 0
    }

    .compact-menu:not(.horizontal-menu) .sidebar:not(:hover) .sidebar-menu>li {
        padding: 0
    }

    .compact-menu:not(.horizontal-menu) .sidebar:not(:hover) .sidebar-menu>li>ul {
        margin: 0
    }

    .compact-menu:not(.horizontal-menu) .sidebar:not(:hover) .sidebar-menu>li>ul>li {
        padding: 20px 0;
        text-align: center
    }

    .compact-menu:not(.horizontal-menu) .sidebar:not(:hover) .sidebar-menu>li>ul>li>a {
        line-height: 0;
        font-size: 0px;
        display: block
    }

    .compact-menu:not(.horizontal-menu) .sidebar:not(:hover) .sidebar-menu>li>ul>li>a:after,
    .horizontal-menu #header-fix .collapse-menu-bar {
        display: none
    }

    .compact-menu:not(.horizontal-menu) .sidebar:not(:hover) .sidebar-menu>li>ul>li>a i {
        font-size: 20px;
        margin-right: 0
    }

    .compact-menu:not(.horizontal-menu) .sidebar:not(:hover) .sidebar-menu>li>a {
        line-height: 0;
        font-size: 0px;
        display: block;
        background: 0 0;
        padding: 0;
        box-shadow: none;
        margin: 0
    }

    .compact-menu:not(.horizontal-menu) .sidebar:not(:hover) .sidebar-menu>li>a i {
        font-size: 0px
    }

    .compact-menu:not(.horizontal-menu) .sidebar:not(:hover) .sidebar-menu li:hover>.sub-menu {
        display: block !important;
        position: absolute;
        left: 100%;
        top: 0;
        min-width: 190px
    }

    .compact-menu:not(.horizontal-menu) .sidebar:not(:hover) .sidebar-menu li:hover>.sub-menu li a {
        line-height: 13px;
        display: flex;
        white-space: nowrap
    }

    .compact-menu:not(.horizontal-menu) .sidebar:not(:hover) .sidebar-menu li:hover>.sub-menu li a i {
        display: block;
        float: left
    }

    .compact-menu:not(.horizontal-menu) .sidebar:not(:hover) .sidebar-menu li .sub-menu {
        background: var(--sidebarbg);
        margin: 0;
        text-align: left;
        border: 1px solid var(--bordercolor);
        padding-left: 0 !important;
        border-bottom: none
    }

    .compact-menu:not(.horizontal-menu) .sidebar:not(:hover) .sidebar-menu li .sub-menu li {
        padding: 15px;
        border-bottom: 1px solid var(--bordercolor)
    }

    .compact-menu:not(.horizontal-menu) .sidebar:not(:hover) .sidebar-menu li .sub-menu li.dropdown>a:after {
        top: 3px
    }

    .compact-menu:not(.horizontal-menu) .site-footer,
    .compact-menu:not(.horizontal-menu) main {
        margin-left: 80px;
        width: calc(100% - 80px)
    }
}

@media (min-width:992px) and (max-width:991px) {
    .compact-menu:not(.horizontal-menu) .sidebar:not(:hover) {
        -webkit-transform: translateX(-80);
        transform: translateX(-80)
    }

    .compact-menu:not(.horizontal-menu) .sidebar:not(:hover).active {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        margin-left: 0
    }

    .compact-menu:not(.horizontal-menu) .site-footer,
    .compact-menu:not(.horizontal-menu) main {
        margin-left: 0
    }
}

.horizontal-menu .site-footer,
.horizontal-menu main {
    margin-left: 0;
    width: 100%
}

.horizontal-menu .site-width {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    display: inherit
}

.horizontal-menu #header-fix {
    z-index: 10;
    box-shadow: none;
    border-bottom: 1px solid var(--headerbordercolor)
}

.horizontal-menu #header-fix .logo-bar {
    background: 0 0;
    border-right: 1px solid var(--headerbordercolor);
    width: 182px
}

.dark #header-fix,
.gradient #header-fix,
.gradient #settings .sidbarchat,
.gradient .dropdown-menu,
.gradient .sidebar .dropdown-menu,
.gradient.compact-menu .sidebar,
.gradient.horizontal-menu #header-fix {
    border-bottom: 1px solid var(--bordercolor)
}

@media (min-width:992px) and (min-width:992px) {
    .compact-menu:not(.horizontal-menu) .sidebar:not(:hover) .sidebar-menu>li ul li.active>.sub-menu {
        display: none !important
    }

    .horizontal-menu .sidebar .breadcrumb {
        display: flex;
        margin-right: 15px !important
    }
}

@media (min-width:992px) {
    .horizontal-menu .sidebar {
        background: var(--sidebarbg);
        position: relative;
        width: 100%;
        padding: 25px 20px 0;
        display: flex;
        overflow: inherit;
        z-index: 2;
        top: 65px;
        border-bottom: 1px solid var(--sidebarbordercolor);
        border-right: none
    }

    .horizontal-menu .sidebar .sidebar-menu {
        margin-bottom: -1px;
        padding: 0
    }

    .horizontal-menu .sidebar .sidebar-menu>li {
        display: inline-block;
        padding: 10px 15px;
        position: relative;
        -webkit-border-top-left-radius: 5px;
        -webkit-border-top-right-radius: 5px;
        -moz-border-radius-topleft: 5px;
        -moz-border-radius-topright: 5px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        border: 1px solid var(--sidebarbg);
        border-bottom: none
    }

    .horizontal-menu .sidebar .sidebar-menu>li.active,
    .horizontal-menu .sidebar .sidebar-menu>li:hover {
        border: 1px solid var(--sidebarbordercolor);
        border-bottom: none;
        background: var(--sidebarheadingbackground)
    }

    .horizontal-menu .sidebar .sidebar-menu>li ul li a:hover,
    .horizontal-menu .sidebar .sidebar-menu>li ul li.active>a,
    .horizontal-menu .sidebar .sidebar-menu>li.active>a,
    .horizontal-menu .sidebar .sidebar-menu>li:hover>a {
        color: var(--sidebaractivecolor)
    }

    .horizontal-menu .sidebar .sidebar-menu>li>a {
        font-weight: 600;
        pointer-events: inherit;
        font-size: 12px;
        text-transform: initial;
        color: var(--sidebarcolor);
        box-shadow: none;
        background: 0 0;
        padding: 0;
        margin: 0;
        line-height: 20px
    }

    .horizontal-menu .sidebar .sidebar-menu>li ul {
        visibility: hidden;
        opacity: 0;
        position: absolute;
        background: var(--sidebarheadingbackground);
        border: 1px solid var(--sidebarbordercolor);
        left: -1px;
        min-width: 200px;
        transition: .5s;
        top: 120%;
        margin-top: 0
    }

    .horizontal-menu .sidebar .sidebar-menu>li ul li a {
        font-weight: 500;
        color: var(--dropdowncolor)
    }

    .horizontal-menu .sidebar .sidebar-menu>li ul li.active>a:after {
        transform: rotate(0)
    }

    .horizontal-menu .sidebar .sidebar-menu>li li:hover>ul,
    .horizontal-menu .sidebar .sidebar-menu>li li:hover>ul li:hover>ul,
    .horizontal-menu .sidebar .sidebar-menu>li:hover>ul,
    .horizontal-menu .sidebar .sidebar-menu>li:hover>ul li:hover>ul {
        visibility: visible;
        opacity: 1;
        top: 100%
    }

    .horizontal-menu .sidebar .sidebar-menu>li li:hover>ul li,
    .horizontal-menu .sidebar .sidebar-menu>li:hover>ul li {
        padding: 10px
    }

    .horizontal-menu .sidebar .sidebar-menu>li li:hover>ul li ul,
    .horizontal-menu .sidebar .sidebar-menu>li:hover>ul li ul {
        left: 100%
    }

    .horizontal-menu .sidebar .sidebar-menu>li li:hover>ul li:hover>ul.sub-menu,
    .horizontal-menu .sidebar .sidebar-menu>li:hover>ul li:hover>ul.sub-menu {
        top: -1px;
        left: 100%
    }

    .horizontal-menu .sidebar .sidebar-menu>li li:hover>ul li+li,
    .horizontal-menu .sidebar .sidebar-menu>li:hover>ul li+li {
        border-top: 1px solid var(--sidebarbordercolor)
    }

    .horizontal-menu .sidebar .sidebar-menu>li li:hover>ul li .sub-menu,
    .horizontal-menu .sidebar .sidebar-menu>li:hover>ul li .sub-menu {
        display: block;
        padding-left: 0
    }

    .horizontal-menu .sidebar .sidebar-menu>li li:hover>ul li .sub-menu i,
    .horizontal-menu .sidebar .sidebar-menu>li:hover>ul li .sub-menu i {
        display: initial
    }

    .horizontal-menu .sidebar .breadcrumb .breadcrumb-item,
    .horizontal-menu .sidebar .breadcrumb a {
        color: var(--sidebarcolor)
    }

    .horizontal-menu .sidebar .breadcrumb .breadcrumb-item+.breadcrumb-item::before,
    .horizontal-menu .sidebar .breadcrumb .breadcrumb-item.active {
        color: var(--sidebarcolor);
        content: "\e606"
    }

    .horizontal-menu .sidebar .breadcrumb .breadcrumb-item+.breadcrumb-item::before {
        font-size: 10px;
        font-family: simple-line-icons;
        font-style: normal;
        font-weight: 400;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale
    }
}

.btn.buttons-excel:hover,
.btn.buttons-pdf:hover {
    color: #fff
}

.dark #header-fix {
    box-shadow: none
}

.gbackground,
.gradient,
.gradient #header-fix,
.gradient #header-fix .logo-bar,
.gradient #settings .sidbarchat,
.gradient .dropdown-menu,
.gradient .sidebar,
.gradient .sidebar .dropdown-menu,
.gradient.compact-menu .sidebar,
.gradient.horizontal-menu #header-fix {
    background: url("../images/gradient-bg.jpg");
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important
}

.capl-dttile,
.dropdown-item.active,
.dropdown-item:active {
    background: #0f5a46
}

.gradient #header-fix .logo-bar .horizontal-logo svg g {
    fill: #fff
}

.gradient.horizontal-menu .sidebar .sidebar-menu {
    margin-bottom: -2px
}

.gradient.horizontal-menu .sidebar .sidebar-menu>li {
    border: 1px solid transparent
}

.gradient.horizontal-menu .sidebar .sidebar-menu>li>a,
a.btn.btn-primary.outline:active,
a.btn.btn-primary.outline:focus,
button.btn.btn-primary.outline:active,
button.btn.btn-primary.outline:focus {
    background: 0 0
}

.gradient.horizontal-menu .sidebar .sidebar-menu>li.active,
.gradient.horizontal-menu .sidebar .sidebar-menu>li:hover {
    border: 1px solid var(--sidebarbordercolor);
    border-bottom: none;
    background: var(--primarycolor)
}

.gradient.horizontal-menu .sidebar .sidebar-menu>li ul {
    background: var(--primarycolor);
    border-bottom: 1px solid var(--bordercolor)
}

.gradient .theme-table thead td:after,
.gradient .theme-table thead th:after,
.gradient .theme-table tr td:after {
    background: #000
}

table.dataTable {
    background: var(--table-body-bg);
    border-radius: 10px;
    margin-top: 25px !important;
    margin-bottom: 20px !important
}

div.dataTables_wrapper div.dataTables_filter input {
    background: var(--table-search-bg);
    border-radius: 4px !important;
    min-height: calc(1.5em + .5rem + 14px);
    padding: 5px 14px;
    border: 0 !important;
    margin-left: 0
}

body.dark div.dataTables_wrapper div.dataTables_filter input,
body.gradient div.dataTables_wrapper div.dataTables_filter input {
    border: 1px solid var(--bordercolor) !important
}

.table td,
.table th {
    padding: .55rem
}

.sec-title-area h4,
.sec-title-area h6,
.tab-title-area h2 {
    font-weight: 700;
    padding-bottom: 10px
}

.table>thead {
    background: var(--table-header)
}

.dataTables_filter {
    float: left;
    margin: 0 0 18px
}

.html5buttons {
    float: right;
    margin: 0;
    line-height: 2.1
}

.html5buttons .btn {
    padding: 0;
    border: 0;
    margin-left: 8px !important;
    width: 40px;
    height: 40px;
    border-radius: 4px !important;
    font-size: 20px
}

.table,
table.dataTable {
    border: 0
}

.buttons-html5 {
    margin-left: 8px
}

.btn.buttons-colvis,
.btn.buttons-colvis:hover {
    background: #2395e7;
    border: 2px solid #2395e7;
    transition: .3s ease-in-out
}

.btn.buttons-pdf,
.btn.buttons-pdf:hover {
    background: #ff496e;
    border: 2px solid #ff496e
}

.btn.buttons-print,
.dt-buttons.btn-group .btn:first-child {
    background: var(--primarycolor);
    border: 2px solid var(--primarycolor)
}

.btn.buttons-print:hover,
.dt-buttons.btn-group .btn:first-child:hover {
    background: var(--primarycolor);
    border: 2px solid var(--primarycolor);
    color: #fff
}

.btn.buttons-excel,
.btn.buttons-excel:hover {
    border: 2px solid #52b141;
    background: #52b141
}

.buttons-colvis:hover,
.buttons-html5:hover {
    background: #fff;
    font-size: 20px
}

.dataTables_info {
    display: inline-block;
    position: absolute
}

.dataTables_length {
    display: inline-block;
    float: left;
    margin: 0 20px 8px 0
}

.dataTables_paginate {
    padding: 2px 0
}

.capl-dttile {
    color: #fff
}

.button-action,
.edit-btn,
.profile-card .image-label,
.profile-edit-btn {
    color: #fff;
    background: var(--primarycolor)
}

.authentication-area.style2 input,
.capl-tbody tr td {
    background: #fff
}

.table {
    width: 100%
}

.dropdown-menu {
    min-width: 14rem;
    padding: 0;
    margin: 0
}

.table:not(.simple-table)>tbody tr:last-child td,
.table:not(.simple-table)>tbody tr:last-child th {
    border: 0 !important
}

.table>:not(:first-child) {
    border-top: 0
}

.loan-table td,
.loan-table th,
.table>tbody tr td {
    vertical-align: middle
}

.button-action,
.edit-btn {
    border-radius: 4px;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 0
}

.badge {
    line-height: 2.2;
    padding: 3px 13px;
    font-size: 12px;
    border-radius: 4px
}

.pagination .page-item .page-link {
    border-radius: 4px !important;
    padding: .575rem .95rem
}

div.dataTables_wrapper div.dataTables_paginate {
    margin-top: 10px
}

@media (max-width:1440px) {
    .dataTables_filter input {
        width: 650px !important
    }
}

@media (max-width:1366px) {
    .dataTables_filter input {
        width: 600px !important
    }
}

@media (max-width:1280px) {
    .dataTables_filter input {
        width: 500px !important
    }
}

@media (max-width:1024px) {
    .dataTables_filter input {
        width: 450px !important;
        margin: 10px 0 0
    }
}

@media (max-width:767px) {

    .invoices .invoice,
    .invoices .invoice .invoice-content .invoice-info,
    .invoices .invoice .invoice-content .invoice-status-info {
        width: auto
    }

    .card .card-header h4 {
        font-size: 1rem;
        font-weight: 700
    }

    .timeline-point:after,
    .timeline-point:before,
    .timeline:after,
    .timeline:before {
        display: none
    }

    .header-chart {
        float: left
    }

    .dataTables_filter,
    .dataTables_filter input,
    .dataTables_filter label {
        width: 100% !important
    }

    table.dataTable {
        margin-top: 0 !important
    }

    .dataTables_info {
        display: inline-block;
        position: static;
        margin-bottom: 20px
    }

    div.dataTables_wrapper div.dataTables_paginate ul.pagination {
        margin: 2px 0;
        white-space: nowrap;
        justify-content: start
    }

    .pagination .page-item:first-child {
        margin-left: 0 !important
    }

    div.dataTables_wrapper div.dataTables_paginate {
        margin-top: 0
    }
}

@media (max-width:375px) {
    div.dt-buttons {
        float: none;
        width: auto;
        text-align: center;
        margin-bottom: .5em
    }

    .html5buttons {
        display: flex;
        float: none;
        justify-content: center
    }

    .dataTables_length {
        display: flex;
        float: none;
        margin: 8px 0;
        justify-content: center
    }
}

a.btn.btn-primary.outline,
button.btn.btn-primary.outline {
    background: var(--outline-btn) !important;
    border-color: var(--primarycolor);
    color: var(--primarycolor)
}

.print-process {
    display: flex;
    align-items: center;
    column-gap: 20px;
    row-gap: 20px;
    flex-wrap: wrap
}

.gap-15,
.nav-pills {
    row-gap: 15px
}

.print-process .title {
    font-size: 16px;
    font-weight: 700
}

.card {
    border: 0;
    border-radius: 10px
}

.card .card-body {
    padding: 30px
}

.profile-card img {
    width: 100%;
    border-radius: 10px 10px 0 0
}

.profile-card .image-label {
    padding: 5px 0;
    line-height: 1;
    font-size: 14px;
    display: block;
    border-radius: 0 0 10px 10px;
    text-align: center
}

.profile-edit-btn {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    line-height: 1;
    cursor: pointer
}

.pf-title-area {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.pf-title-area h3 {
    font-weight: 700;
    line-height: 44px
}

.pf-main-info {
    display: flex;
    flex-direction: column
}

.pra {
    font-style: normal;
    font-size: 14px;
    line-height: 25px;
    color: var(--pra-color);
    margin-bottom: 5px
}

.action-drop .dropdown-menu {
    min-width: 7rem
}

button.btn.btn-drop {
    background: 0 0;
    border: none;
    border-radius: 0;
    color: var(--dropbtn-color)
}

button.btn.btn-drop:focus {
    box-shadow: none;
    outline: 0;
    border: 0
}

.dropdown-menu .dropdown-item:hover {
    background: #d9d9d9;
    color: #000
}

.nav-pills .nav-link {
    background: var(--tab-bg);
    color: var(--tab-color);
    border: 0;
    border-radius: 4px
}

.nav-pills .nav-item:not(:last-child) {
    margin-right: 20px
}

.tab-title-area h2 {
    position: relative;
    font-family: Poppins;
    line-height: 51px;
    display: inline-block
}

.tab-title-area h2:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 130px;
    height: 1px;
    background: var(--primarycolor)
}

.tab-title-area.centered h2:after {
    content: "";
    left: 0;
    transform: none
}

.mb-50 {
    margin-bottom: 50px
}

.sec-title-area h4 {
    font-style: normal;
    font-size: 20px;
    line-height: 30px;
    position: relative;
    color: var(--title-color)
}

.information-listing label,
.information-listing li {
    font-family: Poppins;
    font-style: normal;
    line-height: 25px;
    font-size: 14px
}

.sec-title-area h4:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 130px;
    height: 1px;
    background: var(--primarycolor)
}

.sec-title-area h6 {
    position: relative
}

.sec-title-area h6:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100px;
    height: 1px;
    background: var(--primarycolor)
}

.sec-title-area.centered h4:after,
.sec-title-area.centered h6:after {
    content: "";
    left: 50%;
    transform: translateX(-50%)
}

.sec-title-area.small-title h4 {
    font-size: 16px;
    padding-bottom: 7px;
    line-height: 26px
}

.information-listing {
    list-style: none;
    padding: 0
}

.information-listing li {
    margin-bottom: 8px;
    font-weight: 400;
    display: flex
}

.information-listing label {
    font-weight: 600
}

.table-shadow {
    border-radius: 10px
}

.action-cell {
    text-align: right
}

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-right: 21px
}

.first-thumb-status {
    gap: 15px
}

.first-thumb-status .thumb-varification img {
    width: 36px
}

.first-thumb-status .thumb-varification p {
    font-size: 12px;
    font-weight: 600
}

.btn {
    padding: 6.5px 20px
}

img.logo-main {
    max-width: 100%;
    width: 35px
}

span.logo-datetime {
    font-size: 13px;
    display: inline-block;
    line-height: 1.3;
    text-align: center
}

span.logo-content {
    font-size: 13px;
    font-weight: 600;
    display: inline-block
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primarycolor);
    outline: 0;
    box-shadow: none
}

.form-control:disabled,
.form-control[readonly] {
    background-color: var(--disabled-input-bg) !important;
    opacity: 1;
    cursor: not-allowed
}

.landing-logo-image {
    text-align: center;
    padding-bottom: 100px
}

.landing-logo-image img {
    width: 40%;
    margin: 0 auto;
    max-width: 100%
}

.users-table__checkbox {
    display: inline-block;
    position: relative;
    padding-left: 20px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 14px;
    color: #000;
    min-width: 20px;
    min-height: 20px
}

.users-table__checkbox input {
    position: absolute;
    opacity: 0;
    display: none;
    cursor: pointer
}

.users-table__checkbox input:checked~.checkmark {
    background: linear-gradient(180deg, var(--primarycolor) 0, var(--primarycolor) 100%)
}

.nav-btn-link span,
.users-table__checkbox input:checked~.checkmark:after {
    display: block
}

.users-table__checkbox .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #eee;
    border-radius: 4px
}

.users-table__checkbox .checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 8px;
    top: 4px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

.users-table__checkbox:hover input~.checkmark {
    background-color: #ccc
}

.users-table__checkbox.inline-large-checkbox {
    min-width: 20px;
    min-height: 20px;
    margin-right: 0
}

.users-table__checkbox.inline-large-checkbox input~.checkmark {
    background: var(--checkbox-bg);
    border: 2px solid #d6d7e3;
    width: 20px;
    height: 20px;
    border-radius: 4px
}

.users-table__checkbox.inline-large-checkbox input:checked~.checkmark {
    background: var(--primarycolor);
    border: 2px solid var(--primarycolor)
}

.users-table__checkbox.inline-large-checkbox input~.checkmark:after {
    opacity: 0;
    display: block !important;
    border-color: #d6d7e3 !important
}

.users-table__checkbox.inline-large-checkbox input:checked~.checkmark:after {
    border-color: #fff !important;
    opacity: 1
}

.users-table__checkbox.inline-large-checkbox .checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg)
}

.send-btn-sm {
    padding: 2px 16px;
    border-radius: 16px;
    border: 0;
    background: var(--primarycolor);
    color: #fff;
    font-size: 16px;
    text-decoration: none
}

.gap-15 {
    column-gap: 15px
}

.status-area h6 {
    line-height: 2;
    margin-right: 15px
}

.label-listing h6,
.label-listing p {
    display: inline-block
}

.label-listing p {
    font-size: 16px;
    line-height: 1.8
}

.select-dropdown,
.select-dropdown * {
    margin: 0;
    padding: 0;
    position: relative;
    box-sizing: border-box
}

.select-dropdown {
    position: relative;
    background-color: var(--primarycolor);
    border-radius: 4px
}

.select-dropdown select {
    font-weight: 400;
    max-width: 100%;
    padding: 8px 24px 8px 10px;
    border: none;
    color: #fff;
    background-color: transparent;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important
}

.select-dropdown select:active,
.select-dropdown select:focus {
    outline: 0;
    box-shadow: none;
    color: #fff
}

.select-dropdown select option,
.select-dropdown select:active option,
.select-dropdown select:focus option,
body.gradient select option {
    color: #000
}

.dataTables_length select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: auto
}

.select-dropdown:after {
    content: "\e604";
    font-family: simple-line-icons;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 8px;
    width: 15px;
    height: 15px;
    color: #fff
}

.profile-controls,
.terms-dropdown-group {
    display: flex;
    flex-wrap: wrap;
    column-gap: 15px;
    row-gap: 15px;
    justify-content: center
}

.min-label-width,
.terms-dropdown-group .select-dropdown {
    min-width: 150px
}

.mb-30 {
    margin-bottom: 30px
}

.lg-font {
    font-size: 18px;
    font-weight: 500
}

.md-font {
    font-size: 16px;
    font-weight: 500
}

.loan-navigation-area {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center
}

.nav-btn-link i {
    margin-bottom: 5px;
    font-size: 20px
}

.nav-btn-link {
    color: var(--nav-color);
    font-size: 18px;
    border: 0;
    padding: 0;
    background: 0 0;
    display: inline-block
}

select.form-control {
    appearance: auto
}

.language-dropdown>a {
    font-size: 16px;
    line-height: 2;
    font-weight: 400
}

#header-fix .language-dropdown .dropdown-menu {
    min-width: 80px;
    text-align: center
}

#header-fix .dropdown-menu .dropdown-item:hover {
    background: #f5f5f5;
    color: var(--primarycolor)
}

.bottom-icon-info,
.media,
.multi-form-group {
    display: flex
}

@media (max-width:1200px) {
    .badge {
        line-height: 2;
        padding: 3px 10px
    }

    .dataTables_filter input {
        width: 400px !important
    }
}

@media (max-width:1024px) {
    .dataTables_filter input {
        width: 300px !important;
        margin-top: 0
    }

    .badge {
        line-height: 1.8;
        padding: 2px 8px
    }
}

.auto-width-select .select2-container,
.consultant-dp-group .select2,
.horizontal-group .half-form-group,
.multi-form-group>div:nth-child(2),
.profile-input>.input-group,
.result-tab .nav-item,
.two-to-group .group-inner,
.user-list .user-content,
.withfile-input .input-wrapper input,
.withfile-input .input-wrapper select,
.wizard-tab li.nav-item {
    flex: 1
}

.wizard-tab .nav-tabs .nav-item.show .nav-link,
.wizard-tab .nav-tabs .nav-link.active {
    color: #fff;
    border: 0 !important;
    background: var(--primarycolor)
}

.wizard-tab .nav-tabs .nav-link {
    border-radius: 0;
    color: var(--tab-menu-color)
}

.wizard-tab .nav-tabs .nav-item {
    border: 1px solid var(--tab-border)
}

.wizard-tab .nav-tabs .nav-item .nav-link {
    padding: 12px 0 !important
}

.custom-file-input ::-webkit-file-upload-button {
    display: none
}

.consultant-dp-group,
.profile-input,
.thumb-varification,
.two-to-group {
    display: flex;
    align-items: center
}

.form-control {
    padding: .625rem .75rem
}

.form-control.lg {
    padding: .925rem .75rem
}

.form-select {
    padding: .532rem .75rem;
    border-color: var(--bordercolor)
}

.profile-input>.uploded-image {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px
}

.search-wrapper {
    position: relative;
    z-index: 3
}

.search-wrapper input {
    width: 100%;
    border-radius: 55px;
    padding: 1rem;
    background: var(--table-search-bg);
    transition: .3s ease-in-out
}

.search-wrapper .search-icon-btn {
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 1rem;
    padding: 0;
    background: 0 0;
    border: none;
    z-index: 3;
    font-size: 20px;
    color: #bfbfbf;
    cursor: pointer
}

@media (min-width:768px) {
    .carbonads {
        float: right;
        margin-bottom: -1rem;
        margin-top: -1rem;
        max-width: 360px
    }

    .img-container {
        min-height: 497px
    }

    .wizard-tab .nav-tabs .nav-item:not(:first-child) {
        border-left: none
    }

    .loan-table-listing {
        box-shadow: 0 4px 30px rgba(0, 0, 0, .05);
        border-radius: 10px;
        padding: 20px
    }
}

.status-filter {
    display: flex;
    justify-content: center;
    column-gap: 24px;
    row-gap: 24px;
    list-style-type: none;
    padding: 0;
    flex-wrap: wrap
}

.status-filter li a {
    padding: 12px 20px;
    background: #f0f0f0;
    border-radius: 4px;
    display: inline-block;
    transition: .3s ease-in-out
}

.status-filter li a.active,
.status-filter li a:hover {
    color: #fff;
    background: var(--primarycolor)
}

.card-header-area {
    background: var(--card-header-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px
}

.card-header-area h3 {
    font-weight: 700;
    color: #fff
}

.card-header-area .icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: #fff;
    border-radius: 50%;
    padding: 10px;
    margin-right: 14px
}

.icon-btn,
.select2-container .select2-selection--single,
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px
}

.icon-btn {
    width: 40px;
    font-size: 18px;
    border: 1px solid var(--primarycolor);
    color: #fff;
    border-radius: 4px;
    background: var(--primarycolor);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center
}

.icon-btn:hover {
    border: 1px solid var(--primarycolor);
    color: #fff
}

.withfile-input .input-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: nowrap
}

.horizontal-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start
}

.horizontal-group .span-devider {
    min-width: 100px;
    padding: 10px 0;
    text-align: center
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 40px;
    color: var(--input-color)
}

.select2-container--default .select2-selection--single {
    background-color: var(--input-bg)
}

.select2-search--dropdown .select2-search__field {
    outline: 0 !important
}

.thumb-varification .varification-label {
    font-size: 16px
}

.thumb-varification img {
    width: 50px
}

.result-tab {
    box-shadow: 0 0 1rem rgb(0 0 0 / 20%)
}

.result-tab .nav-item .nav-link {
    width: 100%;
    font-size: 18px
}

.nav-tabs.result-tab .nav-link.active,
.result-tab.nav-tabs .nav-item.show .nav-link {
    color: #fff;
    border-bottom: none
}

.result-tab.nav-tabs .nav-item:first-child .nav-link.active {
    background: #52b141;
    border-bottom: none
}

.result-tab.nav-tabs .nav-item:last-child .nav-link.active {
    background: var(--danger);
    border-bottom: none
}

button.btn-close.model-close-btn {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--primarycolor);
    color: #fff;
    width: 25px;
    height: 25px;
    opacity: 1;
    border-radius: 50%
}

.company-title,
.loan-type,
.permission-table tr td:first-child,
.permission-table tr th:first-child,
h2.main-id {
    font-weight: 700
}

.search-wrapper.role-search-wrapper input {
    padding: 10px 16px
}

.user-list {
    display: flex;
    align-items: center;
    background: var(--user-list-bg);
    box-shadow: 0 4px 30px rgba(0, 0, 0, .1);
    border-radius: 10px;
    padding: 10px 20px
}

.user-list .profile {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 18px;
    color: var(--primarycolor);
    border: 1px solid var(--primarycolor);
    border-radius: 50%;
    margin-right: 15px
}

.user-list .user-checkbox {
    line-height: 1;
    display: flex
}

.user-list .user-checkbox .chkbox {
    padding: 0;
    width: 25px;
    height: 25px
}

.user-list .user-checkbox .chkbox .checkmark {
    width: 25px;
    height: 25px
}

.user-list .user-checkbox .chkbox .checkmark:after {
    top: 4px;
    left: 8px
}

.user-content h4 {
    font-weight: 600;
    font-size: 18px;
    line-height: 20px;
    margin-bottom: 6px
}

.user-content p {
    font-weight: 600;
    font-size: 14px;
    line-height: 14px;
    color: #adadad;
    margin-bottom: 0
}

.user-list .user-delete-button {
    width: 40px;
    height: 40px;
    border: 1px solid red;
    border-radius: 50%;
    background: var(--iconbtn-bg);
    color: red
}

.no-data-element {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column
}

.notfound-content {
    background: var(--notfound-bg);
    padding: 15px;
    border-radius: 4px
}

.info-header {
    padding: 10px 15px;
    text-align: center;
    background: var(--info-header)
}

.check-listing {
    list-style: none;
    margin-bottom: 0;
    padding: 0
}

.check-listing li {
    display: flex;
    line-height: 25px;
    font-size: 16px
}

.check-listing li i {
    color: var(--primarycolor);
    margin-right: 10px;
    margin-top: 5px
}

@media (max-width:768px) {
    .user-list {
        padding: 7px 12px;
        border-radius: 4px
    }

    .user-list .profile {
        width: 35px;
        height: 35px;
        font-size: 15px
    }

    .user-list .user-delete-button {
        width: 28px;
        height: 28px
    }

    .user-content h4 {
        font-size: 15px;
        margin-bottom: 5px
    }

    .user-content p {
        font-size: 12px
    }

    .check-listing li {
        line-height: 20px;
        font-size: 14px
    }
}

.profile-pic-wrapper {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.pic-holder {
    text-align: center;
    position: relative;
    border-radius: 50%;
    width: 150px;
    height: 150px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px
}

.pic-holder .pic {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center
}

.pic-holder .upload-file-block,
.pic-holder .upload-loader {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(90, 92, 105, .7);
    color: #f8f9fc;
    font-size: 12px;
    font-weight: 600;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .2s
}

.pic-holder .upload-file-block {
    cursor: pointer
}

.pic-holder.uploadInProgress .upload-file-block,
.selectablediv,
.selectablediv2 {
    display: none
}

.snackbar {
    visibility: hidden;
    min-width: 250px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 2px;
    padding: 16px;
    position: fixed;
    z-index: 1;
    left: 50%;
    bottom: 30px;
    font-size: 14px;
    transform: translateX(-50%)
}

.snackbar.show {
    visibility: visible;
    -webkit-animation: .5s fadein, .5s 2.5s fadeout;
    animation: .5s fadein, .5s 2.5s fadeout
}

@-webkit-keyframes fadein {
    from {
        bottom: 0;
        opacity: 0
    }

    to {
        bottom: 30px;
        opacity: 1
    }
}

@keyframes fadein {
    from {
        bottom: 0;
        opacity: 0
    }

    to {
        bottom: 30px;
        opacity: 1
    }
}

@-webkit-keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1
    }

    to {
        bottom: 0;
        opacity: 0
    }
}

@keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1
    }

    to {
        bottom: 0;
        opacity: 0
    }
}

span.icon-box {
    font-size: 26px;
    color: var(--primarycolor)
}

.multi-form-group>div:first-child {
    min-width: 80px;
    width: auto;
    margin-right: 15px
}

.fixed-w-btn,
button.swal2-styled {
    min-width: 100px
}

.swal2-container.swal2-center>.swal2-popup {
    width: 34em
}

.swal2-title {
    font-size: 1.1rem !important
}

.swal2-html-container {
    font-size: .875rem !important
}

.swal2-container {
    zoom: 0.8
}

.swal2-icon {
    margin-top: 20px !important
}

.alert-counter {
    width: 18px;
    height: 18px;
    background: var(--danger);
    color: #fff;
    font-size: 12px;
    border-radius: 50%;
    margin-left: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1
}

tr.unresolved {
    background: var(--unresolve-bg)
}

.logo-admin-panel,
.user-profile>a img {
    width: 30px;
    height: 30px
}

.rating-wrapper {
    display: flex;
    flex-wrap: wrap
}

.star-listing {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none
}

.star-listing li {
    color: var(--primarycolor);
    margin: 0;
    line-height: 1
}

.result {
    margin-left: 10px;
    margin-bottom: 0
}

.two-to-group .devider {
    padding: 10px 20px;
    line-height: 1
}

#table-without-export_wrapper .table.dataTable {
    margin-top: 0 !important
}

.summery-listing {
    margin: 0 0 30px;
    padding: 0;
    list-style-type: none;
    display: flex;
    justify-content: center;
    column-gap: 15px;
    row-gap: 15px;
    flex-wrap: wrap
}

.summery-listing p {
    margin-bottom: 3px
}

.summery-title {
    background: #efefef;
    padding: 10px 0;
    border-radius: 10px
}

.summery-title h4 {
    font-weight: 700;
    margin: 0
}

.input-filter {
    align-items: center;
    column-gap: 15px;
    row-gap: 15px;
    flex-wrap: wrap
}

.input-filter .input-group {
    width: 150px
}

.modal-content {
    max-height: 88vh;
    overflow-y: auto
}

.authentication-area {
    height: 100vh;
    width: 100%
}

.login-box {
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .1);
    box-shadow: -2px 7px 23px -5px rgb(0 0 0 / 75%);
    box-shadow: 1px 1px 0 #999, 2px 2px 0 #999, 3px 3px 0 #999, 4px 4px 0 #999, 5px 5px 0 #999, 6px 6px 0 #999
}

.login-wraper {
    display: flex;
    padding: 40px 20px;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative
}

.login-image {
    color: var(--primarycolor);
    font-weight: 700;
    font-size: 20px
}

.login-image img {
    margin-right: 10px;
    width: 50px;
    height: auto
}

.forgot-link {
    margin-top: 10px;
    font-size: 12px;
    color: #8e8e8e;
    font-weight: 400;
    display: inline-block
}

.left-image-box {
    width: 100%;
    height: 100%;
    position: relative
}

.left-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.left-image-box .content-area {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 20px;
    background-image: linear-gradient(to bottom, transparent 100%, #000)
}

.left-image-box .content-area h3 {
    color: #ff0;
    text-transform: uppercase;
    font-weight: 700
}

.left-image-box .content-area .h1,
.left-image-box .content-area h1 {
    color: #fff;
    text-transform: uppercase;
    font-weight: 700
}

@media (min-width:1024px) {
    .login-box {
        width: 340px;
        margin: 0 auto
    }

    .left-image-box .content-area {
        padding: 20px
    }
}

.bottom-copy-right {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 10px 15px;
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.summery-colored-list {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin-top: 25px;
    list-style: none;
}

.summery-colored-list li button {
    background: var(--primarycolor);
    color: #fff;
    padding: 5px 10px;
    border: none;
    display: inline-block;
    border-radius: 4px;
    width: 100%;

}

@media (min-width:991px) {

    .border-left-colored {
        border-left: 1px solid var(--primarycolor)
    }
}

.summery-card {
    background: #40a7c8;
    padding: 0;
    display: flex;
    border-radius: 8px;
    overflow: hidden;
    flex-direction: row;
    height: 120px;
    position: relative
}

.summery-card .icon-box {
    height: 120px;
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    background: #74cbe7;
    border-radius: 0 8px 8px 0
}

.summery-card .content-box {
    flex: 1;
    padding: 0 15px
}

.summery-card .content-box h6 {
    margin-top: 10px;
    margin-bottom: 20px;
    color: #fff
}

.summery-card .content-box h3 {
    color: #fff;
    font-weight: 700
}

.summery-card.no-icon {
    padding: 15px
}

/* .summery-card.no-icon:after {
    content: "";
    width: 120px;
    height: 120px;
    position: absolute;
    bottom: -44px;
    left: 40%;
    transform: translateX(-50%);
    background-image: linear-gradient(232deg, transparent 13%, rgba(255, 255, 255, .6) 100%);
    border-radius: 50%
}

.summery-card.no-icon:before {
    content: "";
    width: 70px;
    height: 70px;
    position: absolute;
    top: -24px;
    right: -20px;
    background-image: linear-gradient(-232deg, transparent 13%, rgba(255, 255, 255, .6) 100%);
    border-radius: 50%
} */

.summery-card.no-icon .content-box h6 {
    margin-top: 0;
    margin-bottom: 20px;
    text-align: center
}

.summery-card.bg-red {
    background: #fd3559
}

.summery-card.bg-red .icon-box {
    background: #ffa7b7
}

.authentication-area.style2 .login-wraper {
    background: #112142;
    border-radius: 50px 0 0
}

.bottom-icon-info img {
    width: 25px
}

.bottom-icon-info .content-part p {
    line-height: 1;
    margin-left: 11px;
    font-weight: 600
}

.authentication-area.style2 .left-image-box {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
    flex-direction: column;
    justify-content: center
}

.authentication-area.style2 .main-content-box {
    display: flex;
    align-items: center;
    width: 100%;
    flex-direction: column;
    justify-content: center
}

.authentication-area.style2 .main-content-box img {
    width: 130px;
    margin-bottom: 30px
}

.authentication-area.style2 .main-content-box>div {
    background: #112142;
    padding: 20px;
    font-size: 24px;
    color: #fff;
    font-weight: 600
}

@media (max-width:991px) {
    #header-fix .logo-bar .horizontal-logo span {
        display: none
    }

    .compact-menu #header-fix .logo-bar .horizontal-logo span {
        display: inline-block
    }

    #header-fix .logo-bar {
        width: 0
    }

    .compact-menu:not(.horizontal-menu) #header-fix .logo-bar {
        width: 250px
    }

    .card .card-body {
        padding: 25px
    }

    .badge {
        line-height: 1.8;
        padding: 2px 8px;
        min-width: 80px
    }

    .pf-title-area h3 {
        font-size: 26px;
        line-height: 32px
    }

    .tab-title-area h2 {
        font-size: 24px;
        line-height: 30px
    }

    .dataTables_filter input {
        width: 250px !important;
        margin: 0
    }

    .sec-title-area h4 {
        font-size: 16px;
        line-height: 20px
    }

    .label-listing p,
    .wizard-tab .nav-tabs .nav-item .nav-link h6 {
        font-size: 14px
    }

    .status-area h6 {
        font-size: 16px
    }

    .nav-pills .nav-item:not(:last-child) {
        margin-right: 0
    }

    .nav-pills {
        column-gap: 15px;
        row-gap: 15px
    }

    button.btn-close.model-close-btn {
        top: 0;
        right: 0
    }

    .wizard-tab .nav-tabs .nav-item .nav-link>div>div:first-child {
        font-size: 18px
    }

    .wizard-tab li.nav-item {
        flex: auto
    }

    .horizontal-group {
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center
    }

    .horizontal-group .half-form-group {
        width: 100%
    }

    .left-image-box .content-area {
        position: static
    }
}

@media (max-width:767px) {
    .card .card-body {
        padding: 20px
    }

    .dataTables_filter input {
        width: 100% !important;
        margin: 0
    }

    .information-listing label {
        min-width: unset;
        display: block;
        margin-bottom: 5px
    }

    div.dt-buttons {
        float: none;
        width: auto;
        text-align: center;
        margin-bottom: .5em
    }

    .dataTables_length {
        display: flex;
        float: none;
        margin: 5px 0 12px;
        justify-content: center
    }

    .html5buttons {
        display: flex;
        float: none;
        justify-content: center
    }

    .information-listing li,
    .two-to-group {
        flex-direction: column
    }

    .wizard-tab .nav-tabs .nav-item:not(:last-child) {
        border-bottom: none
    }

    .loan-table-listing {
        padding-bottom: 24px;
        border-bottom: 1px solid #ccc
    }

    .company-title,
    .main-id {
        font-size: 20px
    }

    .status-filter {
        column-gap: 15px;
        row-gap: 15px
    }

    .loan-type {
        font-size: 14px
    }

    .card-header-area h3 {
        font-size: 16px
    }

    .card-header-area .icon-box {
        display: flex;
        width: 40px;
        height: 40px;
        background: #fff;
        border-radius: 50%;
        padding: 9px;
        margin-right: 10px
    }

    .permission-assign {
        width: 100%;
        margin-bottom: 10px
    }

    .multi-form-group {
        display: flex;
        flex-direction: column
    }

    .multi-form-group>div:first-child {
        min-width: unset;
        width: 100%;
        margin-right: 0;
        margin-bottom: 15px
    }

    .devider,
    .input-filter .input-group,
    .two-to-group .group-inner {
        width: 100%
    }

    .devider {
        text-align: center
    }

    .left-image-box {
        height: 300px
    }

    .authentication-area>div>.row {
        height: auto !important
    }

    .bottom-copy-right {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 30px
    }

    .login-wraper {
        padding-bottom: 70px
    }

    .bottom-copy-right p {
        margin-top: 15px
    }

    .authentication-area.style2 .login-wraper {
        border-radius: 0
    }

    .login-box {
        width: 88%
    }
}

.lampiran-table tr th:nth-child(2),
.lampiran-table tr td:nth-child(2) {
    white-space: nowrap;
}

.lampiran-table tr th:not(:first-child, :nth-child(2)),
.lampiran-table tr td:not(:first-child, :nth-child(2)) {
    min-width: 105px;
}

.lampiran-table tr th:not(:nth-child(2), :last-child),
.lampiran-table tr td:not(:nth-child(2), :last-child) {
    text-align: center;
}

.lampiran-table tr:last-child td:nth-child(2) {
    text-align: center;
}

.LMP_label-listing {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.LMP_label-listing li {
    display: flex;
    flex-wrap: wrap;
}

.LMP_label-listing li:not(:last-child) {
    margin-bottom: 12px;
}

.LMP_label-listing li label {
    min-width: 150px;
}

.LMP_label-listing li p {
    margin-bottom: 0;
    padding-left: 15px;
}

.filter-group .checkbox-group {
    min-width: 150px;
}

.filter-group {
    display: flex;
    align-items: flex-start;
}

.filter-group .two-to-group {
    flex: 1;
}

.export-btn-lmp {
    width: 38px;
    height: 38px;
    font-size: 20px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lmp-export-group {
    display: flex;
}

.lmp-btn {
    min-width: 130px;
}

.lmp-buttongap {
    column-gap: 20px;
}

.lmp-filter-column {
    display: flex;
    align-items: flex-start;
}

.first-column {
    flex: 1;
}

.lampiran-table thead tr th {
    vertical-align: top;
}

.colen {
    float: right;
}
.lampiran-table.table-striped>tbody>tr:nth-of-type(odd)>* {
    --bs-table-accent-bg: #fff;
    color: var(--bs-table-striped-color);
}
.lampiran-table.table-striped>tbody>tr:nth-of-type(even)>* {
    --bs-table-accent-bg: var(--bs-table-striped-bg);
    color: var(--bs-table-striped-color);
}

@media (max-width: 767px) {

    .lmp-filter-column {
        flex-direction: column;
    }

    .filter-group .checkbox-group {
        min-width: 130px;
    }
}
.year-line {
    border-bottom: 1px solid #000;
}

.sidebar-navigation {
    background: var(--sidebarbg);
    position: fixed;
    top: 65px;
    left: 0;
    bottom: 0;
    z-index: 99;
    width: 228px;
    transition: all 0.5s;
    border-right: 1px solid var(--sidebarbordercolor);
    border-top: 0px solid var(--sidebarbordercolor);
    overflow-y: auto;
}

.sidebar-navigation::-webkit-scrollbar {
    display: none;
}

@media (min-width: 992px) {
    .compact-menu:not(.horizontal-menu) .sidebar-navigation:not(:hover) ul li ul {
        display: none !important;
    }

    .compact-menu:not(.horizontal-menu) .sidebar-navigation:not(:hover) {
        position: absolute;
        width: 80px;
        height: 100%;
        z-index: 2;
        overflow: scroll;
        top: 0;
        padding-top: 0px;
    }

    .compact-menu:not(.horizontal-menu) .sidebar-navigation:not(:hover) ul>li>a {
        line-height: 0px;
        font-size: 0px;
        display: block;
    }

    .compact-menu:not(.horizontal-menu) .sidebar-navigation:not(:hover) ul>li>a i {
        font-size: 20px;
        margin-right: 0px;
    }

    .compact-menu:not(.horizontal-menu) .sidebar-navigation:not(:hover) ul>li {
        text-align: center;
    }

    .compact-menu:not(.horizontal-menu) .sidebar-navigation:not(:hover) ul>li>a {
        padding: 17px 16px
    }
}

@media (max-width: 991px) {
    .sidebar-navigation {
        -webkit-transform: translateX(-250px);
        transform: translateX(-250px);
    }

    .sidebar-navigation.active {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        margin-left: 0px;
    }
}

.sidebar-navigation .title {
    display: block;
    font-size: 14px;
    line-height: 16px;
    background-color: #fff;
    align-items: center;
    font-weight: 600;
    padding: 16px;
    border-bottom: 1px solid #ccc;
}


.sidebar-navigation ul {
    margin: 0;
    padding: 0;
}

.sidebar-navigation .site-width>ul {
    padding: 30px 0 0 0;
}

.sidebar-navigation ul li {
    display: block;
}

.sidebar-navigation ul li a {
    position: relative;
    display: block;
    padding: 8px 16px;
    font-size: 14px;
    text-decoration: none;
    color: var(--sidebarcolor);
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

.sidebar-navigation ul li>a:hover {
    color: var(--sidebaractivecolor);
}

.sidebar-navigation ul li.selected>a {
    color: var(--sidebaractivecolor);
}

.sidebar-navigation ul li a i {
    font-weight: 700;
    width: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    margin-right: 14px;
}

.sidebar-navigation>ul>li>a i {
    margin-right: 15px;
}

.sidebar-navigation ul li ul>li>a i {
    position: absolute;
    font-size: 12px;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    padding: 5px;
    border-radius: 50%;
}

.sidebar-navigation ul li ul>li>a i:before {
    display: inline-block;
    transition: all .3s ease-in-out;
}

.sidebar-navigation ul li ul>li>a i.flip-v:before {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.sidebar-navigation ul li:hover>a,
.sidebar-navigation ul li.selected>a {
    background-color: var(--menu-active);
}

.sidebar-navigation ul li ul {
    display: none;
}

.sidebar-navigation ul li ul li {
    font-weight: 400;
}

.sidebar-navigation ul li ul.open {
    display: block;
}

.sidebar-navigation ul li ul li a {
    color: var(--sidebarcolor);
    border-color: rgba(255, 255, 255, 0.1);
    font-weight: 400;
}

.sidebar-navigation ul li ul li:hover>a,
.sidebar-navigation ul li ul li.selected>a {
    background-color: var(--menu-active);
}

.sidebar-navigation ul li ul li:hover>a:before,
.sidebar-navigation ul li ul li.selected>a:before {
    margin-right: 10px;
}

.sidebar-navigation ul li ul li.selected.selected--last>a {
    background-color: #94aab0;
    color: #fff;
}

.sidebar-navigation ul li ul li.selected.selected--last>a:before {
    background-color: #fff;
}

.subMenuColor2 {
    background-color: var(--sidebarbg);
}

/* Horizontal Menu */
.horizontal-menu .site-width {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    display: inherit;
}

#header-fix li.dropdown.user-profile .dropdown-menu {
    min-width: 130px;
}

@media (min-width: 992px) {
    .horizontal-menu .sidebar-navigation {
        background: var(--sidebarbg);
        position: relative;
        width: 100%;
        padding: 25px 20px 0px 20px;
        display: flex;
        overflow: inherit;
        z-index: 2;
        top: 65px;
        border-bottom: 1px solid var(--sidebarbordercolor);
        border-right: none;
    }

    .horizontal-menu .sidebar-navigation .site-width>ul {
        margin-bottom: -2px;
        padding: 0px;
    }

    .horizontal-menu .sidebar-navigation .site-width>ul>li {
        position: relative;
        display: inline-block;
    }

    .horizontal-menu .sidebar-navigation .site-width>ul>li>a {
        display: inline-block;
        padding: 10px 15px;
        position: relative;
        -webkit-border-top-left-radius: 5px;
        -webkit-border-top-right-radius: 5px;
        -moz-border-radius-topleft: 5px;
        -moz-border-radius-topright: 5px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        border: 1px solid var(--sidebarbg);
        border-bottom: none;
    }

    .horizontal-menu .sidebar-navigation .site-width ul>li.current a,
    .horizontal-menu .sidebar-navigation ul>li:hover a {
        border: 1px solid var(--sidebarbordercolor);
        border-bottom: none;
        background: var(--sidebarheadingbackground);
    }

    .horizontal-menu .sidebar-navigation .site-width>ul>li:hover>ul,
    .horizontal-menu .sidebar-navigation .site-width>ul>li:hover>ul>li>ul {
        visibility: hidden;
        opacity: 0;
        position: absolute;
        background: var(--sidebarheadingbackground);
        border: 1px solid var(--sidebarbordercolor);
        left: -1px;
        min-width: 200px;
        transition: all .5s;
        top: 120%;
        margin-top: 0px;
        display: block;
        z-index: 99;
    }

    .horizontal-menu .sidebar-navigation .site-width>ul>li:hover>ul>li>ul {
        left: 100%;
    }

    .horizontal-menu .sidebar-navigation .site-width ul li {
        position: relative;
    }

    .horizontal-menu .sidebar-navigation .site-width>ul>li:hover>ul,
    .horizontal-menu .sidebar-navigation .site-width>ul>li:hover>ul>li:hover>ul {
        visibility: visible;
        display: block;
        opacity: 1;
        top: 100%;
    }

    .horizontal-menu .sidebar-navigation .site-width>ul>li:hover>ul>li:hover>ul {
        top: -1px;
    }
}

.selectable-company-list button {
    border: 1px solid var(--primarycolor);
    background: #fff;
    color: var(--primarycolor);
    width: 100%;
    text-align: left;
    padding: 5px 10px;
    border-radius: 4px;
}
.selectable-company-list button:hover {
    box-shadow:0 8px 25px -8px #000;
}
.selectable-company-list button:not(:last-child) {
    margin-bottom: 10px;
}
.selectable-company-list button.active {
    background: var(--primarycolor);
    box-shadow:0 8px 25px -8px #000;
    color: #fff;
}
.downloadable-list{
    list-style-type: none;
    width: 100%;
    padding: 0;
    margin: 0;
}
.downloadable-list li{
    display: flex;
    justify-content: space-between;
}
.downloadable-list li:not(:last-child){
    margin-bottom: 10px;
}
.downloadable-list li a{
    display: inline-block;
    margin-left: 10px;
}
.rounded-10{
    border-radius: 10px !important;
}
.input-inline-group {
    display: flex;
    flex-wrap: nowrap;
}
.input-inline-group label {
    width: 150px;
    margin-right: 10px;
}   
.input-inline-group input,.input-inline-group textarea {
    flex: 1;
}

@media (max-width: 767px){
    
    .input-inline-group {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
    }
    .input-inline-group label {
        width: 100%;
        margin-right: 0;
        margin-bottom: 8px;
    }   

}