* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: rgb(248, 248, 248);
margin:0px;
/* padding-top: 65px; */
}
/* #region-----------------------grid--------------------- */
.form {
  margin: 0px -15px;
}

.row {
  margin: 0px;
  width: 100%;
  display: inline-block;
}

.col-0-5,
.col-1,
.col-1-5,
.col-2,
.col-2-5,
.col-3,
.col-3-5,
.col-4,
.col-4-5,
.col-5,
.col-5-5,
.col-6,
.col-6-5,
.col-7,
.col-7-5,
.col-8,
.col-8-5,
.col-9,
.col-9-5,
.col-10,
.col-10-5,
.col-11,
.col-11-5,
.col-12 {
  position: relative;
  min-height: 1px;
}

@media (max-width: 768px) {

  .col-0-5,
  .col-1,
  .col-1-5,
  .col-2,
  .col-2-5,
  .col-3,
  .col-3-5,
  .col-4,
  .col-4-5,
  .col-5,
  .col-5-5,
  .col-6,
  .col-6-5,
  .col-7,
  .col-7-5,
  .col-8,
  .col-8-5,
  .col-9,
  .col-9-5,
  .col-10,
  .col-10-5,
  .col-11,
  .col-11-5,
  .col-12 {
    width: 100%;
  }
}

@media (min-width: 700px) {
  .container {
    width: 1170px;
    margin: auto;
    background: white;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08);
  }
}

@media (min-width: 768px) {
  .col-0-5 {
    width: 4.166666665%;
  }

  .col-1 {
    width: 8.33333333%;
  }

  .col-1-5 {
    width: 12.5%;
  }

  .col-2 {
    width: 16.66666667%;
  }

  .col-2-5 {
    width: 20.833333335%;
  }

  .col-3 {
    width: 25%;
  }

  .col-3-5 {
    width: 29.166666665%;
  }

  .col-4 {
    width: 33.33333333%;
  }

  .col-4-5 {
    width: 37.5%;
  }

  .col-5 {
    width: 41.66666667%;
  }

  .col-5-5 {
    width: 45.833333335%;
  }

  .col-6 {
    width: 50%;
  }

  .col-6-5 {
    width: 54.166666665%;
  }

  .col-7 {
    width: 58.33333333%;
  }

  .col-7-5 {
    width: 62.5%;
  }

  .col-8 {
    width: 66.66666667%;
  }

  .col-8-5 {
    width: 70.833333335%;
  }

  .col-9 {
    width: 75%;
  }

  .col-9-5 {
    width: 79.166666665%;
  }

  .col-10 {
    width: 83.33333333%;
  }

  .col-10-5 {
    width: 87.5%;
  }

  .col-11 {
    width: 91.66666667%;
  }

  .col-11-5 {
    width: 95.833333335%;
  }

  .col-12 {
    width: 100%;
  }

  .col-0-5,
  .col-1,
  .col-1-5,
  .col-2,
  .col-2-5,
  .col-3,
  .col-3-5,
  .col-4,
  .col-4-5,
  .col-5,
  .col-5-5,
  .col-6,
  .col-6-5,
  .col-7,
  .col-7-5,
  .col-8,
  .col-8-5,
  .col-9,
  .col-9-5,
  .col-10,
  .col-10-5,
  .col-11,
  .col-11-5,
  .col-12 {
    float: left;
  }
}

.gridimg{
  width: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
/* #endregion */
/* #region-----------------------Table--------------------- */
.table {
width: 100%;
border-collapse: collapse;
}
.table.dt tr:nth-child(even){
  background-color: #f8f7f7;
}
.table.dt tbody tr:hover{
  cursor: pointer;
  background-color: #1e88e5;
  color: #fff;
}
.table th,td {
border: 1px solid #dddddd;
text-align: left;
padding: 2px 5px;
}
.table th {
      background-color: #f2f2f2;
}
/* #endregion */
/* #region-----------------------Element--------------------- */
h1, .h1 { font-size: 36px; }
h2, .h2 { font-size: 30px; }
h3, .h3 { font-size: 24px; }
h4, .h4 { font-size: 18px; }
h5, .h5 { font-size: 14px; }
h6, .h6 { font-size: 12px; }

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
margin-top: 20px;
  margin-bottom: 10px;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.1;
  color: inherit;
}
.rs-groupheading{
  color: #2196f3;
  padding: 2px 10px;
  border-bottom: 2px solid #e4e4e4;
  margin-bottom: 20px;
  font-size: 12px;
}
i{
  font-style: normal;
}
/* #endregion */
/* #region-----------------------Text box--------------------- */
.rs-group {
  position: relative;
  padding: 15px;
}

