/* @font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/josefinsans/v25/Qw3PZQNVED7rKGKxtqIqX5E-AVSJrOCfjY46_DjQbMlhLzTs.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
} */

/* latin-ext */
/* @font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/josefinsans/v25/Qw3PZQNVED7rKGKxtqIqX5E-AVSJrOCfjY46_DjQbMhhLzTs.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
} */

/* latin */
/* @font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/josefinsans/v25/Qw3PZQNVED7rKGKxtqIqX5E-AVSJrOCfjY46_DjQbMZhLw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
} */

.navbar {
  padding: 15px 10px;
  padding-left: 0px;
  padding-bottom: 0px;
  border: none;
  border-radius: 0;
  margin-bottom: 10px;
}

.navbar-light .navbar-nav .nav-link {
  color: var(--top-navbar-link) !important;
  padding-left: 32px !important;
  /*     
  position: absolute;
  width: 151px;
  height: 19px;
  left: 271px;
  top: 25px;

   */

  font-style: normal;
  font-weight: 600;
  font-size: 14px !important;
  line-height: 24px;
  white-space: nowrap;
}

.navbar-light .navbar-nav .nav-link.active {
  /* color: #00677f !important; */
  color: var(--top-navbar-link-active) !important;
}

/* .navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link {
    color: #00677f ;
    
} */
/* .navbar-light .navbar-nav .active>.nav-link{
    /* color:white; 
} */

.nav-tabs {
  border-bottom: 1px solid #00677f;
  background: var(--nav-tabs-bg-color);
  color: var(--nav-tabs-color);
  border-radius: 0.5rem;
}

.bgWhite {
  background-color: #fff;
}

.navbar-btn {
  box-shadow: none;
  outline: none !important;
  border: none;
  opacity: 1;
}

/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */

.sb-wrapper {
  display: flex;
  width: 100%;
  align-items: stretch;
}

#sidebar {
  min-width: 250px;
  max-width: 250px;
  background: #fff;
  color: #000000;
  border-right: 2px solid #ddd;
  /* box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); */
  transition: all 0.3s;
  /* margin-left: -250px; */
  display: none;
  /* overflow: scroll; */
}

#sidebar.active {
  margin-left: 0px;
  display: block;
}

#sidebar .sidebar-header {
  padding: 0px 16px;
  background: #fff;
  color: black;
  font-size: medium;
}

#sidebar ul.components {
  padding: 20px 0;
  border-bottom: 1px solid #ddd;
  text-decoration-line: none;
  text-align: left;
  background-color: var(--sidebar-ul-bg-col);
}

#sidebar ul p {
  color: #fff;
  padding: 10px;
  background-color: var(--sidebar-ul-head);
}

#sidebar ul li a {
  padding: 5px;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  display: block;
  color: var(--sidebar-link-col);
}

ul.sidebarequipmentgrplist li a:hover {
  color: var(--sidebar-li-color);
  background: var(--Config-dropDown-hv-bg);
  text-decoration: none;
}

.sidebarheaderbg {
  background-color: var(--sidebar-ul-head);
  border-radius: 4px;

  font-weight: 900;
}

#sidebar ul li a.sidebarheaderbg {
  color: var(--sidebar-head-font-color);
}

#sidebar ul li.active > a,
ul.sidebarequipmentgrplist a[aria-expanded="true"] {
  color: var(--sidebar-act-link-color);
  background: var(--sidebar-header-active);
  text-decoration: none;
  border-radius: 4%;
}

/* #sidebar ul p{
  color: var(--sidebar-act-link-color);
} */

a[data-toggle="collapse"] {
  position: relative;
}

.dropdown-toggle::after {
  display: block;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

ul ul a {
  font-size: 0.9em !important;
  /* padding-left: 30px !important; */
  /* background: #6d7fcc; */
}

ul.CTAs {
  padding: 20px;
}

ul.CTAs a {
  text-align: center;
  font-size: 0.9em !important;
  display: block;
  border-radius: 5px;
  margin-bottom: 5px;
}

a.download {
  background: #fff;
  color: #7386d5;
}

a.article,
a.article:hover {
  background: #6d7fcc !important;
  color: #fff !important;
}

/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */
#content {
  width: 100%;
  min-height: 100vh;
  padding: 0px 20px 20px 20px;
  overflow: auto !important;
  max-height: 100vh;
  background: #fbfcfe;
  /* filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.15)); */
  height: 100%;
  width: 100%;
  padding: 20px;
}

.equipment-group-select {
  background-color: #e3effb;
}

.attribute-selector-wrapper {
  padding: 0;
}

.MuiButtonBase-root.btn-download-preview {
  margin-right: 10px;
  background-color: #e3effb !important;
  color: #12467b !important;
  text-transform: capitalize;
}

.btn-save {
  background-color: #e3fbe3 !important;
  color: #0a470a !important;
  text-transform: capitalize !important;
}

#sidebarCollapse {
  width: 40px;
  height: 30px;
  background: var(--sidebar-coll-btn-bg);
  cursor: pointer;
}

#sidebarCollapse span {
  width: 80%;
  height: 2px;
  margin: 0 auto;
  display: block;
  background: white;
  /* transition: all 0.3s; */
  transition: all 0.8s cubic-bezier(0.81, -0.33, 0.345, 1.375);
  transition-delay: 0.2s;
}

#sidebarCollapse span:first-of-type {
  transform: rotate(45deg) translate(2px, 2px);
}

#sidebarCollapse span:nth-of-type(2) {
  opacity: 0;
}

#sidebarCollapse span:last-of-type {
  transform: rotate(-45deg) translate(1px, -1px);
}

#sidebarCollapse.active span {
  transform: none;
  opacity: 1;
  margin: 5px auto;
}

/* #sidebarCollapse.active  {
    opacity: 1;
    background: #f5f5f5;
    border-radius: 5px;
} */

.circle {
  background: #e6e6e6;
  opacity: 0.2;
  width: 3em;
  height: 3em;
  -moz-border-radius: 2em;
  -webkit-border-radius: 2em;
  border-radius: 2em;
}

.bottomBorder {
  border-bottom: 2px solid #ddd;
}

/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */
/* @media (max-width: 768px), (max-width: 414px) {
    #sidebar {
        margin-left: -250px;
    }
    #sidebar.active {
        margin-left: 0px;
    } 
} */
@media (min-width: 1616px) {
  #sidebar {
    min-height: 92vh;
    max-height: 92vh;
  }
}

@media (min-width: 1616px) {
  #content {
    min-height: 93vh;
    max-height: 93vh;
  }
}

/* ---------------------------------------------------
    fied Table
----------------------------------------------------- */
.mainGridTable {
  color: var(--mainGridtable-cont-col) !important;
}

.thead-black {
  background-color: black;
  color: white;
  border-color: black;
}

.table-sticky > thead > tr > th,
.table-sticky > thead > tr > td {
  top: 0px;
  position: sticky;
  background-color: var(--table--head-bg-color);
  color: var(--table--head--font-color);
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  border-radius: 3px;
}

table thead tr th {
  background-color: var(--table--head-bg-color);
  color: var(--table--head--font-color);
  white-space: nowrap;
}

/* table thead tr td{
  border-left: 1px solid var();
} */

.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td {
  border: 1px solid #ddd;
}

/* .table-height {
    height: 500px;
    display: block;
    overflow-x: auto;
    overflow-y: auto;
    width: 100%;
} */
/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */

.panel-height {
  min-height: 60vh !important;
  max-height: 80vh !important;
  height: auto !important;
}

.table-height {
  min-height: 59vh !important;
  max-height: 59vh !important;
  height: auto !important;
}

.min-panel {
  min-height: 30vh !important;
  max-height: 35vh !important;
  height: auto !important;
}

.min-panel-dropzone {
  min-height: 40vh !important;
  max-height: 45vh !important;
  height: auto !important;
}

@media screen and (max-width: 1170px) {
  .panel-height {
    max-height: 70vh !important;
  }
}

@media (max-width: 768px) {
  .table-height {
    min-height: 67vh !important;
    max-height: 67vh !important;
    height: auto !important;
  }
}

@media (min-width: 769px) and (max-width: 1616px) {
  .table-height {
    min-height: 68vh !important;
    max-height: 68vh !important;
    height: auto !important;
  }
}

@media (min-width: 1880px) {
  .table-height {
    min-height: 69vh !important;
    max-height: 69vh !important;
    height: auto !important;
  }
}

/* @media screen and (max-width:320px) {
    .panel-height {
        height: 300px;
        overflow-y: auto;
    }
}

@media screen and (min-width:321px) and (max-width:669px) {
    .panel-height {
        height: 400px;
        overflow-y: auto;
    }
}
@media screen and (min-width:670px) and (max-width:938px) {
    .panel-height {
        height: 450px;
        overflow-y: auto;
    }
}
@media screen and (min-width:939px) and (max-width:1170px) {
    .panel-height {
        height: 480px;
        overflow-y: auto;
    }
}
@media screen and (min-width:1171px) and (max-width:1616px) {
    .panel-height {
        height: 580px;
        overflow-y: auto;
    }
}
@media screen and (min-width:1617px) {
    .panel-height {
        height: 750px;
        overflow-y: auto;
    }
}




@media screen and (max-width:320px) {
    .min-panel {
        min-height: 50px;
        max-height: 80px;
        overflow-y: auto;
    }
}

@media screen and (min-width:321px) and (max-width:669px) {
    .min-panel {
        min-height: 60px;
        max-height: 90px;
        overflow-y: auto;
    }
}
@media screen and (min-width:670px) and (max-width:938px) {
    .min-panel {
        min-height: 80px;
        max-height: 110px;
        overflow-y: auto;
    }
}
@media screen and (min-width:939px) and (max-width:1170px) {
    .min-panel {
        min-height: 90px;
        max-height: 120px;
        overflow-y: auto;
    }
}
@media screen and (min-width:1171px) and (max-width:1616px) {
    .min-panel {
        min-height: 130px;
        max-height: 180px;
        overflow-y: auto;
    }
}
@media screen and (min-width:1617px) {
    .min-panel {
       min-height: 200px;
       max-height: 280px;
       overflow-y: auto;
    }
}




@media screen and (max-width:320px) {
    .table-height {
        height: 300px;
        display: block;
        overflow: scroll;
        width: 100%;
    }
}

@media screen and (min-width:321px) and (max-width:669px) {
    .table-height {
        height: 400px;
        display: block;
        overflow: scroll;
        width: 100%;
    }
}
@media screen and (min-width:670px) and (max-width:938px) {
    .table-height {
        height: 450px;
        display: block;
        overflow: scroll;
        width: 100%;
    }
}
@media screen and (min-width:939px) and (max-width:1170px) {
    .table-height {
        height: 480px;
        display: block;
        overflow: scroll;
        width: 100%;
    }
}
@media screen and (min-width:1171px) and (max-width:1616px) {
    .table-height {
        height: 520px;
        display: block;
        overflow: scroll;
        width: 100%;
    }
}
@media screen and (min-width:1617px) {
    .table-height {
        height: 680px;
        display: block;
        overflow: scroll;
        width: 100%;
    }
}
 */

.filter-panel {
  min-height: 56vh !important;
  max-height: 63vh !important;
  height: auto !important;
  background-color: #eee;
  display: block;
  z-index: 2;
  position: absolute;
  right: 20px;
  /* padding-top: 15px; */
  min-width: 643px;
  margin-top: 64px;
  background-color: var(--search-bg-color);
  /* padding: 33px 5px 10px 22px ; */
  /* overflow: auto; */
}

.searchFielDCont {
  min-height: 42vh !important;
  max-height: 42vh !important;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: "15px";
}

@media (max-width: 1616px) {
  .searchFielDCont {
    min-height: 42vh !important;
    max-height: 42vh !important;
  }
}

@media (min-width: 1616px) {
  .searchFielDCont {
    min-height: 53vh !important;
    max-height: 53vh !important;
  }
}

@media (max-width: 1616px) {
  .filter-panel {
    min-height: 56vh !important;
    max-height: 63vh !important;
  }
}

@media (min-width: 1616px) {
  .filter-panel {
    min-height: 76vh !important;
    max-height: 76vh !important;
  }
}

.filter-input {
  padding: 5px;
  margin: 5px 0;
  border-top-style: hidden;
  border-right-style: hidden;
  border-left-style: hidden;
  outline: none;
}

.filter-input:focus,
.filter-input:active {
  border-color: transparent;
  border-bottom: 2px solid rgb(0, 103, 127);
}

.has-search .form-control {
  padding-left: 2.375rem;
}

.seachbox {
  display: block;
}

.searchbox-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 8px;
  flex-wrap: wrap-reverse;
  width: 100%;
  min-height: 56px;
}

.searchbtn-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 8px;
  flex-wrap: wrap-reverse;
  width: 100%;
  min-height: 56px;
}

.paginator {
  display: block;
  min-height: 5vh !important;
  border: 1px solid var(--paginator-border-color);
}

.paginator-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  flex-wrap: wrap-reverse;
  width: 100%;
  min-height: 34px;
  background-color: var(--paginator-bg-color);
  color: var(--paginator-font-color);
}

.paginator-page-size {
  display: flex;
  align-items: baseline;
  margin-right: 8px;
}

.paginator-page-size:focus {
  border-color: white;
}

.paginator-page-size-label {
  margin: 0 4px;
}

.form-field {
  display: inline-block;
  position: relative;
  text-align: left;
}

.paginator-page-size-select {
  margin: 6px 4px 0 4px;
  width: 60px;
}

.paginator-range-actions {
  display: flex;
  align-items: center;
}

.paginator-range-actionse:focus {
  border-color: white;
}

.paginator-range-label {
  margin: 0 32px 0 24px;
}

.paginator .paginator-page-size .select-trigger {
  color: rgba(0, 0, 0, 0.54);
}

.paginator-outer-container {
  display: flex;
}

/*spinner*/
.Spinner {
  position: fixed;
  z-index: 99999;
  height: 2em;
  width: 2em;
  overflow: visible;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

/* Transparent Overlay */
.Spinner:before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}

#MsgModalCenter:before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}

.sub-header {
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  margin-top: 10px;
}

.tab-list {
  border-bottom: 1px solid #ccc;
  padding-left: 0;
}

.tab-list-item {
  display: inline-block;
  list-style: none;
  margin-bottom: -1px;
  padding: 0.5rem 0.75rem;
}

.tab-list-active {
  background-color: white;
  border: solid #ccc;
  border-width: 1px 1px 0 1px;
}

.drag-drop-zone {
  padding: 2rem;
  text-align: center;
  background-color: var(--dropZone-bg-col);
  border: 2px dashed var(--dropZone-bg-col);
  border-radius: 4px;
  /* min-height: 30em; */
}

.drag-drop-zone p {
  color: #fff;
}

.drag-drop-zone.inside-drag-area {
  opacity: 0.7;
}

.dropped-files li {
  color: black;
  padding: 3px;
  text-align: left;
  font-weight: bold;
}

[hidden] {
  display: none !important;
}

.cts-label {
  font-size: 13px;
  color: var(--attributeLabel);
  text-align: left;
}

.placeholders {
  margin-bottom: 30px;
  text-align: center;
}

/* .navbar-nav > li > a::after {
  content: "   ";
}
.navbar-nav > li:first-child > a::before{
  content: "";
  
} */

