/*
* demo.css
* File include item demo only specific css only
******************************************************************************/

.menu .app-brand.demo {
  height: 64px;
}

.app-brand-logo.demo svg {
  width: 30px;
  height: 24px;
}

.app-brand-text.demo {
  font-size: 1.25rem;
}

.authentication-wrapper .app-brand-text.demo {
  font-size: 1.5rem;
  text-transform: capitalize;
}

/* ! For .layout-navbar-fixed added fix padding top to .layout-page */
/* Default navbar */
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
  padding-top: 64px !important;
}

/* Navbar page z-index issue solution */
.content-wrapper .navbar {
  z-index: auto;
}

/*
* Content
******************************************************************************/

.demo-blocks > * {
  display: block !important;
}

.demo-inline-spacing > * {
  margin: 1rem 0.375rem 0 0 !important;
}

/* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */
.demo-vertical-spacing > * {
  margin-top: 1.25rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-lg > * {
  margin-top: 1.875rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-lg.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-xl > * {
  margin-top: 5rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-xl.demo-only-element > :first-child {
  margin-top: 0 !important;
}

/* Dropdown buttons going out of small screens */
@media (max-width: 576px) {
  #dropdown-variation-demo .btn-group .text-truncate {
    width: 300px;
    position: relative;
  }
  #dropdown-variation-demo .btn-group .text-truncate::after {
    position: absolute;
    top: 45%;
    right: 0.65rem;
  }
  #layout-navbar{
    margin: 0 auto;
    width: 95%;
  }
  .breadcrumb{
      flex-direction:column;
  }
  .breadcrumb .breadcrumb-item{
      padding-left:0 !important;
  }
}
/*
* Layout demo
******************************************************************************/

.layout-demo-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: 1.25rem;
}
.layout-demo-placeholder img {
  width: 900px;
}
.layout-demo-info {
  text-align: center;
  margin-top: 1.25rem;
}

#layout-navbar{
    padding : 0 15px;
}

#layout-menu, #layout-navbar{
    background:var(--nav-sidebar-background);
}

