:root {
  --primay-color: #5b8c68;
  --cancel-color: gray;
  --edit-color: #ff8800f0;
  --delete-color: #dc3545;
}

/* #region 1. kendo */

.k-selected {
  background-color: var(--primay-color) !important;
  color: white !important;
  border: box;
}
.k-widget .k-window .k-display-inline-flex .k-focus{
  z-index: 1300 !important;
}


k-textbox .k-input .k-input-md .k-rounded-md .k-input-solid
.k-input k-textarea .k-input-solid .k-input-md .k-rounded-md k-editor-textarea

.k-i-sort-asc-sm {
  color: #fff !important;
}

.k-i-sort-desc-sm {
  color: #fff !important;
}

.k-pager-numbers {
  color: white !important;
}

.k-grid .k-header {
  background-color: var(--primay-color) !important;
}

k-grid-filter.k-active{
  background-color: var(--primay-color) !important;
}

.k-i-filter {
  background-color: var(--primay-color) !important;
}

.k-grid .k-header .k-link {
  color: white !important;
}
.k-grid .k-cell-inner .k-grid-filter {
  color: white !important;
}

/* Styling for the Edit and Delete buttons */
.k-grid-edit,
.k-grid-delete {
  background-color: var(--edit-color) !important;
  color: white !important;
  padding: 5px;
  border-radius: 4px;
  margin-right: 5px;
  display: inline-block;
  text-align: center;
}

.k-grid-edit {
  background-color: var(--primay-color) !important;
  cursor: pointer;
}

.k-grid-edit:hover {
  background-color: #76c08a !important ;
  cursor: pointer;
}

.k-grid-delete {
  background-color: var(--delete-color) !important;
}

.k-grid-delete:hover {
  background-color: #f44b5c !important;
}

.k-list .k-list-md {
  background-color: white !important;
}

.k-pager-wrap .k-pager-numbers .k-selected {
  border-top-color: var(--primay-color) !important;
}
/* #endregion */

/* #region button */
.read-more-model .apply-now:hover {
  color: #fff !important;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  border: 1px solid var(--primay-color) !important;
  background: var(--primay-color)!important;
}
.read-more-model .apply-now {
  display: inline-block;
  color: var(--primay-color) !important;
  background: #fff;
  padding: 10px 25px;
  border: 1px solid var(--primay-color)!important;
  border-radius: 100px;
  text-transform: uppercase;
  font-size: 12px;
}

.read-more-model .apply-now{
  color: transparent;
  background-color: transparent;
  border: 2px solid transparent;
  padding: 10px 25px;
  text-decoration: none;
  transition: color 0.3s, background-color 0.3s, border-color 0.3s;
  margin-right: 10px;
}

a.read-more1:hover {
  color: white !important;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  border: 1px solid var(--primay-color) !important;
  background: gray;
}

a.read-more1 {
  margin-top: 20px;
  display: inline-block;
  color: gray !important;
  background: #fff;
  padding: 10px 25px;
  border: 1px solid gray;
  border-radius: 100px;
  text-transform: uppercase;
  font-size: 12px;
}
.read-more1 {
  color: transparent;
  background-color: transparent;
  border: 2px solid transparent;
  padding: 5px 10px;
  text-decoration: none;
  transition: color 0.3s, background-color 0.3s, border-color 0.3s;
  margin-right: 10px;
}
/* #endregion */

.k-filter-menu-container .k-picker.k-dropdownlist {
  border: 1px solid grey;
  background-color: white;
  margin-bottom: 3px;
}

.k-filter-menu-container .k-textbox .k-input-inner {
  border: 1px solid grey;
  background-color: white;
  margin-top: 3px;
}

/* #region kendo-dropdown */
.k-picker.k-dropdownlist {
  border-radius: 8px;
  height: 45px;
}

.k-picker.k-dropdownlist .k-input-inner {
  border-radius: 8px;
}

.k-picker.k-dropdownlist .k-input-button {
  border-radius: 0px;
}

.kendo-dropdown-wrapper {
  border: 1px solid rgba(51, 51, 51, 0.5);
  border-radius: 8px;
  height: 45px;
}
.k-pager-wrap .k-dropdown,
.k-pager-wrap .k-dropdownlist {
  color: grey;
}
.k-list-item.k-selected .k-list-item-text {
  color: white;
}