.rs-field {
  font-family: inherit;
  width: 100%;
  border: 0;
  border-bottom: 2px solid #9b9b9b;
  outline: 0;
  font-size: 14px;
  color: #000;
  padding: 7px 0px 5px;
  background: transparent;
  transition: border-color 0.2s;
  position: inherit;
  z-index: 2;
}
.rs-field::placeholder {
  color: transparent;
}
.rs-field:placeholder-shown ~ label {
  font-size: 14px;
  cursor: text;
  top: 23px;
  z-index: 1;
}
.rs-group label {
  position: absolute;
  top: 5px;
  display: block;
  transition: 0.2s;
  font-size: 10px;
  color: #9b9b9b;
}

.rs-field:focus {
  border-width: 3px;
  border-bottom: 2px solid #337ab7;
  /* border-image: linear-gradient(to right, #11998e, #38ef7d);
  border-image-slice: 1; */
}
.rs-field:focus ~ label {
  position: absolute;
  top: 5px;
  display: block;
  transition: 0.2s;
  font-size: 10px;
  color: #337ab7;
  font-weight: 700;
}
/* reset input */
/* .rs-field:required, .rs-field:invalid {
  box-shadow: none;
} */
.rs-custom-group {
  padding: 0px 15px 15px;
}
.rs-custom-group .label{
  font-size: 11px;
  color: #9b9b9b;
  font-weight: normal;
}
/* clear button */
.clear-button {
  position: absolute;
  top: 31%;
  right: 17px;
  /* transform: translateY(-31%); */
  cursor: pointer;
  color: #aaa;
  font-size: 16px;
  font-weight: normal;
  border-radius: 15px;
  border: none;
  background: transparent;
  display: none;
  z-index: 2;
  }
  .rs-field:not(:placeholder-shown)+.clear-button {
  display: inline;
  }

  .rs-field.error{
    border-bottom: 2px solid #f93131!important;
  }
/* #endregion */
/* #region-----------------------Dropdown Select-------------------*/
.rs-group select {
  font-family: inherit;
  width: 100%;
  border: 0;
  border-bottom: 2px solid #9b9b9b;
  outline: 0;
  font-size: 14px;
  color: #000;
  padding: 7px 0;
  background: transparent;
  transition: border-color 0.2s;
  position: inherit;
  z-index: 2;
  /*appearance: none;  Hide default dropdown arrow */
}

.rs-group option {
  color: #607d8b;
}