/* 13-8 css start */

 :root {
        /* Primary Colors (Inspired by ESAPET Logo) */
        --color-primary: #024543;
        --color-accent: #04bba1;
        --color-accent-light: #e6f9f5;
    
        /* Neutral Palette for a Clean & Modern UI */
        --color-text-primary: #2a3342;
        --color-text-secondary: #5a697d;
        --color-surface: #ffffff;
        --color-border: #dfe7ef;
        --color-page-bg: #f8f9fa;
    
        /* Semantic Colors */
        --color-danger: #e53935;
        --color-success: #22c55e;
        --color-warning: #f59e0b;
    }
    .badge, .status-badge, .ordertype-badge {
        display: inline-flex;
        padding: 0.4em 0.9em;
        font-size: 0.75rem;
        font-weight: 600;
        border-radius: 9999px;
        color: white;
        white-space: nowrap;
    }
    /* Your Preserved Badge Color Classes */
    .status-requested, .badge-info, .btn-info { background-color: #0ea5e9 !important;  height: 28px !important; align-items: center !important; }
    .status-assigned, .badge-pink, .btn-pink { background-color: #ec4899 !important;  height: 28px !important; align-items: center !important; }
    .status-approved, .badge-success, .btn-success { background-color: var(--color-success) !important;  height: 28px !important; align-items: center !important; }
    .ordertype-new-order, .ordertype-new, .badge-warning, .btn-warning , .status-refund_approved { background-color: var(--color-warning) !important;  height: 28px !important; align-items: center !important; }
    .status-refund_denied, .btn-danger, .badge-danger { background-color: var(--color-danger) !important;  height: 28px !important; align-items: center !important; }
    .ordertype-upgrade-order, .status-refund_requested { background-color: #8b5cf6 !important;  height: 28px !important; align-items: center !important; }
    .ordertype-renewal-order, .ordertype-renewal { background-color: #14b8a6 !important;  height: 28px !important; align-items: center !important; }
    
    #loader-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /*background-color: rgba(255, 255, 255, 0.8);*/
        background-color: rgb(105 116 109 / 34%);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 9999;
    }
   
    .field-container{
        padding: 4px;
        margin-bottom: 10px;
    }
    /* 13-8 css end */


/*
NEW CSS
*/

#layout-navbar {
    position: sticky;
    top: 0;
}

.card .card-header,
.modal-header{
    background: linear-gradient(170deg, var(--bs-primary) 0%, color-mix(in sRGB, var(--bs-primary) 52%, var(--bs-white)) 100%);
    box-shadow: var(--bs-box-shadow-sm);
}

.card .card-header .card-title,
.modal-header h5,
.modal-header button{
    color: var(--bs-menu-active-color);
}

.modal-header button{
    --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e");
}

.modal-header{
    padding: 15px 20px !important;
}

.data-table .badge{
    display:block;
    max-width: 180px;
    width: 100%;
}

/*.table-responsive{min-height:500px;}*/

.table-border-bottom-0 tr td, .table-border-bottom-0 tr th { word-break: break-all; }
.layout-navbar .navbar-nav-right { flex-basis: 43%; }
.card-body .border-bottom:last-child { border-bottom:0 !important; }

.action_btns{
    border: 0px !important;
    border-radius: 4px !important;
    color: white !important;
    padding: 5px 8px !important;
    text-align: center !important;
}
.action_btns i { margin:0 !important; }
.pagination { padding:0 !important;flex-wrap: wrap; }
.data-table-footer {
    padding: 2rem 1rem;
}
input[type="radio"]:checked {
    accent-color: #065c59;
}

.showmessage-main .showMessage-container{
    margin-left: 25px;
    margin-top: 10px;
    min-width: 500px;
    z-index: 99999;
}

/*Renew Model css Start*/
.renewModel_form .form-group .btn-group-toggle label input { margin-right:10px; }
.renewModel_form .form-group .btn-outline-primary input { margin-right:10px }
 
 
.renewModel_form .form-group label.btn { border:1px solid var(--color-border); color: #788899; }
.renewModel_form .form-group input[type="checkbox"]:checked + label {
	border-color: var(--color-primary);
}

.renewModel_form .submit_btn { width: auto !important; }

.renewModel_form .form-group label.btn {
        border: 1px solid var(--color-border);
        min-width: 150px; 
        justify-content: start;
        align-items: center;
        max-width: 230px;
        width: 100%;

}

.renewModel_form .form-group label:has(input:checked) {
	border-color: #024543 !important;
	color: #024543 !important;
}
/*Renew Model css End*/

.data-table-form{
    min-height: 500px;
}



/*Sidebar Update CSS Start */

.layout-menu-collapsed .layout-menu-toggle .menu-toggle-icon::before {
  mask-image: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10m0-2a8 8 0 1 0 0-16a8 8 0 0 0 0 16'/%3E%3C/svg%3E);
}
.sidebar-close-logo {
  display: none;
}
.layout-wrapper.layout-menu-collapsed .sidebar-open-logo {
  display: none;
}
.layout-wrapper.layout-menu-collapsed .sidebar-close-logo {
    display: block;
    width: 30px;
    height: 40px;
    object-fit: contain;
    margin-right: 25px;
}
.layout-wrapper.layout-menu-hover .sidebar-open-logo {
  display: block;
}
.layout-wrapper.layout-menu-hover .sidebar-close-logo {
  display: none;
}
@media (min-width: 1200px) {
  .layout-wrapper.layout-menu-collapsed .layout-page {
    padding-inline-start: var(--bs-menu-collapsed-width);
  }
}
@media(max-width: 1199px){
  .layout-wrapper.layout-menu-collapsed .sidebar-open-logo {
    display: block !important;
  }
  .layout-wrapper.layout-menu-collapsed .sidebar-close-logo {
    display: none;
  }
}
/*Sidebar Update CSS End*/


@media (max-width: 768px) {
    .order_activity_main .tab-content{
        padding-right: 0 !important;
        padding-top: 10px;
    }
    .order_activity_main .activity-d-flex{
        flex-direction: column !important;
        gap: 15px;
    }
    .order_activity_main .activity_line{
        display: none;
    }
    .order_activity_main .activity_action_main{
        display: flex;
        gap: 10px;
        align-items: baseline !important;
    }
    .order_activity_main .activity_action_main .activity_badge{
        margin: 0px !important;
        height: 25px !important;
        width: 25px !important;
        line-height: 25px !important;
        font-size: 14px;
    }
    .order_activity_main .activity_action_main .badge{
        padding: 2px 10px;
        font-size: 11px;
        margin-bottom: 2px !important;
        margin-top: 0px !important;
    }
    .order_activity_main .activity_action_main .activity_action{
        text-align: left;
    }
    .order_activity_main button.nav-link{
        padding: 10px 10px 10px 0px;
    }
    .showmessage-main .showMessage-container {
        min-width: 90%;
    }
} 
@media (max-width: 576px) {
    .breadcrumb { flex-flow: row wrap; }
    
    .pagination{
        justify-content: center !important;
    }
    
    .pagination .page-item.first,
    .pagination .page-item.last{
        display:none;
    }
     
}