/**/
/* @media screen and (max-width:320px) {
    #sidebar.active {
        margin-left: -250px;       
    }
}

@media screen and (min-width:321px) and (max-width:669px) {
    #sidebar.active {
        margin-left: -250px;       
    }
}
@media screen and (min-width:670px) and (max-width:938px) {
    #sidebar.active {
        margin-left: -250px;       
    }
}
@media screen and (min-width:939px) and (max-width:1170px) {
    #sidebar.active {
        margin-left: -250px;       
    }
} */
@media screen and (min-width: 1171px) and (max-width: 1616px) {
  #sidebar.active {
    margin-left: 0px;
    display: block;
  }
}

@media screen and (min-width: 1617px) {
  #sidebar.active {
    margin-left: 0px;
    display: block;
  }
}

/***/

@media screen and (max-width: 320px) {
  .drag-drop-zone {
    min-height: 5em;
  }
}

@media screen and (min-width: 321px) and (max-width: 669px) {
  .drag-drop-zone {
    min-height: 10em;
  }
}

@media screen and (min-width: 670px) and (max-width: 938px) {
  .drag-drop-zone {
    min-height: 10em;
  }
}

@media screen and (min-width: 939px) and (max-width: 1170px) {
  .drag-drop-zone {
    min-height: 15em;
  }
}

@media screen and (min-width: 1171px) and (max-width: 1616px) {
  .drag-drop-zone {
    min-height: 12em;
  }
}

@media screen and (min-width: 1617px) {
  .drag-drop-zone {
    min-height: 25em;
  }
}

/***/

@media (max-width: 767px) {
  .navbar-nav > li > a::after {
    content: none;
    padding: 30px;
  }
}

.mygBox {
  position: absolute;
  top: 73px !important;
  left: 25% !important;
  opacity: "1";
  overflow: auto;
}

a:not([href]):not([tabindex]):focus,
a:not([href]):not([tabindex]):hover {
  color: black !important;
}

.selectBox {
  position: relative;
}

.selectBox select {
  width: 100%;
  font-weight: bold;
  border: solid 1px white;
  border-bottom: solid #00677f;
}

.overSelect {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.list-group-item {
  user-select: none;
}

.list-group input[type="checkbox"] {
  display: none;
}

.list-group input[type="checkbox"] + .list-group-item {
  cursor: pointer;
}

.list-group input[type="checkbox"] + .list-group-item:before {
  content: "\2713";
  color: transparent;
  font-weight: bold;
  margin-right: 1em;
}

.list-group input[type="checkbox"]:checked + .list-group-item {
  background-color: #000000;
  color: #fff;
}

.list-group input[type="checkbox"]:checked + .list-group-item:before {
  color: inherit;
}

.customTypeAheadCls .dropdown-menu {
  font-size: inherit;
}

.errorCls {
  color: #dc3545;
}

/* custom css for standard Attribute <<<<<<<<<<Start>>>>>>>>>> */

.modela {
  /* width:max-content */
  min-width: 695px;
}

.my-custom-scrollbar {
  position: relative;
  height: 47vh;
  overflow-y: scroll;
  overflow-x: hidden;
}

.my-custom-panel-position {
  margin: 40%;
  width: 312px;
}

.testModel {
  max-width: 50%;
}

.rpanel {
  min-width: 50%;
  margin-left: 1%;
}

.lpanel {
  min-width: 50%;
}

.li-style {
  margin-left: -13%;
  min-width: fit-content;
}

#rightPanel li:nth-child(odd) {
  background-color: var(--list-odd-bg-color);
}

#rightPanel li:nth-child(even) {
  background-color: var(--list-even-bg-color);
}

#rightPanel .ul-style {
  list-style-type: none;
}

#rightPanel li:hover {
  background-color: var(--list-hover-bg-color);
}

#leftpanel li:nth-child(odd) {
  background-color: var(--list-odd-bg-color);
}

#leftpanel li:nth-child(even) {
  background-color: var(--list-even-bg-color);
}

#leftpanel li:hover {
  background-color: var(--list-hover-bg-color);
}

#selectAttribute h5 {
  margin: 0;
}

#leftpanel li {
  padding-top: 2%;
  padding-bottom: 2%;
  border-top: 1px solid #dee2e6;
}

#rightPanel li {
  margin-bottom: 1%;
  border-top: 1px solid #dee2e6;
}

.rpcheckbox {
}

/* custom css for standard Attribute <<<<<<<<<<end>>>>>>>>>> */

/* media query for standard Attribute <<<<<<<<<<Start>>>>>>>>>> */
@media (max-width: 270px) {
  .rpanel {
    margin-top: 2%;
    margin-left: -13px;
    margin-right: -14px;
  }
}

@media (max-width: 270px) {
  .panelcontainer {
    flex-direction: column;
  }
}

@media (max-width: 320px) {
  .modela {
    min-width: 90%;
  }
}

@media (max-width: 380px) {
  .rpcheckbox {
    flex-direction: column;
  }
}

@media (max-width: 702px) {
  .modela {
    min-width: 90%;
  }
}

@media (min-width: 1616px) {
  .modela {
    min-width: 870px;
    height: 70vh;
  }
}

@media (max-width: 1616px) {
  .modela {
    min-width: 780px;
  }
}

@media (max-width: 702px) {
  #selectAttribute h2 {
    font-size: 12px;
  }
}

@media (max-width: 1100px) {
  .my-custom-scrollbar {
    position: relative;
    height: 43vh;
    overflow-y: scroll;
    overflow-x: hidden;
  }
}

@media (max-width: 710px) {
  .my-custom-scrollbar {
    position: relative;
    height: 37vh;
    overflow-y: scroll;
    overflow-x: hidden;
  }
}

@media (min-width: 1616px) {
  .my-custom-scrollbar {
    position: relative;
    height: 49vh;
    overflow-y: scroll;
    overflow-x: hidden;
  }
}

@media (min-width: 1616px) {
  .rowLiRightPanel {
    margin-left: -12%;
    margin-right: 1%;
  }
}

@media (min-width: 1616px) {
  .rowPadRightPanel {
    padding-left: 3%;
    /* margin-right: 1%; */
  }
}

@media (max-width: 1616px) {
  .rowLiRightPanel {
    margin-left: -12%;
    margin-right: 1%;
  }
}

@media (max-width: 1616px) {
  .rowPadRightPanel {
    padding-left: 3%;
    /* margin-right: 1%; */
  }
}

@media (max-width: 1616px) {
  .rowPadLftPanel {
    padding: 3% 5% 1% 5%;
    /* margin-right: 1%; */
  }
}

@media (min-width: 1616px) {
  .rowPadLftPanel {
    padding: 3% 5% 1% 5%;
    /* margin-right: 1%; */
  }
}

/* media query for standard Attribute <<<<<<<<<<End>>>>>>>>>> */

/* custom css for Question PopOver <<<<<<<<<<Start>>>>>>>>>> */
.modelaPop {
  max-height: 466px;
}

.modelQuesize {
  min-width: 100rem;
  min-height: 50rem;
}

.modelColFieldWidth1 {
  max-width: 66%;
}

.modelColFieldWidth12 {
  max-width: 66%;
}

.modelColFieldWidth2 {
  max-width: 41%;
}

.modelColFieldWidth22 {
  max-width: 41%;
}

.modelRowWidth1 {
  max-width: 50%;
}

.modeldel {
  justify-content: flex-end;
}

.modelRowDir {
  flex-direction: row;
}

.modelRowDir1 {
  flex-direction: row;
}

.modelRowDir2 {
  flex-direction: row;
}

.modelaFormWidth {
  width: 100%;
}

.modelHedWidth {
  max-width: 91%;
}

.paddingModel {
  padding-left: inherit;
  padding-right: inherit;
}

.paddingModel1 {
  padding-left: inherit;
}

.queUl {
  list-style: none;
  margin-left: 0px;
  margin-right: 0px;
  height: 35rem;
}

.quesScroll {
  overflow-y: scroll;
  overflow-x: hidden;
  height: 35rem;
}

.empDiv {
  min-height: 20rem;
}

/* custom css for Question PopOver <<<<<<<<<<end>>>>>>>>>> */

/* media query for Question PopOver <<<<<<<<Start>>>>>>>> */

@media (max-width: 360px) {
  .modelRowDir1 {
    flex-direction: column;
  }
}

@media (max-width: 360px) {
  .modelRowDir2 {
    flex-direction: column;
  }
}

@media (max-width: 393px) {
  .modeldel {
    justify-content: flex-start;
  }
}

@media (max-width: 580px) {
  .modelRowWidth1 {
    max-width: 100%;
  }
}

@media (max-width: 720px) {
  .modelRowWidth1 {
    max-width: 100%;
  }
}

@media (max-width: 720px) {
  .modelHedWidth {
    max-width: 85%;
  }
}

@media (max-width: 720px) {
  .paddingModel1 {
    padding-left: 1.5rem;
  }
}

@media (max-width: 360px) {
  .paddingModel {
    padding-left: 1.5rem;
  }
}

@media (max-width: 990px) {
  .modelQuesize {
    min-width: 70rem;
  }
}

@media (max-width: 720px) {
  .modelRowDir {
    flex-direction: column;
  }
}

@media (max-width: 720px) {
  .modelQuesize {
    min-width: 48rem;
  }
}

@media (max-width: 570px) {
  .modelQuesize {
    min-width: 36rem;
  }
}

@media (max-width: 360px) {
  .modelQuesize {
    min-width: 30rem;
  }
}

@media (max-width: 290px) {
  .modelQuesize {
    min-width: 25rem;
  }
}

@media (max-width: 990px) {
  .modelColFieldWidth1 {
    max-width: 54%;
  }
}

@media (max-width: 720px) {
  .modelColFieldWidth1 {
    max-width: 70%;
  }
}

@media (max-width: 435px) {
  .modelColFieldWidth1 {
    max-width: 61%;
  }
}

@media (max-width: 360px) {
  .modelColFieldWidth1 {
    max-width: 100%;
  }
}

@media (max-width: 360px) {
  .modelColFieldWidth12 {
    max-width: 100%;
  }
}

@media (max-width: 990px) {
  .modelColFieldWidth2 {
    max-width: 38%;
  }
}

@media (max-width: 720px) {
  .modelColFieldWidth2 {
    max-width: 54%;
  }
}

@media (max-width: 360px) {
  .modelColFieldWidth2 {
    max-width: 100%;
  }
}

@media (max-width: 360px) {
  .modelColFieldWidth2 {
    max-width: 100%;
  }
}

@media (max-width: 360px) {
  .modelColFieldWidth22 {
    max-width: 100%;
  }
}

/* media query for Question PopOver <<<<<<<<End>>>>>>>> */
.button-position-myCustomize {
  padding: inherit;
  margin-top: 2%;
  padding-left: 5px;
}

.typehead-position-myCustomize {
  padding: inherit;
}

.standardAttrChkLabel {
  font-size: 12px;
}

.loggedInInfo {
  /* padding: 0 10px 10px!important; */
  color: var(--org-name-text-color);
  font-family: "SF Pro", sans-serif;
  font-style: normal;
  font-weight: 760;
  font-size: 17px;
  text-align: right;
  margin-right: 1%;
  width: -webkit-fill-available;
  width: -moz-available;
}

.useName {
  color: var(--userName-text-color) !important;
}

.dashBoardcontainer {
  overflow-y: scroll;
  max-height: 80vh;
  width: 100%;
}

.chart-container {
  /* width: 100%; */
  height: 400px !important;
  position: relative;
}

.chart {
  height: 400px !important;
}

.pieContainer {
  display: flex;
  flex-direction: row;
}

.pieCol {
  max-width: 50%;
}

.pieColPad {
  padding-top: 0rem;
}

.cardWidth {
  max-width: 100%;
}

@media (max-width: 720px) {
  .pieColPad {
    padding-top: 1rem;
  }
}

@media (max-width: 720px) {
  .pieCol {
    max-width: 100%;
  }
}

@media (max-width: 720px) {
  .pieContainer {
    display: flex;
    flex-direction: column;
  }
}

.dashBoardTable table tbody tr td:last-child {
  display: flex;
  justify-content: center;
}

.dashBoardTable table thead th {
  z-index: 1;
}

/* custom css for PruefPLan <<<<<<<<<<end>>>>>>>>>> */
/* custom css for Equipment PruefPlan <<<<<<<<<<Start>>>>>>>>>> */

/* custom css for Equipment PruefPlan <<<<<<<<<<Start>>>>>>>>>> */
.eqPModelWidth {
  min-width: 100rem;
  margin-top: 5%;
}

.displayPlanScroll {
  overflow-y: scroll;
  height: 48rem;
}

.formStyle {
  max-height: 530px;
}

.formStyleBranding {
  max-height: 530px;
  width: 36%;
}

@media screen and (min-width: 1617px) {
  .formStyleBranding {
    width: 36%;
  }
}

@media screen and (max-width: 1320px) {
  .formStyleBranding {
    width: 40%;
  }
}

@media screen and (max-width: 1156px) {
  .formStyleBranding {
    width: 46%;
  }
}

@media screen and (max-width: 1000px) {
  .formStyleBranding {
    width: 54%;
  }
}

@media screen and (max-width: 870px) {
  .formStyleBranding {
    width: 62%;
  }
}

@media screen and (max-width: 750px) {
  .formStyle {
    width: 70%;
  }
}

@media screen and (max-width: 666px) {
  .formStyleBranding {
    width: 82%;
  }
}

@media screen and (max-width: 578px) {
  .formStyleBranding {
    width: 90%;
  }
}

@media screen and (max-width: 524px) {
  .formStyledire {
    flex-direction: column;
  }
}

@media screen and (max-width: 524px) {
  .formStyleWidth {
    max-width: 100%;
  }
}

.containerStyle {
  max-height: 430px;
  overflow-y: scroll;
  overflow-x: hidden;
}

.colpadding {
  padding-left: inherit;
}

.formGroupBack {
  width: 100%;
}

.labelFontoption {
  font-weight: bold;
}

.quesul {
  list-style: none;
  margin-left: 0px;
  margin-right: 0px;
  height: 20rem;
}

@media (max-width: 1000px) {
  .eqPModelWidth {
    min-width: 80rem;
    margin-top: 0%;
  }
}

@media (max-width: 800px) {
  .eqPModelWidth {
    min-width: 67rem;
  }
}

@media (max-width: 675px) {
  .eqPModelWidth {
    min-width: 40rem;
  }
}

@media (max-width: 470px) {
  .displayPlan {
    flex-direction: column;
  }
}

@media (max-width: 411px) {
  .questionAddPadd {
    padding-left: 30rem;
  }
}

@media (max-width: 400px) {
  .eqPModelWidth {
    min-width: 30rem;
    margin-top: 0%;
  }
}

@media (max-width: 327px) {
  .questionAddPadd {
    padding-left: 30rem;
  }
}

/* custom css for Equipment PruefPlan <<<<<<<<<<End>>>>>>>>>> */
/* custom css for Fixed Date <<<<<<<<<<Start>>>>>>>>>> */

.modelStyle {
  width: auto;
  margin-top: 43%;
}

/* custom css for Fixed Date <<<<<<<<<<End>>>>>>>>>> *
/* custom css for Inspection Image <<<<<<<<<<Start>>>>>>>>>> */

.imageDiv {
  width: 4em;
}