/* .rs-group label {
  position: absolute;
  top: 0;
  display: block;
  transition: 0.2s;
  font-size: 1rem;
  color: #9b9b9b;
} */
.rs-group select:has(option:checked[value=""]) + label {
top: 23px;
font-size: 14px;
}
/* .rs-group select:hover ~ label {
top: 5px;
font-size: 10px;
} */
.rs-group select:focus {
  padding-bottom: 6px;
  font-weight: 700;
  border-width: 3px;
  border-image: linear-gradient(to right, #11998e, #38ef7d);
  border-image-slice: 1;
}

.rs-group select:focus ~ label {
  position: absolute;
  top: 5px !important;
  display: block;
  transition: 0.2s;
  font-size: 10px !important;
  color: #11998e;
  font-weight: 700;
}
/* #endregion ---*/
/* #region-----------------------Custom Dropdown-------------------*/
.rs-dropdown {
position: relative;
display: inline-block;
}
.rsdropdown-menu {
display: none;
position: absolute;
background-color: #fff;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
padding: 0;
list-style-type: none;
margin-top: 0px;
z-index: 1;
}

.rsdropdown-menu li {
padding: 10px;
cursor: pointer;
}
.rsdropdown-menu label{
display:block;
}
.rsdropdown-menu li:hover {
background-color: #f8f9fa;
}

.rsdropdown-menu.open-up {
bottom: 100%;
margin-bottom: 10px;
}

.rsdropdown-menu.open-left {
right: 0;
left: auto;
}
.rs-InputText {
  display: block;
  width: 100%;
  max-width: 200px;
  height: 19px;
  padding: 4px 6px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
  white-space: nowrap; /* Prevents text from wrapping to the next line */
  overflow: hidden; /* Hides the overflowed text */
  text-overflow: ellipsis;
}
.rs-selected{
  background:rgba(0,0,0,0.1);
}
/* #endregion */
/* #region-----------------------Dropdown Hover-------------------*/
.rsdropover .dropbtn {
  border: none;
  padding: 2px 10px;
  cursor: pointer;
  margin: -2px 10px;
  border-radius: 10px;
}

.rsdropover {
  position: relative;
  display: inline-block;
}

.rsdropover .content {
  display: none;
  position: absolute;
  right: 0;
  background-color: #2196f3;
  min-width: 360px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 3;
  color: #fff;
  padding: 12px 16px;
  font-weight: normal;
}

.rsdropover .content a:hover {background-color: #f1f1f1;}
.rsdropover:hover .content {display: block;}
/* .rsdropover:hover .dropbtn {background-color: #3e8e41;} */
/* #endregion */
/* #region-----------------------Modal--------------------- */
.modal {
  display: none; 
  position: fixed; 
  z-index: 2; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  overflow: auto; 
  background-color: rgb(0,0,0); 
  background-color: rgba(0,0,0,0.4); 
}

.modal-content {
  position: relative;
  background-color: #fff;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

@-webkit-keyframes animatetop {
  from {opacity:0} 
  to {opacity:1}
}

@keyframes animatetop {
  from {opacity:0}
  to { opacity:1}
}



.modal-header .close {
  float: right;
  font-weight: bold;
}

.modal-header .close:hover,
.modal-header .close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 2px 16px;
  cursor: pointer;
  user-select: none;
  color: #dedede;
  background: #2286d6;
  border: 1px solid #2286d6;
}
/* #endregion */
/* #region-----------------------Pagination--------------------- */
.pagination {
  display: flex;
  justify-content: right;
  align-items: center;
}
.pagination span {
cursor: pointer;
  color: #333;
  text-decoration: none;
  margin: 0 5px;
  padding: 2px 12px;
  border-radius: 3px;
  background-color: #f0f0f0;
  transition: background-color 0.3s ease;
}
.pagination span.active,
.pagination span:hover {
  background-color: #f44336;
  color: white;
}
.grid-footer{
width: 100%;
background-color: #f2f2f2;
  padding: 3px;
  border: 1px solid #ddd;
}
/* #endregion */
/* #region-----------------------toast--------------------- */
.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  z-index: 9999;
}

.close-toast {
  float: right;
  cursor: pointer;
  padding-left:10px;
}
/* #endregion */
/* #region-----------------------form--------------------- */
.form-group {
  margin-bottom: 15px;
  padding: 0px 15px;
}

.label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: 700;
}

.form-control {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
}

