/*
Template Name: Velzon - Admin & Dashboard Template
Author: Themesbrand
Website: https://themesbrand.com/
Contact: support@themesbrand.com
File: Custom Css File
*/

/*#region PAGE */
[data-layout=horizontal][data-layout-width=boxed] .page-content {
    min-height: calc(100vh - 70px);
}

@media (max-width: 1024.98px) {
    [data-layout=horizontal] .horizontal-logo {
        padding-left: 0;
    }
}

@media (min-width: 1024.1px) {
    [data-layout=horizontal] .topnav-hamburger {
        visibility: hidden;
        display: none;
    }
}

button#topnav-hamburger-icon i {
    color: #fff;
    font-size: 1.5rem;
}

[data-layout-width=fluid] body {
    background-color: var(--vz-boxed-body-bg);
}

@media (max-width: 1024px) {
    [data-layout=horizontal] .menu .navbar-menu {
        max-height: fit-content;
        height: calc(100vh - 70px);
    }
}

[data-layout="horizontal"] .app-menu .nav-item hr {
    margin: 0;
    color: #c1c1c1;
}

[data-layout="horizontal"] a.nav-link.menu-link.active.current-page {
    background: rgb(229 229 242 / 75%);
}

[data-layout="horizontal"] .app-menu li.nav-item:hover {
    background: rgb(229 229 242 / 50%);
}

[data-layout=horizontal] .menu-dropdown {
    min-width: 16rem;
}

[data-layout=horizontal] .navbar-menu img.menu-img {
    display: inline-block;
    height: 30px;
    margin: -6px 6px -5px -7px;
}

/*#endregion */

/*#region PAGE TITLE */

.page-title-box .select2-container .select2-selection--single {
    height: 34px;
}

.page-title-box .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 34px;
}

.page-title-right .tool-item:not(:last) {
    padding-right: 5px;
}

.app-title {
    font-weight: 500;
    font-size: 15px !important;
    text-transform: uppercase;
    color: #fff;
    padding: 5px;
}

/*#endregion */

/*#region SELECT2 */

.select2-close-mask {
    z-index: 2099;
}

.select2-container--open {
    z-index: 99999 !important;
}

.select2-dropdown {
    border: 1px solid #ddd !important;
    border-top: 0 !important;
}

.select2-dropdown {
    z-index: 3051;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    padding-right: 24px;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    cursor: pointer;
    float: right;
    font-weight: bold;
    height: 35px;
    right: 26px;
    padding-right: 0;
    position: absolute;
    width: 25px;
    margin-right: 0;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #405189 !important;
    color: #fff !important;
}

/*#endregion */

/*#region HELPERS */
.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.status-dot {
    border-radius: 50% !important;
    width: 10px !important;
    overflow: hidden;
    height: 10px !important;
    right: 0 !important;
    top: 0 !important;
}

.hidden {
    display: none !important;
}

/*#endregion */

/*#region CARD */