/* custom css for Inspection Image <<<<<<<<<<End>>>>>>>>>> */
/* Global custom css  <<<<<<<<<<Start>>>>>>>>>> */

.styleFontWeight {
  font-weight: bold;
}

.cursorPoint {
  cursor: pointer;
}

.divWidth {
  width: 100%;
}

.dialogBox {
  opacity: 1;
  display: block;
}

.minWidth {
  min-width: max-content;
}

.listStyle {
  list-style: none;
}

/* Global custom css  <<<<<<<<<<End>>>>>>>>>> */

.aaaA {
  background-color: var(--btn-bg-dropDown-menu);
}

.svgIcon {
  color: var(--svg-icon-color);
}

.svgIconSelected {
  color: var(--svg-icon-color-sel);
}

.modal-dialog h5 {
  font-size: 17px;
}

.filterPanel {
  color: var(--filterPanel-header--color);
  background-color: var(--filterPanel-header-bg-color);
}

.ordersTable {
  min-height: 30vh !important;
  max-height: 50vh !important;
  overflow-x: hidden;
}

.ordersDetails {
  height: 40rem;
}

.timeLineModel {
  min-height: 53rem;
}

.form-control:disabled,
.form-control[readonly] {
  background-color: var(--form-control-dis-bg-color) !important;
}

@media (max-width: 1616px) {
  .ordersDetails {
    height: 44rem;
  }
}

@media (min-width: 1616px) {
  .ordersDetails {
    height: 65rem;
  }
}

/*---------------------------------------------------MasterPage.js---Start----------------------------------------------------------------------------------- */
.userManTable {
  max-height: 64vh;
}

@media (max-width: 1616px) {
  .userManTable {
    max-height: 64vh;
  }
}

@media (min-width: 1616px) {
  .userManTable {
    max-height: 70vh;
  }
}

/*---------------------------------------------------MasterPage.js---End----------------------------------------------------------------------------------- */

/*---------------------------------------------------Audit Css---start----------------------------------------------------------------------------------- */
.auditTypeHeadLabel {
  margin-top: 12px;
  margin-bottom: -12px;
}

.auditTabelHeig {
  max-height: 62vh;
}

.auditLogbody {
  max-height: 60vh;
  overflow-y: scroll;
}

.auditObjbody {
  min-height: 40rem;
  max-height: 40rem;
  overflow-y: scroll;
}

.auditObjbodyModel {
  min-width: 106rem;
  padding-bottom: 4rem;
}

/*---------------------------------------------------Audit Css---start----------------------------------------------------------------------------------- */

/*---------------------------------------------------Exception Css---start----------------------------------------------------------------------------------- */
.excAllTabelHeig {
  max-height: 75vh;
}

.exceptDetModel {
  min-width: 143rem;
}

.exceptDetHeig {
  max-height: 62vh;
}

/*---------------------------------------------------Exception Css---End----------------------------------------------------------------------------------- */
/*---------------------------------------------------PerformanceAnalysis start----------------------------------------------------------------------------------- */
.perTabHeig {
  max-height: 75vh;
}

/*---------------------------------------------------PerformanceAnalysis End----------------------------------------------------------------------------------- */
/*---------------------------------------------------viewRole.js---Start----------------------------------------------------------------------------------- */
.vrModelWidth {
  min-width: max-content;
}

.vrBodyHeig {
  min-height: 40rem;
  max-height: 40rem;
}

.vrTabHeig {
  max-height: 32rem;
}

/*---------------------------------------------------viewRole.js---End----------------------------------------------------------------------------------- */

.prueLogoStyle {
  font-size: 2.3rem;
  line-height: 1.2;
  color: var(--logo-color);
  margin-left: 10px;
}

/*-----------Theme variable start------------*/
/*---------------------------------------------------Table Variable---Start----------------------------------------------------------------------------------- */
table tbody tr td .btn-primary {
  background-color: var(--btn-gly-bg-col);
  border-color: var(--btn-gly-bg-col);
}

table tbody {
  border-top: none;
  /* border: 1px solid lightgray; */
}

table tbody tr td .btn-primary:hover {
  background-color: var(--btn-gly-hov-bg-col);
  border-color: var(--btn-gly-hov-bg-col);
}

table tbody tr td button .glyphicon {
  color: var(--gly-color);
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--table-odd-row-bg-color);
}

.table-striped tbody tr:nth-of-type(even) {
  background-color: var(--table-even-row-bg-color);
}

.table-hover tbody tr:hover {
  background-color: var(--table-row-hov-bg-color);
}

table tbody tr td .glyphicon {
  color: var(--gly-icon-color);
}

table tbody tr td {
  border-left: 1px solid lightgray;
  color: var(--table-bdy--font-color);
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
}

table tr td:nth-child(1) {
  border-left: none;
}

.table {
  color: var(--table-bdy--font-color);
  border-radius: 5px !important;
  border-collapse: collapse !important;
  border: none !important;
}

.table thead {
  border-bottom: 1px solid lightgray;
}

/*---------------------------------------------------Table Variable---End----------------------------------------------------------------------------------- */

/*---------------------------------------------------Button Variable---Start----------------------------------------------------------------------------------- */
.buttonBackground {
  background-color: var(--btn-bg-color);
}

.btn-primary {
  background-color: var(--btn-bg-color);
  border-color: var(--btn-bg-color);
}

.btn-primary:hover {
  background-color: var(--btn-hv-bg-color);
  border-color: var(--btn-hv-bg-color);
}

/*---------------------------------------------------Button Variable---End----------------------------------------------------------------------------------- */

/*---------------------------------------------------TimeLine Variable---Start----------------------------------------------------------------------------------- */
.timeLineContent {
  background-color: #000000;
  color: red;
}

.vertical-timeline-element-content {
  background: var(--content-bg-color) !important;
  color: var(--content-color) !important;
  padding-top: inherit !important;
  padding-bottom: inherit !important;
}

.vertical-timeline-element-content-arrow {
  border-right: 7px solid var(--arrow-color) !important;
}

.vertical-timeline-element-icon {
  background: var(--icon-bg-color) !important;
}

.vertical-timeline-element-date {
  font-size: 14px !important;
  color: var(--date-color) !important;
  padding: 0 !important;
}

.vertical-timeline-element-content h3 {
  color: white;
}

/*---------------------------------------------------TimeLine Variable---End----------------------------------------------------------------------------------- */
/*---------------------------------------------------heading Variable---Start----------------------------------------------------------------------------------- */
h2 {
  color: var(--h2-font-color);
}

h3 {
  color: var(--h3-font-color);
  /* font-size: var(--fontsize); */
}

h5 {
  color: var(--h5-font-color);
}

h4 {
  color: var(--h4-font-color);
}

label {
  color: var(--label-font-color);
  font-size: var(--label-font-size);
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
}

/*---------------------------------------------------heading Variable---End----------------------------------------------------------------------------------- */
/*-----------Theme variable start------------*/

/*------------------------------------------------------ Allgemein Start----------------------------------------------------------------------------------- */
.editEquipForm {
  display: block;
  min-height: 60vh;
  max-height: 60vh;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 0rem 2rem 0rem 2rem;
}

.tabscroll {
  overflow: hidden;
}

@media (min-width: 1616px) {
  .editEquipForm {
    min-height: 63vh;
    max-height: 63vh;
  }
}

.bgMandtory {
  background-color: #79cdcd !important;
}

/*------------------------------------------------------ Allgemein End----------------------------------------------------------------------------------- */
.cstFntSiz {
  font-size: 13px;
}

.svgOrgDelIcon {
  color: red;
}

/*------------------------------------------------------ Popover Style Start ----------------------------------------------------------------------------------- */
.modal-header {
  background-color: var(--modal-header-bg);
}

.close {
  font-size: 2.5rem;
}

.modal-footer {
  background-color: var(--modal-footer-bg);
  justify-content: center;
  padding: 0px;
}

/* .modal-footer .btn-block{
  width: 26% ;
} */
.marProp {
  margin-bottom: 0%;
}

/*------------------------------------------------------ Popover Style End----------------------------------------------------------------------------------- */

input[required] + label:before {
  content: "*";
  color: red;
  border-color: red;
}

/*------------------------------------------------------ Branding Page Style Start----------------------------------------------------------------------------------- */
.navBack {
  background-color: #495057 !important;
}

.btton {
  background-color: #495057;
}

.imageBack {
  object-fit: cover;
  filter: blur(4px);
  position: absolute;
  z-index: 0;
  width: 35%;
  height: 100%;
  background-image: url("gear-metal-wheels-isolated-white-background.jpg");
  /* background-position: 72% 41%; */
  background-position: 171% 35%;
  filter: blur(2px);
  -webkit-filter: blur(2px);
}

.domainFont {
  font-size: 1.5rem;
}

.inputboxHeight {
  height: 44px !important;
  border: 1px solid lightgray !important;
}

.inputDivMar {
  margin-top: 20%;
}

.prueLogoStyleCommon {
  font-size: 2.3rem;
  line-height: 1.2;
  color: white;
  margin-left: 10px;
}

/*------------------------------------------------------ Branding Page Style End----------------------------------------------------------------------------------- */
.equipmentGroupList {
  overflow: auto;
}

#copyEquipmentGroupForm .form-check-label {
  padding-left: 6px;
}

header .svgIcon {
  color: var(--header-svg-icon-color);
}

.tableHeightMax {
  min-height: 60vh;
  max-height: 68vh;
}

@media (min-width: 1616px) {
  .tableHeightMax {
    min-height: 60vh;
    max-height: 74vh;
  }
}

/*------------------------------------------------------ WebsiteAdmin Style Style----------------------------------------------------------------------------------- */
.tableHeight {
  min-height: 70vh;
  max-height: 70vh;
}

@media (min-width: 1616px) {
  .tableHeight {
    min-height: 85vh;
    max-height: 85vh;
  }
}

/*------------------------------------------------------ WebsiteAdmin Style End----------------------------------------------------------------------------------- */

#panel li:nth-child(odd) {
  background-color: var(--list-odd-bg-color);
}

#panel li:nth-child(even) {
  background-color: var(--list-even-bg-color);
}

#panel li:hover {
  background-color: var(--list-hover-bg-color);
}

.datedropdown-menu {
  position: absolute;
  top: 100%;
  bottom: auto;
  background-color: var(--dropDown-ul-bg);
  border-radius: 0px;
  width: 12vw;

  /* padding: 10px 20px; */
}

.datedropdown-menuUp {
  position: absolute;
  top: auto;
  bottom: 27px;
  background-color: var(--dropDown-ul-bg);
  border-radius: 0px;
  width: 12vw;
  color: var(--dropDown-text-color);
  /* padding: 10px 20px; */
}

.liStyle {
  list-style: none;
  display: contents;
  /* listStyle: "none",
          display: "contents", */
}

.rowSpan {
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 10px;
  /* style= {
        {
        flexGrow: "1",
          whiteSpace: "nowrap",
          overflow: "hidden",
          textOverflow: "ellipsis",
          marginRight: "10px",
      }
    } */
}

/* .datedropdown-menu::before{
  content: "";
  position: absolute;
  top: -5px;
  right: 20px;
  height: 20px;
  width:20px;
  background-color: #00677f;
  transform: rotate(45deg);
} */

.datedropdown-menu.active {
  opacity: 1;
  z-index: 10;
  visibility: visible;
  transform: translateY(0);
  transition: 500ms ease;
  box-shadow: 0 0 10px var(--dropDown-shadow-table-col);
}

.datedropdown-menu.inactive {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-20px);
  transition: 500ms ease;
}

.datedropdown-menu li:hover {
  background-color: var(--dropDown-li-hv-bg);
  color: var(--dropDown-text-hv-color);
}

.datedropdown-menuUp li:hover {
  background-color: var(--dropDown-li-hv-bg);
  color: var(--dropDown-text-hv-color);
}

.formField {
  width: 50%;
  padding: 0 10px;
  box-sizing: border-box;
}

.custom-button {
  border: none;
  border-radius: 50px;
  /* padding: 10px 20px; */
  background-color: transparent;
  color: black;
  /* transition: background-color 0.3s; */
}

.custom-button:hover {
  /* background-color: lightgrey; */
  /* border: 1px solid ; */
}

.dropdownHeader {
  position: relative;
  display: inline-block;
  border: 1px solid white;
}

.dropdownHeader-button {
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 20px;
}

.dropdownHeader-menu {
  position: absolute;
  top: 67%;
  bottom: auto;
  right: 0;
  display: flex;
  flex-direction: row;
  padding: 10px;
}

.dropdownHeader-menu ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  background-color: var(--dropDown-ul-bg);
  width: max-content;
  text-align: left;
}

.dropdownHeader-menu li {
  padding: 10px;
  color: var(--dropDown-text-color);
}

.dropdownHeader-menu li:hover {
  background-color: var(--dropDown-li-hv-bg);
  color: var(--dropDown-text-hv-color);
}

.gridTable {
  max-height: 70vh;
  overflow: scroll;
}

.dropdownHeader-menu {
  position: absolute;
  top: 67%;
  bottom: auto;
  right: 0;
  display: flex;
  flex-direction: row;
  padding: 10px;
}

.vertical-centernest {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

#gridTable ul {
  background-color: var(--dropDown-ul-bg);
}

#gridTable li {
  color: var(--dropDown-text-color);
  padding: 5px 0px 3px 5px;
  white-space: nowrap;
}

#gridTable li:hover {
  background-color: var(--dropDown-li-hv-bg);
  color: var(--dropDown-text-hv-color);
}

/* #actionListButton ul{
  background-color: var(--dropDown-ul-bg);
} */
/* #actionListButton li:nth-child(odd) {
  background-color: var(--list-odd-bg-color);
}

#actionListButton li:nth-child(even) {
  background-color: var(--list-even-bg-color);
}

#actionListButton li:hover {
  background-color: var(--list-hover-bg-color);
} */

/* .buttonLink {
  background-color: var(--btn-bg-dropDown-menu);
  border: 0;
  color: var(--top-navbar-link);
  font-size: 0.9em;
} */
.actioButton {
  min-width: fit-content;
}

.meltiWidth {
  max-width: 222px;
}

.exisitngOptionListDiv,
.newOptionListDiv {
  word-wrap: break-word;
  overflow: scroll;
  height: 51vh;
}

.newOptionListDiv textarea {
  height: 100%;
}

.custom-modal.modal-dialog {
  max-width: 100%;
  margin: 20px 100px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 95vh;
  display: flex;
  position: fixed;
  width: auto;
}

.custom-modal .modal-body {
  min-height: 74vh;
  height: 74vh;
  overflow: hidden;
}

.custom-modal-medium.modal-dialog {
  max-width: 100%;
  margin: 77px 200px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80vh;
  display: flex;
  position: fixed;
  width: auto;
}

.custom-modal-medium .modal-body {
  min-height: 60vh;
  height: 72vh;
  overflow: hidden;
}

.overwritePlantTableList {
  height: 62vh;
}

.actioButton {
  min-width: fit-content;
  max-width: fit-content;
}

.dropDpwnWidth {
  max-width: max-content;
}

.widthRadio {
  min-width: fit-content;
}

.instructions {
  /* flex-basis: 300px; */
  padding: 20px;
  background-color: var(--dropZone-bg-col);
  border: 1px solid #ccc;
}

