:root {
  --main-color: #ae1930;
  --main-font: 'Open Sans', sans-serif;
  --light-grey: #e1e1e1;
  --second-color:#edc8ce;
  --dark-grey:#222222;
  --main-size: 14px;
  --link-color: #0d6efd;
  --link-color-hover:#6ea6f7;
  --warning-color: #ae1930;
}
body{font-family: var(--main-font); font-size: var(--main-size);}
/* .showcols, .showrows{width:50%; float: left;} */
img{max-width: 100%;}
a, button{cursor: pointer; text-decoration: none; color: var(--link-color);}
a:hover, button:hover{color: var(--link-color-hover);}
.btn { border:#666 1px solid;    display: inline-block;    font-size: 14px;    margin: 0 5px 3px 0;    cursor: pointer;    color:#fff;    background-color: #666;    text-decoration: none;    border-radius: 0;    line-height: 1.3;}
.clear-btn{border: none; background: none;}
button.no-style{border: none;     background: none;}
a.disabled{    pointer-events: none; color:#666;}
a.button-red:hover{color:#fff}
.maincolor{color: var(--main-color); }
.btn:hover, .btn.active{    color: #fff;    background-color: #ccc;    border:#ccc 1px solid;}
.white-btn{border: var(--light-grey) 1px solid; color: var(--main-color); background-color: #fff;     border-radius: 0.25rem;}
.white-btn:hover{background-color: var(--main-color); color:#fff;}
.animation-mode{  -webkit-transition: all 0.3s ease-out;  -moz-transition: all 0.3s ease-out;  -ms-transition: all 0.3s ease-out;  -o-transition: all 0.3s ease-out;  transition: all 0.3s ease-out;  }
.float-left{float:left;}


.main-box { width:100%; margin:0 auto; padding:50px; }
.box600 { width: 600px; margin: 0 auto; padding: 50px; border:1px solid #000; border-radius:5px; }
.center { text-align:center; }
.left { text-align:left; }
.button { margin: 20px; display: inline-block; padding: 0.5em 3em; text-align: center; text-decoration: none; font-size: 16px; font-family: Helvetica; cursor: pointer; border: 1px solid #000; color: #3498db; border-radius: 3px; margin-bottom:20px; }
.button-dark { background-color:#f1f1f1;}
.button-blue { background-color:#3498db; color:#fff; }
.button-red { background-color:#DA203D; color:#fff; font-weight: bold;}
.image-box:hover img { /*transform: scale(2); border:1px solid #000; transition: all 0.3s ease-in-out; */}
/* .exists { color:green; } */
.warning { color: var(--main-color); }
.form-box { border:1px solid #000; border-radius:5px; width:600px; margin:0 auto; padding:50px 0px; text-align: center !important;}
.image-box { max-width: 200px !important; }

.overlay {    width: 100%;    background: rgba(0, 0, 0, 0.5);    position: fixed;    height: 100%;    top: 0;    left: 0;    z-index: 98;}
.popup{z-index: 99; max-height: 90%;    position: fixed;  overflow: scroll;  top: 50%;  left: 50%; background-color: #fff; width:80%; max-width: 1200px;     transform: translate(-50%, -50%); padding:50px; border-radius: 10px;}
.notice{font-size: 12px; color:var(--main-color);}

.leftbar{    width: 300px;  float: left;  padding:15px 0;     height: calc(100vh - 50px);  background: #efeff3;  border-right: 1px solid #e1e1e1;}
.right-content{    width: calc(100% - 300px);  float: left;     height: calc(100vh - 50px);  overflow: scroll;}
.form-style h2{font-size: 14px;  font-weight: 600;  text-transform: uppercase;  padding-top: 10px;  margin-bottom: 20px;}
.form-style input[type="text"], .form-style input[type="password"], select{ border: 1px solid #e1e1e1; outline: 0;  width: 100%;  height: 40px;  padding: 5px 10px;  }
.general-info, .form-style div.product-details{width:800px;}
.form-style .row-container{width:100%; float: left; margin-bottom: 15px;     display: flex; align-items: center;}
.form-style .row-container .col-left{ width:20%; float: left;}
.form-style .row-container .col-right{width:80%; float: left;}
.form-style .btn{margin-top:20px;}


.table {  display: table;  width: 100%;  border-collapse: collapse;  border-spacing: 0;}
.table .row {  display: table-row;}
.table .cell {  display: table-cell;  }
.cell:first-child {  border-left: none;}
.list-table th.space-cell{ box-shadow: inset 0 1px 0 #e1e1e1, inset 0 -1px 0 #fafafa, inset  -1px 0 0 #e1e1e1, inset 1px 0 0 #e1e1e1, 0 2px 5px -1px rgba(0, 0, 0, 0.1);     z-index: 5 !important;}
.space-cell{background-color: #fafafa!important;  position: sticky;   z-index: 3 !important;  border-bottom: 1px #fafafa solid !important; padding:0!important;  box-shadow: inset  -1px 0 0 #e1e1e1, inset 1px 0 0 #e1e1e1;  width:6px; min-width:6px;}
.cell:last-child {  border-right: none;}

.table .row:last-child .cell {  border-bottom: none;}
.box-shadow{    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);}
.hidden{display: none!important;}
.temp-hidden{display: none;}
.pim-padding{padding:15px;}
header{background-color: #222; width: 100%; height: 50px; color:#fff; position: fixed; z-index: 9; overflow: hidden;}
.top-bar { padding:20px; text-align:left; background-color:#fafafa;}
.app-container{padding: 10px 50px;}
.welcome_info{float: left;}
header a{ color:#fff}
.data_body{padding: 10px 50px;}
body .body-content{margin-top:50px;}
.announce{margin-top:20%;}
.topnav{text-transform: uppercase; font-weight: 600; font-size: 12px; padding: 17px 25px;  float: left; }
.topnav:hover, .user-btn:hover{background: #444;}
.logo{float: left;     padding: 15px;}
.user-btn{float: right;  padding: 15px;}
.icon-btn{ padding:12px; position: relative;}
.pimtable{  width:100% !important;  text-align: left; font-size: 12px; }
/* .pimtable thead tr th{background: #efefef;}
.pimtable tbody tr:nth-child(even) td {background: #efefef;}
.pimtable tbody tr:nth-child(odd) td {background: #fff;} */
.pimtable tbody tr{border-bottom: 1px #efefef solid;}
.pimtable .img-cell{background: #fff;}
.pimtable .img-cell img{width:80px;}
.pimtable th[col="checkbox"]{width:30px;}
.pimtable th, .pimtable td[col="checkbox"]{padding:5px 10px;}
.pimtable .tabledata{cursor: pointer;}
.pimtable .tabledata i{display: none;}
.pimtable .tabledata:hover i{display: block;}
.pagination{max-width: 100%; margin-top:20px; display: block; padding: 10px 30px 80px;}
.pagination a{margin-right:10px; float: left; cursor: pointer; font-size: 10px; }
.pagination a.active{font-weight: 600; color:#000;}
.list-table th { position: sticky;   top: 0;   z-index: 1;   padding-top: 15px;  cursor: move;  padding-bottom: 15px;     border: none;  box-shadow: inset 0 -1px 0 #e1e1e1, inset 0 1px 0 #e1e1e1;}
.list-table th[col="specifications"], .list-table th[col="description"]{min-width:400px;}
.list-table th span{padding-left:15px;}
.pimtable tr th:nth-child(2), .pimtable tr td:nth-child(2){position: sticky; left: 33px; z-index: 1;     min-width: 220px; width:220px;}  
.pimtable tr th[col="checkbox"], .pimtable tr td[col="checkbox"]{position: sticky; left:0; z-index: 1; }  
.pimtable tr th:nth-child(2), .pimtable tr th[col="checkbox"]{z-index: 2;}
.pimtable tr, .pimtable tr td{transition: background-color 0.3s ease;}
.pimtable tr td{ padding:0;}
.pimtable tr td span, .pimtable tr td a{padding: 0 10px 0 25px;    width: 100%;  display: block; min-height: 20px; overflow: hidden;}
.pimtable tr:hover td{background-color: #f5f5f5;}
.pimtable tr td.edittd:hover{background-color: #e1e1e1;}
.list-table td, .list-table th{background-color: #fff; }
.list-table td img{height:40px;}
.list-table th:hover .sorting-btn{display: inline-block;}

.resize-handle {  width: 5px;  height: 100%;  position: absolute;  right: 0;  top: 0;  cursor: col-resize;}
.no-product-container{text-align: center;  border-top: #e1e1e1 solid 1px;  }
.no-product-container h2{    margin-top: 10%;}

.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: none; /* Prevent interaction with the table while loading */
  }
  .ghost-line {
      position: absolute;
      background: rgba(0, 0, 0, 0.3);
      height: 100%;
      width: 2px;
      pointer-events: none; /* Make sure it doesn't interfere with other events */
  }
  table th, table td {
      transition: min-width 0.2s ease !important;
  }

/* .th-hover {border-right: 2px solid transparent;position: relative;} */

.th-hover:hover .resize-handle {background-color: #d3d3d3; }

/* .th-hover:hover {border-right: 2px solid #d3d3d3; } */

.dropdown-edit-container { display: inline-block;  width: 100%;}
.dropdown-edit-filter-options {  position: absolute;  top: 100%;  background-color: #fff;
  border: 1px solid var(--light-grey);  padding: 10px;  list-style: none;  margin: 0;  padding: 0;  z-index:3;}
  .dropdown-edit-filter-options li {    padding: 10px;    cursor: pointer;    color: var(--link-color);    z-index:10  }

  .dropdown-edit-filter-options li:hover {    background-color: var(--link-color-hover);    color: #fff; }

/* Show dropdown menu when input is focused */
.dropdown-edit-container .editinput:focus + .dropdown-edit-menu, .dropdown-edit-container .dropdown-edit-menu.show {  display: block;  position:absolute;}

.sorting-btn{padding:0; display: none; top: 15px;  left:-5px;  position: absolute;}
.sorting-btn span:first-child{padding-right:5px;}
.box-content { min-width: 50px;    display: none;    position: absolute;    top: 40px;    left: 0;    background-color: #fff;    padding: 5px 10px;    border: 1px solid #ccc;}
.sorting-btn:hover .box-content {    display: block; }
.editinput{width:100%; padding:10px 30px 10px 10px; height:40px;}
.edit-cell{position: relative;}
.edit-btn{    position: absolute;  top: 0;  right: 0;     width: 25px !important;  padding: 11px 4px !important;}
.nav-left-btn{    float: left;  font-size: 14px;  padding: 13px 10px 0; }
.searchbar-container{width:220px; display: inline-block;     position: relative;  padding: 5px 10px;     border-left: 1px solid #e1e1e1;}
.searchbar-container input{width:100%; float:left;     height: 35px;  }
.searchbar-container input:after{content: "\f002";    font-family: var(--fa-style-family, "Font Awesome 6 Free");  font-weight: var(--fa-style, 900);}
.searchbar-container a {position: absolute;  right: 20px;  top: 15px;}
.form-section{float: left; width:100%; margin-top: 20px;}
.form-section input[type="text"]{margin-left: 15px;}
.quote-links a{margin-right:15px;}
.select-btn input{margin-right:10px;}
.note-box{float: left;}
.note-box form{width:100%;}
.note-heading{width:100%;  float: left;   background: #efefef; padding:10px 15px}
.note-content{padding:10px 15px; float: left; width:100%;}
.note-edit, .note-edit textarea{width:100%}

.btn-right{float:right;}

.filter-form{margin-bottom: 10px;}
.filter-form label{font-size: 14px; margin-right: 15px;}
.filter-form select{margin-right: 30px;}
.filter-btn-container{margin-top: 20px;}
.inputnumber{width: 50px;    margin-right: 10px;}
.autocomplete-suggestions{  list-style: none;  max-height: 300px;  overflow: scroll;  background: #fff;  padding: 25px;}
.autocomplete-suggestions li input{margin-right:15px;}
.tools-container{padding:15px; margin-top:30px; margin-bottom: 30px; float: left; width: 100%;}
.right-button{float: right; margin-left:10px; font-size: 18px; color: #888;}
.right-button:hover{color:#999;}
.quote-page form{font-size:14px; float: left;}
.quote-page form input{margin-right: 20px; margin-left:10px;}
.quote-page table  img{width:100px;}
.menu-icon:hover {    cursor: pointer;    color: #DA203D;}
/* The side navigation menu */
.header-menu{width:100%;     max-height: 25px;}
.header-menu a span{visibility: hidden;}
.header-menu a:hover{color:#fff;}
.header-menu img{width:100px;}
.header-search, .header-search-close{  z-index: 9; float: right;}
.header-search-close{display: none;}
#search-form{position: absolute;  width:90%;  padding:7px 100px; display: none;  background-color: #222; top:0px;  left:0px;}
#search-field{    width: calc(100% - 120px); height:32px; }
#search-form label{display:none;}
#search-form input{border-radius: 8px;font-size: 14px; border:none; padding: 4px 10px; color:#333;}
#search-form input[type="submit"] {  background-color: #333;   border: none;   color: white;  text-align: center;  cursor: pointer;  transition: background-color 0.3s;  width:100px;  margin-right:10px; height: 34px;}
#search-form input[type="submit"]:hover {  background-color: #555; }
.form-design.appro-update{width:100%}


/* login page */
.login-box {
  max-width: 500px;
  background-color: #333;
  color: #fff;
  border-radius: 5px;
  margin: 50px auto;
  text-align: center;
  padding: 50px;
}
.login-box img{margin-top:30px; margin-bottom: 50px;}

  /* product page */
  .product-details form{margin:0;}
  .product-details form input,   .product-details form select{    width: 80%!important; float: left; height:40px; font-size: 14px;}
  .product-details form textarea, .product-details  .details-text{    width: 80%!important; float: left; padding: 10px;  font-size: 14px;} 
  .product-details button{float:right; padding: 10px;}
  .media-content .col-md-3{padding:15px; text-align: center;   }
  .media-content aside{ padding: 15px;    color: #fff;    background: #222;     position: absolute;    bottom: 0px;    width: 100%;     z-index: 1;}
  .img-border{border: 1px solid #e1e1e1;    position: relative;}
  .quick-details{float: left; }
  .product-details .row-container:first-child{border-top: #e1e1e1 solid 1px; }
  .product-details h2{padding-bottom: 20px; margin-bottom: 0; border-bottom: 1px solid #e1e1e1;}
  .product-details .row-container{border-bottom: #e1e1e1 solid 1px; margin:0; padding: 15px 0;}
  .pim-log .pimtable tr td{padding:5px 10px;}
  .quick-imgs{float:left; width:400px; height:400px; border: #e1e1e1 solid 1px; margin-left:50px;}
  .quick-imgs img{max-width: 400px; max-height: 400px;     margin: auto;}
  .showingone .slick-arrow{z-index:1; }
  .showingone .slick-arrow::before{color:#333;}
  .showingone .slick-prev{left:10px;}
  .showingone .slick-next{right:10px;}

 .sirv360 .sirv-spin-container{ aspect-ratio: 1 / 1; height:unset!important;}
 .sirv360 .sirv-controls {    position: absolute;    bottom: 80px;    width: 100%;    padding: 0 70px;}
  .appro-form .col-md-3{margin-bottom: 20px;}
  .appro-form textarea, .appro-form input, .appro-form select{width:100%;}
  .appro-list td, .appro-list th{ padding:10px 15px;}
  .col-md-2.form-cell{    padding: 10px;}
  .form-cell{margin-bottom: 20px;}
  .item-row{margin-bottom:20px;}
  .upload-csv form{margin-top:25px;}

  .autofill{position: absolute;    background: #fff!important;  border-radius: 10px;    margin-top: 5px; box-shadow:0 0 10px -5px!important;   padding:20px 0;}
  .autofill ul{list-style: none; padding:0px; margin:0; max-height: 600px; overflow: scroll;}
  .autofill ul li{padding: 5px 20px; cursor: pointer;}
  .autofill ul li:hover{background-color: #e1e1e1; }
  .itemtable .firstrow{  font-weight: bold;  background-color: #f2f2f2;  color: #333;  border-bottom: 1px solid #ddd;}
  .itemtable .cell{border: 1px solid #ddd; width:20%; height:50px;     padding: 12px;}
  .itemtable .cell input{border:0; margin:0;}
  .itemtable .cell:nth-child(odd) {  background-color: #f9f9f9;}
  .editform{display: inline; padding: 0!important;}
  .editform button{border:none; background: none;     padding: 0 15px;}

  .itemtable{border:#e1e1e1 solid 1px;}
  .itemtable .editfield{display: inline-block; vertical-align: middle; padding-left:12px;}
  .appro-update .editform input, .appro-update .editform select{width:calc(100% - 50px); border: none;     height: 50px;}
  .appro-update .row>div{height:50px;     display: grid;    align-items: center;}
  .appro-update .itemtable .row>div{display: table-cell;}
  .appro-update .row .itemcell{height:unset;}

  .editfield a{margin-left: 20px;}
  .editfield:hover i{transform: rotate(-45deg);}
  .itemtable .inputcell{padding:0; }
  .dup-msg{font-size: 12px;     color: #ae1930;}
  .form-design .submit-btn.disabled{background-color: #999;}
  .appro-update .row .add-item-container{display: block; width:auto;}

  .comment-container{margin-top:50px;}
  .comment-container h2{font-size: 18px; font-weight: 600; margin-bottom: 15px;}
  .comment-box{background-color: #efefef; margin-bottom:15px}
  .comment-header{background-color: #e1e1e1; padding:10px 20px; float: left; width:100%;}
  .comment-user{float:left;}
  .comment-date{float:right;}
  .comment-content{padding: 60px 20px 10px;}
  .comment-form{width:100%;}
  .comment-form textarea{width:100%;}
  .comment-form button{margin-right:15px;}

  .repair-comment.producttable{font-size:12px; width:100%;}
  .repair-comment th{color:#fff;}
  .repair-comment th, .repair-comment td{padding: 20px;}
  .repair-comment th[col="id"], .repair-comment th[col="job_number"], .repair-comment td[col="id"], .repair-comment td[col="job_number"]{display: none;}

.itemtable .cell:hover {  background-color: #f0f0f0;}
  /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */

  /* homepage */
  .list-table.pimtable { width: max-content; border:none; border-collapse: collapse;}
  .list-table-container{ overflow-x: scroll; width:100%; padding:0;  }
  .saved-filter-container select{width:200px;}
  .table-responsive{    overflow-y: scroll; max-height:1200px;}
  .bottombar{position: fixed; bottom: 0;  background: #efefef;   width: 100%; padding-bottom: 10px;  border-top: 2px #e1e1e1 solid;}



  .toolbar{ z-index: 9; position: relative; width: 100%; background-color: #fff;  height:45px; text-align: right;}
  .right-slider-container{    padding: 50px 20px 20px;  position: fixed;    right: -400px;    top: 0;    width: 400px;    max-width: 90%;    height: 100%; z-index: 9; overflow-y: scroll;}
  .right-slider-container.is-open{right:0;}
  .close-right-slider{    position: absolute;    right: 20px;    margin-top: -30px;    font-size: 28px;    color: #333;}

  .col-cat{  float: left; width: 100%;}
  .cat-btn{border-top:1px solid #e1e1e1; border-bottom:1px solid #e1e1e1;     width: 100%;    float: left;    padding: 5px 15px;}
  .cat-btn::before{   font-family: "Font Awesome 6 Free";   font-weight: 900;  content: "\f0d7";    font-size: 16px;    margin-right: 10px;}
  .cat-btn.active::before{content: "\f0d8"; }
  .col-btn{font-size: 14px; padding: 2px 15px;}
  .cat-cols{float: left; padding:15px 0; display: none; transition: all .5s ease-in-out;  }
  .cat-cols.show{display: block;}

  .filter-condition center{color:#ccc;}
  .right-slider-header{margin-bottom: 20px; color:#ccc; font-size: 28px; text-transform: uppercase;}
  .channel-condition{padding:20px;}
  .card{    padding: 15px 40px 15px 15px; margin:5px 0; color:#666;}
  .channel-condition .form-control{margin-top:5px;}
  .delete-icon{color: var(--main-color); top:0.5rem;}
  .delete-icon a{padding:0px; font-size: 28px; margin-right:10px;}
  .add-icon{    padding: 10px;    font-size: 24px;    right: 0px;    color: #222;    top: 0;}
  .delete-icon a:hover i{transform: rotate(360deg)}
  .page-btn, .pagination-container span{padding:10px 18px; color:var(--dark-grey);}
  .page-btn:hover, .page-btn.active{background-color: var(--light-grey);  color:var(--dark-grey);}
  .select-btn{border: 1px solid rgba(0, 0, 0, .125);  background-color: #fff;  border-radius: 0.25rem;  padding:5px 15px;     float: left;    margin-right: 5px;  font-size: 14px;  margin-top: 5px; cursor: pointer;}
  .select-btn label{cursor: pointer;}
  .select-btn.selected{background-color: #222; color:#fff;}
  select.card{appearance: none; cursor: pointer; height: 50px;}
  select.card+ i {display: block;     position: absolute;    margin-top: -40px;    padding: 0;    right: 35px;}

  .selectbox{    float: left;    padding: 0 10px;}
  .selectbox span{padding:10px; font-size:12px;}
  .toolbar .selectbox{ margin-top: 14px;}
  .add-condition i{position: absolute;    right: 15px;    font-size: 18px;}
  .err-box{border: var(--main-color) 1px solid;}
  .err-box::placeholder{color: var(--main-color); }

  .updatevideo .updated{display: none;}
  .updatevideo table{margin-top:30px; margin-top:30px;}
  .updatevideo td{padding: 5px 10px;}
  .info-bar{width: 100%; background: #f8e0e4; padding:5px 10px; color:#ae1930; font-size: 12px; border-bottom:#ae1930 1px solid; border-top:#ae1930 1px solid;}

  /* setting page */

  .role-buttons{width:25%; max-width: 25%; float: left; padding:20px 0;}
  .right-content .tab-content{width: 75%; float: left;}
  /* .role-buttons .tab{display: block; border-bottom: 1px solid #e1e1e1;}
  .role-buttons .tab.active{font-weight: 600;} */
  .permission-form label{margin-left: 15px;}

  .permission-form h3{    font-size: 16px;    text-transform: uppercase;    font-weight: 600;    margin-top: 20px;    margin-bottom: 20px;}
  .fields-sec{padding:0 50px; margin-bottom: 50px;}
  .easy-pane{display: none;}
  .easy-pane.active{display: block;}
  .right-content-padding{padding:15px 50px;}
  .general-info .row-container{border-top: 1px #e1e1e1 solid; width: 100%; float: left; height: 100px; padding:25px 0;}
  .general-info .row-container img{max-height: 50px;}
  .general-info .row-container input{width:80%;}
  .general-info .row-container .clear-btn{font-size: 18px; float:right; margin-left: 10px;}
  .menu-title, .content-title{    font-weight: 600;   text-transform: uppercase;  color: #ccc;  font-size: 16px; }
  .menu-title{ margin-bottom: 10px; padding: 5px 15px; }
  .content-title span{padding-right:30px;}
  .tab-content .permission-form .content-title{padding: 0 50px;       margin-top: 15px;  }
  .tab-content .content-title{padding:0;     margin-top: 10px;    margin-bottom: 30px;}
  .leftbar>nav>a, .role-buttons .easy-tab-container{display: block;   color: #555;  font-size: 14px;  padding: 5px 15px;  border-bottom: #e1e1e1 solid 1px;}
  .leftbar>nav>a.active{background-color: #fff;}
  .leftbar>nav>a:first-child, .role-buttons .easy-tab-container:first-child{border-top: #e1e1e1 solid 1px;}
  .back-btn{    margin-top: 10px;  margin-bottom: 20px;  width: 100%;  float: left;}
  .role-buttons button{float: right; border: none; background: none;}
  .role-buttons .easy-pane{position: relative;}
  .role-buttons .tab{width:80%}
  .role-buttons .deleteform{position: absolute; top:0; right:0;}
  .role-buttons input{width:80%}
  .tags-btn-container>a{    border-bottom: 1px solid #fff;  float:left;  padding-top: 5px;}
  .tag-btn{float:left; margin-right:15px;}
  .checkboxes-container, .tags-container,  .tags-content-container{width:100%; float: left;}
  .checkboxes-container .tag-content{width: auto; display: none;}
  .tags-content-container{margin-top:20px;}
  .tags-container a.active{font-weight: 600; border-bottom: 1px solid var(--link-color);}  

  .upload-box{border: 1px solid #e1e1e1; width: 600px;      margin-top: 30px;  padding: 50px 0px;    text-align: center;}

  .option-heading{border-top: #e1e1e1 solid 1px; margin-top:30px; padding-top:30px;}
  .option-container .dropdown-value{position: relative; margin-top: 10px;}
  .option-container .dropdown-value input{width: 100%;}
  .option-container .dropdown-value .remove-option{    color: var(--main-color); padding: 0px;    font-size: 28px;    margin-right: 10px; position: absolute;    right: 5px;}

  
  

  /* SGA Table */
  .sga-table {
    border-collapse: collapse;
    margin: 20px auto;
    font-size: 0.9em;
    font-family: sans-serif;
    min-width: 300px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  }
  .sga-table thead tr {
    background-color: var(--main-color);
    color: #ffffff;
    text-align: left;
  }
  .sga-table th,
  .sga-table td {
    padding: 20px 25px;
  }
  .sga-table tbody tr {
    border-bottom: 1px solid #dddddd;
  }
  .sga-table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
  }
  .sga-table tbody tr:last-of-type {
    border-bottom: 2px solid var(--main-color);
  }
  .sga-table tbody tr:hover {
    background-color: #dadada; 
  }
  .sga-table td input {
    width: 100%;
    padding: 20px;
    font-size:12px;
  }

  @media (max-width: 767px)  {
    .pim-padding{padding:10px 20px;}
    #search-form{padding:7px 20px;}

  }
  @media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
  }
  .dataTables_filter input {display: inline-block !important;}

  /* mousam added css start ends at line 594*/
  .dropdown-filter {    position: relative;    border-right: 1px solid #e1e1e1;    float: left;    text-align: left;  }

  .dropdown-filter-button {  background:none ;   border: none;    height: 45px;         padding: 2px 20px 0 15px;   text-align: left;    cursor: pointer;      color: var(--link-color);}
  .dropdown-filter-button:hover{color: var(--link-color-hover); }
  .dropdown-filter-button i{padding-left: 20px;  font-size:10px;      padding-top: 5px;   float: right;}

  .dropdown-filter-options {
    position: absolute;
    top: 100%;
    left: -35px;
    background-color: #fff;
    border: 1px solid var(--light-grey);
    padding: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
    z-index:3;
    min-width: 300px;
  }

  .dropdown-filter-options li {
    padding: 10px 10px 10px 48px;
    cursor: pointer;
    color: var(--link-color);
  }

  .dropdown-filter-options li:hover {
    background-color: var(--link-color-hover);
    color: #fff;
  }
  @media screen and (max-width: 500px) { 
    .mobile-only { display:block; }
    .desktop-only { display:none; }
    .container { padding: 20px 10px; }
  }
  /* Search Div */
  .search-div { width:100%; margin:50px auto; text-align:center; } 
  .search-input { width:400px; }
  #select_columns { display: none; }

  /* Login Page */
  .login-box { max-width:500px; background-color:#fafafa; border:1px solid #999; border-radius:5px; margin:50px auto; text-align:center; padding:20px; }
  @media screen and (max-width: 500px) { 
    .login-container { width: 100%; padding:0 20px; } 
    .login-box { width: 100%;} 
  }
  
  /* Container */
  .container { width: 100%; }


  /* product page tabs */
  .product-content p { margin: 0 0 20px; line-height: 1.5; }
  .product { min-width: 320px; margin: 0 auto; background: #fff; }
  .product section { display: none; padding: 20px 0 0; border-top: 1px solid #ddd; }
  .product input { display: none; }
  .product label { display: inline-block; margin: 0 0 -1px; padding: 15px 25px; font-weight: 600; text-align: center; color: #bbb; border: 1px solid transparent; }
  .product label:before { font-family: fontawesome; font-weight: normal; margin-right: 10px; }
  .product label[for*='1']:before { content: '\f00b'; }
  .product label[for*='2']:before { content: '\f05a'; }
  .product label[for*='3']:before { content: '\f03e'; }
  .product label[for*='4']:before { content: '\f02d'; }
  .product label:hover { color: #888; cursor: pointer; }
  .product input:checked + label { color: #555; border: 1px solid #ddd; border-top: 2px solid #DA203D; border-bottom: 1px solid #fff; }
  #tab1:checked ~ #content1, #tab2:checked ~ #content2, #tab3:checked ~ #content3, #tab4:checked ~ #content4 { display: block; }

  /* product page table */
  .table-column { float:left; width:50%; padding: 5px; }
  .product-table { display: table; min-width:400px; margin:50px auto; width:80%; }
  .product-table tr:hover td{ cursor: pointer; }
  #myTable td, #myTable th { padding: 20px !important; }
  .media { width: 100% !important; border-spacing: 2em 0; border-collapse: separate; }
  .media td { text-align:center !important;}

  .producttable { width: 80%; margin: 50px auto !important;}
  .producttable thead tr { background-color: #303030 !important; font-weight:700; }
  .producttable .l { border-right: 1px solid #dddddd; font-weight:700; width:35%; }
  .producttable td { padding: 20px 25px;}
  .producttable .empty { display: none; }
  .producttable .table-subtitle { background-color:#f3f3f3; padding:10px 25px; border-bottom: 1px solid #dddddd;}

  @media screen and (max-width: 500px) { 
    .table-column { width:100%; display: block; }
    .producttable { width: 100%; }
    .product span { visibility:hidden; font-size:0px;}
  }

  /* repair form */
  .form-design { width: 80%; margin:0 auto; }

  .form-design input:focus { background-color: #F0FFFF; border-color: #87CEEB}
  .form-design .j-tasks, .w-tasks { display: none; }
  .form-design .form-row { display: block; margin-bottom:20px;}
  .form-design .subheader { font-weight:700; font-size: 18px; border-bottom: 1px solid #333; padding-bottom:20px;}
  .form-design .header { background-color: #ae1930; color: #ffffff; text-align: left; padding: 20px 25px; font-weight:700; font-size:28px;}
  .form-design .cell-l { display: inline-block; width:30%; border-bottom:3px solid #fff; padding:10px 25px;  }
  .form-design .cell-full { padding:10px 25px;  }
  .form-design .cell-r { display: inline-block; width: 69%; }
  .task-header { padding: 10px 0px; border-bottom:1px solid #333; margin-bottom: 30px; font-size: 20px; font-weight:700;}
  .task button { background-color:#DA203D; padding: 5px; border-radius: 5px; color:#fff; border: 1px solid #ae1930; float:right;}
  .task_button { background-color:#DA203D; padding: 5px; border-radius: 5px; color:#fff; border: 1px solid #ae1930; box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);}
  .form-design .l-div { width: 49%; float:left; }
  .form-design .r-div { width: 49%; float:right; }
  .form-design .wrapper-box { box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); padding:20px; }
  .select-design { padding: 10px; width: 90%; border: 0; border-bottom: 2px solid #333; outline: 0; background-color:#f5f5f5;}
  .items-j, .items-w { margin-bottom:20px; }
  .form-design .submit-btn { background-color: #ae1930; color: #ffffff; text-align: center; width:100%; font-weight:700; outline:0; border:0; box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); padding: 20px 0px; font-size:22px; }
  .submit-btn-sml { background-color: #333; color: #ffffff; text-align: center; width:100%; font-weight:700; outline:0; border:0; box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); padding: 10px 0px; font-size:16px; }
  .l-input { width: 70% !important; display:inline-block; border: 0 !important; border-bottom: 2px solid #333 !important; outline: 0 !important; background-color:#f5f5f5 !important; }
  .r-input { width: 20% !important; margin-left:10px; display:inline-block;}
  .remove_button { display:inline-block !important; float:none !important; margin-left:10px !important; }
  .cell-r img { width: 200px; }

  @media screen and (max-width: 767px) { 
    .form-design { width: 100%; }
    .form-design .l-div { display:block; float: none; width: 100%; }
    .form-design .r-div { display:block; float: none; width: 100%; margin-top: 20px; }
    .form-design .cell-l { display:block; width: 100%; padding: 0px; }
    .form-design .cell-r { display:block; width: 100%; }
    .cell-r img { width: 100%; }
    .l-input { width: 65% !important; font-size: 14px; }
    .r-input { font-size: 14px; }
  }

  @media screen and (max-width: 1440px) { 

    .pim-padding { padding: 10px 30px; }
    .form-design { width: 100%; }
    .form-design .form-row { font-size: 14px; }
    .form-design .cell-l { padding: 10px; }
  }

  /* mousam added css end */