.search-clear {
    margin-top: 30px !important;
    min-width: 90px;
    margin-right: 8px;
}

/* Filter action columns hold the Search / Clear buttons. The markup uses a
   cramped col-md-1, which squeezes the buttons together; let the column size to
   its button so the buttons keep a clear gap (works for both float and flex
   grids). Paired with the .search-clear margin above. */
.my-col-sm {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    padding-right: 5px;
    padding-left: 5px;
}

.close-padding {
    padding: 8px;
    align-items: center;
    margin-top: 8px;
}

.my-col-2 {
    width: 15%;
    padding-right: 5px;
    padding-left: 5px;
}

.my-col-sm-padding {
    padding-right: 1px !important;
    padding-left: 1px !important;
    margin-right: -30px !important;
}

.area-bottom {
    padding-bottom: 50px;
}

.col-actions {
    min-width: 90px;
}

.small-padding-left {
    padding-left: 5px;
}

.sm-padding-top {
    padding-top: 5px;
}

.modal-dialog-lg {
    width: 850px;
}

.modal-dialog-xlg {
    width: 1050px;
}


/* @media screen and (max-width:776px){
            .content-header {
                top:95px;
              }
          } */

@media screen and (max-width: 767px) {
    .content-area {
        max-height: 62vh;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .content-area-sm {
        max-height: 51vh;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .content-area-md {
        max-height: 60vh;
        overflow-y: auto;
        overflow-x: hidden;
    }
}

@media screen and (max-width: 640px) {
    .content-area {
        max-height: 57vh;
        overflow-y: auto;
        overflow-x: auto;
    }
    .content-area-sm {
        max-height: 47vh;
        overflow-y: auto;
        overflow-x: auto;
    }
    .content-area-md {
        max-height: 56vh;
        overflow-y: auto;
        overflow-x: auto;
    }
    /* .content-area-lg {
                max-height: 60vh;
                overflow-y: scroll;
             } */
    /* .my-fa-refresh {
        background: url("../images/refresh.svg");
    }*/
    /* .my-col {      
        width: 100px;
        max-width: 100px;  
    } */
}

.my-col {
    width: 100px !important;
    max-width: 100px !important;
    padding-right: 1px;
    padding-left: 1px;
    margin-right: 2px !important;
}

.total label {
    color: #dd4b39;
}

.my-bold {
    font-weight: bold;
}

.my-big-font {
    font-weight: bold;
    font-size: larger;
}

.my-required {
    color: #dd4b39;
    font-size: large;
}
.visually-hidden{
    display: none;
}
/* ---------------------------------------------------------------------------
   Shell stacking order.

   Three places used to fight over the sidebar's z-index: the template's own
   `.app-sidebar{z-index:11}` / `.closed-sidebar .app-sidebar{z-index:13}`, a
   hand-added `.app-theme-white .app-sidebar{z-index:1}` appended to main.css,
   and an inline `style="z-index:9"` on the sidebar element itself. The inline
   style won everything, which pinned the sidebar below the fixed header (the
   effect both hand-fixes were after — otherwise the sidebar's transparent
   `padding-top:60px` strip covers the header's logo pane) but also killed the
   collapsed sidebar's `z-index:13`. A collapsed sidebar hover-expanding back
   to 280px therefore rendered *underneath* any page content sitting at
   z-index 10 or above.

   Both hand-fixes are gone; the order is stated once, here, instead:
     header (20) > collapsed sidebar on hover (13) > sidebar (11) > content.
   20 keeps the header over the sidebar's top strip while staying far below
   Bootstrap's dropdown/modal layers (1000+), which must still cover it.
   --------------------------------------------------------------------------- */
.app-container .app-sidebar {
    z-index: 11;
}

.app-container.closed-sidebar .app-sidebar {
    z-index: 13;
}

.app-container .app-header {
    z-index: 20;
}


/* ---------------------------------------------------------------------------
   Collapsed sidebar: no hover-expand.

   The template expands an 80px collapsed sidebar back to 280px on hover, and
   draws it OVER the page — the content keeps its 80px padding and does not move.
   So moving the pointer anywhere near the left edge covered the filter row and
   the first column of whatever table was open. That is the "sidebar overlaps
   the page" everyone was hitting; it is not a rendering fault, it is the
   template's hover behaviour meeting a real screen with real content on it.

   Collapsed now means collapsed. The hamburger is the way back — one
   deliberate click, and (see LayoutService) the choice is remembered.

   Every declaration below simply pins the :hover state to the collapsed state.
   Dropping the hover rules from main.css instead would be smaller, but this
   keeps the vendor stylesheet untouched and the reasoning in one place.
   --------------------------------------------------------------------------- */
.app-container.closed-sidebar .app-sidebar:hover {
    width: 80px !important;
    min-width: 80px !important;
    flex: 0 0 80px !important;
}

.app-container.closed-sidebar .app-sidebar:hover .app-sidebar__inner .app-sidebar__heading {
    text-indent: -999em;
}

.app-container.closed-sidebar .app-sidebar:hover .app-sidebar__inner .app-sidebar__heading::before {
    display: block;
}

.app-container.closed-sidebar .app-sidebar:hover .app-sidebar__inner ul::before {
    display: none;
}

.app-container.closed-sidebar .app-sidebar:hover .app-sidebar__inner ul li a {
    text-indent: -99rem;
    padding: 0;
}

.app-container.closed-sidebar .app-sidebar:hover .app-sidebar__inner .metismenu-icon {
    text-indent: 0;
    left: 50%;
    margin-left: -17px;
}

.app-container.closed-sidebar .app-sidebar:hover .app-sidebar__inner .metismenu-state-icon {
    visibility: hidden;
}

/* The open group's links are height:0 when collapsed, but keep a live
   line-height and visible overflow — so their text still painted, on top of
   the icons below it. Only text-indent was hiding them. Belt and braces. */
.app-container.closed-sidebar .app-sidebar .app-sidebar__inner ul.mm-show > li > a,
.app-container.closed-sidebar .app-sidebar:hover .app-sidebar__inner ul.mm-show > li > a {
    height: 0;
    overflow: hidden;
}

/* Keep the scroll container in one mode; the template swapped it between
   static/auto and absolute/hidden on hover, which left perfect-scrollbar's
   cached geometry describing the other one. */
.app-container.closed-sidebar:not(.sidebar-mobile-open) .app-sidebar:hover .scrollbar-sidebar {
    position: static;
    height: auto;
    overflow: initial !important;
}