.form-control:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
input[type=checkbox]{
  vertical-align: text-bottom;
}
.btn,
.icon-btn,
.btn-d {
  display: inline-block;
  font-weight: 400;
  cursor: pointer;
  border: 1px solid transparent;
  padding: 2px 8px;
  font-size: 14px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.btn {
  background-color: #2196f3;
  color: #fff;
  border-color: #2581ca;
  border-radius: 4px;
}
.btn:hover {
  color: #e1e1e1;
  background-color: #2581ca;
  border-color: #2581ca;
}
.btn:disabled {
  background-color: #90c1ea;
  color: #fff;
  border-color: #90c1ea;
  cursor: not-allowed;
}
.btn:disabled {
  color: #e1e1e1;
  background-color: #90c1ea;
  border-color: #90c1ea;
}


.icon-btn {
  background-color: #f0f0f0;
  border-radius: 20px;
}

.icon-btn:hover {
  background-color: #d3d3d3;
}

.btn-d {
  background-color: #42a5f5;
  color: #fff;
  border-radius: 2px;
}

.btn-d:hover {
  color: #fff;
  background-color: #1e88e5;
}

.rs-head {
  border-left: 5px solid #3877db;
  margin-bottom: 7px !important;
  padding: 5px 15px;
  color: #3877db;
  font-weight: bold;
}

.rs-head2 {
  border-bottom: 1px solid #ccc;
  margin-bottom: 7px !important;
  padding: 5px 0px;
  color: #2196f3;
  font-weight: bold;
}

.rs-foot {
  padding: 15px;
}

.rs-error {
  border-bottom: 2px solid red !important;
}

.rs-error::placeholder {
  color: red !important;
  font-weight: normal !important;
}

.rs-error1 {
  border: 1px solid red !important;
}

/* #endregion */
/* #region-----------------------datatable--------- */
/* .heading-table{
min-width: 1170px;
overflow: hidden;
} */
/* .table-container {
min-width: 1170px;
overflow-x: auto;
max-height: 100px; 
} */
.dt-header>th{
height: 30px;
  position: relative;
  padding-right: 26px;
cursor: pointer;
}
.dt-header>th:hover {
background-color: #ededed;
}
.dt-header>th.col:after{
top: 50%;
  content: "\25BC";
  position: absolute;
  opacity: .16;
  right: 10px;
  line-height: 11px;
  font-size: .8em;
}
.dt-header>th.col:before{
bottom: 50%;
  content: "\25B2";
      position: absolute;
  opacity: .16;
  right: 10px;
  line-height: 11px;
  font-size: .8em;
}
.dt-header>th.asc:before{
  opacity: .66;
}
.dt-header>th.desc:after{
  opacity: .66;
}
.dt-filter th{
padding: 3px!important
}
.w3-text{
    width: 80%;
  outline: none;
  padding: 2px 5px;
  background-color: #fbfbfb;
  border: 1px solid #ccc;
}
.w3-text:hover, .w3-text:focus{
background-color: #fff;
  border: 1px solid #8aa4ff;
}
.view.active{
background-color: #2581ca;
}
.rs-dropdown {
  position: relative;
  display: inline-block;
  width: 100%;
}
.rs-dropdown .dropbtn {
  border: none;
  padding: 2px 10px;
  cursor: pointer;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown-content span{
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  cursor: pointer;
}
.dropdown-content span:hover {
  background-color: #f1f1f1;
}
/* #endregion */
/* #region-----------------------Right Sheet--------*/
.rs-rightsheet {
  position: fixed;
  top: 0;
  right: -40%; /* Start hidden off-screen */
  width: 40%; /* Set the width as needed */
  height: 100vh;
  background-color: white;
  transition: right 0.3s ease;
  overflow-y: auto; /* Enable vertical scrolling if content exceeds height */
  border-left: 1px solid #ccc; /* Add a border at the left */
  z-index: 3;
}
.rs-rightsheetbody{
  padding: 10px;
}
.rs-rightsheet.show {
  right: 0; /* Slide in from the right to show */
}
/* #endregion */
/* #region-----------------------Sortable List--------*/
.sortable {
  list-style-type: none;
  margin: 0;
  padding: 10px;
  width: 200px;
}

.sortable li {
  background-color: #f4f4f4;
  border: 1px solid #ddd;
  margin: 0 0 5px;
  cursor: move;
}

.sortable li.over {
  background-color: #e0e0e0;
}
/* #endregion */
/* #region-----------------------Horizontal tabs---- */
.w3-tabs {
  display: flex;
  flex-wrap: wrap;
}
.w3-tabs .rs-h-head {
  order: 1;
  display: block;
  padding: 5px 15px;
  cursor: pointer;
  transition: background ease 0.2s;
 color:#337ab7;
}
.w3-tabs .tab {
  order: 99;
  flex-grow: 1;
  width: 100%;
  display: none;
  padding: 1rem;
  background: #fff;
}

.w3-tabs .rs-h-head.active {
  background: #efefef;
  border-top: 3px solid #337ab7;
  color: black;
}
.w3-tabs .rs-h-head.active + .tab {
  display: block;
  border: 1px solid #ddd;
}  
/* #endregion */
/* #region-----------------------Vertical tabs---- */
.rs-v-tab{
  display: flex;
}
.rs-v-tab .tab-btn {
  float: left;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  width: 20%;
}

.rs-v-tab>.tab-btn>button {
  display: block;
  background-color: inherit;
  color: black;
  padding: 15px;
  width: 100%;
  border:none;
  border-bottom: 1px solid #ddd;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
  font-size: 17px;
}

.rs-v-tab>.tab-btn>button:hover {
  background-color: #ddd;
}

.rs-v-tab>.tab-btn>button.active {
  background-color: #fff;
  border-left:3px solid blue;
  width: calc(100% + 2px);
}

.rs-v-tab>.tabcontent {
  float: left;
  padding: 0px 12px;
  background:#fff;
  border: 1px solid #ccc;
  width: 80%;
  border-left: none;
  min-height: 300px;
  display: none;
}  
/* #endregion */
/* #region-----------------------RS Confirm-----------*/
.rs-confirmmodal {
display: block;
position: fixed;
z-index: 9;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}

.rs-confirmmodal .content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 40%;
text-align: center;
position: relative;
z-index: 9;
}

.rs-confirmmodal .close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}

.rs-confirmmodal .close:hover,
.rs-confirmmodal .close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
} 
/* #endregion */
/* #region-----------------------Menu---------------- */
a {
  color: #4d59ff;
  text-decoration: none;
}