.k-picker:focus-within {
  box-shadow: none !important;
}
/* #endregion */

.opp-grid {
  margin: 15px;
}

/* #region my css for this project */
/* #region sidebar*/

.sidebar .widget {
  position: relative;
  overflow: hidden;
  background: #fff !important;
  box-sizing: border-box;
  padding: 0;
}
.sidebar {
  background: #fff !important;
}

@media (max-width: 768px) {
  .sidebar {
    display: block !important;
  }
}

.sidebar .widget > .widget-title {
  position: relative;
  float: left;
  width: 100%;
  height: 34px;
  border-bottom: 3px solid var(--primay-color);
  display: block;
  margin: 0 0 5px;
}
.sidebar .widget-content {
  float: left;
  width: 100%;
  box-sizing: border-box;
  padding: 15px;
  margin: 0;
}

.list-label .label-count {
  position: relative;
  float: right;
  font-size: 12px;
  font-weight: 400;
  text-align: center;
  line-height: 16px;
}
.label-count {
  margin-top: 5px !important;
}

.list-label li a {
  display: block;
  color: #000000;
  font-size: 12px;
  font-weight: 400;
  text-transform: capitalize;
  transition: color 0.17s var(--primay-color);
}

.categorybar {
  position: sticky !important;
  top: 70px !important;
}

/* #endregion */

/* #region AdminPentalk*/

.categorytabs {
  position: sticky;
  top: 72px;
  z-index: 100;
  overflow: hidden;
  background-color: white;
  padding-top: 10px;
}
.tab-content {
  margin-bottom: 50px !important;
}

.Mymodal {
  margin-top: 60px !important;
  z-index: 1100 !important;
}

.tabStyle {
  color: #000 !important;
  transition: color 0.2s !important;
  font-weight: normal !important;
}
.activeTabStyle {
  color: white !important;
  font-weight: bold !important;
  transition: color 0.2s !important;
  background-color: var(--primay-color) !important;
}

.tabheadingrow {
  margin-bottom: 20px !important;
}
.Blogadd {
  display: flex !important;
  justify-content: end !important;
}

.tabheading {
  margin-top: 20px !important;
}

/* #endregion */

/* #region PentalkHome*/
.topTextPenTalk {
  white-space: normal;
  word-wrap: break-word;
}
.blogcontent {
  overflow-y: hidden !important;
}

@media (max-width: 992px) {
  .topTextPenTalk {
    margin-top: 40px !important;
  }
}

.readMoreStyle {
  font-weight: 10 !important;
  color: black;
  transition: color 0.2s var(--primay-color);
}

.readMoreStyle:hover {
  color: var(--primay-color);
}

.loadmoreblogs {
  display: flex !important;
  justify-content: center !important;
}
/* #endregion */

.selected-category {
  color: var(--primay-color) !important;
}

.label-name:hover {
  color: var(--primay-color) !important;
}

.label-name {
  position: relative;
  text-decoration: none;
  color: inherit;
}

.label-name::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--primay-color);
  transition: width 0.3s ease;
}

.label-name:hover::after {
  width: 100%;
}

/* #endregion */

/* #region changepassword*/
.changpasswordmodal {
  width: 500px !important;
}

.header-top-area {
  z-index: 1000 !important;
}

.position-relative {
  position: relative;
}

.eye-icon {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 18px;
  color: #000;
}
/* #endregion */

.textarea {
  width: 100%;
  height: 150px;
  padding: 10px;
  border: 1px solid rgba(51, 51, 51, 0.5);
  border-radius: 8px;
  font-size: 16px;
  line-height: 1.5;
  background-color: white;
  color: #333;
  resize: vertical;
  box-sizing: border-box;
}

.k-window-titlebar {
  background-color: var(--primay-color) !important;
}

.k-button-solid-primary {
  background-color: var(--primay-color) !important;
}

.k-tabstrip {
  background-color: white !important;
}

.k-tabstrip-items-wrapper {
  background-color: white !important;
}

.k-tabstrip-items .k-item .k-link {
  color: #000 !important;
}

.k-tabstrip-items .k-item {
  background-color: white !important;
}

.k-tabstrip-items-wrapper .k-tabstrip-items .k-item.k-active {
  background-color: var(--primay-color) !important;
}

.modal-dialog.custom-modal {
  width: 90%; 
  max-width: 1200px; 
}