_overrides.scss

.layout-wrapper.layout-static.layout-static-sidebar-inactive ul li a span{
    display: none;
    // height: 0px;
}

.layout-wrapper.layout-static.layout-static-sidebar-inactive ul li a {
    height: auto;
}
.layout-wrapper.layout-static.layout-static-sidebar-inactive  {
    .layout-profile img{
        width: 30px;
        margin: 0px;
       }
   .layout-profile p{
       display: none;
   }
   .layout-logo{
       display: none;
   }
  
   .layout-sidebar-dark .layout-menu li a    {
    border-top: none;
   }
}
.ag-root-wrapper{
    /*
        calendar is overlaped by AG-grid table, so table props update to show calendar
    */
    overflow: inherit;
}
.tmss-table {
 overflow:auto;
 min-height: 400px;
  // since calendar getting inserted to table, because of above overflow, not getting visible
   // so its hacky one based on calendar height
  // padding-top: 350px;
 //  margin-top: -350px;
}
.tmss-table .p-datepicker table td {
    overflow-wrap: unset;
}
.tmss-table .p-calendar .p-calendar-w-btn .p-datepicker-trigger .p-button {
    right: 0;
}
 
.table-filter{
    position: relative;
}
.tb-cal-reset {
    position: absolute;
    right: 40px;
    top: 3px;
}
.table-reset {
    position: absolute;
    right: 8px;
    top: 3px;
}
.table-slider {
    margin-top: 10px;
    margin-bottom: 10px;
}