.instructions h1 {
  color: var(--insrt-h1-color);
}

.instructions ul {
  list-style-type: none;
  padding: 0;
}

.instructions li {
  margin-bottom: 10px;
  color: #000000;
}

.seconDiv {
  background-color: var(--sec-bg-col);
  color: #000000;
}

.wordRap {
  white-space: nowrap;
}

.Toastify__toast-container {
  width: auto !important;
  max-width: 100%;
}

.Toastify__toast {
  transform: none !important;
  width: auto !important;
}

.Toastify__toast-body {
  word-wrap: break-word;
  overflow: auto;
}

#ConfirmationPopUp {
  top: 0;
  z-index: 9999;
}

#userPorfileIcon ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  background-color: var(--btn-bg-dropDown-menu);
  width: max-content;
  text-align: left;
  font-size: 1.5rem;
}

#userPorfileIcon li {
  padding: 10px;
  color: var(--top-navbar-link) !important;
}

#userPorfileIcon li:hover {
  background-color: var(--userProfile-li-over);
}

#userPorfileIcon li a {
  color: var(--top-navbar-link) !important;
}

.dropdown-menu-right {
  right: 24px !important;
}

.remove {
  transform: translate3d(0px, 0px, 0px) !important;
  top: auto !important;
  left: auto !important;
}

#filterEquipmentGroupTest button {
  background-color: var(--id-spec-bt-bg-color);
}

.butttonGlypi button {
  background-color: var(--bt-gly-bg);
  border: none;
}

.butttonGlypi button.btn-primary:hover {
  background-color: var(--bt-gly-hv-bg);
  color: var(--bt-color-hov);
  border: none;
}

.butttonGlypi button.btn-primary:disabled {
  background-color: var(--bt-gly-dis-bg);
  color: var(--bt-color-hov);
  border: none;
}

.butttonGlypi button.btn-primary {
  background-color: var(--bt-gly-bg);
  border: none;
}

.headerTitle {
  color: var(--h2-font-color);
}

.bordershadow {
  box-shadow: 0 0 10px var(--dropDown-shadow-col);
}

.msgBodyFont {
  color: var(--message-body-font-color);
}

@media (max-width: 1650px) {
  .ie11-wrapper .card {
    min-width: 400px;
  }
}

.searchBoxSelect {
  min-width: 80%;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  /* Semi-transparent black background */
  backdrop-filter: blur(5px);
  /* Add a blur effect to the background */
  z-index: 999;
  /* Ensure it's above the modal */
}

.brandingHeader {
  background: url("./bootstrap_dist_new/bootstrap_dist/img/Logo_Prüfexpress.png")
    no-repeat center;
  min-height: 26px;
  height: 26px;
  background-size: contain;
  width: 100px;
}

.centered-content {
  display: flex;
  flex-direction: column;
  /* or row depending on your content */
  align-items: center;
  justify-content: center;
  height: 100vh;
  /* Adjust as needed to center vertically */
  text-align: center;
  /* If you want to center text horizontally */
  /* Other styles for your centered content */
}

.full-width {
  width: 100%;
}

.logo {
  background: url("./bootstrap_dist_new/bootstrap_dist/img/Logo_Prüfexpress.png")
    no-repeat center;
  width: 330px;
  height: 50px;
}

/* Styles for the navigation items (you can customize this) */
#navigatorBrand {
  list-style: none;
  display: flex;
  padding: 0;
}

.navi-item-listBrand {
  margin-right: 20px;
  /* Adjust the margin as needed */
}

.brand-full-content {
  overflow: auto;
  overflow-x: hidden;
  flex: 1 1 auto;
  display: flex;
  flex-grow: 1;
  display: -ms-flexbox;
  flex-direction: column;
  box-sizing: border-box;
  background: url("./bootstrap_dist_new/bootstrap_dist/img/Prüfexpress.png")
    no-repeat center center fixed;
  background-size: cover;
}

.maxWidthcol {
  max-width: fit-content;
}

.containerInnerShadow {
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
}

.react-datepicker-wrapper {
  width: 100%;
}

.filter-panel-container {
  max-height: 64vh;
  min-height: 64vh;
  overflow: auto;
}

@media (max-width: 1616px) {
  .filter-panel-container {
    min-height: 49vh !important;
    max-height: 49vh !important;
  }
}

@media (min-width: 1616px) {
  .filter-panel-container {
    min-height: 63vh !important;
    max-height: 63vh !important;
  }
}

.tab-tableHeightMax {
  min-height: 77vh;
  max-height: 77vh;
}

.equipmentListHeightMax {
  min-height: 50vh;
  max-height: 66vh;
}

@media (max-width: 1616px) {
  .equipmentListHeightMax {
    min-height: 49vh;
    max-height: 49vh;
  }
}

@media (min-width: 1616px) {
  .equipmentListHeightMax {
    min-height: 50vh;
    max-height: 66vh;
  }
}

@media (max-width: 1616px) {
  .tab-tableHeightMax {
    min-height: 68vh;
    max-height: 68vh;
  }
}

@media (min-width: 1616px) {
  .tab-tableHeightMax {
    min-height: 76vh;
    max-height: 76vh;
  }
}

.wordWrap {
  word-break: break-all;
}

.dropdown-menu-container {
  column-count: 2;
  column-gap: 0px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .dropdown-menu-container {
    column-count: 1;
    column-gap: 0;
  }
}

.MuiTypography-body2 {
  font-size: 1.5rem !important;
}

#typehead .form-group {
  width: "100%";
}

.containerDemo {
  display: flex;
  justify-content: center;
}

.card-style {
  border: 1px solid #ddd;
  /* Add border color */
  border-radius: 8px;
  /* Add border radius for rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* Add a shadow effect */
  background-color: #fff;
  /* Set background color */
  padding: 20px;
  /* Add padding for content spacing */
}

.custom-input {
  /* Add your custom styles for the entered text */
  font-size: 14px !important;
  /* Text color */
  /* Add any other styles as needed */
}

.MuiFormHelperText-root.Mui-error {
  font-size: 14px !important;
  color: red;
}

.MuiStepLabel-label.MuiStepLabel-alternativeLabel {
  margin-top: 0 !important;
}

.custom-modal .modal-body.confrimation-modal-body {
  min-height: auto;
  height: auto;
  overflow: hidden;
}

.iconStyle {
}

.customizeTimeLine .vertical-timeline-element-icon {
  background: white !important;
  color: #000000 !important;
}

.MuiTypography-h6 {
  font-size: 1.5rem !important;
}

.MuiTableCell-root {
  font-size: 12px !important;
}

.MuiLinearProgress-colorPrimary {
  background-color: red !important;
}

.summaryMainDiv {
  max-height: 66vh;
  width: 85%;
  margin-top: 2%;
  border-radius: 34px;
  background-color: white;
}

.Summarydemo {
  background: linear-gradient(180deg, #75f, #6943ff 0.01%, #2f2ce9);
  border-radius: 32px px;
  flex-basis: 50%;
  padding-inline: 54px;
  padding-bottom: 54px;
  padding-top: 39px;
  text-align: center;
  border-radius: 39px;
  max-width: 40%;
}

.buttonDemo {
  align-items: center;
  background: linear-gradient(
    180deg,
    #4d21c9,
    rgba(37, 33, 201, 0) 100%,
    rgba(37, 33, 201, 0) 0
  );
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  height: 200px;
  justify-content: center;
  margin: 0 auto 28px;
  /* width: 200px; */
}

.percentageDemo {
  color: #fff;
  font-size: 3em;
  font-style: normal;
  font-weight: 800;
  line-height: 72px;
  margin-bottom: 4px;
  text-align: center;
}

.seconDemo {
  flex-basis: 59%;
  max-width: 60%;
  padding-inline: 14px;
  padding-top: 12px;
  border-radius: 34px;
}

.secondDemoh {
  color: #303b59;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 31px;
  margin-bottom: 28px;
}

.ulStyleDemo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 38px;
  padding-top: 11px;
  padding-right: 8px;
  overflow: scroll;
  max-height: 75%;
  padding-left: 0px;
  overflow-x: hidden;
}

.liDemoStyle {
  align-items: center;
  background:
    linear-gradient(0deg, hsla(0, 0%, 100%, 0.95), hsla(0, 0%, 100%, 0.95)),
    #f55;
  border-radius: 12px;
  color: #f55;
  display: flex;
  font-size: 14px;
  font-weight: 500;
  line-height: 23px;
  padding: 17px;
}

.imageinter {
  display: flex;
  flex-direction: row;
  margin-left: auto;
}

.centerDicv {
  color: #303b59;
  font-size: 18px;
  font-weight: 700;
  line-height: 23px;
  text-align: right;
}

.colBgCl {
  background-color: #f8f8f8;
}

.overrideCol {
  position: absolute;
  top: 0;
  left: 25%;
  /* right: 18px; */
  width: 76%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2;
}

.MuiLinearProgress-barColorPrimary {
  background-color: green !important;
}

#sidebar {
  /* display: flex; */
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  border: #dc3545;
}

.sidebar-header {
  flex-grow: 1;
  /* Grow to take remaining space */
}

.sidebar-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 0px solid;
  /* background: none;
  border: none;
   */
}

.table-responsive {
  border: 1px solid var(--table--border-color);
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

.org {
  font-family: "SF Pro", sans-serif;
  font-style: normal;
  font-weight: 270;
  font-size: 10px;
  font-size: 14px;
  color: var(--org-name-text-color);
  letter-spacing: 1px;
}

.user {
  font-family: "SF Pro", sans-serif;
  font-style: normal;
  font-weight: 760;
  font-size: 16px;
  line-height: 19px;
  letter-spacing: 1px;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.dropdown-item {
  font-style: normal;
  font-weight: 600;
  font-size: 15px !important;
  line-height: 19px;
}

#accordion ul li.active {
  color: var(--sidebar-act-link-color);
  background: var(--sidebar-header-active);
  text-decoration: none;
  border-radius: 4%;
}

#accordion ul {
  list-style-type: none;
  padding: 0;
}

.accordionIcon {
  height: "2em" !important;
  width: "2em" !important;
}

.rightCircleCls {
  font-size: 13px;
  color: #b0b0b0;
}

.equpGrpNameCls {
  word-wrap: break-word;
  font-size: 12px;
  line-height: 12px;
}

.MuiSvgIcon-root.leftPanelToggleCls {
  height: 3em;
  width: 1.5em;
  margin-left: 24px;
  box-shadow: rgba(0, 0, 0, 0.3) 2px 0px 4px;
  cursor: pointer;
  position: absolute;
  border: 1px solid #b0b0b0;
  border-left: none;
  z-index: 10;
  background: #fff;
  border-radius: 0 4px 4px 0;
  color: #b0b0b0;
}

.MuiPaper-elevation1 {
  box-shadow: none !important;
  border-bottom: 1px solid #dedede;
}

/* #sidebar .MuiPaper-elevation1 {
 border: none;
} */
.emailConfig {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 65vh;
  max-height: 65vh;
  overflow: auto;
}

.emailDistbutaion {
  background-color: var(--email-heade-bg);
}

.emailDistbutaionH1 {
  color: white;
}

.emailheadBtt {
  border-radius: 5px;
}

.emailheadBttReset {
  margin-top: 20%;
}

.emailheadFoler {
  min-width: 80%;
}

.DashboardNavCls {
  padding: 14px 0px 14px 10px;
}

.summarySuccessStyle {
  color: green;
  background: #e6ffe6;
}

.summaryErrorStyle {
  color: rgb(255, 85, 85);
  background:
    linear-gradient(0deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.95)),
    rgb(255, 85, 85);
}

.reusableCard {
  font-size: 14px;
}

.reusableCardLink {
  font-weight: bold;
  text-decoration: underline;
  color: blue;
}

.infoButtonStyle {
  font-weight: bold !important;
  color: blue !important;
  text-decoration: underline !important;
  font-size: 14px !important;
  text-transform: none !important;
}

.newEqGrpModal {
  min-height: 71vh !important;
  max-height: 71vh !important;
}

.newEqGrpModalBody {
  min-height: 72vh;
  max-height: 72vh;
}

.infoContainer {
  border-radius: 20px;
  margin-top: 10%;
}

#createGrp .rmsc .select-panel {
  border: 1px solid rgba(0, 0, 0, 0.2);
  position: absolute !important;
  bottom: 50px !important;
  width: 100%;
  background-color: white !important;
}

.customTextFieldSelect {
  width: 100% !important;
  font-size: 14px !important;
}

.MuiSelect-outlined.MuiSelect-outlined {
  line-height: normal !important;
}

.bulkOption {
  min-width: max-content;
  font-size: 14px !important;
}

#actionListButton.dropdown-menu {
  left: -100px !important;
}

#actionListButton ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  background-color: var(--dropDown-ul-bg) !important;
  width: max-content;
  text-align: left;
}

#actionListButton li {
  padding: 10px;
  color: var(--dropDown-text-color);
}

.configuration {
  border-right: 1px solid #ccc;
}

.widthCustomize {
  min-width: 700px;
}

/*---------------Changes for public website start --------------------------------------*/
.mainContainer {
  height: 100%;
  box-shadow: 3px 3px 10px 0 rgba(68, 68, 68, 0.5);
}

.mainContainer .MuiTab-root {
  font-size: 14px;
}

.mainContainer .MuiPaper-elevation1 {
  border-bottom: 0;
  position: relative;
}

.mainContainer .MuiTabs-root {
  box-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  -webkit-overflow-scrolling: auto;
}

.mainContainer div[role="tabpanel"] {
  height: 85vh;
  overflow: auto !important;
}

.mainContainer button:focus {
  outline: none;
}

@media (max-width: 768px), (max-width: 414px) {
  .image {
    width: 350px;
  }
}

.masterData .row {
  box-shadow: 0px 4px 10px 0px #00000020;
}

.slider {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image {
  width: 400px;
  max-height: 22vh;
  border-radius: 10px;
  max-width: 100%;
}

.right-arrow {
  position: absolute;
  top: 50%;
  right: 32px;
  font-size: 3rem;
  color: #000;
  z-index: 10;
  cursor: pointer;
  user-select: none;
}

.left-arrow {
  position: absolute;
  top: 50%;
  left: 32px;
  font-size: 3rem;
  color: #000;
  z-index: 10;
  cursor: pointer;
  user-select: none;
}

.slide {
  opacity: 0;
  transition-duration: 1s ease;
}

.slide.active {
  opacity: 1;
  transition-duration: 1s;
  transform: scale(1.08);
}

.failtRaiseFormContainer {
  width: 500px;
  max-width: 100%;
  margin: 20px auto 20px auto;
  display: flex;
  justify-content: center;
  padding: 10px;
}

.mainContainer .MuiFormLabel-root,
.mainContainer .MuiInputBase-input {
  font-size: 16px;
  line-height: normal;
}

.masterData {
  font-size: 14px;
}

.fabIconForLanguage div#languageselector select {
  background: transparent;
  color: #fff;
}

@media (max-width: 450px) {
  .mainContainer .MuiTab-root {
    font-size: 11px;
  }
}

.titleAutocomplete {
  margin-right: 15px;
}

.MuiAutocomplete-listbox {
  border: 1px solid #ccc;
  font-size: 13px;
}

.fabIconForLanguage {
  z-index: 1;
}

.faultReportForm ::-webkit-file-upload-button {
  display: none;
}