a:hover {
  color: #000;
}

.cbp-hrmenu {
  width: 100%;
  border-bottom: 4px solid #d4d4d4;
}

/* general ul style */
.cbp-hrmenu ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

/* first level ul style */
.cbp-hrmenu>ul,
.cbp-hrmenu .cbp-hrsub-inner {
  width: 90%;
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 1.875em;
}

.cbp-hrmenu>ul>li {
  display: inline-block;
}

.cbp-hrmenu>ul>li>a {
  font-weight: 700;
  padding: 1em 2em;
  color: #999;
  display: inline-block;
}

.cbp-hrmenu>ul>li>a:hover {
  color: #47a3da;
}

.cbp-hrmenu>ul>li.cbp-hropen a,
.cbp-hrmenu>ul>li.cbp-hropen>a:hover {
  color: #fff;
  background: #47a3da;
}

/* sub-menu */
.cbp-hrmenu .cbp-hrsub {
  display: none;
  position: absolute;
  background: #47a3da;
  width: 100%;
  left: 0;
  z-index: 999;
}

.cbp-hropen .cbp-hrsub {
  display: block;
  padding-bottom: 3em;
}

.cbp-hrmenu .cbp-hrsub-inner>div {
  width: 20%;
  float: left;
  padding: 0 2em 0;
}

.cbp-hrmenu .cbp-hrsub-inner:before,
.cbp-hrmenu .cbp-hrsub-inner:after {
  content: " ";
  display: table;
}

.cbp-hrmenu .cbp-hrsub-inner:after {
  clear: both;
}

.cbp-hrmenu .cbp-hrsub-inner>div a {
  line-height: 2em;
}

.cbp-hrsub h4 {
  color: #afdefa;
  padding: 2em 0 0.6em;
  margin: 0;
  font-size: 160%;
  font-weight: 300;
}

#rs-navbar {
  margin-bottom: 5px;
}

#rs-navbar #rs-logo {
  width: 100px;
  height: 100%;
  top: 10px;
  position: relative;
}

#rs-institute {
  font-size: 22px;
  padding: 8px;
  bottom: 3px;
  position: relative;
  color: red;
}

.rs-user {
  height: 100%;
  width: 35px;
  border-radius: 50% !important;
  max-width: 100%;
  vertical-align: middle;
}

/* #endregion */
/* #region-----------------------Datepicker----------*/
.calendar-container {
margin: 8px;
}

.calendar-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
}
.rs-date-cal .a {
color: #b5b5b5;
}
.rs-date-cal .s {
background: #ebebeb;
border-radius: 29px;
color: red;
}
.rs-date-cal .monthYear{
  color: #1e88e5;
  cursor: pointer;
}
.calendar-table th, .calendar-table td {
border: none;
padding: 7px;
text-align: center;
cursor:pointer;

}
.calendar-table td:hover {
background: #ebebeb;
border-radius: 29px;
}
.rsdropdown-menu.date{
width: 200px;
text-align: center;
z-index: 999;
}
/* #endregion--------*/
/* #region-----------------------Button Group---------------------- */
.rs-btn-group {
margin-top: -5px;
display: flex;
}
.rs-btn-group .btng {
padding: 5px 20px;
border: 1px solid #ccc;
border-right: 0px;
background-color: #fff;
cursor: pointer;
color: black;
}
.rs-btn-group .btng:first-child {
border-radius: 5px 0px 0px 5px !important;
}
.rs-btn-group .btng:last-child {
border-right: 1px solid #ccc!important;
border-radius: 0px 5px 5px 0px !important;
}
.rs-btn-group .btng.active {
background-color: #e9e5e5;
}
/*#endregion*/
/* #region-----------------------Accordian---------------------- */
.rs-accordian>.set{
  position: relative;
  width: 100%;
  height: auto;
  background-color: #f5f5f5;
}
.rs-accordian>.set > span{
  cursor: pointer;
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  color: #555;
  font-weight: 600;
  border-bottom: 1px solid #ddd;
  -webkit-transition:all 0.2s linear;
  -moz-transition:all 0.2s linear;
  transition:all 0.2s linear;
}
.rs-accordian>.set > span i{
  float: right;
  margin-top: 2px;
}
.rs-accordian>.set > span.active{
  background-color:#3399cc;
  color: #fff;
}
.rs-accordian .content{
  background-color: #fff;
  border-bottom: 1px solid #ddd;
  display:none;
  /* padding: 5px 0px; */
  padding: 5px;
}
/*#endregion*/
/* #region-----------------------Checkbox Group---------------------- */
.rs-chg {
  border: 1px solid #d0eaff;
  border-radius: 3px;
}

