.app-brand {
    justify-content: center;
}

#layout-menu {
    background-color: var(--bs-primary);
}

.menu-vertical .menu-item.active>.menu-toggle {
    background-color: var(--bs-menu-hover-bg);
    color: #ffffff;
}

.menu-vertical .menu-item:not(.active):not(.open) .menu-link:hover,
.menu-link,
.menu-horizontal-prev,
.menu-horizontal-next,
.menu-sub>.menu-item.active>.menu-link {
    color: #ffff !important;
}

/* LOADER START HERE */
div#global-loader {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: #ffffffc4;
    z-index: 111111111;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-body-style {
    display: flex;
    align-items: center;
    justify-content: center;
}

.confirm-modal-icon {
    font-size: 36px;
    color: #df0000;
}

.confirm-modal-title {
    font-size: 21px;
    font-weight: 700;
    color: #1c1c1c;
    line-height: 2.5;
    margin-bottom: 0;
}

.multiselect-container .form-check {
    margin: .5em;
}

.multiselect.dropdown-toggle {
    text-align: left !important;
}

div.dt-container .dt-buttons.btn-group:not(.btn-group-vertical)>.btn-group:not(:last-child)>.btn,
div.dt-container .dt-buttons.btn-group:not(.btn-group-vertical)>:not(.btn-check)+.btn {
    border-radius: .375rem !important;
}

.fontawesome-icon-sidebar{
    font-size: 1.050rem !important;
    block-size: auto !important;
}

.btn:disabled {
    cursor: not-allowed;
    pointer-events: none; /* Optional: prevents interaction */
}

/* ****** Notification style start ****** */
  .icon-container {
    /* width: 24px;
    height: 24px;
    margin: 40vh auto 0; */
  }

  .bell-icon {
    transform-origin: top center;
    animation: ring 1.3s cubic-bezier(0,0,.64,1.4) infinite;
    animation-iteration-count: 5;
  }

  .menu-inner-shadow {
    background: linear-gradient(#ffffff00 41%, rgb(255 255 255 / 0%) 95%, rgb(255 255 255 / 0%)) !important;
}

  @keyframes ring {
    15% {
      transform: rotate(-20deg);
    }
    30% {
      transform: rotate(20deg);
    }
    45% {
      transform: rotate(-10deg);
    }
    60% {
      transform: rotate(5deg);
    }
    85% {
      transform: rotate(-3deg);
    }
    90% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }

  .pulse {
    animation: pulse 2s infinite;
  }
  .pulse:hover {
    animation: none;
  }

  @-webkit-keyframes pulse {
    0% {
      -webkit-box-shadow: 0 0 0 0 rgba(232,59,119, 0.4);
    }
    70% {
        -webkit-box-shadow: 0 0 0 10px rgba(232,59,119, 0);
    }
    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(232,59,119, 0);
    }
  }
  @keyframes pulse {
    0% {
      -moz-box-shadow: 0 0 0 0 rgba(232,59,119, 0.4);
      box-shadow: 0 0 0 0 rgba(232,59,119, 0.4);
    }
    70% {
        -moz-box-shadow: 0 0 0 10px rgba(232,59,119, 0);
        box-shadow: 0 0 0 10px rgba(232,59,119, 0);
    }
    100% {
        -moz-box-shadow: 0 0 0 0 rgba(2232,59,119, 0);
        box-shadow: 0 0 0 0 rgba(232,59,119, 0);
    }
  }

/* ****** Notification style end ****** */

/* LOADER END HERE */