.prioritySelect {
  -webkit-user-select: text;
  user-select: text;
}

.docNameCls {
  word-wrap: break-word;
}

/*---------------Changes for public website End -----------------------------------------*/

/* #configurePublic .MuiOutlinedInput-root {
  height:10px;
} */

.customizeFormField {
  margin-top: 2rem;
}

.publicWebsiteForm {
  overflow: auto;
  overflow-x: hidden;
}

#publicWebsite .MuiMenu-list {
  display: flex;
  padding: 0.5rem;
}

#publicWebsite .MuiMenu-paper {
  left: 841px !important;
  top: 145px !important;
  width: auto;
}

#publicWebsite .MuiListItem-root {
  flex-direction: column !important;
  font-size: 1.5rem !important;
}

#publicWebsite .MuiSelect-select {
  min-width: max-content !important;
}

#publicWebsite .MuiInput-root {
  width: 100% !important;
}

#publicWebsite .MuiInputBase-root {
  font-size: 1.5rem !important;
}

/* New sytle**/
#publicWebsite .MuiFormLabel-root {
  font-size: 1.5rem !important;
}

/* .filterMenuStyle {
  position: absolute;
  right: 44px;
  top: 43px;
  z-index: 99;
  background-color: white;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}
#inputFieldfilter .MuiInput-formControl {
  margin-top: 2.5rem;
} */

.filterMenuStyle {
  position: absolute;
  right: 44px;
  top: 43px;
  z-index: 99;
  background-color: white;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  border: 1px solid #ccc;
}

#filter .MuiTooltip-tooltip {
  font-size: 1.5rem;
}

#reusableTable .makeStyles-labelStyle-6 {
  padding-left: 0px;
}

.publicWebCol {
  width: 390px;
}

#zohohc-asap-web-launcherbox {
  bottom: 13px;
}

#publicAcessContainer {
  /* //  width: 50%; */
  margin-left: auto;
  margin-right: auto;
  background-color: ghostwhite;
  padding-bottom: 66px;
  display: grid;
  place-items: center;
  height: 100vh;
  width: 100%;
}

.rowStyle {
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  background-color: white;
  width: 50%;
  max-height: 64vh;
  overflow: auto;
}

.fontStyle {
  font-size: 14px;
}

@media (max-width: 650px) {
  .rowStyle {
    width: 80%;
  }
}

/* @media (max-width: 650px) {
  .fontStyle {
    font-size: 12px;
  }


} */
/* @media (max-width: 500px) {
  .fontStyle{
    font-size: 8px;
  }
} */

/* @media (max-width: 500px) {

} */

.tableWidth {
  width: 800px;
}

@media (max-width: 1024px) {
  .tableWidth {
    width: 606px;
  }
}

@media (max-width: 768px) {
  .tableWidth {
    width: 500px;
  }
}

.muiButtonConfigPublic {
  background-color: var(--btn-bg-color) !important;
  border-color: var(--btn-bg-color) !important;
  border-radius: 12px !important;
  font-size: 1rem !important;
}

.muiButtonConfigPublic:hover {
  background-color: var(--btn-hv-bg-color);
  border-color: var(--btn-hv-bg-color);
}

.headerRes {
  font-size: 2.5rem;
}

@media (max-width: 650px) {
  .headerRes {
    font-size: 1.5rem;
  }
}

/* @media (max-width: 500px) {
  .headerRes {
    font-size: 1rem;
  }
} */

.btnStyle {
  background-color: rgba(78, 150, 189, 0.75) !important;
}

.MuiOutlinedInput-inputMultiline {
  line-height: 20px !important;
}

.selectedRow {
  background-color: var(--table-row-hov-bg-color);
}

.nestedPopover {
  top: 0 !important;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

.nestedPopverMargin {
  margin-top: 8%;
  /* margin-left: 27%; */
}

#tagIssueSearch {
  border-right: 1px solid #ccc;
}

#tagIssueSearch .MuiInputBase-adornedStart {
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px;
}

.emailBtnML {
  margin-right: 7rem;
}

.wordsStyle {
  word-break: break-all;
}

.inputFiledError {
  border-color: red !important;
}

.errorText {
  color: red !important;
}

.commonSearchBorder {
  border-radius: 50px !important;
}

#inspectionContainer.MuiContainer-root {
  display: flex !important;
}

.inputField {
  border-top-right-radius: 0% !important;
  border-bottom-right-radius: 0% !important;
}

.inspectionCont {
  /* width: 60% !important;
height: 90% !important;
border-radius: 5%;
background-color: rgb(255, 255, 255);
box-shadow: rgba(0, 0, 0, 0.1) 0px -4px 6px; */
  display: "flex";
  flex-direction: column;
}

.InspectionContent {
  flex: 1;
  padding-bottom: 10px;
}

.selectButton {
  background-color: green !important;
  color: #fff !important;
}

.selectButtonyes {
  background-color: #ff0000 !important;
  color: #fff !important;
}

.notSelected {
  background-color: #f2f2f2 !important;
  color: rgba(0, 0, 0, 0.87) !important;
}

.buttonRounded {
  border-radius: 3.25rem !important;
  font-size: 14px !important;
}

.imageButton {
  background-color: #dbedff !important;
  color: #636b74 !important;
}

.arrowColor {
  color: white;
}

#simple-tabpanel-3 .MuiBox-root:first-child {
  padding: 0px;
}

.blockContentdisplay {
  width: 500px;
  max-width: 100%;
  margin: 20px auto 20px auto !important;
  display: flex;
  /* //justify-content: center; */
  padding: 10px;
}

/*-----------------------CSS changes for digital checklist -----------------------------*/
.mainChapterContainer {
  height: 100%;
  overflow: auto;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.chapterContainer {
  background-color: #f0f4f8;
  overflow: auto;
  min-height: 100px;
  border: 1px solid #cdd7e1;
  border-radius: 2px;
  margin: 15px;
  padding: 15px;
  width: 100%;
}

.blockContainer {
  background-color: #fff;
  margin: 10px 0;
  border-radius: 5px;
  padding: 10px;
}

.addQuestionDiv {
  border: 2px dashed #ccc;
  border-radius: 6px;
  padding: 15px;
  margin-top: 10px;
  cursor: pointer;
}

.questionTemplateCard.card {
  -webkit-filter: none;
  filter: none;
  min-height: 137px;
  max-width: 260px;
  padding: 10px;
  background: linear-gradient(109.8deg, #36516c 0%, #7ab8f6 100%);
  border: 0;
  margin: 9px;
  float: none;
  cursor: pointer;
  min-height: 160px;
  display: inline-flex;
}

.questionTemplateCard.card h2 {
  font-size: 14px;
  color: #fff;
  margin-bottom: 10px;
}

.questionTemplateCard.card p {
  font-size: 12px;
  color: #fff;
}

.selectOverlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  transition: 0.3s ease;
  background-color: #04aa6d;
}

.checkmarkIcon {
  color: white;
  font-size: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.blockQuestionContainer {
  background: #edf5fd;
  border-radius: 8px;
  margin-bottom: 10px;
}

.questionBlock {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  padding: 5px 2px;
  background: linear-gradient(90.18deg, #36516c -1.36%, #7ab8f6 102.54%);
  color: #fff;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.questionBlock h2 {
  color: #fff;
  padding-left: 10px;
  font-size: 12px;
}

.questionDiv {
  padding-left: 15px;
  font-size: 13px;
}

.discardButton {
  display: flex;
  justify-content: center;
}

.controlSwitch .MuiFormGroup-root {
  align-items: flex-start;
}

.checklistBtnCls {
  background-color: #e3effb;
  border: 0;
  padding: 4px 16px 4px 16px;
  border-radius: 2px;
  color: #12467b;
  font-size: 14px;
  font-weight: 600;
}

.publishChecklistBtnCls {
  background-color: #e3fbe3;
  border: 0;
  padding: 4px 16px 4px 16px;
  border-radius: 2px;
  color: #0a470a;
  font-size: 14px;
  font-weight: 600;
}

.saveChangesBtnCls {
  background-color: #1f7a1f;
  border: 0;
  padding: 4px 16px 4px 16px;
  border-radius: 2px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

.discardChangesBtnCls {
  background-color: #9a5b13;
  border: 0;
  padding: 4px 16px 4px 16px;
  border-radius: 2px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

.rightSection {
  overflow: scroll;
  height: 74vh;
}

.inlineEditIcon {
  padding-left: 5px;
  font-size: 25px;
}

.mainChapterContainer input,
textarea {
  border: 1px solid #cdd7e1;
  border-radius: 8px;
  padding: 6px 8px 6px 8px;
  color: #555e68;
  font-size: 14px;
  font-weight: 400;
  width: 80%;
}

.controlSwitch .MuiSwitch-root {
  width: 63px;
  height: 43px;
}

.controlSwitch .MuiSwitch-switchBase {
  top: 2px;
  left: 2px;
}

.controlSwitch .MuiTypography-root {
  font-size: 13px;
  font-weight: 500;
}

.controlSwitch .MuiFormControlLabel-labelPlacementStart {
  margin-left: 0px;
}

.blockQuestionContainer
  .controlSwitch
  .MuiFormControlLabel-labelPlacementStart {
  padding-left: 16px;
}

.blockQuestionContainer
  .questionDiv
  .controlSwitch
  .MuiFormControlLabel-labelPlacementStart {
  padding-left: 0px;
}

.mainChapterContainer .MuiAccordion-root {
  background-color: #fafafa;
}

.rightSection .controlSwitch .MuiTypography-root {
  font-size: 16px;
}

#addDigitalChecklistForm .MuiAccordionSummary-root.Mui-expanded {
  border-bottom: 1px solid #ccc;
}

.requiredCls:after {
  content: "*";
  color: red;
}

.image-container {
  display: flex;
  /* flex-direction: column; */
  align-items: center;
  margin-bottom: 10px;
}

.imageDiv {
  max-width: 100%;
}
.ChecklistTable.checklistStyele {
  height: 66vh;
}
.ChecklistTable,
.versionTable {
  border: 1px solid #cdd7e1;
}

.ChecklistTable .MuiTableCell-stickyHeader,
.versionTable thead th {
  background-color: var(--table--head-bg-color);
  color: var(--table-header-color) !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  font-family: "Inter" !important;
  padding: 12px 12px;
}

.versionTable thead th {
  font-size: 12px !important;
}

.ChecklistTable tbody tr.even {
  background-color: #f0f4f8;
}

.ChecklistTable tbody tr.even:hover,
.ChecklistTable tbody tr.odd:hover {
  background-color: var(--row-hover-bg-color) !important;
}

.ChecklistTable .MuiTableSortLabel-root.MuiTableSortLabel-active {
  color: #fff;
}

.ChecklistTable
  .MuiTableSortLabel-root.MuiTableSortLabel-active.MuiTableSortLabel-root.MuiTableSortLabel-active
  .MuiTableSortLabel-icon {
  color: #fff;
}

.ChecklistTable .MuiTableCell-head {
  color: #fff;
}

.inActiveCls {
  background-color: #ccc;
}

.checklistTablePaginationFooter {
  display: flex;
  justify-content: center;
}

.badgeCls {
  font-size: 14px;
  font-weight: 400;
  border-radius: 8px !important;
  padding: 5px 15px;
}

.PlusMinusBtnGroupCls button {
  background-color: #fff;
  font-size: 10px;
}

.PlusMinusBtnGroupCls .minusBtn {
  background: #dc3545;
  color: #fff;
}

.PlusMinusBtnGroupCls .plusBtn {
  background: #28a745;
  color: #fff;
}

.draftIconCls {
  color: blue;
  font-size: 23px;
}

.customAddMediaInput {
  border: 2px dashed #ccc;
  border-radius: 6px;
  padding: 15px;
  margin-top: 10px;
  cursor: pointer;
  position: relative;
}

.customAddMediaInput input {
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.imgCloseCls {
  position: absolute;
  right: -6px;
  top: -8px;
  font-size: 23px;
  cursor: pointer;
}

.imageContent {
  width: 200px;
  position: relative;
  margin-right: 15px;
}

.imageContent img {
  max-width: 100%;
}

.draftVersionIndicatorText {
  font-size: 13px;
  font-style: italic;
}

/*-----------------------CSS Start for WebInspection -----------------------------*/
.summaryDivider {
  margin: 20px 0;
}

.summaryIcon {
  width: 3rem !important;
  height: 3rem !important;
}

.summarySaveButton {
  background-color: #e3fbe3 !important;
  border: 1px solid rgba(0, 0, 0, 0.23) !important;
}

.summaryAbortButton {
  background-color: #fdf0e1 !important;
  border: 1px solid rgba(0, 0, 0, 0.23) !important;
}

.questionStyle {
  font-size: 1.5rem;
}

.questionAsteric {
  color: red;
}

.styleExpectedLabel {
  color: rgba(0, 0, 0, 0.54);
}

.styleExpectedvalue {
  color: black;
}

.inspectionImageModel {
  margin-top: 43%;
}

.inspectionImageModelDiv {
  min-height: 20vh;
  max-height: 30vh;
  overflow: auto;
}

.inspectionImageDiv {
  border: 1px solid lightgray;
}

.inspectionImageDivSrc {
  min-height: 7rem;
  max-height: 7rem;
  width: 7rem;
}

.inspectionImageDivDelButton {
  width: 2rem !important;
  height: 2rem !important;
}

/*-----------------------CSS End for WebInspection -----------------------------*/
.mulitplePruefTable {
  height: 50vh;
  overflow: auto;
}

.nioStatus {
  background-color: red;
}

.ioStatus {
  background-color: green;
}

.MuiTableSortLabel-root.Mui-active {
  color: var(--mui-table-select-header-color) !important;
}

.MuiTableSortLabel-root:hover {
  color: var(--mui-table-select-header-color) !important;
}

.MuiTableCell-head {
  color: var(--table--head--font-color) !important;
}

.MuiStepLabel-label {
  font-size: 1.5rem !important;
}

/*-----------------------CSS Sidebar Start -----------------------------*/
#sideBarContentContainer {
  min-width: 250px;
  max-width: 250px;
  background: #fff;
  padding: 0px 16px;
  overflow: hidden;
  transition: all 0.3s;
}

.sideBarHeader {
  font-size: var(--sideBarHeaderSize) !important;
  font-weight: 600 !important;
  line-height: 24px !important;
  color: var(--sideBarHeaderColor);
  font-family: var(--font-fam-body) !important;
}

.active-link {
  font-weight: bold;
  color: #0078bb;
}

#sideBarContentContainer .MuiInputBase-input,
#sidebar .MuiInputBase-input {
  font-size: 14px !important;
}

/*-----------------------CSS Sidebar Start -----------------------------*/

/*-----------------------CSS GridTable Start -----------------------------*/
.gridTableButton {
  font-family: var(--font-fam-body) !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 14;
}

.gridTableButtonStyle {
  background-color: var(--header-button-bg-color) !important;
  /* border: 1px solid var(--header-button-bordor-color) !important; */
  color: var(--header-button-color) !important;
  box-shadow: none !important;
}

.gridTableSelButtonStyle {
  background-color: #fce4e4 !important;
  border: 1px solid #fce4e4 !important;
  color: #7d1212 !important;
}

.gridTableHeaderContainor {
  justify-content: center;
  border-bottom: 1px solid var(--headerbar-contanaior-border-color);
  border-left: 1px solid var(--headerbar-contanaior-border-color);
  min-height: 45px;
}

.gridTableCellContiner {
  font-family: var(--font-fam-body) !important;
  background-color: var(--header-button-bg-color) !important;
  color: var(--header-button-color) !important;
  border-radius: 24px !important;
  border: 1px solid var(--header-button-bordor-color) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 18 !important;
  word-wrap: break-word !important;
}

/*-----------------------CSS GridTable End -----------------------------*/
/*------------------------------Form field and modal changes start ---------------------------------*/
h5.modal-title {
  color: var(--modal-title-color);
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 133%;
}

.modal-header,
.modal-footer {
  border: 0;
  background-color: #fbfcfe;
}

.modal-content {
  padding: 32px;
  border-radius: 8px;
  background-color: #fbfcfe;
}

input.form-control:not(:placeholder-shown),
textarea.form-control:not(:placeholder-shown),
select:has(option[value=""]:not(:checked)),
select:not(:has(option[value=""])) {
  background: var(--form-control-not-empty-bg);
  /* --joy-shadow-xs */
  box-shadow: 0px 1px 2px 0px rgba(21, 21, 21, 0.08);
  border: 1px solid #ccc;
}

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 50px var(--form-control-not-empty-bg) inset !important;
  -webkit-text-fill-color: var(--form-field-font-col) !important;
}

.saveBtnCls,
.modal-footer button[type="submit"] {
  min-height: 40px;
  padding: 4px 16px;
  gap: 8px;
  border-radius: 6px;
  background: var(--form-save-btn-bg);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 14px;
  color: var(--form-save-btn-font-color);
  border: 0;
}

#addNewUser .custom-modal-medium .modal-body {
  min-height: 58vh;
  height: 58vh;
}

.fileUploadContainer {
  margin-right: 3%;
  border-top: 1px solid #636b744d;
  margin-top: 20px;
  padding-top: 20px;
}

.fileUploadContainer h3 {
  color: #32383e;
  font-size: 12px;
  margin-bottom: 16px;
}

.pictureContainer {
  min-height: 116px;
  border-radius: 12px;
  border: 2px dashed #cdd7e1;
  padding: 24px;
  text-align: center;
  position: relative;
  margin-bottom: 20px;
}

.pictureContainer .fileUploadInput {
  opacity: 0;
  height: 116px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  cursor: pointer;
}

.fileList li {
  background-color: #e9fbf0;
  padding: 8px;
  color: #0f5c2e;
  border: 1px solid #c6f6d9;
  border-radius: 8px;
  list-style-type: none;
  font-size: 12px;
  margin-bottom: 5px;
}

ul.fileList {
  padding-left: 0px;
}

.deleteImgCls {
  position: absolute;
  right: 0;
  top: 4px;
  color: red;
  cursor: pointer;
}

/*------------------------------Form field and modal changes end ---------------------------------*/

.filterSegment {
  padding: 16px;
  border-radius: 6px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 20px;
  display: flex;
  /* padding: 16px;
  background: #F0F4F8 !important;
  border-radius: 6px;
  overflow: hidden; 
  border: 1px #CDD7E1 solid;
  flex-direction:column ;
   justify-content: flex-start;
   align-items:flex-end;
    gap: 15px;
     display: flex; */
}

.filterCondationDiv {
  width: 797px;
  padding: 10px;
  background: #edf5fd;
  border-radius: 6px;
  border: 1px #cdd7e1 solid;
  justify-content: flex-start;
  align-items: flex-start;
  /* gap: 15px; */
  display: inline-flex;
}

.filterlabelStyle {
  color: #171a1c !important;
  font-size: 14px !important;
  font-weight: 500 !important;

  word-wrap: break-word;
}

.filterFieldValue {
  flex: 1 1 0;
  opacity: 0.64;
  color: #0b6bcb !important;
  font-size: 16px !important;
  font-family: "Inter" !important;
  font-weight: 400 !important;

  word-wrap: break-word;
}

.filterComponentConditionStyle {
  color: #0b6bcb !important;
  font-size: 14px !important;
  font-family: "Inter" !important;
  font-weight: 600 !important;

  word-wrap: break-word;
}

/* style of filter */
.filterSearchFilter {
  border-radius: 8px !important;
  background-color: #eee;
  display: block;
  z-index: 2;
  position: absolute;
  width: 875px;
  height: 71vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
  border: 1px solid #ccc;
  box-shadow: "0 2px 4px rgba(0, 0, 0, 0.1)";
  top: 55px;
}

.filterContainer {
  display: flex;
  flex-direction: column;
  gap: 25px;
  padding: 20px;
  border-radius: 6px;
  background: #f0f4f8;
  border: 1px solid #cdd7e1;
  max-height: 54vh;
  overflow: auto;
}

.filterSegment {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.conditionRow {
  padding: 10px;
  background: #edf5fd;
  border-radius: 6px;
  border: 1px solid #cdd7e1;
}

.filterlabelStyle {
  font-size: 14px;
  font-weight: 500;
  color: #171a1c;
  padding-bottom: 6px;
}

#filterEquipment .MuiFormControl-root {
  align-self: stretch;
  /* padding: 8px 12px; */
  background: #fbfcfe !important;
  box-shadow: 0px 1px 2px rgba(21, 21, 21, 0.08) !important;
  border-radius: 6px !important;
  border: 1px solid #97c3f0 !important;
}

#filterEquipment .MuiSelect-select,
#filterEquipment .MuiInputBase-input {
  color: #0b6bcb !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  height: 3px !important;
}