.rs-chg label {
  cursor: pointer;
}

.rs-chg .header {
  color: #9e9e9e;
  background: #d0eaff;
  padding: 5px;
}

.rs-chg .group {
  border-top: 1px solid #d0eaff;
  padding: 5px;
  height: 90px;
  overflow-y: auto;
}
/*#endregion*/
/* ---------------------Common---------------------- */

/* ---------------------new---------------------- */
.image-container {
height: 175px;
padding: 15px;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 'cover' scales the image to fill the container, 'contain' scales the image to fit within the container */
}
.progress-container {
height: 5px;
background-color: #4caf50;
}
.progress-bar {
height: 5px;
background-color: #4caf50;
margin: -5px 0px 5px 0px;
width: 0%;
}

.canvasContainer {
  position: relative;
  display: inline-block;
}

.cropFrame {
  position: absolute;
  border: 2px dashed red;
  pointer-events: auto;
  box-sizing: border-box;
}

/* #region-----------------------CustomDropdown--------------------- */
.rsm-dd {
  position: relative;
}

.rsm-dd .ddselect {
  font-family: inherit;
  width: 100%;
  border: 0;
  border-bottom: 2px solid #9b9b9b;
  outline: 0;
  font-size: 14px;
  color: #000;
  padding: 7px 0px 5px;
  background: transparent;
  cursor: pointer;
  position: inherit;
  z-index: 2;
  transition: border-color 0.2s;
}

.rsm-dd .ddselect:empty {
  padding: 28px 0px 5px;
}

.rsm-dd .ddlabel {
  position: absolute;
  top: 9px;
  left: 0;
  font-size: 14px;
  color: #9b9b9b;
  pointer-events: none;
  transition: 0.2s;
}

.rsm-dd.active .ddlabel,
.rsm-dd .ddselect:not(:empty)~.ddlabel {
  top: -10px;
  font-size: 10px;
  color: #11998e;
  font-weight: 700;
  /* padding: 7px 0px 5px */
}

.rsm-dd .ddarrow {
  position: absolute;
  top: 55%;
  right: 0;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 14px;
  color: #9b9b9b;
  transition: transform 0.2s ease;
}

.rsm-dd .ddoptions {
  position: absolute;
  left: 0;
  width: 100%;
  background: white;
  border: 1px solid #ddd;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  display: none;
  transition: transform 0.2s ease;
}

.rsm-dd .ddoption {
  padding: 10px;
  font-size: 1.2rem;
  color: #555;
  cursor: pointer;
  transition: background 0.2s;
}

.rsm-dd .ddoption:hover {
  background: #f1f1f1;
}

.rsm-dd.active .ddoptions {
  display: block;
}

.rsm-dd .open-top .ddoptions {
  bottom: 40px;
  /* Move options above */
  top: auto;
  /* Reset top positioning */
}

.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

/* #endregion */