.table-filter span {
    // margin-right: 20px;
    width: 100%;
}
.table-filter span input{
    width: 70%;
    height: 25px;
     
}
.viewtable input{
    border-radius: 3px;
    border-color:lightgray;
    border-width: thin;
    border: 1px solid lightgray;
}
.field-error {
    border-color: red !important;
    border: 1px solid red !important;
    box-shadow: 0 0 0 0.2px red !important;
    outline: red;
}

 
.disable-action {
    pointer-events: none;
    opacity: 0.5;
}
.nav-btn {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    :focus {
        background-color: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    :hover {
        background-color: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    span {
        display: none !important;
    }
}
.disable-field {
    pointer-events: none;
}
.hide {
    display: none !important;
}
.grouping {
    padding: 0 15px;
}
.grouping fieldset {
    border-width: 1px;
    border-style: double;
    border-color: #ccc;
    border-image: initial;
    padding: 10px;
    width: 100%;
}
.grouping legend {
    width: auto;
}

.comments{
    margin: 90px;
    position: absolute;
    margin-left: 15px;
}
.qaButton{
    margin-left: 0;
    position: relative;
    top: 350px;
}
.plots{
    padding-left: 2px;
}
.list-stations-summary {
    max-height: 200px;
    overflow: auto;
}
.block-list {
    > a {
        display: block;
    }
}
.se-resizing-bar .se-navigation.sun-editor-common {
    display: none;
}
.se-component.se-image-container {
    img {
        width: 100%;
    }
}
.p-button.tooltip-wrapper {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    background-color: transparent;
    box-shadow: none;
    font-size: 1rem;
    text-align: left;
    color: #000;
    .p-button-text.p-c{
        display: none;
    }
}
.p-button.tooltip-wrapper:enabled:hover {
    background-color: transparent;
    color: #000;
    border: none;
}

.overlay-panel-header {
    font-size: 14px;
    font-weight: 600;
    color: #004B93;
    text-align: center;
}
.td_pre {
    white-space: pre;
}
.p-ingest-grid{
    position: absolute;
    right: 80px;
}
.capitalize {
    text-transform: capitalize;
} 
.p-growl {
    z-index: 3000 !important;
    width: 33%;
    margin-top: 2em;
}
.viewtable .p-hidden-accessible {
    position: relative;
}

.data-product {
    label {
        display: block;
    }
}

/**
In Excel View the for Accordion  background color override
*/
.p-accordion .p-accordion-header:not(.p-disabled).p-highlight a {
    background-color: lightgray !important;
    border: 1px solid gray !important;
}
.p-accordion .p-accordion-header:not(.p-disabled).p-highlight span {
    color: black;
}
.p-accordion .p-accordion-header:not(.p-disabled).p-highlight a .p-accordion-toggle-icon {
    color: black;
}

/**
 In Custom Dialog - to the message section
 */
.p-dialog-content {
    min-height: 7em;
    align-items: center;
    // display: flex !important;
}

.p-dialog-content .fa-calendar {
    color:#005b9f;
    font-size: 20px;
}

.p-dialog-content .flatpickr-range-filter .fa-calendar {
    color:#ffffff;
    font-size: 18px;
}

.p-dialog-content .fa-times {
    color:#005b9f;
    font-size: 20px;
}

.content_dlg .p-dialog-content {
    align-items: start;
}
.p-grid {
    width: -webkit-fill-available;
}
.dialog-btn {
    height: 32px;
}
.inputmask {
    height: 35px;
    width: 100px;
    text-align: left;
    border-color: transparent !important;
}

.p-tabview-title {
    display: inline !important;
}

.layout-sidebar {
    overflow-y: unset;
}

/**
    Override the Primereact MultiSelect Dropdown
    Begin
*/
.p-multiselect-close {
    left: 110%;
}
.p-multiselect-panel {
    min-width: 15em !important;
}
.p-multiselect .p-multiselect-label {
    padding: 0em .2em 0em .2em;
}
.p-highlight label {
    color: #ffffff !important;
}
.pi-search {
    right: -0.5em !important;
}
/**    End  */
/** Below classes for react-tool in create and edit page in project & SU for non primereact input component */
.__react_component_tooltip.place-left {
    font-size: 14px;
    width: 170px;
}
.__react_component_tooltip.place-left {
    padding-left: 10px;
    background-color: black;
    margin-left: -3px;
} 
/**
    css used in Growl for service side error handling
**/
.show_error {
    margin-left: 67em;
    height: auto !important;
}
.show_error_details {
    max-height: 16em;
    overflow: auto;
    padding: 5px;
    background-color: white;
    overflow-wrap: anywhere;
    white-space: break-spaces;
    font-family: initial;
}
.show_error_hide {   
    margin-top: 1em;
    margin-bottom: 1em;
}

.show_error_hide .p-button:focus {
    box-shadow: none;
}

/**
    Below classes for JSON Editor- Begin
*/
.je-object__container .row {
    margin-left: 2em !important;
    max-width: 100% !important;
}
.card-title {
    height: 5px !important;
}

h3 + span + div + p {
    margin-left: 2.75em;
    margin-bottom: -0.25em;
    text-transform: capitalize;
}
h3 + div + p {
    margin-bottom: 0rem;
    text-transform: capitalize;
}
.json-editor-btntype-toggle {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
    height: 20px !important;
}
.btn-sm, .btn-group-sm > .btn {
    padding-top: 0rem !important;
    padding-right: 0.5rem !important;
    padding-bottom: 0rem !important;
    padding-left: 0.5rem !important;
}
.bg-light {
    margin-top: 1px;
}
.btn-secondary {
    background-color: #007ad9 !important;
    border-color: #007ad9 !important;
}
.card, .card-body, .mb-3, .bg-light {
    margin-left: 1em;
}
.border-style {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 13px;
    width: 98.5%;
    border-width: 1px;
    border-style: double;
    border-color: #ccc;
    border-image: initial;
}
#editor_holder label {
    color: #004B93 !important;
}
/**
 - JSON Editor - End
 */

 // Show title case in dropdown value and option in System Event page
 .systemEvent{
    text-transform:capitalize;
 }
 
 .p-float-label .fas {
    color:#005b9f;
    font-size: 20px;
 }

 .p-float-label .fa-calendar {
    color:#ffffff;
    font-size: 13px;
 }

.chips .p-chips-token {
    margin-bottom: 0.25em !important;
    width: fit-content;
}
.chips .p-inputtext {
    // display: none;
}
.chipsview .p-chips-token-icon {
    display: none;
}
.chips-fixed-width li {
    margin-left: -4px;
    width: 100% !important;
}
.affectedTask .p-dialog-content {
    display: flow-root !important;
}
.affectedTask .pi-search {
    right: unset !important;
}

.p-checkbox-disabled {
    cursor: default !important;
}
// - hide search icon in multi select drop down
.p-multiselect-filter-icon {
    display: none;
 }
// - multiselect input field width
.p-multiselect-filter-container input {
     width: 130% !important;
}

.p-button.p-button-icon-only {
    padding-top: 0px;
    padding-bottom: 0px;
    line-height: 2;
}

.timeline-filters .p-button-icon-only {
    padding-top: 0.26rem;
    padding-bottom: 0.26rem;
    width: 2rem;
}

.report-toolbar .p-button-icon-only {
    // padding-top: 0.26rem;
    // padding-bottom: 0.26rem;
    width: 2rem;
}

.p-inputtext {
    font-size: 14px;
}

.p-paginator .p-dropdown {
    height: 2rem;
    border: none;
}

.p-dropdown-filter {
    width: 90%;
}

.p-component {
    font-size: 14px;
}

.p-checkbox-label, .p-radiobutton-label {
    margin-bottom: 0px;
    padding-left: 5px;
}

.p-steps-number, .p-steps-title {
    display: flex !important;
    margin-top: 15px;
}

.p-float-label label {
    margin-top: 0px;
}

.p-button-rounded {
    border-radius: 15px;
    padding: 0px;
}

.p-inputswitch .p-inputswitch-slider {
    height: 1.5rem;
    width: 3rem;
}

.p-datepicker .p-datepicker-header {
    padding: 0px;
}

.p-datepicker table td > span {
    width: 1.75rem;
    height: 1.75rem;
}

.p-datepicker-other-month {
    color: lightgrey;
}

.main-content .p-grid .p-checkbox-box span {
    margin-bottom: 0px;
}

.p-toast-message-text {
    width: 100%;
}

.p-picklist-source-controls {
    display: none !important;
}
.p-picklist-target-controls {
    display: none !important;
}
.task-category {
    font-weight: bold;
    color: white;
    background-color: #007ad9;
    border-radius: 5px;
    padding: 5px;
}

.task-item {
    margin-top: 3px;
}

.p-picklist-buttons-cell {
    margin-top: 2em;
}

.p-datatable-resizable > .p-datatable-wrapper {
    overflow-x: visible;
}

.p-datatable-resizable .p-datatable-thead > tr > th {
    white-space: break-spaces;
}

.act-btn-grp{
    margin-top: 0.5em !important;
    margin-left: 0.25em;
}

.act-btn-disable {
    cursor: default;
}