.card {
    box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.card .card {
    box-shadow: none;
}

.d4-pages .card {
    box-shadow: none;
}

.d4-form-card.bg-none {
    box-shadow: none;
    background: transparent;
}

.card.d4-form-card.bg-none .card-body {
    padding: 0 !important;
}

.card.d4-form-card .card-body {
    padding: 1.5rem 2rem;
}

/*#endregion */

/*#region FORM  */
.d4-form-card .form-label {
    font-size: .6875rem;
    text-transform: uppercase;
    margin-bottom: 3px;
    color: #706e6b;
}

/*#endregion */

/*#region DATATABLE */

@media (max-width: 767px) {
    .D4DataTable .table-tools-left {
        margin-bottom: 0.5rem;
    }
}

.card.d4-form-card.p-none > .card-body {
    padding: 0 !important;
}

.card.d4-form-card.p-none .D4DataTable .card-body {
    padding: 1rem !important;
}

.D4DataTable .section-table {
    overflow: auto;
}

.D4DataTable a {
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

.D4DataTable .dataTables_wrapper {
    width: calc(100% - 12px);
}

.D4DataTable .dataTables_wrapper .col-sm-12 {
    padding-right: 0;
}

.D4DataTable .card-tools {
    display: flex;
}

.D4DataTable .card-tools .input-group.custom a,
.D4DataTable .card-tools .input-group.custom button {
    margin-left: 5px !important;
}

/*#endregion */

/*#region MODAL */

.D4-modal.modal-error .ZebraDialog_Body {
    padding: 0;
    background: #30353a !important;
}

a.ZebraDialog_Close,
.ZebraDialog_Title {
    border-bottom: 0;
    background: #405189;
    color: #fff;
}

.ZebraDialogBackdrop {
    background: rgba(0, 0, 0, .4);
    z-index: 1002;
}

.ZebraDialog_Title {
    border-bottom: 0;
}

.ZebraDialog {
    border: 0;
    z-index: 1002;
}

.ZebraDialog_Buttons {
    text-align: right;
    padding: 10px 20px;
    border-top: 1px solid #ddd;
    background: #f3f6f9;
}

.ZebraDialog_Body {
    padding: 15px;
    margin: 0;
}

.D4-modal.primary .ZebraDialog_Title {
    background-color: #405189;
    color: #fff;
}

.D4-modal.primary .ZebraDialog_Close {
    color: #fff;
}

.ZebraDialog.D4-modal-member-card .ZebraDialog_Body {
    padding: 10px;
    overflow: hidden;
}

.ZebraDialog_Body .D4Form .input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3),
.ZebraDialog_Body .D4Form .input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-control,
.ZebraDialog_Body .D4Form .input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-select,
.ZebraDialog_Body .D4Form .input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.ZebraDialog_Body .D4Form .input-group-text {
    align-content: flex-start;
    flex-direction: column;
}

.ZebraDialog_Body .D4Form .language-flag {
    margin-right: 0;
}

.ZebraDialog_Body {
    background-image: linear-gradient(to bottom, rgb(255 255 255 / 50%), rgb(237 237 241)), url(/assets/img/table/header.png) !important;
    background-size: cover;
}

.swal2-container .swal2-cancel,
.swal2-container .swal2-deny,
.swal2-container .swal2-confirm {
    min-width: 100px;
}

.D4-modal .ZebraDialog_Button_0 {
    padding: 6px 12px;
    border-radius: 4px;
    color: #000 !important;
    background-color: transparent !important;
    border: 1px solid transparent !important;
}

.D4-modal .ZebraDialog_Button_0:hover {
    color: #000 !important;
    border: 1px solid #ddd !important;
}

.D4-modal .ZebraDialog_Button_1 {
    padding: 6px 12px;
    border-radius: 4px;
    color: #fff;
    background-color: #0ab39c !important;
    border-color: #0ab39c !important;
}

.D4-modal .ZebraDialog_Button_1:hover {
    color: #fff !important;
    background-color: #099885 !important;
    border-color: #099885 !important;
}


/*#endregion */

/*region VARIABLE LIST */

.d4-variable-list {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 2px;
}

.d4-variable-list var {
    padding: 2px 10px;
    border: 1px solid #e5e9f2;
    background: #fafafa;
    margin-right: 5px;
    margin-bottom: 5px;
}

.d4-variable-list var div {
    color: #000;
    font-weight: normal;
    font-style: normal;
    cursor: pointer;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
}

.d4-variable-list var span {
    text-align: center;
}

.d4-variable-list var:hover {
    background: #eeeeee;
}

/*#endregion */

/*#region OTHER */

[data-layout="horizontal"] a.nav-link.menu-link.active.current-page {
    background: rgb(64 81 137 / 80%);
    color: #fff !important;
}

.dropdown-item:focus, .dropdown-item {
    color: rgb(0 0 0) !important;
    font-weight: 400 !important;
}

.dropdown-item:focus, .dropdown-item hr {
    border-top: 1px solid #bbbbbb;
}

.form-control[readonly="readonly"] {
    background: #f8f8f8;
}

.pointer {
    cursor: pointer;
}

.form-group .form-note {
    margin-top: 0.5rem;
    cursor: pointer;
}

.form-note {
    font-size: 12px;
    color: #8094ae;
    font-style: italic;
    display: block;
}

.form-switch-md {
    line-height: 24px;
}

.sp-original-input-container .sp-add-on {
    width: 40px !important;
}

.language-list li:not(:last-child) .language-item {
    border-bottom: 1px solid #ecf2ff;
}

.translation-input {
    width: 100%;
}

.translation-input td.flag {
    width: 40px;
}

.language-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    color: #344357;
    transition: all 0.4s;
}

.language-item:hover {
    color: #3c4d62;
    background: #ebeef2;
}

.language-name {
    font-size: 12px;
}

.language-flag {
    width: 24px;
    margin-right: 12px;
}

.form-group {
    margin-bottom: .5rem !important;
}

.btn.disabled, .btn:disabled, fieldset:disabled .btn {
    border: 0;
}

ul#navbar-nav {
    margin-left: -15px;
}

.d-flex.flex-start {
    justify-content: flex-start !important;
}

.d-flex.flex-end {
    justify-content: flex-end !important;
}

.d-flex.flex-space-between {
    justify-content: space-between;
}

.d-flex.flex-wrap {
    flex-wrap: wrap !important;
}

.divider {
    border-top: 1px solid #e5e9f2 !important;
    margin: 28px 0;
    display: block;
}

img.app-instance-img {
    height: 24px;
    margin-right: 10px;
}

img.app-instance-img.active {
    height: 20px;
    margin-right: 10px;
}

.app-instance-selector li {
    cursor: pointer;
}

.selected-app-instance.dropdown-toggle {
    min-width: 230px;
}

img.app-instance-img.active {
    height: 34px;
    left: 3px;
    position: absolute;
}

img.app-instance-img {
    height: 34px;
    position: absolute;
    left: 7px;
}

.app-instance-selector a span {
    padding-left: 30px;
}

.avatar-image {
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px, rgba(0, 0, 0, 0.23) 0 3px 6px;
}

table.dataTable td, table.dataTable th {
    padding: 5px 10px;
}

.list-group-item:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.list-group-item:last-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.select2-results__option--highlighted {
    background: #f3f6f9 !important;
    color: #000 !important;
}

.d4-table-category-icon {
    display: block;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    text-align: center;
}

.d4-table-category-icon i {
    font-size: 16px;
    margin-top: 9px;
}

#toast-container > div {
    border: 0;
}

.form-group span.invalid {
    width: 100%;
    margin-top: .15rem;
    font-size: .875em;
    color: var(--vz-form-invalid-color);
}

.form-group :has(.invalid) .form-control {
    border-color: var(--vz-form-invalid-color);
}

.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3), .input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-control, .input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-select, .input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

/*#endregion */

.clockpicker-popover .popover-title {
    background-color: #405189;
    color: #fff;
}

.clockpicker-span-hours.text-primary,
.clockpicker-span-minutes.text-primary {
    color: #f1f1f1 !important;
}

.flatpickr-input[readonly] {
    background-color: #eff2f7;
}

.tox-tinymce {
    border: 1px solid #eee !important;
    border-radius: 0 !important;
}

.bg-cover-center {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}