/* #region-----------------------CssIcon----------*/
.fa {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.fa-flag {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%233e7e7a' d='M80 480a16 16 0 0 1-16-16V68.13a24 24 0 0 1 11.9-20.72C88 40.38 112.38 32 160 32c37.21 0 78.83 14.71 115.55 27.68C305.12 70.13 333.05 80 352 80a183.8 183.8 0 0 0 71-14.5a18 18 0 0 1 25 16.58v219.36a20 20 0 0 1-12 18.31c-8.71 3.81-40.51 16.25-84 16.25c-24.14 0-54.38-7.14-86.39-14.71C229.63 312.79 192.43 304 160 304c-36.87 0-55.74 5.58-64 9.11V464a16 16 0 0 1-16 16'/%3E%3C/svg%3E");
}

.fa-cart {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='10' cy='28' r='2' fill='%23862727'/%3E%3Ccircle cx='24' cy='28' r='2' fill='%23862727'/%3E%3Cpath fill='%23862727' d='M4.98 2.804A1 1 0 0 0 4 2H0v2h3.18l3.84 19.196A1 1 0 0 0 8 24h18v-2H8.82l-.8-4H26a1 1 0 0 0 .976-.783L29.244 7h-2.047l-1.999 9H7.62Z'/%3E%3Cpath fill='%23862727' d='M21.586 6.586L18 10.172V2h-2v8.172l-3.586-3.586L11 8l6 6l6-6z'/%3E%3C/svg%3E");
}

.fa-calendar2 {

  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1664 1792'%3E%3Cpath fill='%23000' d='M128 1664h288v-288H128zm352 0h320v-288H480zm-352-352h288V992H128zm352 0h320V992H480zM128 928h288V640H128zm736 736h320v-288H864zM480 928h320V640H480zm768 736h288v-288h-288zm-384-352h320V992H864zM512 448V160q0-13-9.5-22.5T480 128h-64q-13 0-22.5 9.5T384 160v288q0 13 9.5 22.5T416 480h64q13 0 22.5-9.5T512 448m736 864h288V992h-288zM864 928h320V640H864zm384 0h288V640h-288zm32-480V160q0-13-9.5-22.5T1248 128h-64q-13 0-22.5 9.5T1152 160v288q0 13 9.5 22.5t22.5 9.5h64q13 0 22.5-9.5t9.5-22.5m384-64v1280q0 52-38 90t-90 38H128q-52 0-90-38t-38-90V384q0-52 38-90t90-38h128v-96q0-66 47-113T416 0h64q66 0 113 47t47 113v96h384v-96q0-66 47-113t113-47h64q66 0 113 47t47 113v96h128q52 0 90 38t38 90'/%3E%3C/svg%3E");

}

.fa-delete {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d=' M7.616 20q-.667 0-1.141-.475T6 18.386V6h-.5q-.213 0-.356-.144T5 5.499t.144-.356T5.5 5H9q0-.31.23-.54t.54-.23h4.46q.31 0 .54.23T15 5h3.5q.213 0 .356.144t.144.357t-.144.356T18.5 6H18v12.385q0 .666-.475 1.14t-1.14.475zM17 6H7v12.385q0 .269.173.442t.443.173h8.769q.269 0 .442-.173t.173-.442zm-6.692 11q.213 0 .357-.144t.143-.356v-8q0-.213-.144-.356T10.307 8t-.356.144t-.143.356v8q0 .213.144.356q.144.144.356.144m3.385 0q.213 0 .356-.144t.143-.356v-8q0-.213-.144-.356Q13.904 8 13.692 8q-.213 0-.357.144t-.143.356v8q0 .213.144.356t.357.144M7 6v13z'/%3E%3C/svg%3E");
}

.fa-like {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 24'%3E%3Cpath fill='%23000' d='M1.547 24a.33.33 0 0 1-.327-.295v-.001L0 11.336l-.001-.031c0-.182.147-.329.329-.329h8.233v13.025zm3.36-3.265v.001a1.301 1.301 0 1 0 1.301-1.301h-.002c-.719 0-1.301.582-1.302 1.301zm.48-8c0 .181.147.328.329.328h.764a.328.328 0 0 0 0-.656h-.77a.33.33 0 0 0-.329.329v.003zm-3.61 0c0 .181.147.328.328.328H4.61a.328.328 0 0 0 0-.656H2.099a.33.33 0 0 0-.328.328v.003zm9.8 9.388a1.9 1.9 0 0 1-.494-.253l.006.004l-.1-.063a21 21 0 0 1-.69-.452l-.101-.071c-.132-.095-.194-.137-.262-.133l-.72.01V12.01l-.013-.77c.451-.287.867-.56.992-.664c.17-.342.338-.628.524-.902l-.017.027q.13-.2.248-.396l1.724-2.894q.122-.204.254-.408c.145-.216.299-.474.44-.74l.024-.049a.9.9 0 0 0 .079-.521l.001.005l-.006-3.12c.063-.454.319-.838.68-1.072l.006-.004a1.97 1.97 0 0 1 1.162-.5h.007l.063-.001c.341 0 .663.081.949.224l-.012-.006c.191.092.354.19.507.3l-.01-.007l.106.07c.241.127.421.341.501.6l.002.007c.187.696.358 1.329.517 1.964l.066.259c.101.34.188.751.244 1.172l.005.042c-.171 1.574-.5 3.01-.976 4.378l.042-.138l7.693-.011h.028a1.643 1.643 0 0 1 1.63 1.848l.001-.008a1.98 1.98 0 0 1-.894 1.781l-.008.005a2.17 2.17 0 0 1 .372 1.4v-.007a1.85 1.85 0 0 1-1.137 1.873l-.012.004a2.4 2.4 0 0 1 .299 1.31v-.006a1.9 1.9 0 0 1-.886 1.733l-.008.005a2.8 2.8 0 0 1 .224 1.459l.001-.013v.188a1.834 1.834 0 0 1-2.007 1.719l.007.001h-4.429l-.015.001l-.016-.001h.001h-5.91c-.051 0-.104 0-.16.008c-.068.004-.14.01-.214.01h-.015a1.1 1.1 0 0 1-.299-.04l.008.002zm-6.015-1.387a.64.64 0 1 1 1.281.001a.64.64 0 0 1-1.281-.001'/%3E%3C/svg%3E");
}


.fa-message {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 1920'%3E%3Cpath fill='%23000' d='M0 1694.235h1920V226H0v1468.235ZM112.941 376.664V338.94H1807.06v37.723L960 1111.233l-847.059-734.57ZM1807.06 526.198v950.513l-351.134-438.89-88.32 70.475 378.353 472.998H174.042l378.353-472.998-88.32-70.475-351.134 438.89V526.198L960 1260.768l847.059-734.57Z'/%3E%3C/svg%3E");
}

/*#endregion*/

/* #region-----------------------Buttons--------------------- */

.button-48 {
  appearance: none;
  background-color: #FFFFFF;
  border: 1px solid #ebebeb;
  box-sizing: border-box;
  color: #000000;
  cursor: pointer;
  display: inline-block;
  font-family: Clarkson, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1em;
  margin: 0;
  opacity: 1;
  outline: 0;
  padding: 1.5em 2.2em;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-rendering: geometricprecision;
  text-transform: uppercase;
  transition: opacity 300ms cubic-bezier(.694, 0, 0.335, 1), background-color 100ms cubic-bezier(.694, 0, 0.335, 1), color 100ms cubic-bezier(.694, 0, 0.335, 1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: baseline;
  white-space: nowrap;
}

.button-48:before {
  animation: opacityFallbackOut .5s step-end forwards;
  backface-visibility: hidden;
  background-color: #EBEBEB;
  clip-path: polygon(-1% 0, 0 0, -25% 100%, -1% 100%);
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transform: translateZ(0);
  transition: clip-path .5s cubic-bezier(.165, 0.84, 0.44, 1), -webkit-clip-path .5s cubic-bezier(.165, 0.84, 0.44, 1);
  width: 100%;
}

.button-48:hover:before {
  animation: opacityFallbackIn 0s step-start forwards;
  clip-path: polygon(0 0, 101% 0, 101% 101%, 0 101%);
}

.button-48:after {
  background-color: #FFFFFF;
}

.button-48 span {
  z-index: 1;
  position: relative;
}

/*#endregion*/

/* #region-----------------------NotificationDot--------------------- */
.n-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 15px;
  height: 15px;
  background-color: #ff9800;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  border: 2px solid #fff;
}

.l-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 15px;
  height: 15px;
  background-color: #03A9F4;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  border: 2px solid #fff;
  padding: 8px;
}