#filterEquipment .MuiInputLabel-root {
  color: #0b6bcb !important;
}

#filterEquipment .MuiIconButton-root {
  margin-right: 8px;
}

#filterEquipment .MuiTypography-root {
  color: #0b6bcb !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

.MuiMenuItem-root {
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* button.MuiButton-containedPrimary {
  background-color: #12467b !important;
} */
@media (max-width: 767px) {
  .filterSearchFilter {
    width: 90%;
    height: auto;
    position: relative;
    padding: 12px;
    margin: 16px;
  }

  .filterContainer {
    padding: 12px;
    gap: 15px;
    max-height: 40vh;
  }
}

/* Media query for medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 1023px) {
  .filterSearchFilter {
    width: 90%;
    height: auto;
    position: relative;
    padding: 16px;
    margin: 16px;
  }

  .filterContainer {
    padding: 16px;
    gap: 20px;
    max-height: 45vh;
  }
}

/* Media query for large devices (desktops, 1024px and up) */
@media (min-width: 1024px) and (max-width: 1279px) {
  .filterSearchFilter {
    width: 80%;
    height: auto;
    position: relative;
    padding: 16px;
    margin: 16px;
  }

  .filterContainer {
    padding: 18px;
    gap: 22px;
    max-height: 50vh;
  }
}

/* Media query for extra-large devices (large desktops, 1280px and up) */
@media (min-width: 1280px) {
  .filterSearchFilter {
    width: 875px;
    height: 71vh;
    position: absolute;
    padding: 16px;
  }

  .filterContainer {
    padding: 20px;
    gap: 25px;
    max-height: 50vh;
  }
}

.MuiPickersCalendarHeader-labelContainer,
.MuiTooltip-tooltip,
.MuiPickersYear-yearButton,
.MuiDayCalendar-weekDayLabel,
.MuiPickersDay-dayWithMargin {
  font-size: 14px !important;
}

.addEquipTableCls {
  max-height: 70vh;
}

/*---------------------------------------------DataGrid-----------------------------------------**/
#mainGridButton .MuiButton-root {
  font-size: 12px !important;
  font-family: var(--font-fam-body) !important;
  font-weight: 600 !important;
  color: var(--gridToolBar-button-color) !important;
  background: var(--gridToolBar-button-bg-color) !important;
  margin: 4px !important;
  border-radius: 6px !important;
  text-transform: capitalize;
  line-height: 24px;
  padding: 2px 6px 2px 7px;
}

#dataGrid .MuiDataGrid-root {
  font-family: var(--font-fam-body) !important;

  color: var(--table-data-color) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border: none;
}

#dataGrid .MuiDataGrid-row {
  font-family: var(--font-fam-body) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  max-height: max-content !important;
  max-width: max-content !important;
  /* line-height: 24px; */
}

#dataGrid .MuiDataGrid-row:nth-of-type(odd) {
  background-color: var(--grid-table-odd-bg-color);

  /* Light grey for odd rows */
}

/* Style for even rows */
#dataGrid .MuiDataGrid-row:nth-of-type(even) {
  background-color: var(--grid-table-even-bg-color);
  border-bottom: 1px solid var(--cell-border-color) !important;
  /* White for even rows */
}

/* Hover effect */
#dataGrid .MuiDataGrid-row:hover {
  background-color: var(--row-hover-bg-color) !important;
  cursor: pointer;
  /* Light blue for hover */
}
#dataGrid .MuiDataGrid-row.Mui-selected {
  background-color: #cbd9e7 !important;
}
#dataGrid .MuiDataGrid-columnHeaderRow {
  padding-left: 12px;
  padding-right: 12px;
}

#dataGrid .MuiDataGrid-toolbarContainer {
  border: 1px var(--cell-border-color) solid;
  border-bottom: none;
}

#dataGrid .MuiTablePagination-displayedRows,
#dataGrid .MuiTablePagination-input,
#dataGrid .MuiTablePagination-selectLabel,
#dataGrid .MuiSvgIcon-root,
#dataGridPro .MuiTablePagination-displayedRows,
#dataGridPro .MuiTablePagination-input,
#dataGridPro .MuiTablePagination-selectLabel,
.checklistTablePaginationFooter .MuiTablePagination-selectLabel,
.checklistTablePaginationFooter .MuiTablePagination-displayedRows {
  font-size: 12px !important;
}

#dataGrid .MuiDataGrid-toolbarContainer .MuiSvgIcon-root {
  font-size: 20px !important;
}

#dataGrid .MuiDataGrid-cell {
  /* border-left: 1px solid var(--cell-border-color) !important;
  border-bottom: 1px solid var(--cell-border-color) !important; */
  /* max-height: max-content !important; 
  max-width: max-content !important;*/
}
#dataGrid .MuiDataGrid-main {
  border: 1px var(--cell-border-color) solid;
  border-bottom: none;
}
.MuiDataGrid-panelWrapper .MuiFormLabel-root {
  font-size: 16px !important;
  font-weight: 600 !important;
}

.MuiInput-root-MuiSelect-root {
  color: var(--mui-input-field-color) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  height: 3px !important;
}

.MuiDataGrid-filterFormColumnInput,
.MuiDataGrid-filterFormOperatorInput {
  margin-right: 5px !important;
}

.MuiDataGrid-filterFormColumnInput .MuiNativeSelect-select,
.MuiDataGrid-filterFormOperatorInput .MuiNativeSelect-select,
.MuiDataGrid-filterFormValueInput input {
  font-size: 14px !important;
  font-weight: 400 !important;
}

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

#rowOperation li {
  display: flex !important;
  align-items: center !important;
}

#rowOperation li button {
  width: 100% !important;
  display: flex !important;
  justify-content: flex-start !important;
  text-transform: none !important;
  font-size: 14px !important;
  padding-left: 0px !important;
  border: none;
}

.MuiDataGrid-menuList li {
  font-size: 14px !important;
}

#dangerDelete button {
  background-color: var(--delete-button-bg-color) !important;
  color: var(--delete-button-color) !important;
  font-size: 14px !important;
  font-family: var(--font-fam-body) !important;
  font-weight: 600 !important;
  margin: 6px !important;
  border-radius: 6px !important;
}

.rowSelectToolBar {
  background-color: var(--rowSelTopToolBar-bg-color);
}

.equipmentImgList .MuiImageList-root {
  max-height: 49vh;
  min-height: 49vh;
  overflow: auto;
}
.equipmentImgList .MuiImageList-root li.MuiImageListItem-root {
  overflow: hidden;
}

.thumbnail {
  object-fit: cover !important;
  border-radius: 8px;
  border: 1px solid var(--thumbnail-border-colo);
  cursor: pointer;
}

.imageTitleCls .MuiImageListItemBar-titleWrap {
  position: relative;
  background-color: #fff;
  color: #000;
  border: 1px solid #e5e7eb;
}

.MuiDataGrid-footerContainer {
  justify-content: center !important;
  border: 1px var(--cell-border-color) solid;
  border-top: none;
}

.settingPageheader {
  font-size: 20px;
  font-weight: 700;
}

.logoDiv {
  height: 100%;
  background-color: var(--logo-div-bg-color);
  padding: 16px 65px 16px 16px;
}

.logoDiv img {
  max-width: 200px;
  height: 38px;
  width: 168px;
  max-height: 38px;
}

.fontStyleLabel {
  font-size: 14px;
  font-weight: 600;
}

.sidebarAccordion {
  min-height: 80vh;
  max-height: 80vh;
  overflow: auto;
}

.sideBarSearchCls {
  background-color: var(--sideBar-Search-bg-color);
  border-radius: 6px;
}

.sideBarSearchCls input,
#sidebar input {
  padding: 6px 8px 6px 0px !important;
}

.sideBarSearchCls .MuiOutlinedInput-root,
#sidebar .MuiOutlinedInput-root {
  padding-left: 8px !important;
}

.sideBarSearchCls .searchIconCls {
  width: 24px;
  height: 24px;
}

.sideBarSearchCls fieldset {
  border: 0;
}

#dataGrid .MuiTablePagination-select,
#dataGridPro .MuiTablePagination-select,
.checklistTablePaginationFooter .MuiTablePagination-select {
  background-color: var(--mui-table-pagination-select-bg-color);
  border-radius: 8px;
  box-shadow: 0px 1px 2px 0px var(--mui-table-pagination-select-shadow);
  color: var(--mui-table-pagination-select-color);
  opacity: 0.64;
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  padding-top: 8px;
}

#dataGrid .MuiTablePagination-selectLabel,
#dataGrid .MuiTablePagination-displayedRows,
#dataGridPro .MuiTablePagination-selectLabel,
#dataGridPro .MuiTablePagination-displayedRows,
.checklistTablePaginationFooter .MuiTablePagination-selectLabel,
.checklistTablePaginationFooter .MuiTablePagination-displayedRows {
  margin-bottom: 0px;
  color: var(--mui-table-display-row-color);
}

#dataGrid .MuiTablePagination-actions .MuiButtonBase-root.MuiIconButton-root,
#dataGridPro .MuiTablePagination-actions .MuiTablePagination-actions,
.checklistTablePaginationFooter
  .MuiTablePagination-actions
  .MuiButtonBase-root.MuiIconButton-root {
  background-color: var(--mui-table-datagrid-iconButton-color);
  border-radius: 6px;
  padding: 2px 12px;
  margin-left: 5px;
}

#dataGrid
  .MuiTablePagination-actions
  .MuiButtonBase-root.MuiIconButton-root.Mui-disabled,
#dataGridPro
  .MuiTablePagination-actions
  .MuiButtonBase-root.MuiIconButton-root.Mui-disabled
  .checklistTablePaginationFooter
  .MuiTablePagination-actions
  .MuiButtonBase-root.MuiIconButton-root.Mui-disabled {
  background-color: unset !important;
}