@media (min-width: 1400px) {

    .container-xxl,
    .container-xl,
    .container-lg,
    .container-md,
    .container-sm,
    .container {
        max-width: 100% !important;
    }
}
@media (min-width: 320px) and (max-width: 519px) {
    /* ******** navber responsive start ******** */
    .app-brand {
        gap: 10px;
    }

    .app-brand img {
        width: 95px !important;
    }

    .nav-link .text-body-secondary-2 {
        display: none !important;
    }

    .demo-2 .layout-menu-toggle {
        width: 30px;
        height: 30px;
    }

    .avatar img {
        block-size: 72%;
        inline-size: 72%;
        position: relative;
        top: 5px;
        left: 6px;
    }

    .avatar.avatar-online::after {
        background-color: var(--bs-success);
        top: 24px;
    }


    .icon-md, .icon-md::before {
        left: 7px !important;
        position: relative !important;
    }

    .layout-navbar .navbar-dropdown .badge-notifications {
        inset-inline-end: -10px !important;
    }

    /* ******** sidebar responsive start ******** */

    .layout-wrapper:not(.layout-horizontal) .menu-vertical .menu-inner>.menu-item.active::before{
        background-color: #1e2183 !important;
    }

    /* ******** Body responsive start ******** */

    .container-fluid{
        padding: 0 42px;
    }

    /* ******** datatable responsive start ******** */
    .dt-info{
        margin-top: 20px;
        overflow-x: hidden;
        font-size: 13px;
    }

    #dt-search-0{
        font-size: 13px !important;
    }

    .dt-column-title{
        font-size: 13px !important;
    }

    .dt-empty{
        font-size: 13px !important;
    }

    .approval-process{
        font-size: 4vw;
    }

    .approval-process-sub{
        font-size: 3.5vw;
    }

}
@media (min-width: 520px) and (max-width: 544px) {
    /* ******** navber responsive start ******** */
    .app-brand {
        gap: 10px;
    }

    .app-brand img {
        width: 95px !important;
    }

    .nav-link .text-body-secondary {
        font-size: 2.2vw !important;
    }

    .demo-2 .layout-menu-toggle {
        width: 30px;
        height: 30px;
    }

    .avatar img {
        block-size: 85%;
        inline-size: 85%;
    }

    .avatar.avatar-online::after {
        background-color: var(--bs-success);
        top: 24px;
    }

    /* ******** sidebar responsive start ******** */

    .layout-wrapper:not(.layout-horizontal) .menu-vertical .menu-inner>.menu-item.active::before{
        background-color: #1e2183 !important;
    }

    /* ******** Body responsive start ******** */

    .container-fluid{
        padding: 0 42px;
    }

    /* ******** datatable responsive start ******** */
    .dt-info{
        margin-top: 20px;
        overflow-x: hidden;
        font-size: 13px;
    }

    #dt-search-0{
        font-size: 13px !important;
    }

    .dt-column-title{
        font-size: 13px !important;
    }

    .dt-empty{
        font-size: 13px !important;
    }

}

@media (min-width: 545px) and (max-width: 767px) {
    /* ******** navber responsive start ******** */
    .app-brand {
        gap: 10px;
    }

    .app-brand img {
        width: 95px !important;
    }

    .nav-link .text-body-secondary {
        font-size: 2.2vw !important;
    }

    .demo-2 .layout-menu-toggle {
        width: 30px;
        height: 30px;
    }

    .avatar img {
        block-size: 85%;
        inline-size: 85%;
    }

    .avatar.avatar-online::after {
        background-color: var(--bs-success);
        top: 24px;
    }

    /* ******** sidebar responsive start ******** */

    .layout-wrapper:not(.layout-horizontal) .menu-vertical .menu-inner>.menu-item.active::before{
        background-color: #1e2183 !important;
    }

    /* ******** Body responsive start ******** */

    .container-fluid{
        padding: 0 42px;
    }

    /* ******** datatable responsive start ******** */
    .dt-info{
        margin-top: 20px;
        overflow-x: hidden;
        font-size: 13px;
    }

    #dt-search-0{
        font-size: 13px !important;
    }

    .dt-column-title{
        font-size: 13px !important;
    }

    .dt-empty{
        font-size: 13px !important;
    }

}

@media (min-width: 768px) and (max-width: 991px) {
    /* ******** navber responsive start ******** */
    .app-brand {
        gap: 10px;
    }

    .app-brand img {
        width: 120px !important;
    }

    .nav-link .text-body-secondary {
        font-size: 16px !important;
    }

    .demo-2 .layout-menu-toggle {
        width: 34px;
        height: 34px;
    }

    .avatar img {
        block-size: 92%;
        inline-size: 92%;
    }

    /* ******** sidebar responsive start ******** */

    .layout-wrapper:not(.layout-horizontal) .menu-vertical .menu-inner>.menu-item.active::before{
        background-color: #1e2183 !important;
    }

    /* ******** Body responsive start ******** */

    .container-fluid{
        padding: 0 36px;
    }

    /* ******** datatable responsive start ******** */
    .dt-info{
        margin-top: 20px;
        overflow-x: hidden;
        font-size: 13px;
    }

    #dt-search-0{
        font-size: 13px !important;
    }

    .dt-column-title{
        font-size: 13px !important;
    }

    .dt-empty{
        font-size: 13px !important;
    }

}

@media (min-width: 992px) and (max-width: 1214px) {
    /* ******** navber responsive start ******** */
    .app-brand {
        gap: 10px;
    }

    .app-brand img {
        width: 130px !important;
    }

    .nav-link .text-body-secondary {
        font-size: 18px !important;
    }

    .demo-2 .layout-menu-toggle {
        width: 40px;
        height: 40px;
    }

    .avatar img {
        block-size: 95%;
        inline-size: 95%;
    }

    /* ******** sidebar responsive start ******** */

    .layout-wrapper:not(.layout-horizontal) .menu-vertical .menu-inner>.menu-item.active::before{
        background-color: #1e2183 !important;
    }

    /* ******** Body responsive start ******** */

    .container-fluid{
        padding: 0 51px;
    }

    /* ******** datatable responsive start ******** */
    .dt-info{
        margin-top: 20px;
        overflow-x: hidden;
        font-size: 13px;
    }

    #dt-search-0{
        font-size: 13px !important;
    }

    .dt-column-title{
        font-size: 13px !important;
    }

    .dt-empty{
        font-size: 13px !important;
    }

}