/* <div class="n-badge"></div> */
/*#endregion*/

/* #region-----------------------Table--------------------- */

.DT-1 {
  border-collapse: collapse;
  width: 100%;
}

.DT-1 th,
.DT-1 td {
  border: none;
  /* Remove all borders */
  padding: 8px;
  text-align: left;
}

.DT-1 th {
  background-color: #f2f2f2;
}

.DT-1 tr {
  border-bottom: 1px solid #ddd;
  /* Faint border below each row */
}

/*#endregion*/
/* #region-----------------------App Element--------------------- */
.rs-g-n1{/* grid column number display*/
  background: #f0f0f0;
    color: #3f51b5;
    padding: 4px 8px;
    font-weight: bold;
    border-radius: 50%;
}
.rs-l-red{/* badge button*/
  background: red;
  color: #fff;
  padding: 3px 5px;
  border-radius: 10px;
}
.rs-l-green{/* badge button*/
  background: darkgreen;
  color: #fff;
  padding: 3px 5px;
  border-radius: 10px;
}

.rs-l-blue{/* badge button*/
  background: darkblue;
  color: #fff;
  padding: 3px 5px;
  border-radius: 10px;
}
.b{/* bold text*/
  font-weight: bold;
}
.hidden{/* hide element*/
  display: none;
}
.rs-r{/* float right*/
  float: right;
}
.rs-l{/* float left*/
  float: left;
}
.pad15{/* padding*/
  padding: 15px;
}
.class1{color: rgb(8, 182, 8);}
.class2{color: rgb(211, 5, 5);}

/* buttons */
.btn-info{
  background-color: #1e88e5;
  color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  outline: none;
}
/*#endregion*/