#dataGrid .MuiTablePagination-actions .MuiSvgIcon-root,
#dataGridPro .MuiTablePagination-actions .MuiSvgIcon-root,
.checklistTablePaginationFooter .MuiTablePagination-actions .MuiSvgIcon-root {
  font-size: 20px !important;
}

#sideBarContentContainer .MuiAccordionSummary-content h6 {
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  color: var(--Sidebar-h6-color);
  font-family: "Inter";
}

#sideBarContentContainer ul.MuiList-root a {
  font-family: "Inter";
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 14px;
  color: var(--Sidebar-h6-color);
}

#sideBarContentContainer ul.MuiList-root a.active-link {
  color: var(--Sidebar-active-link);
}

#sideBarContentContainer ul.MuiList-root .MuiButtonBase-root {
  padding: 0px 0 0px 8px;
}

.sidebarAccordion .MuiAccordionSummary-content.Mui-expanded,
.sidebarAccordion .MuiAccordionSummary-expandIconWrapper.Mui-expanded {
  margin: 20px 0 0 0;
}

.listHeadingIcon {
  width: 20px;
  height: 20px;
}

#sideBarContentContainer .sidebarAccordion .MuiAccordionSummary-root {
  padding-left: 0px;
}

#sideBarContentContainer .sidebarAccordion .MuiAccordionDetails-root {
  padding: 0px 16px 0px 0px;
}

#sidebar .MuiPaper-elevation.Mui-expanded {
  border: none;
}

#dataGrid .MuiDataGrid-columnHeaderTitle {
  color: var(--table-header-color);
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  font-family: var(--font-fam-body);
}

.filterButton {
  font-size: 12px !important;
}

.filterTopBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.filterTopBarRight {
  display: flex;
  align-items: center;
  gap: 2px;
}

.filterFooter {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #ccc;
}

.importCompHeader {
  background-color: var(--import-cont-bg-color);
}

.importCompHeaderInner {
  flex-direction: column;
  gap: 10px;
}

.importCompTitleStyle {
  font-size: 22px;
  color: var(--import-title-color);
  font-family: "Inter";
  font-weight: 700;
  word-break: break-all;
}

.importCompSuBHeader {
  color: var(--import-label-color);
  font-size: 16px;
  font-weight: 400;
}

.importCompBody {
  display: flex;
  gap: 32px;
}

.importCompBodyInner {
  width: 646px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.importCompDownload {
  padding: 2px 12px;
  background-color: var(--import-field-bg-color);
  border-radius: 6px;
  display: flex;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  color: var(--import-field-color);
  font-size: 14px;
  font-weight: 600;
  word-wrap: break-word;
}

.importCompImportlabel {
  font-size: 14px;
  font-weight: 500;
  word-wrap: break-word;
  color: var(--import-label-color);
}

.importCompImportButtonOuter {
  flex: 1;
  padding: 6;
  background: var(--import-field-bg-color);
  box-shadow: 0px 1px 2px rgba(21, 21, 21, 0.08);
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.importCompImportButtonInner {
  flex: 1;
  opacity: 0.64;
  color: var(--import-label-color);
  font-size: 14px;
  font-weight: 400;
  word-wrap: break-word;
  opacity: 0.64;
}

.importCompFooter {
  display: "flex";
  justify-content: flex-end;
  gap: 8;
  border-top: 1px var(--import-footer-border-col) solid;
}

.importCompFooterButton {
  padding: 4px 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 14px;
  word-wrap: break-word;
}

.importCompFooterButtonExit {
  border: none;
  border-radius: 6px;
  background: var(--import-danger-bg-color);
  color: var(--import-danger-color);
}

.importCompFooterButtonSave:disabled {
  color: var(--import-save-dis-color);
}

.importCompFooterButtonSave {
  border-radius: 6px;
  border: none;
  background: var(--import-save-dis-bg-color);
  color: var(--import-save-color);
}

.importCompBodySelectDiv {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--import-label-color);
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  word-wrap: break-word;
}

.importCompBodyDropDown {
  padding: 6px;
  background: var(--import-field-bg-color) !important;
  border-radius: 6px;
  border: none;
}

.border-left-none {
  border-left: none;
}

.tableCheckBoxCell {
  border-right: 1px solid lightgray;
}

.MuiDataGrid-selectedRowCount {
  visibility: hidden !important;
}

.not-valid-column-container {
  border: 1px solid #d9534f;
  background-color: #f8d7da;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  max-width: 400px;
  margin: 0 auto;
}

.title {
  font-size: 1.5rem;
  color: #d9534f;
  margin-bottom: 12px;
}

.column-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.column-name {
  margin: 0 8px;
  font-weight: bold;
  color: #333;
}

.arrow {
  color: #888;

  margin: 0 8px;
}

/* Default height for large screens  customized dataGrid*/
#dataGrid {
  width: 100%;
}

.dataGridLarge {
  height: 90%;
}

.dataGridMedium {
  height: 84%;
}

.dataGridSmall {
  height: 87%;
}

/* Medium screens */

@media (min-width: 1800px) {
  .dataGridLarge {
    height: 90%;
  }

  .dataGridMedium {
    height: 87%;
  }

  .dataGridSmall {
    height: 75%;
  }
}

@media (min-width: 1600px) and (max-width: 1800px) {
  .dataGridLarge {
    height: 97%;
  }

  .dataGridMedium {
    height: 80%;
  }

  .dataGridSmall {
    height: 82%;
  }
}

@media (max-width: 120px) {
  /* .dataGridLarge {
    height: 458px;
  } */

  .dataGridMedium {
    height: 74%px;
  }

  /* .dataGridSmall {
    height: 400px;
  } */
}

/* Small screens */
/* @media (max-width: 768px) {
  .dataGridLarge {
    height: 850px;
  }

  .dataGridMedium {
    height: 790px;

  }

  .dataGridSmall {
    height: 330px;
  }
} */

/* Extra small screens */

/*------------------------------tour guide css starts ----------------------------*/
.react-joyride__tooltip {
  font-family: var(--font-fam-body);
  font-weight: 400;
  text-align: left !important;
  color: #171a1c !important;
  font-size: 12px !important;
  width: 690px !important;
}

.react-joyride__tooltip h4 {
  font-family: var(--font-fam-body);
  font-size: 20px !important;
  color: #171a1c !important;
  font-weight: 700;
  text-align: left !important;
}

.react-joyride__tooltip h4 + div {
  text-align: left;
  padding-left: 0px !important;
}

button[aria-label="Skip Tour"] {
  background-color: #e3effb !important;
  color: #12467b !important;
  font-family: var(--font-fam-body);
  font-weight: 600;
}

button[aria-label="Continue"] {
  background-color: #0b6bcb !important;
  color: #fff !important;
  font-family: var(--font-fam-body);
  font-weight: 500;
}

/*------------------------------tour guide css ends -------------------------------*/

.democlassName {
  background-color: red;
}

.MuiDataGrid-main {
  overflow: auto;
  height: 50vh;
}

.MuiDataGrid-columnHeaderTitle {
  color: var(--table-header-color);
  font-size: 16px;
  font-style: normal;
  font-weight: 600 !important;
  font-family: "Inter";
}

.MuiDataGrid-row {
  font-size: 16px !important;
  font-weight: 400 !important;
}

.MuiDataGridfdsfsd {
  border-left: 1px solid var(--cell-border-color) !important;
  border-bottom: 1px solid var(--cell-border-color) !important;
}

.dataGridPro {
  height: 82vh;
}

.tab-content {
  height: 70vh;
  overflow: auto;
}

@media (min-width: 2000px) {
  .dataGridPro {
    height: 81vh;
  }

  .MuiDataGrid-main {
    height: 60vh;
  }

  .tab-content {
    height: 76vh;
  }
}

@media (min-width: 1024px) and (max-width: 1400px) {
  .dataGridPro {
    height: 80vh;
  }
}

@media (min-width: 1440px) and (max-width: 2000px) {
  .dataGridPro {
    height: 82vh;
  }

  .tab-content {
    height: 76vh;
  }

  .MuiDataGrid-main {
    height: 60vh;
  }
}

@media (max-width: 480px) {
  .dataGridPro {
    height: 72vh;
  }
}

.MuiFormControlLabel-label {
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: var(--font-fam-body) !important;
}

.backgroundColorF7 {
  background-color: #f7c5c5;
}

.backgroundColorFc {
  background-color: #fce1c2;
}

.backgroundColor {
  background-color: #fce1c2;
}

/*-----------------------Tour guide-------------------------------- **/

/* Tooltip Body */
.tooltip__body {
  background-color: #fff;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  max-width: 300px;
  position: relative;
  z-index: 10000;
  color: #333;
  font-family: Arial, sans-serif;
}

/* Tooltip Title */
.tooltip__title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #000;
}

/* Tooltip Content */
.tooltip__content {
  font-size: 14px;
  margin-bottom: 16px;
  color: #555;
}

/* Close Button */
.tooltip__close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #888;
}

.tooltip__close:hover {
  color: #333;
}

/* Tooltip Footer */
.tooltip__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Footer Spacer */
.tooltip__spacer {
  display: flex;
  gap: 8px;
}

/* Tooltip Buttons */
.tooltip__button {
  padding: 8px 12px;
  border: 1px solid #ddd;
  background-color: #f5f5f5;
  color: #333;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.tooltip__button:hover {
  background-color: #eee;
}

/* Primary Button */
.tooltip__button--primary {
  background-color: #007bff;
  color: #fff;
  border: 1px solid #007bff;
}

.tooltip__button--primary:hover {
  background-color: #0056b3;
}

.tooltip_Content {
  font-size: 14px;
  font-weight: 400;
  font-family: var(--font-fam-body) !important;
  line-height: 27.9px;
}

ul.tooltip_Content li {
  text-align: left;
}

.skipButtonStyle {
  color: "#12467B";
  background-color: #e3effb;
  font-size: 16px;
  font-weight: bold;
  padding: 6px 24px 6px 24px;
  gap: 12px;
}

.continueButtonStyle {
  color: #ffffff;
  background-color: #0b6bcb;
  font-size: 16px;
  font-weight: bold;
  padding: 6px 24px 6px 24px;
  gap: 12px;
}

.backButtonStyle {
  color: #0b6bcb;
  font-size: 16px;
  font-weight: bold;
  padding: 6px 24px 6px 24px;
  gap: 12px;
}

.customizeGridCellStyle {
  border-left: 1px solid var(--cell-border-color) !important;
  border-bottom: 1px solid var(--cell-border-color) !important;
}

.MuiTypography-h2 {
  font-family: var(--font-fam-body) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 39.9px !important;
}

.tableCellTextStyle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
/*-----------------------Tour guide-------------------------------- **/

.checklistTableheightStep {
  min-height: 300px;
  overflow: auto;
  min-width: 920px;
  width: 100%;
}
.checkListTableHeight {
  max-height: 66vh;
  overflow: auto;
  min-width: 920px;
  width: 100%;
}
@media (min-width: 1800px) {
  .checkListTableHeight {
    max-height: 68vh;
  }
}

@media (min-width: 1600px) and (max-width: 1800px) {
  .checkListTableHeight {
    max-height: 68vh;
  }
}

.highlighted-row {
  background-color: rgba(255, 224, 178, 0.5) !important;
  /* Light orange color */
}
#nestedOrderDetails .MuiDataGrid-root {
  min-height: 20vh;
  max-height: 40vh;
  overflow: auto;
}
#nestedOrderDetails .MuiPaper-elevation1 {
  border: none !important;
}
.orderInnerDatagrid {
  height: "100%";
  box-sizing: border-box;
  width: 100%;
  overflow-x: hidden;
  padding: 10px;
  border-bottom: 1px solid var(--table--border-color);
}

.graphSideBarStyle {
  padding: 6px 12px 6px 12px;
  cursor: pointer;
}
.graphSideBarStyleClick {
  background-color: var(--sidebar-header-active) !important;
  color: var(--sidebar-act-link-color) !important;
}

.graphSideBarStylePlantLocation {
  color: var(--svg-icon-color) !important;
}

.graphSideBarTextStyle {
  font-size: 12px !important;
  font-weight: 600 !important;
  font-family: var(--font-fam-body) !important;
}

#muiFilterColumnDate input {
  padding: 9.5px 14px !important;
}

.dataGridCheckList {
  height: 64%;
}

.publicWebsiteForm {
  height: 40vh;
}

.dataGridResponsibility,
.dataGridChildren {
  height: 61%;
}

@media (min-width: 1800px) {
  .dataGridCheckList {
    height: 71%;
  }
}
@media (min-width: 1600px) and (max-width: 1800px) {
  .dataGridCheckList {
    height: 75%;
  }
}

@media (min-height: 769px) and (max-height: 1080px) {
  .publicWebsiteForm {
    height: 49vh;
  }
}

@media (min-height: 1081px) and (max-height: 1440px) {
  .publicWebsiteForm {
    height: 54vh;
  }
}

#chartDateRange input {
  height: 7px !important;
}

.graphDashBoardContainer {
  height: 84vh;
  background: #fbfcfe;
  margin: 0px !important;
  overflow: auto;
}

@media (min-width: 2000px) {
  .graphDashBoardContainer {
    height: 84vh;
  }
}

@media (min-width: 1024px) and (max-width: 1400px) {
  .graphDashBoardContainer {
    height: 83vh;
  }
}

@media (min-width: 1440px) and (max-width: 2000px) {
  .graphDashBoardContainer {
    height: 86vh;
  }
}

@media (max-width: 480px) {
  .graphDashBoardContainer {
    height: 76vh;
  }
}
#pruefPlanDetail .MuiDataGrid-main {
  height: auto !important;
}
#saveFiltercont .MuiInputBase-root {
  height: 32px;
}

.createTicketFormContainer {
  max-width: 100%;
  margin: 20px auto 20px auto;
  display: flex;
  justify-content: center;
  padding: 10px;
}
.selectionBtn {
  color: #000;
  width: 200px;
  height: 130px;
  border-radius: 6px;
  background-color: transparent;
  border-color: #005cbf;
}
.selectionBtn.active {
  background: var(--gridToolBar-button-bg-color) !important;
}
.questionDialog.MuiModal-root,
#CreateTemplatePopUp {
  z-index: 9999;
}
.cancelActionBtn {
  background-color: #f0f4f8;
  border: none;
}
.faultImageFileInputCls label {
  min-width: 105px;
}
.publicWebFooterCls {
  justify-content: center;
  gap: 40px;
  align-items: center;
  padding-top: 5px;
  font-size: 12px;
}
.nav-tabs.equipDetailsNav .nav-item {
  margin: 5px;
}
.nav-tabs.equipDetailsNav .nav-item .nav-link {
  border-radius: 0.25rem;
  font-size: 14px;
  padding: 0.5rem;
}
.nav-tabs.equipDetailsNav .nav-item a:hover {
  border: 1px solid transparent;
  color: #fff;
  cursor: pointer;
}

.equipDetailContainer {
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  margin-bottom: 4px;
}

.equipDetailImgContent .MuiCardMedia-root {
  min-height: 402px;
  height: auto;
}

.equipDetailMainAttrList {
  margin-top: 16px;
  font-size: 16px;
}

.labelColumn > div,
.equipDetailMainAttrValueList > div {
  display: flex;
  flex-direction: column;
  margin-bottom: 8px;
}
.listBorder:not(:last-child) {
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 8px;
  margin-bottom: 8px;
}

.labelColumn .createdDate,
.labelColumn .dateText,
.createdDate,
.dateText {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.4;
  margin-top: 4px;
  display: block;
}

.equipDetailMainAttrValueList {
  justify-content: end;
  color: #000;
  display: flex;
}

.viewAllImagesBtn,
.view-all-images-btn {
  border: 1px solid #d3d3d3 !important;
  color: #000 !important;
  font-size: 14px !important;
  border-radius: 6px !important;
  text-transform: none !important;
  background-color: transparent !important;
  display: flex;
  align-items: center;
}

.activeStatusCls {
  background-color: #e3fbe3;
  padding: 3px 5px;
  align-items: center !important;
  border-radius: 15px;
  color: rgb(10, 71, 10);
}

.inActiveStatusCls {
  background-color: #fbe3e3;
  padding: 3px 5px;
  align-items: center !important;
  border-radius: 15px;
  color: #aa0000;
}

.leftCol {
  margin-right: 15px;
}

.muibutton {
  background-color: #ffffff;
  color: #4b4a4a !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  border: 1px solid #d3d3d3;
  text-transform: none !important;
  width: 100%;
  margin-top: 20px;
  display: flex;
}

.card-container {
  display: flex;
  flex-direction: column;
  position: relative;
}

.card-content {
  flex: 1 1 auto;
}

.card-media-height {
  height: 100%;
  min-height: 200px;
}

.btn-end {
  margin-top: auto;
}
.priorityCls {
  padding: 2px 20px;
  text-align: center;
  border-radius: 15px;
  margin-bottom: 15px;
  font-size: 16px;
  display: inline-block;
  height: 30px;
  border: 1px solid #d3d3d3;
  min-width: 100px;
}
.priorityClsForTicketList {
  padding: 2px 20px;
  text-align: center;
  border-radius: 15px;
  font-size: 12px;
  display: inline-block;
  height: 26px;
  border: 1px solid #d3d3d3;
  min-width: 88px;
}
.highPriority {
  background-color: #ec0808;
  color: white;
}
.mediumPriority {
  background-color: #eab308;
}
.lowPriority {
  color: black;
}
.justifyContentSpaceBetw {
  justify-content: space-between;
}
.BrowseBtnContainer {
  position: relative;
  display: flex;
  justify-content: center;
}
.BrowseBtnContainer input {
  opacity: 0;
  position: relative;
  width: 100%;
  cursor: pointer;
  z-index: 1;
  height: 95px;
}
.leftCol,
.rightCol {
  border: 1px solid #e5e7eb;
  margin-right: 15px;
  border-radius: 10px;
}
.boldTitle {
  color: #000;
}
.BrowseBtnContainer {
  position: relative;
  display: flex;
  justify-content: center;
}
.BrowseBtnContainer input {
  opacity: 0;
  position: relative;
  width: 100%;
  cursor: pointer;
  z-index: 1;
  height: 95px;
}
.Browsebtn {
  position: absolute;
  top: 0;
  z-index: 0;
}
.Browsebtn button {
  cursor: pointer;
}
.noImgCls {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ccc;
  height: 100%;
}
.zoomInIconCls {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 100%;
  width: 30px;
  height: 30px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2px 0 0 2px;
}
.zoomInIconCls {
  opacity: 0;
  cursor: pointer;
}
.zoomInIconCls svg {
  font-size: 20px;
}
.equipmentImgList li.MuiImageListItem-root:hover img,
img.thumbnailPreview:hover,
.imageDiv:hover {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  scale: 1.1;
  filter: brightness(0.9);
  cursor: pointer;
}
.equipmentImgList li.MuiImageListItem-root:hover .zoomInIconCls {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  opacity: 1;
}
.simpleListTable thead th {
  color: #71717a !important;
  font-weight: 500;
  font-size: 1.5rem !important;
}
.simpleListTable thead tr,
.simpleListTable tbody tr {
  border: 1px solid rgba(224, 224, 224, 1);
}
.simpleListTable tbody tr td {
  color: #09090b;
  border: 0 none;
  font-size: 1.3rem !important;
}
.simpleListTable tr:hover {
  background-color: #f4f4f5;
}
.deleteImgIconCls {
  color: #ef4444;
  font-size: 24px !important;
  cursor: pointer;
}
.generalIconCls {
  color: #1976d2;
  font-size: 19px !important;
  cursor: pointer;
}
.catergorySelectPlaceholder {
  color: #6b7280;
}
.fileUploadButton {
  margin-top: 20px;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.attachmentContainer {
  border: 2px dashed #cccccc;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  margin-bottom: 8px;
  position: relative;
}
.actionBtnCls {
  background: 0 none;
  border: 0 none;
  color: #09090b;
  font-weight: 500;
  font-size: 1.5rem;
  padding: 5px 8px;
  border-radius: 2px;
}
.actionBtnCls:hover {
  background-color: #f4f4f5;
}
/* ------------------inspection details form ------------------- */

.question-response-table {
  width: 100%;
  border-collapse: collapse;
  /* border-left: 2px solid #ccc;
  border-right: 2px solid #ccc; */
  border: 1px solid #e5e7eb;
}

.table-cell {
  padding: 12px;
  border-bottom: 1px solid #ddd;
}

.no-vertical-border {
  border-right: none;
  border-left: none;
}

.question-response-table th {
  /* border-top: 1px solid #e5e7eb;
  border-right: none;
  border-bottom: none; */
  border: none;
  background-color: #f3f4f6;
  font-size: medium !important;
}

.question-response-table tbody tr:last-child td {
  border-bottom: none;
}

.question-response-table tbody tr td {
  font-size: medium !important;
}

.inspection-checklist-container {
  display: flex;
  justify-content: space-between;

  padding: 16px;
  gap: 20px;
  border-radius: 8px;
}

.checklist-info,
.inspection-details,
.equipment-attributes-section {
  flex: 1;
  background-color: #f9fafb;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.section-title {
  font-weight: 600;
  margin-bottom: 8px;
  padding-bottom: 4px;
}
.checklist-info div,
.inspection-details div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.checklist-info strong,
.inspection-details strong {
  margin-left: auto;
}
.ticketDescriptionArea {
  line-height: normal !important;
}
.ticketRaiseForm .MuiTextField-root {
  margin-left: 0px !important;
}
.ticketRaiseForm #fileUpload {
  display: none;
}
.ticketRaiseForm .faultImageFileInputCls label,
.ticketRaiseForm .faultImageFileInputCls fieldset {
  display: none;
}
.documentIcon {
  margin-right: 10px;
  color: #ef4444;
  font-size: 2rem !important;
  vertical-align: bottom;
}
.maintenanceFormFieldContainer label {
  font-size: 1.3rem !important;
}
.MuiButtonBase-root {
  font-size: 1.4rem !important;
}
.removeFileIconCls {
  cursor: pointer;
}
.containedBtnCls {
  background-color: var(--btn-bg-color) !important;
  border-color: var(--btn-bg-color) !important;
}
.react-datepicker-popper {
  z-index: 2 !important;
}
#alert-dialog-description {
  font-size: 14px;
}
.inspectionStatusTitle {
  align-items: anchor-center;
}

.inspection-label {
  color: black !important;
  font-size: 14px !important;
  background-color: white;
}

.public-inspections-message-container {
  text-align: center;
  margin: 32px 0 24px 0;
}

.public-inspections-message-text {
  font-weight: bold;
  font-size: 1.5rem;
  color: #333;
}

.public-inspections-separator {
  display: flex;
  align-items: center;
  margin: 32px 0 16px 0;
}

.public-inspections-separator-line {
  flex: 1;
  height: 1px;
  background: #ccc;
}

.public-inspections-separator-or {
  margin: 0 16px;
  color: #888;
  font-weight: bold;
  font-size: 1.1rem;
}

.public-inspections-button-container {
  text-align: center;
  margin-bottom: 32px;
}

.public-inspections-continue-btn {
  padding: 10px 28px;
  font-size: 1.1rem;
  border-radius: 6px;
}

.public-inspections-note {
  margin-top: 10px;
  color: #888;
  font-size: 1.08rem;
  text-align: center;
}

/* InspectionReports/index.js styles */
.attribute-selector-box {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 1px;
}

.attribute-selector-row {
  height: 450px;
}

.panel-paper {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 16px;
}

.left-panel-paper {
  border-right: 1px solid #ddd;
}

.search-paper {
  padding: 2px 4px;
  display: flex;
  align-items: center;
  width: 100%;
  background-color: #e3effb !important;
  border-bottom: 1px solid #2196f3;
}

.search-icon {
  padding: 10px;
  color: #2196f3;
}

.attribute-list {
  flex: 1;
  overflow-y: auto;
}

.MuiList-root.left-panel-list {
  margin-top: 16px;
  padding-top: 0px;
  padding-right: 8px;
}

.attribute-list-item {
  margin-bottom: 8px;
  background-color: #f5f5f5;
  border: 1px solid #eee;
  border-radius: 4px;
}

.no-attributes-message {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: #9e9e9e;
}

.drag-indicator-icon {
  margin-right: 16px;
  color: #757575;
}
/* ---------------public checklist-------------- */
.public-checklist-accordion-summary {
  background-color: #f5f5f5 !important;
  border-radius: 4px;
  padding: 8px 16px !important;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  min-height: 48px !important;
}
.public-checklist-accordion-summary::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #f5f5f5;
  border-radius: 8px;
  z-index: -1;
}
.public-checklist-sectionHeader {
  font-weight: 600 !important;
  font-size: 16px !important;
  color: #374151 !important;
  text-align: center;
  flex: 1;
  margin: 0 !important;
  position: relative;
  z-index: 1;
}

.public-checklist-accordion-summary .MuiAccordionSummary-expandIconWrapper {
  display: none !important;
}

.public-checklist-accordion-summary .MuiTypography-root {
  font-weight: 600 !important;
  font-size: 16px !important;
  color: #374151 !important;
}

.public-checklist-arrowIcon {
  font-size: 18px !important;
  color: #374151 !important;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.MuiCard-root.public-checklist-card {
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1) !important;
  border-radius: 12px;
  transition: transform 0.3s ease-in-out;
  cursor: pointer;
  background-color: #ffffff;
  border: 0.5px solid #fafafaff;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.MuiCard-root.public-checklist-card:hover {
  transform: scale(1.05);
}

.public-checklist-cardTitle {
  font-size: 1.45rem !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  line-height: 1.4;
  margin-bottom: 8px !important;
}

.public-checklist-subTitle {
  font-size: 1.23rem !important;
  color: #64748b !important;
  margin-bottom: 12px !important;
  line-height: 1.3;
}

.public-checklist-accordion-details {
  padding-top: 16px;
  padding-bottom: 16px;
  padding-left: 16px;
  padding-right: 16px;
}

.public-checklist-startInspectionButton {
  white-space: nowrap;
  padding: 8px 16px;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #2563eb;
}

.public-checklist-startInspectionButton:hover {
  background-color: rgba(37, 99, 235, 0.04);
}

.publicWebsiteFooter {
  z-index: 1;
}

.multiselect-btn {
  background: var(--form-control-not-empty-bg);
  box-shadow: 0px 1px 2px 0px rgba(21, 21, 21, 0.08);
  border: 1px solid #ccc;
  color: var(--form-field-font-col);
}

.multiselect-btn:hover {
  color: var(--form-field-font-col);
}

.publicInspectionTable .MuiDataGrid-columnHeaderTitleContainerContent {
  overflow: initial !important;
}
.summaryCardContainer {
  flex: 1;
  min-width: 130px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  padding: 24px 18px 18px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid #e0e3e7;
}
.summaryCardValue {
  font-size: 28px;
  font-weight: 700;
  color: "#222";
  margin-bottom: 2px;
  white-space: nowrap;
  width: 100%;
  text-align: center;
}
.summaryCardLabel {
  font-size: 12px;
  color: "#6c757d";
  font-weight: 500;
  text-align: center;
  min-height: 50px;
}
.dashboardTabContainer {
  overflow: auto;
}
.graphDashBoardContent {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  padding-left: 16px;
}
.equipDetailSection,
.qrCodeSection {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}
.gap-16 {
  gap: 16px;
}

/* Equipment PopOver Styles */
.equipment-modal-overlay {
  opacity: 1;
  display: block;
}

.equipment-add-button {
  white-space: normal;
}

.equipment-children-table {
  max-height: 300px;
}

#dataGrid .customRadioInput .MuiSvgIcon-root {
  font-size: 18px !important;
}

@media screen and (max-width: 600px) {
  .inspection-dialog h4 {
    font-size: 0.875rem;
  }
  .inspection-dialog p {
    font-size: 0.75rem !important;
  }
  h5.inspectionStatusTitle {
    font-size: 0.875rem;
  }
  .inspection-checklist-container h5 {
    font-size: 0.875rem;
  }
  .checklist-info strong,
  .inspection-details strong {
    font-size: 0.75rem;
  }
  .inspection-dialog h6 {
    font-size: 0.75rem !important;
  }
  .question-response-table th,
  .question-response-table tbody tr td {
    font-size: 0.75rem !important;
    padding: 8px;
  }
  .inspection-dialog .MuiButtonBase-root {
    font-size: 0.875rem !important;
  }
  .inspection-dialog .MuiDialogTitle-root {
    padding: 8px 12px !important;
  }
  .inspection-dialog .MuiDialogContent-root {
    padding: 10px 12px !important;
  }
  .inspection-dialog .inspection-checklist-container {
    padding: 8px 0 !important;
  }
  .publicInspectionTable .equipDetailContainer {
    padding: 1rem !important;
  }
  /*.publicInspectionTable #dataGrid .MuiDataGrid-cell,
  .publicInspectionTable .MuiDataGrid-columnHeader {
    width: auto !important;
    max-width: max-content !important;
  }*/
}

/* ---------------------------------------------------
    Inspection Overview Component CSS
----------------------------------------------------- */
.inspection-overview-container {
  padding: 20px;
}

.inspection-overview-content {
  margin-top: 20px;
}

.inspection-list-container {
  max-width: 100%;
  padding-bottom: 20px;
}

.inspection-card {
  margin-bottom: 16px;
  padding: 16px !important;
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  background-color: #f5f5f5 !important;
  border-radius: 8px !important;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.inspection-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  background-color: #efefef !important;
}

.inspection-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.inspection-card-title {
  font-weight: 600 !important;
  font-size: 16px !important;
  color: #333 !important;
  margin: 0 !important;
  padding: 0;
}

.inspection-card-date {
  font-size: 13px;
  color: #666;
  margin-top: 4px;
  padding: 0;
}

.inspection-card-status {
  margin-left: 16px;
  font-weight: 600;
  border-radius: 8px !important;
  height: 26px !important;
  font-size: 1.2rem !important;
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .inspection-overview-container {
    padding: 12px;
  }

  .inspection-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 12px !important;
  }

  .inspection-card-status {
    margin-left: 0;
    margin-top: 12px;
    align-self: flex-start;
  }

  .inspection-card-title {
    font-size: 14px;
  }

  .inspection-card-date {
    font-size: 12px;
  }
}
.lb-container {
  position: absolute !important;
}
.MuiDataGrid-columnHeader[data-field="actions"] .MuiDataGrid-columnHeaderTitle {
  display: none;
}
.rmsc.multi-select .dropdown-content {
  z-index: 2;
}